@evotecit/canopyx 0.3.18 → 0.3.21

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

@@ -0,0 +1,33 @@
+(function(global){"use strict";const installed=new WeakSet();const part={version:"1424f075b78d0ccd",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.accordion=(root,options={},signal)=>{const n=UI_TOOLS.navigation,life=n.scope(signal),labels=UI_TOOLS.labels(options.labels);const multiple=options.multiple??root.dataset.multiple==='true';const hash=!!root.id&&(options.hash??root.dataset.hash==='true');const transition=options.transition||root.dataset.transition||'none';const remember=options.remember??root.dataset.remember;const storageKey=remember?'canopyx:accordion:' +(remember===true?root.id:remember):null;let items=[],destroyed=false;root.classList.add('cx-accordion');const style=options.style||['flush','separated','section'].find(name=>root.classList.contains('cx-accordion--'+name))||'default';for(const name of['default','flush','separated','section'])root.classList.toggle('cx-accordion--'+name,name===style);root.dataset.indicator=options.indicator||root.dataset.indicator||'chevron';root.dataset.indicatorPosition=options.indicatorPosition||root.dataset.indicatorPosition||'end';root.dataset.print=options.print||root.dataset.print||'all';const deferred=n.deferred(root,'accordion',options,life,id=>request(id,true,'user'));const opened=()=>items.find(item=>item.open);const shared=multiple?null:n.selection(root,'accordion',options,life,opened,commit);const sectionRequests=new Map();function requests(item){if(shared)return shared;if(!sectionRequests.has(item.id))sectionRequests.set(item.id,n.selection(root,'accordion',options,life,()=>undefined,commit));return sectionRequests.get(item.id)}
+function animate(item,open){const panel=item.panel;panel.getAnimations().forEach(animation=>animation.cancel());delete panel.dataset.animating;if(open)panel.hidden=false;if(transition!=='slide'||matchMedia('(prefers-reduced-motion: reduce)').matches){panel.hidden=!open;return}
+const css=getComputedStyle(root),duration=css.getPropertyValue('--cx-accordion-motion-duration').trim();const size=panel.getBoundingClientRect().height+'px',frames=[{blockSize:'0px',opacity:0},{blockSize:size,opacity:1}];panel.dataset.animating='true';const animation=panel.animate(open?frames:frames.reverse(),{duration:parseFloat(duration)*(duration.endsWith('ms')?1:1000)||0,easing:css.getPropertyValue('--cx-accordion-motion-easing').trim()});animation.onfinish=()=>{delete panel.dataset.animating;panel.hidden=!item.open}}
+function paint(item,motion){item.element.setAttribute('aria-expanded',String(item.open));item.section.dataset.state=item.disabled?'disabled':item.open?'open':'';if(motion)animate(item,item.open);else if(item.panel)item.panel.hidden=!item.open}
+function apply(item,open){if(item.open===open)return;item.open=open;paint(item,!!item.panel);if(!open)deferred.leave(item)}
+function save(source){if(hash&&source!=='hash')writeHash();if(storageKey)try{localStorage.setItem(storageKey,JSON.stringify(getOpen()))}catch{}}
+async function commit(from,to,loadSignal,live,source){const item=n.resolve(items,to.id);if(!item)return;if(from&&from!==item)apply(from,false);apply(item,to.open);if(!to.quiet){save(source);UI_TOOLS.emit(root,'accordion','change',{item,open:to.open,source})}
+if(to.open)await deferred.load(item,loadSignal,live)}
+function request(value,open,source='api'){const item=destroyed?null:n.resolve(items,value);if(!item||item.disabled)return Promise.resolve(false);const next=open??!item.open;if(item.open===next&&!(next&&deferred.isDeferred(item)))return Promise.resolve(true);return requests(item).request({...item,open:next},undefined,source)}
+function hashIds(){try{return new URLSearchParams(location.hash.slice(1)).getAll(root.id)}catch{return[]}}
+function writeHash(){const params=new URLSearchParams(location.hash.slice(1));params.delete(root.id);for(const id of getOpen())params.append(root.id,id);const text=params.toString(),value=text?'#'+text:'';if(value!==location.hash)history[options.hashHistory==='push'?'pushState':'replaceState'](null,'',value||location.pathname+location.search)}
+function stored(){if(!storageKey)return null;try{const value=JSON.parse(localStorage.getItem(storageKey));return Array.isArray(value)?value:null}catch{return null}}
+function getOpen(){return items.filter(item=>item.open).map(item=>item.id)}
+function refresh(){if(destroyed)return;shared?.cancel();sectionRequests.forEach(entry=>entry.cancel());sectionRequests.clear();items=n.records(root,'accordion',options);let found=false;for(const item of items){item.section=item.element.closest('.cx-accordion-item');if(item.open&&!multiple){item.open=!found;found=true}
+paint(item,false)}
+search.refresh(items)}
+function initial(){const linked=hash?hashIds():[];const chosen=linked.length?linked:stored()||options.open?.map(value=>n.resolve(items,value)?.id);if(!chosen)return;let found=false;for(const item of items){if(item.disabled)continue;item.open=chosen.includes(item.id)&&(multiple||!found);found||=item.open}}
+root.addEventListener('click',event=>{const trigger=event.target.closest('.cx-accordion-trigger');const item=trigger&&items.find(entry=>entry.element===trigger);if(item)request(item.id,undefined,'user')},{signal:life.signal});root.addEventListener('keydown',event=>{if(event.altKey||event.ctrlKey||event.metaKey||event.shiftKey)return;const visible=items.filter(item=>!item.section.hidden),index=visible.findIndex(item=>item.element===event.target);if(index<0)return;const target={ArrowDown:visible[(index+1)%visible.length],ArrowUp:visible[(index-1+visible.length)%visible.length],Home:visible[0],End:visible[visible.length-1]}[event.key];if(target){event.preventDefault();target.element.focus()}},{signal:life.signal});if(hash)window.addEventListener('hashchange',()=>{const ids=hashIds(),wanted=items.filter(item=>ids.includes(item.id));if(multiple){for(const item of items)request(item.id,wanted.includes(item),'hash');return}
+const target=wanted[0]||opened();if(target)request(target.id,!!wanted[0],'hash')},{signal:life.signal});const search=UI_TOOLS.accordionTools(root,options,labels,life);function destroy(){if(destroyed)return;destroyed=true;life.abort();deferred.destroy();search.destroy();root.removeAttribute('data-cx-ready');for(const item of items){item.element.removeAttribute('aria-busy');item.section.hidden=false;if(item.panel){item.panel.getAnimations().forEach(animation=>animation.cancel());delete item.panel.dataset.animating;item.panel.hidden=false;item.panel.removeAttribute('aria-busy')}}}
+refresh();initial();items.forEach(item=>paint(item,false));root.dataset.cxReady='true';if(hash&&getOpen().length)writeHash();const ready=Promise.all(items.filter(item=>item.open&&deferred.isDeferred(item))
+.map(item=>requests(item).request({...item,disabled:false,quiet:true},undefined,'initial')));signal?.addEventListener('abort',destroy,{once:true});return{open:id=>request(id,true),close:id=>request(id,false),toggle:id=>request(id),getOpen,filter:search.filter,refresh,preparePrint:()=>deferred.preparePrint(),destroy,ready}};UI_TOOLS.accordionQuery=text=>text.replace(/\s+or\s+/gi, ' | ').split('|').map(part => part.trim()).filter(Boolean).map(part =>
+[...part.matchAll(/([!-]?)(?:"([^"]+)"|(\S+))/g)].map(match => ({ text: (match[2] || match[3] || '').toLowerCase(), negative: !!match[1] }))
+.filter(token=>token.text&&!/^(?:&&?|and)$/.test(token.text)));
+UI_TOOLS.accordionTools=(root,options,labels,life)=>{const n=UI_TOOLS.navigation,config=options.search??root.dataset.search==='true';const settings=config&&typeof config==='object'?config:{};const debounce=settings.debounce??(root.dataset.searchDebounce===undefined?150:Number(root.dataset.searchDebounce));const copies=[];let items=[],query='',timer=0,control=null,input=null,empty=null;function matches(item,groups){if(!groups.length)return true;const text=(item.section.querySelector('.cx-accordion-header')?.textContent||'').toLowerCase();return groups.some(tokens=>tokens.every(token=>text.includes(token.text)!==token.negative))}
+function filter(value=''){if(life.signal.aborted)return 0;query=String(value).trim();const groups=UI_TOOLS.accordionQuery(query);let shown=0;for(const item of items){item.section.hidden=!matches(item,groups);shown +=item.section.hidden?0:1}
+if(input&&input.value.trim()!==query)input.value=query;if(empty)setText(empty,query&&!shown?labels.accordionNoMatches:'');return shown}
+if(config){control=h('div','cx-accordion-search');input=document.createElement('input');input.type='search';input.setAttribute('aria-label',labels.accordionSearch);input.placeholder=settings.placeholder??root.dataset.searchPlaceholder??labels.accordionSearch;empty=h('div','cx-accordion-empty');empty.setAttribute('role','status');control.append(input,empty);root.prepend(control);input.addEventListener('input',()=>{clearTimeout(timer);timer=setTimeout(()=>filter(input.value),debounce)},{signal:life.signal});input.addEventListener('keydown',event=>{if(event.key!=='Escape'||!input.value)return;event.preventDefault();event.stopPropagation();clearTimeout(timer);input.value='';filter()},{signal:life.signal})}
+async function write(text){try{await navigator.clipboard.writeText(text);return true}catch{}
+const field=h('textarea','cx-visually-hidden');field.value=text;document.body.append(field);field.select();try{return document.execCommand('copy')}catch{return false}finally{field.remove()}}
+function addCopy(item){const wanted=options.copyTitle??item.section.dataset.copyTitle==='true';const present=item.section.querySelector(':scope > .cx-accordion-header > .cx-accordion-copy');if(!wanted||present)return;const button=n.button('','cx-accordion-copy');button.setAttribute('aria-label',labels.accordionCopyTitle);button.title=labels.accordionCopyTitle;let reset=0;button.addEventListener('click',async()=>{const copied=await write(item.label);if(life.signal.aborted)return;clearTimeout(reset);button.dataset.copied=String(copied);if(copied)button.setAttribute('aria-label',labels.accordionCopied);reset=setTimeout(()=>{delete button.dataset.copied;button.setAttribute('aria-label',labels.accordionCopyTitle)},1200)},{signal:life.signal});item.element.closest('.cx-accordion-heading').after(button);copies.push(button)}
+function refresh(next){items=next;items.forEach(addCopy);filter(query)}
+function destroy(){clearTimeout(timer);control?.remove();for(const button of copies)button.remove()}
+return{filter,refresh,destroy}};installed.add(context.UI_IMPL)}};(global.CanopyXParts||=[]).push(["ui-accordion",part])})(typeof window!=="undefined"?window:globalThis);

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

@@ -4,8 +4,8 @@ position:fixed;inset:auto;margin:var(--hfx-space-1-5,6px);padding:var(--hfx-spac
 min-inline-size:min(var(--cx-ui-popup-min),calc(var(--cx-ui-viewport-inline) - var(--hfx-space-4,1rem)));
 max-inline-size:min(var(--cx-ui-menu-max),calc(var(--cx-ui-viewport-inline) - var(--hfx-space-4,1rem)));
 max-block-size:calc(var(--cx-ui-viewport-block) - var(--hfx-space-4,1rem));overflow:auto;
-border:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));
-background:var(--hfx-color-surface-raised,light-dark(#ffffff,#1e2126));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));
+border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));
+background:var(--hfx-color-surface-raised,light-dark(#ffffff,#1e2126));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));box-shadow:var(--hfx-elevation-2,0 1px 2px rgba(22,24,28,.05),0 6px 18px -10px rgba(22,24,28,.18));
 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));z-index:var(--hfx-z-popover,1000);
 }
 .cx-menu[hidden]{display:none!important;}
@@ -19,22 +19,22 @@ background:transparent;color:inherit;font:inherit;text-align:start;cursor:pointe
 .cx-menu-item:active{background:var(--hfx-color-active,light-dark(#ebebec,#2e3034));}
 .cx-menu-item:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:calc(-1 * var(--hfx-focus-width,2px));}
 .cx-menu-label{flex:1;min-inline-size:0;overflow-wrap:anywhere;}
-.cx-menu-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--hfx-icon-md,16px);block-size:var(--hfx-icon-md,16px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));}
+.cx-menu-icon{display:inline-flex;align-items:center;justify-content:center;flex:none;inline-size:var(--hfx-icon-md,16px);block-size:var(--hfx-icon-md,16px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));}
 .cx-menu-icon > :is(svg,img){inline-size:100%;block-size:100%;}
 .cx-menu-item[aria-checked="true"] .cx-menu-icon{color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));}
 .cx-menu-item[aria-checked="true"] .cx-menu-icon > *{display:none;}
 .cx-menu-item[aria-checked="true"] .cx-menu-icon{font-size:0;}
 .cx-menu-item[aria-checked="true"] .cx-menu-icon::before{content:"✓" / "";font-size:var(--hfx-icon-md,16px);}
-.cx-menu-chevron{flex:none;inline-size:var(--hfx-icon-sm,14px);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));text-align:center;}
+.cx-menu-chevron{flex:none;inline-size:var(--hfx-icon-sm,14px);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));text-align:center;}
 .cx-menu:dir(rtl) .cx-menu-chevron{transform:rotate(180deg);}
 .cx-menu-item[data-danger="true"],.cx-menu-item[data-danger="true"] .cx-menu-icon{color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));}
 .cx-menu-item[data-danger="true"]:is(:hover,:focus){background:var(--hfx-color-status-bad-bg,light-dark(#f9e4e4,#3c272a));}
 .cx-menu-item[aria-disabled="true"],.cx-menu-item[aria-disabled="true"] .cx-menu-icon{color:var(--hfx-color-text-disabled,light-dark(#a3a8b0,#5a5f68));cursor:default;}
 .cx-menu-item[aria-disabled="true"]:is(:hover,:focus,:active){background:transparent;}
-.cx-menu-item kbd{flex:none;margin-inline-start:auto;padding:0 var(--hfx-space-1,0.25rem);border:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-family:var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);font-size:var(--hfx-type-caption-size,0.75rem);line-height:var(--hfx-type-caption-line,1.35);}
+.cx-menu-item kbd{flex:none;margin-inline-start:auto;padding:0 var(--hfx-space-1,0.25rem);border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-sm,4px);background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-family:var(--hfx-font-mono,"Cascadia Mono","Cascadia Code",Consolas,"SFMono-Regular",Menlo,monospace);font-size:var(--hfx-type-caption-size,0.75rem);line-height:var(--hfx-type-caption-line,1.35);}
 .cx-menu-badge{flex:none;min-block-size:var(--hfx-badge-height,20px);padding:0 var(--hfx-space-1,0.25rem);border-radius:var(--hfx-radius-badge,var(--hfx-radius-sm,4px));background:var(--hfx-color-accent-subtle,light-dark(#e7f1f1,#1b3435));color:var(--hfx-color-accent-text,light-dark(#02726a,#37c9b8));font-size:var(--hfx-type-caption-size,0.75rem);line-height:var(--hfx-type-caption-line,1.35);}
-.cx-menu-group-label{padding:var(--hfx-space-1-5,6px) var(--hfx-space-2,0.5rem) var(--hfx-space-1,0.25rem);color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-size:var(--hfx-type-caption-size,0.75rem);font-weight:var(--hfx-weight-semibold,600);text-transform:uppercase;}
-.cx-menu-separator{margin:var(--hfx-space-1,0.25rem) calc(-1 * var(--hfx-space-1,0.25rem));border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+.cx-menu-group-label{padding:var(--hfx-space-1-5,6px) var(--hfx-space-2,0.5rem) var(--hfx-space-1,0.25rem);color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-size:var(--hfx-type-caption-size,0.75rem);font-weight:var(--hfx-weight-semibold,600);text-transform:uppercase;}
+.cx-menu-separator{margin:var(--hfx-space-1,0.25rem) calc(-1 * var(--hfx-space-1,0.25rem));border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-context-sheet > .cx-menu{position:static;margin:0;min-inline-size:0;max-inline-size:none;max-block-size:var(--cx-ui-sheet-max);inline-size:100%;border:0;box-shadow:none;}
 @media print{.cx-menu,.cx-context-sheet{display:none!important;}}
 @media (forced-colors:active){.cx-menu-item:focus{outline:var(--hfx-focus-width,2px) solid;outline-offset:calc(-1 * var(--hfx-focus-width,2px));}}

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

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"c86ee2a16b5a5a46",requires:["ui-overlays"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;let uiMenuIdentity=0;const uiMenuItemSelector='[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';const uiMenuModels=new WeakMap();UI_TOOLS.menuItems=(menu,items,options={})=>{menu.replaceChildren();const render=(container,entries)=>{for(const item of entries||[]){const kind=String(item.kind||item.type||'').toLowerCase();if(kind==='separator'||kind==='grouplabel'){const decoration=h('div',kind==='separator'?'cx-menu-separator':'cx-menu-group-label');decoration.setAttribute('role',kind==='separator'?'separator':'presentation');if(kind!=='separator')setText(decoration,item.label);container.append(decoration);continue}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"352b1ee391133ff0",requires:["ui-overlays"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;let uiMenuIdentity=0;const uiMenuItemSelector='[role="menuitem"],[role="menuitemcheckbox"],[role="menuitemradio"]';const uiMenuModels=new WeakMap();UI_TOOLS.menuItems=(menu,items,options={})=>{menu.replaceChildren();const render=(container,entries)=>{for(const item of entries||[]){const kind=String(item.kind||item.type||'').toLowerCase();if(kind==='separator'||kind==='grouplabel'){const decoration=h('div',kind==='separator'?'cx-menu-separator':'cx-menu-group-label');decoration.setAttribute('role',kind==='separator'?'separator':'presentation');if(kind!=='separator')setText(decoration,item.label);container.append(decoration);continue}
 const button=h('button','cx-menu-item');button.type='button';button.tabIndex=-1;button.id='cx-ui-menu-item-' + ++uiMenuIdentity;button.dataset.itemId=String(item.id);button.dataset.hfxPart='menu-item';const role=kind==='radio'||item.role==='menuitemradio'?'menuitemradio':
 kind==='checkbox'||item.checked!=null?'menuitemcheckbox':'menuitem';button.setAttribute('role',role);if(role!=='menuitem')button.setAttribute('aria-checked',String(!!item.checked));if(item.disabled)button.setAttribute('aria-disabled','true');button.dataset.state=item.disabled?'disabled':item.checked?'selected':'';button.dataset.danger=String(!!item.danger);if(item.group!=null)button.dataset.radioGroup=String(item.group);const icon=h('span','cx-menu-icon');icon.setAttribute('aria-hidden','true');if(item.icon!=null){icon.dataset.icon=String(item.icon);const rendered=options.renderIcon?.(item.icon,item);if(rendered?.nodeType)icon.append(rendered.cloneNode(true));else if(rendered!=null)setText(icon,rendered)}
 button.append(icon);const label=h('span','cx-menu-label');setText(label,item.label);button.append(label);if(item.badge!=null&&item.badge!==''){const badge=h('span','cx-menu-badge');badge.dataset.hfxPart='badge';setText(badge,item.badge);button.append(badge)}

package/CanopyX.Html/Assets/canopyx-ui-module.mjs

@@ -0,0 +1,39 @@
+const runtimeHost=typeof window==="undefined"?{}:window;if(runtimeHost.CanopyX&&!runtimeHost.CanopyX.mountUi){throw new Error("CanopyX: load the UI, tree or grid runtime, or this module, before the core script.")}
+if(typeof document!=="undefined")runtimeHost.CanopyXFilterEditorBase=new URL("./",import.meta.url).href;
+/* CanopyX UI entry: standalone UI primitives. */
+(function(global){"use strict";if(global.CanopyX){return}
+function h(tag,className){const element=document.createElement(tag);if(className)element.className=className;return element}
+function setText(element,value){element.textContent=value==null?"":String(value)}
+function fill(template,values){return template.replace(/\{(\w+)\}/g, (match, name) => (values && Object.hasOwn(values, name) ? String(values[name]) : match));
+}
+const pluralRules=new Map();function plural(template,count,lang){if(!template.startsWith("["))return template;const forms={};for(const match of template.matchAll(/\[(zero|one|two|few|many|other)\]([^[]*)/g)) forms[match[1]] = match[2];
+let rules=pluralRules.get(lang);if(!rules){try{rules=new Intl.PluralRules(lang||"en")}catch(_){rules=new Intl.PluralRules("en")}pluralRules.set(lang,rules)}
+return forms[rules.select(Number(count))]??forms.other??template}
+let pageNonce=typeof document!=="undefined"&&document.currentScript?.nonce||"",trustPolicy;function setNonce(nonce){if(typeof nonce!=="string"||!nonce)throw new Error("CanopyX: invalid nonce.");pageNonce=nonce}
+function withNonce(element){const nonce=pageNonce||document.querySelector("script[nonce]")?.nonce;if(nonce)element.nonce=nonce;return element}
+function trusted(kind,value){if(trustPolicy===undefined){try{trustPolicy=global.trustedTypes?.createPolicy("canopyx",{createHTML:text=>text,createScript:text=>text,createScriptURL:text=>text})||null}
+catch(_){trustPolicy=null}}
+return trustPolicy?trustPolicy["create"+kind](value):value}
+function hostHtml(element,html,sanitize,kind){const text=String(html??""),value=sanitize?sanitize(text,{kind}):text;if(value?.nodeType)element.replaceChildren(value);else if(typeof value==="string")element.innerHTML=trusted("HTML",value);else if(global.trustedTypes?.isHTML?.(value))element.innerHTML=value;else throw new Error("CanopyX: invalid sanitizeHtml result.")}
+const STATUS_FALLBACKS={"--hfx-color-status-bad-bg":"light-dark(#f9e4e4,#3c272a)","--hfx-color-status-bad-fg":"light-dark(#b8292a,#f47171)","--hfx-color-status-good-bg":"light-dark(#e2f0e9,#1f362f)","--hfx-color-status-good-fg":"light-dark(#177345,#4cc78a)","--hfx-color-status-info-bg":"light-dark(#e4ecfa,#262f41)","--hfx-color-status-info-fg":"light-dark(#2b5fc0,#74a2f7)","--hfx-color-status-neutral-bg":"light-dark(#eeeff0,#2a2c31)","--hfx-color-status-neutral-fg":"light-dark(#5b6069,#a0a5ae)","--hfx-color-status-warn-bg":"light-dark(#f8efde,#3b3322)","--hfx-color-status-warn-fg":"light-dark(#8c5c05,#eeb640)"};const MODE_ATTRIBUTES=["data-theme","data-cx-theme","data-hfx-mode","data-bs-theme","data-hfx-theme","data-hfx-tokens"];const THEME_ATTRIBUTES=[...MODE_ATTRIBUTES,"data-hfx-style","data-hfx-density","data-cx-fallback-mode","style","class"];function watchTheme(host,signal){const attributes=THEME_ATTRIBUTES;const previous=host.getAttribute("data-cx-fallback-mode");const refresh=()=>{const parent=host.parentElement&&getComputedStyle(host.parentElement);const inherited=parent?.colorScheme;const surface=parent&&["--hfx-color-surface-card","--hfx-color-surface"].some(name=>parent.getPropertyValue(name).trim());let mode=null;if(!surface){outer:for(let owner=host;owner;owner=owner.parentElement)for(const attribute of MODE_ATTRIBUTES){const value=owner.getAttribute(attribute);if(value==="light"||value==="dark"){mode=value;break outer}}}
+if(surface||!mode&&inherited&&inherited!=="normal"){if(host.hasAttribute("data-cx-fallback-mode"))host.removeAttribute("data-cx-fallback-mode")}else if(host.getAttribute("data-cx-fallback-mode")!==(mode||"auto"))host.setAttribute("data-cx-fallback-mode",mode||"auto")};const observer=new MutationObserver(refresh);for(let owner=host;owner;owner=owner.parentElement)observer.observe(owner,{attributes:true,attributeFilter:attributes});refresh();const dispose=()=>{observer.disconnect();if(previous===null)host.removeAttribute("data-cx-fallback-mode");else host.setAttribute("data-cx-fallback-mode",previous)};signal?.addEventListener("abort",dispose,{once:true});return dispose}
+function overlayTheme(host,element,inherit=false){for(const name of["data-hfx-style","data-hfx-mode","data-hfx-density"]){const owner=host.closest("["+name+"]");if(owner&&!inherit)element.setAttribute(name,owner.getAttribute(name));else element.removeAttribute(name)}
+const theme=getComputedStyle(host),parent=inherit&&host.parentElement&&getComputedStyle(host.parentElement);element.style.colorScheme=theme.colorScheme;const copied=[];for(const name of theme)if((name.startsWith("--cx-")||name.startsWith("--hfx-"))&&(!parent||theme.getPropertyValue(name)!==parent.getPropertyValue(name))){element.style.setProperty(name,theme.getPropertyValue(name));copied.push(name)}
+return copied}
+function watchOverlayTheme(host,element,signal){if(signal?.aborted)return()=>{};let copied=[];const refresh=()=>{for(const name of copied)element.style.removeProperty(name);copied=overlayTheme(host,element,element.parentElement===host.parentElement)};const observer=new MutationObserver(refresh);for(let owner=host;owner;owner=owner.parentElement)observer.observe(owner,{attributes:true,attributeFilter:THEME_ATTRIBUTES});const media=["(prefers-color-scheme:dark)","(prefers-contrast:more)","(forced-colors:active)"].map(query=>matchMedia(query));for(const query of media)query.addEventListener("change",refresh);const dispose=()=>{observer.disconnect();for(const query of media)query.removeEventListener("change",refresh);signal?.removeEventListener("abort",dispose)};signal?.addEventListener("abort",dispose,{once:true});dispose.refresh=refresh;refresh();return dispose}
+const PART_URL=typeof document!=="undefined"&&document.currentScript?.src;const PARTS={"ui-overlays":["24afaa117ebf3fb5","canopyx-ui-overlays.dedc42d3a501a387.js","canopyx-ui-overlays.3668a9a74004ea8e.css"],"ui-menu":["352b1ee391133ff0","canopyx-ui-menu.f9abee36db8f6ad2.js","canopyx-ui-menu.2f3478cc5f5c272f.css"],"ui-picker":["d415103478faf52a","canopyx-ui-picker.13e544bd68aca998.js","canopyx-ui-picker.59c85a1988a287a9.css"],"ui-navigation":["2553d01c5276d56a","canopyx-ui-navigation.c4ebc214197f140d.js","canopyx-ui-navigation.0afd07bbdc5aecb5.css"],"ui-tabs":["19ece8184f3daf4a","canopyx-ui-tabs.6cd35b2afd89f530.js","canopyx-ui-tabs.7bb6c6f1341e87e9.css"],"ui-stepper":["5682c49db1b85314","canopyx-ui-stepper.96973189b0f6e0c4.js","canopyx-ui-stepper.1d4a9db373b8d2f2.css"],"ui-accordion":["1424f075b78d0ccd","canopyx-ui-accordion.d0d5daa7f73d0859.js","canopyx-ui-accordion.a3ef9c27cea5b7a4.css"]},PART_CODE=new Map(),SHARED_PARTS={},partName=name=>typeof name==="string"&&/^[a-z][a-z\d-]{0,31}$/.test(name);
+function registerPart(name,part){if(!partName(name)||!part||typeof part.version!=="string"||typeof part.install!=="function"||
+part.requires!==undefined&&!(Array.isArray(part.requires)&&part.requires.every(partName)))throw new Error("CanopyX: invalid part.");PART_CODE.set(name,part)}
+function definePart(View,name,label,context){const parts=View.prototype.parts||={};return parts[name]={name,label,context,parts}}
+function loadPart(part){return part.ready||=Promise.resolve().then(async()=>{const[version,scriptFile,styleFile]=Object.hasOwn(PARTS,part.name)?PARTS[part.name]:[];part.version=version;if(!version)throw new Error("CanopyX: no "+part.label+".");if(PART_CODE.get(part.name)?.version!==part.version||part.styleReady===null){const find=type=>[...document.querySelectorAll('script[type="application/x-canopyx-'+type+'"][data-cx-version="'+part.version+'"]')].find(item=>!pageNonce||item.nonce===pageNonce);const payload=find(part.name),script=h("script"),embeddedStyle=styleFile&&find(part.name+"-style");if(payload){if(embeddedStyle){const style=h("style");style.nonce=payload.nonce;setText(style,embeddedStyle.textContent);document.head.appendChild(style)}
+script.textContent=trusted("Script",payload.textContent);script.nonce=payload.nonce;document.head.appendChild(script);script.remove()}else{const base=global.CanopyXFilterEditorBase,runtime=PART_URL||typeof base==="string"&&base||document.baseURI,hashed=PART_URL&&/\.[a-f\d]{16}\.js(?:[?#]|$)/.test(PART_URL);
+const load=(element,attribute,file,kind)=>new Promise((resolve,reject)=>{const url=new URL(file,runtime).href;element[attribute]=attribute==="src"?trusted("ScriptURL",url):url;element.onload=resolve;element.onerror=()=>{element.remove();reject(new Error("CanopyX: "+part.label+" "+kind+" unavailable."))};document.head.appendChild(withNonce(element))});const link=h("link");link.rel="stylesheet";const style=styleFile&&(part.styleReady||=load(link,"href",hashed?styleFile:"canopyx-"+part.name+".css","stylesheet")
+.catch(error=>{part.styleReady=null;throw error}));const code=PART_CODE.get(part.name)?.version===part.version||(part.scriptReady||=load(script,"src",hashed?scriptFile:"canopyx-"+part.name+".js","script")
+.finally(()=>script.remove()).catch(error=>{part.scriptReady=null;throw error}));await Promise.all([style,code])}}
+const code=PART_CODE.get(part.name);if(code?.version!==part.version)throw new Error("CanopyX: "+part.label+" and runtime must come from the same build.");for(const name of code.requires||[])await loadPart(part.parts[name]||SHARED_PARTS[name]);code.install(part.context())}).catch(error=>{part.ready=null;throw error})}
+const partQueue=global.CanopyXParts=global.CanopyXParts||[];partQueue.forEach(entry=>registerPart(...entry));partQueue.length=0;partQueue.push=(...entries)=>{entries.forEach(entry=>registerPart(...entry));return 0};function UiHost(){}
+const UI_IMPL={},UI_TOOLS={},uiInstances=new WeakMap();const UI_KINDS={tabs:"ui-tabs",stepper:"ui-stepper",accordion:"ui-accordion",menu:"ui-menu",dialog:"ui-overlays",drawer:"ui-overlays",popover:"ui-overlays",tooltip:"ui-overlays"};const uiContext=()=>({UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml});for(const name of Object.keys(PARTS).filter(part=>part.startsWith("ui-")))SHARED_PARTS[name]=definePart(UiHost,name,name.replace("ui-","UI "),uiContext);function createUi(kind,target,options={}){const root=typeof target==="string"?document.querySelector(target):target;if(root?.nodeType!==1)throw new Error("CanopyX: "+kind+" needs an element.");let registrations=uiInstances.get(root);if(!registrations)uiInstances.set(root,registrations=new Map());if(registrations.has(kind))return registrations.get(kind);const lifetime=new AbortController();watchTheme(root,lifetime.signal);let instance=null;const ready=loadPart(SHARED_PARTS[UI_KINDS[kind]]).then(()=>{if(lifetime.signal.aborted)throw new DOMException("UI component destroyed.","AbortError");instance=UI_IMPL[kind](root,options,lifetime.signal);return instance.ready||instance});const api={element:root,ready:ready.then(()=>api),destroy(){if(lifetime.signal.aborted)return;lifetime.abort();instance?.destroy?.();registrations.delete(kind)}};for(const name of["select","getSelected","refresh","preparePrint","open","close","next","back","skip","finish","setStepState","getState","toggle","getOpen","filter"])api[name]=(...args)=>{if(lifetime.signal.aborted)throw new Error("CanopyX: UI component destroyed.");return instance?instance[name]?.(...args):ready.then(()=>instance[name]?.(...args))};api.ready.catch(error=>{if(error.name!=="AbortError")root.dispatchEvent(new CustomEvent("canopyx:error",{detail:{error},bubbles:true}))});registrations.set(kind,Object.freeze(api));return api}
+function bindContextMenu(target,items,options={}){if(typeof target!=="string"&&target?.nodeType!==1)throw new Error("CanopyX: contextMenu needs an element or selector.");if(typeof target==="string")document.documentElement.matches(target);let disposed=false,cleanup=null;const dispose=()=>{disposed=true;cleanup?.()};dispose.ready=loadPart(SHARED_PARTS["ui-menu"]).then(()=>{if(!disposed)cleanup=UI_IMPL.contextMenu(target,items,options)});dispose.open=(...args)=>disposed?false:cleanup?cleanup.open(...args):dispose.ready.then(()=>!disposed&&cleanup.open(...args));dispose.close=(...args)=>cleanup?.close(...args);return dispose}
+function mountUi(root=document){const mounted=[];for(const kind of Object.keys(UI_KINDS)){const selector="[data-cx-"+kind+"]",nodes=[...root.querySelectorAll(selector)];if(root.matches?.(selector))nodes.unshift(root);for(const element of nodes){if(kind==="menu"&&element.parentElement?.closest(selector))continue;if(kind==="stepper"&&["report","static"].includes(element.dataset.mode))continue;mounted.push(createUi(kind,element))}}
+return mounted}
+const UI_API={mountUi,contextMenu:bindContextMenu};for(const kind of Object.keys(UI_KINDS))UI_API[kind]=(target,options)=>createUi(kind,target,options);global.CanopyX=Object.freeze(Object.assign({registerPart,setNonce},UI_API));if(typeof document!=="undefined"){const navigation=global.performance&&performance.getEntriesByType?performance.getEntriesByType("navigation")[0]:null;if(document.readyState==="loading"||(document.readyState==="interactive"&&navigation&&navigation.domContentLoadedEventStart===0)){document.addEventListener("DOMContentLoaded",()=>mountUi(document))}else{mountUi(document)}}})(runtimeHost);const CanopyX=runtimeHost.CanopyX;const{registerPart,setNonce,  mountUi,contextMenu,tabs,stepper,accordion,dialog,drawer,popover,tooltip,menu}=CanopyX;export{registerPart,setNonce,  mountUi,contextMenu,tabs,stepper,accordion,dialog,drawer,popover,tooltip,menu};export default CanopyX;

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

@@ -1,18 +1,18 @@
 @layer hfx.components{
-:where([data-cx-tabs],[data-cx-stepper]){
-color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));
+:where([data-cx-tabs],[data-cx-stepper],[data-cx-accordion]){
+color:var(--hfx-color-text-primary,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-type-body-size,0.875rem);
 line-height:var(--hfx-type-body-line,1.5);
 min-inline-size:0;
 }
-.cx-tabs [hidden],.cx-stepper-host [hidden]{display:none;}
+.cx-tabs [hidden],.cx-stepper-host [hidden],.cx-accordion [hidden]{display:none;}
 .cx-navigation-print{display:none;}
 @media print{
 .cx-navigation-print{display:block;}
-:is(.cx-tabpanel,.cx-step-panel):has(> .cx-navigation-print) > .cx-navigation-body{display:none;}
+:is(.cx-tabpanel,.cx-step-panel,.cx-accordion-panel):has(> .cx-navigation-print) > .cx-navigation-body{display:none;}
 }
-:where([data-cx-tabs],[data-cx-stepper]) :where(button,[tabindex]):focus-visible{
+:where([data-cx-tabs],[data-cx-stepper],[data-cx-accordion]) :where(button,input,[tabindex]):focus-visible{
 outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));
 outline-offset:var(--hfx-focus-offset,2px);
 }
@@ -25,13 +25,13 @@ display:flex;
 align-items:center;
 gap:var(--hfx-space-2,0.5rem);
 background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));
-color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));
+color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));
 min-block-size:var(--hfx-control-height-lg,calc(44px - var(--cx-compact,0) * 8px));
 }
 .cx-navigation-spinner{
 inline-size:var(--hfx-icon-lg,20px);
 block-size:var(--hfx-icon-lg,20px);
-border:var(--hfx-indicator-width,2px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));
+border:var(--hfx-indicator-width,2px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));
 border-block-start-color:var(--hfx-color-accent-indicator,light-dark(#11776f,#37c9b8));
 border-radius:50%;
 animation:cx-navigation-spin var(--hfx-motion-duration-slow,320ms) linear infinite;
@@ -49,8 +49,8 @@ margin-block-end:var(--hfx-space-3,0.75rem);
 .cx-step-errors p{margin:0;font-weight:var(--hfx-weight-semibold,600);}
 .cx-step-errors ul{margin-block:var(--hfx-space-2,0.5rem) 0;padding-inline-start:var(--hfx-space-5,1.5rem);}
 .cx-navigation-retry{
-background:var(--hfx-color-surface,light-dark(#ffffff,#16181c));
-color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));
+background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));
+color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));
 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));
 min-block-size:var(--hfx-control-height-md,calc(36px - var(--cx-compact,0) * 8px));

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

@@ -1,9 +1,9 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"e7815ee277df3a57",requires:["ui-picker"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;UI_TOOLS.navigation=(()=>{const focusable='a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';function owned(root,selector){return Array.from(root.querySelectorAll(selector)).filter(el=>el.closest('[data-cx-tabs],[data-cx-stepper]')===root)}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"2553d01c5276d56a",requires:["ui-overlays"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;UI_TOOLS.navigation=(()=>{const focusable='a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';function owned(root,selector){return Array.from(root.querySelectorAll(selector)).filter(el=>el.closest('[data-cx-tabs],[data-cx-stepper],[data-cx-accordion]')===root)}
 function scope(signal){const life=new AbortController();if(signal?.aborted)life.abort();else signal?.addEventListener('abort',()=>life.abort(),{once:true,signal:life.signal});return life}
-function records(root,kind,options){const tabs=kind==='tabs';const buttons=owned(root,tabs?'[role="tab"]':'[data-step-id]');const panels=owned(root,tabs?'[role="tabpanel"]':'.cx-step-panel');return buttons.map((element,index)=>{const id=tabs?element.dataset.tabId:element.dataset.stepId;const config=(options[tabs?'tabs':'steps']||[]).find(item=>item.id===id)||{};const panel=tabs?panels.find(el=>el.id===element.getAttribute('aria-controls')):panels[index];const iconSlot=element.querySelector('[data-icon]');if(iconSlot&&options.renderIcon){const rendered=options.renderIcon(iconSlot.dataset.icon,{...config,id,index,element,panel});if(rendered?.nodeType)iconSlot.replaceChildren(rendered);else setText(iconSlot,typeof rendered==='string'?rendered:'')}
-return{...config,id,index,element,panel,label:element.querySelector(tabs?'.cx-tab-label':'.cx-step-label')?.textContent||config.label||id,badge:element.querySelector('.cx-tab-badge')?.textContent||config.badge,icon:iconSlot?iconSlot.firstElementChild||iconSlot.textContent||undefined:config.icon,disabled:element.getAttribute('aria-disabled')==='true'||element.dataset.state==='disabled',optional:element.dataset.optional==='true',visited:element.dataset.visited==='true',state:element.dataset.state||'upcoming'}})}
+function records(root,kind,options){const tabs=kind==='tabs',accordion=kind==='accordion';const buttons=owned(root,tabs?'[role="tab"]':accordion?'.cx-accordion-trigger':'[data-step-id]');const panels=owned(root,tabs?'[role="tabpanel"]':accordion?'.cx-accordion-panel':'.cx-step-panel');return buttons.map((element,index)=>{const id=tabs?element.dataset.tabId:accordion?element.dataset.accordionId:element.dataset.stepId;const config=(options[tabs?'tabs':accordion?'sections':'steps']||[]).find(item=>item.id===id)||{};const panel=tabs||accordion?panels.find(el=>el.id===element.getAttribute('aria-controls')):panels[index];const iconSlot=element.querySelector('[data-icon]');if(iconSlot&&options.renderIcon){const rendered=options.renderIcon(iconSlot.dataset.icon,{...config,id,index,element,panel});if(rendered?.nodeType)iconSlot.replaceChildren(rendered);else setText(iconSlot,typeof rendered==='string'?rendered:'')}
+return{...config,id,index,element,panel,label:element.querySelector(tabs?'.cx-tab-label':accordion?'.cx-accordion-label':'.cx-step-label')?.textContent||config.label||id,badge:element.querySelector('.cx-tab-badge,.cx-accordion-badge')?.textContent||config.badge,icon:iconSlot?iconSlot.firstElementChild||iconSlot.textContent||undefined:config.icon,disabled:element.getAttribute('aria-disabled')==='true'||element.dataset.state==='disabled',optional:element.dataset.optional==='true',visited:element.dataset.visited==='true',open:element.getAttribute('aria-expanded')==='true',state:element.dataset.state||'upcoming'}})}
 function selection(root,prefix,options,life,read,commit){let version=0,pending;function cancel(){version++;pending?.abort();pending?.element?.removeAttribute('aria-busy')}
-async function request(target,prepare,context){cancel();if(!target||target.disabled||life.signal.aborted)return false;const controller=new AbortController(),ticket=version;controller.element=target.element;pending=controller;const live=()=>ticket===version&&!controller.signal.aborted&&!life.signal.aborted;const from=read();const restoreFocus=()=>{if(context==='auto')return;const target=prefix==='tabs'?from?.element:from?.element.querySelector('button')||from?.panel?.querySelector('[data-hfx-part="title"],h3');target?.focus()};target.element.setAttribute('aria-busy','true');const abort=()=>controller.abort();life.signal.addEventListener('abort',abort,{once:true});try{if(prepare&&await wait(prepare(from,target,controller.signal,live),controller.signal)===false)return false;if(!live())return false;const guard=from!==target||context==='finish';if(guard&&!UI_TOOLS.emit(root,prefix,'beforechange',{from,to:target,signal:controller.signal},true)){if(live())restoreFocus();return false}
+async function request(target,prepare,context){cancel();if(!target||target.disabled||life.signal.aborted)return false;const controller=new AbortController(),ticket=version;controller.element=target.element;pending=controller;const live=()=>ticket===version&&!controller.signal.aborted&&!life.signal.aborted;const from=read();const restoreFocus=()=>{if(context==='auto'||prefix==='accordion')return;const target=prefix==='tabs'?from?.element:from?.element.querySelector('button')||from?.panel?.querySelector('[data-hfx-part="title"],h3');target?.focus()};target.element.setAttribute('aria-busy','true');const abort=()=>controller.abort();life.signal.addEventListener('abort',abort,{once:true});try{if(prepare&&await wait(prepare(from,target,controller.signal,live),controller.signal)===false)return false;if(!live())return false;const guard=!target.quiet&&(from!==target||context==='finish');if(guard&&!UI_TOOLS.emit(root,prefix,'beforechange',{from,to:target,signal:controller.signal},true)){if(live())restoreFocus();return false}
 if(guard&&await wait(options.beforeChange?.(from,target,controller.signal),controller.signal)===false){if(live())restoreFocus();return false}
 if(!live())return false;await wait(commit(from,target,controller.signal,live,context),controller.signal);return live()}catch(error){if(live()&&error?.name!=='AbortError')UI_TOOLS.emit(root,prefix,'error',{from,to:target,error});return false}finally{life.signal.removeEventListener('abort',abort);if(ticket===version)target.element.removeAttribute('aria-busy')}}
 life.signal.addEventListener('abort',cancel,{once:true});return{request,cancel}}
@@ -14,7 +14,7 @@ function position(labels,key,index,total){return fill(labels[key],{current:index
 function panelTabStop(panel){if(panel?.getAttribute('role')==='tabpanel'){const hasFocusable=Array.from(panel.querySelectorAll(focusable)).some(el=>el.checkVisibility()&&!el.closest('[inert]'));panel.tabIndex=hasFocusable?-1:0}}
 function pickerItems(items,selected,disabled=item=>item.disabled){return items.map(item=>({id:item.id,label:item.label,icon:item.icon,badge:item.badge,disabled:disabled(item),checked:item.id===selected}))}
 function button(label,className){const el=document.createElement('button');el.type='button';el.className=className;setText(el,label);return el}
-return{owned,scope,records,selection,resolve,position,panelTabStop,pickerItems,button,focusable}})();UI_TOOLS.navigation.deferred=(root,prefix,options,life,retry)=>{const bodies=new Map();const printCache=new Map(),projections=new Map();let printJob,destroyed=false;const n=UI_TOOLS.navigation,labels=UI_TOOLS.labels(options.labels);const templateFor=panel=>Array.from(panel.children).find(el=>el.tagName==='TEMPLATE');function bodyFor(item){if(!item.panel)return null;if(!bodies.has(item.panel)){const template=templateFor(item.panel);const body=document.createElement('div');body.className='cx-navigation-body';for(const child of Array.from(item.panel.childNodes)){if(child===template||child.nodeType===1&&child.matches('h3,[data-hfx-part="title"],.cx-step-print-state,.cx-step-errors,.cx-navigation-print'))continue;body.append(child)}
+return{owned,scope,records,selection,resolve,position,panelTabStop,pickerItems,button,focusable}})();UI_TOOLS.navigation.deferred=(root,prefix,options,life,retry)=>{const bodies=new Map();const printCache=new Map(),projections=new Map();let printJob,destroyed=false;const n=UI_TOOLS.navigation,labels=UI_TOOLS.labels(options.labels);const templateFor=panel=>Array.from(panel.children).find(el=>el.tagName==='TEMPLATE');function bodyFor(item){if(!item.panel)return null;if(!bodies.has(item.panel)){const template=templateFor(item.panel);const body=document.createElement('div');body.className='cx-navigation-body';for(const child of Array.from(item.panel.childNodes)){if(child===template||prefix!=='accordion'&&child.nodeType===1&&child.matches('h3,[data-hfx-part="title"],.cx-step-print-state,.cx-step-errors,.cx-navigation-print'))continue;body.append(child)}
 item.panel.append(body);bodies.set(item.panel,{body,template,loaded:false})}
 return bodies.get(item.panel)}
 function isDeferred(item){return!!item&&(item.deferred??(options.deferred||!!item.loader||!!item.panel?.querySelector('template')))}

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

@@ -8,11 +8,11 @@
 }
 }
 @layer hfx.components{
-:where(.cx-tabs,.cx-stepper-host,.cx-dialog,.cx-drawer,.cx-popover,.cx-menu,.cx-tooltip,[data-cx-open]){box-sizing:border-box;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));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+:where(.cx-tabs,.cx-stepper-host,.cx-dialog,.cx-drawer,.cx-popover,.cx-menu,.cx-tooltip,[data-cx-open]){box-sizing:border-box;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));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
 :where(.cx-tabs,.cx-stepper-host,.cx-dialog,.cx-drawer,.cx-popover,.cx-menu) *,:where(.cx-tabs,.cx-stepper-host,.cx-dialog,.cx-drawer,.cx-popover,.cx-menu) *::before{box-sizing:border-box;}
 .cx-visually-hidden{position:absolute;inline-size:var(--hfx-border-width,1px);block-size:var(--hfx-border-width,1px);padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0;}
 :where(.cx-tabs,.cx-stepper-host,.cx-dialog,.cx-drawer,.cx-popover,.cx-menu) :focus-visible,[data-cx-open]:focus-visible{outline:var(--hfx-focus-width,2px) solid var(--hfx-color-focus-ring,light-dark(#02726a,#37c9b8));outline-offset:var(--hfx-focus-offset,2px);}
-.cx-dialog,.cx-drawer,.cx-popover{padding:0;border:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));background:var(--hfx-color-surface-raised,light-dark(#ffffff,#1e2126));box-shadow:var(--hfx-elevation-3,0 2px 4px rgba(22,24,28,.06),0 16px 36px -16px rgba(22,24,28,.28));overflow:hidden;}
+.cx-dialog,.cx-drawer,.cx-popover{padding:0;border:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));border-radius:var(--hfx-radius-overlay,var(--hfx-radius-lg,10px));color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));background:var(--hfx-color-surface-raised,light-dark(#ffffff,#1e2126));box-shadow:var(--hfx-elevation-3,0 2px 4px rgba(22,24,28,.06),0 16px 36px -16px rgba(22,24,28,.28));overflow:hidden;}
 .cx-dialog[open]{display:flex;flex-direction:column;max-block-size:calc(var(--cx-ui-viewport-block) - var(--hfx-space-4,1rem) * 2);}
 .cx-dialog{inline-size:min(var(--cx-ui-dialog-md),calc(100% - var(--hfx-space-4,1rem) * 2));max-inline-size:none;}
 .cx-dialog[data-size="sm"]{inline-size:min(var(--cx-ui-dialog-sm),calc(100% - var(--hfx-space-4,1rem) * 2));}
@@ -20,9 +20,9 @@
 :is(.cx-dialog,.cx-drawer)::backdrop{background:var(--hfx-color-overlay,light-dark(rgba(22,24,28,0.42),rgba(0,0,0,0.66)));}
 :is(.cx-dialog,.cx-drawer,.cx-popover) [data-hfx-part="header"]{display:flex;flex:none;align-items:center;gap:var(--hfx-space-3,0.75rem);min-block-size:var(--hfx-card-header-height,calc(52px - var(--cx-compact,0) * 8px));padding:var(--hfx-space-4,1rem) var(--hfx-card-padding-x,calc(20px - var(--cx-compact,0) * 4px));border-block-end:var(--hfx-border-width,1px) solid transparent;}
 :is(.cx-dialog,.cx-drawer,.cx-popover) [data-hfx-part="title"]{flex:1;margin:0;font-family:var(--hfx-font-display,"Segoe UI Variable Display","Segoe UI",system-ui,-apple-system,"Helvetica Neue",Arial,sans-serif);font-size:var(--hfx-type-heading-size,0.9375rem);font-weight:var(--hfx-weight-semibold,600);line-height:var(--hfx-type-heading-line,1.4);}
-:is(.cx-dialog,.cx-drawer,.cx-popover) [data-hfx-part="body"]{flex:1;overflow:auto;min-block-size:0;padding:var(--hfx-card-padding-y,calc(16px - var(--cx-compact,0) * 4px)) var(--hfx-card-padding-x,calc(20px - var(--cx-compact,0) * 4px));max-block-size:var(--cx-ui-dialog-body-max);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--hfx-type-small-size,0.8125rem);line-height:var(--hfx-type-small-line,1.4);}
-:is(.cx-dialog,.cx-drawer,.cx-popover) [data-hfx-part="footer"]{display:flex;flex:none;justify-content:flex-end;gap:var(--hfx-space-2,0.5rem);padding:var(--hfx-space-3,0.75rem) var(--hfx-card-padding-x,calc(20px - var(--cx-compact,0) * 4px));border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-border,light-dark(#e2e4e7,#272a30));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));}
-:is(.cx-dialog,.cx-drawer)[data-scrolled="true"] [data-hfx-part="header"]{border-block-end-color:var(--hfx-color-border,light-dark(#e2e4e7,#272a30));}
+:is(.cx-dialog,.cx-drawer,.cx-popover) [data-hfx-part="body"]{flex:1;overflow:auto;overscroll-behavior:contain;min-block-size:0;padding:var(--hfx-card-padding-y,calc(16px - var(--cx-compact,0) * 4px)) var(--hfx-card-padding-x,calc(20px - var(--cx-compact,0) * 4px));max-block-size:var(--cx-ui-dialog-body-max);color:var(--hfx-color-text-secondary,light-dark(#4d525b,#b0b4bc));font-size:var(--hfx-type-small-size,0.8125rem);line-height:var(--hfx-type-small-line,1.4);}
+:is(.cx-dialog,.cx-drawer,.cx-popover) [data-hfx-part="footer"]{display:flex;flex:none;justify-content:flex-end;gap:var(--hfx-space-2,0.5rem);padding:var(--hfx-space-3,0.75rem) var(--hfx-card-padding-x,calc(20px - var(--cx-compact,0) * 4px));border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));background:var(--hfx-color-surface-sunken,light-dark(#f7f8f9,#111317));}
+:is(.cx-dialog,.cx-drawer)[data-scrolled="true"] [data-hfx-part="header"]{border-block-end-color:var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));}
 .cx-overlay-close{flex:none;inline-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));min-block-size:var(--hfx-control-height-sm,calc(28px - var(--cx-compact,0) * 4px));padding:0;background:transparent;border-color:transparent;font-size:0;}
 .cx-overlay-close::before{content:"\00d7" / "";font-size:var(--hfx-icon-lg,20px);line-height:1;}
 .cx-drawer{position:fixed;inset:0 0 0 auto;margin:0;inline-size:min(var(--cx-ui-drawer-md),100%);max-inline-size:none;block-size:var(--cx-ui-viewport-block);max-block-size:none;border-radius:var(--hfx-radius-none,0);}

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

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"68a7687b9c3c8a28",install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;const UI_LABELS={tabsMore:"More",tabsMoreSelected:"More: {label}",tabsScrollPrevious:"Previous tabs",tabsScrollNext:"Next tabs",tabsSection:"Section",tabsPosition:"{current} of {total}",tabsPause:"Pause",tabsPlay:"Play",tabsMotionDisabled:"Automatic tabs are disabled by reduced motion",stepperStepOf:"Step {current} of {total}",stepperBack:"Back",stepperNext:"Next",stepperFinish:"Finish",stepperSkip:"Skip",stepperSaveDraft:"Save draft",stepperAllSteps:"All steps",stepperOptional:"Optional",stepperCompleted:"Completed",stepperSkipped:"Skipped",stepperIssues:"{count} issues to fix",stepperIssue:"1 issue to fix",dialogClose:"Close",drawerClose:"Close",drawerPrevious:"Previous record",drawerNext:"Next record",stateLoading:"Loading…",stateRetry:"Retry",stateDetails:"Details"};const uiFocusSelector='button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';Object.assign(UI_TOOLS,{labels:values=>Object.assign({},UI_LABELS,values),content:(element,value)=>{if(value?.nodeType)element.replaceChildren(value);else hostHtml(element,value,null,"detail")},emit:(root,prefix,name,detail,cancelable=false)=>root.dispatchEvent(new CustomEvent("cx-"+prefix+":"+name,{detail,bubbles:true,cancelable})),focusables:root=>[...root.querySelectorAll(uiFocusSelector)].filter(element=>element.checkVisibility()&&!element.closest("[inert]")),observe(root,changed,signal){let width=-1,frame=0;const read=()=>{const next=root.getBoundingClientRect().width;if(next!==width){width=next;changed(width)}};const observer=new ResizeObserver(()=>{frame||=requestAnimationFrame(()=>{frame=0;read()})});observer.observe(root);read();const dispose=()=>{observer.disconnect();cancelAnimationFrame(frame)};signal?.addEventListener("abort",dispose,{once:true});return dispose},theme(host,element){const previous=new Map([...element.style].map(name=>[name,element.style.getPropertyValue(name)]));overlayTheme(host,element);for(const[name,value]of previous)if(name.startsWith("--hfx-")||name.startsWith("--cx-"))element.style.setProperty(name,value);const written=new Map([...element.style].map(name=>[name,element.style.getPropertyValue(name)]));return()=>{for(const[name,value]of written)if(element.style.getPropertyValue(name)===value){if(previous.has(name))element.style.setProperty(name,previous.get(name));else element.style.removeProperty(name)}}},position(element,anchor,placement="bottom-start",point){const viewport=global.visualViewport,width=viewport?.width||document.documentElement.clientWidth,height=viewport?.height||global.innerHeight;const offsetX=viewport?.offsetLeft||0,offsetY=viewport?.offsetTop||0;const style=getComputedStyle(element),gap=parseFloat(style.marginTop)||0,marginX=parseFloat(style.marginLeft)||0;const edge=Math.max(8,gap);const box=element.getBoundingClientRect(),target=point?{left:point.x,right:point.x,top:point.y,bottom:point.y}:anchor.getBoundingClientRect();const rtl=getComputedStyle(anchor).direction==="rtl",side=placement.split("-")[0],align=placement.split("-")[1]||"center";let x=(target.left+target.right-box.width)/ 2, y = target.bottom + gap, actual = side;
+(function(global){"use strict";const installed=new WeakSet();const part={version:"24afaa117ebf3fb5",install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;const UI_LABELS={tabsMore:"More",tabsMoreSelected:"More: {label}",tabsScrollPrevious:"Previous tabs",tabsScrollNext:"Next tabs",tabsSection:"Section",tabsPosition:"{current} of {total}",tabsPause:"Pause",tabsPlay:"Play",tabsMotionDisabled:"Automatic tabs are disabled by reduced motion",accordionSearch:"Filter sections",accordionNoMatches:"No matching sections",accordionCopyTitle:"Copy title",accordionCopied:"Copied",stepperStepOf:"Step {current} of {total}",stepperBack:"Back",stepperNext:"Next",stepperFinish:"Finish",stepperSkip:"Skip",stepperSaveDraft:"Save draft",stepperAllSteps:"All steps",stepperOptional:"Optional",stepperCompleted:"Completed",stepperSkipped:"Skipped",stepperIssues:"{count} issues to fix",stepperIssue:"1 issue to fix",dialogClose:"Close",drawerClose:"Close",drawerPrevious:"Previous record",drawerNext:"Next record",stateLoading:"Loading…",stateRetry:"Retry",stateDetails:"Details"};const uiFocusSelector='button:not([disabled]),a[href],input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]:not([tabindex="-1"])';Object.assign(UI_TOOLS,{labels:values=>Object.assign({},UI_LABELS,values),content:(element,value)=>{if(value?.nodeType)element.replaceChildren(value);else hostHtml(element,value,null,"detail")},emit:(root,prefix,name,detail,cancelable=false)=>root.dispatchEvent(new CustomEvent("cx-"+prefix+":"+name,{detail,bubbles:true,cancelable})),focusables:root=>[...root.querySelectorAll(uiFocusSelector)].filter(element=>element.checkVisibility()&&!element.closest("[inert]")),observe(root,changed,signal){let width=-1,frame=0;const read=()=>{const next=root.getBoundingClientRect().width;if(next!==width){width=next;changed(width)}};const observer=new ResizeObserver(()=>{frame||=requestAnimationFrame(()=>{frame=0;read()})});observer.observe(root);read();const dispose=()=>{observer.disconnect();cancelAnimationFrame(frame)};signal?.addEventListener("abort",dispose,{once:true});return dispose},theme(host,element){const previous=new Map([...element.style].map(name=>[name,element.style.getPropertyValue(name)]));overlayTheme(host,element);for(const[name,value]of previous)if(name.startsWith("--hfx-")||name.startsWith("--cx-"))element.style.setProperty(name,value);const written=new Map([...element.style].map(name=>[name,element.style.getPropertyValue(name)]));return()=>{for(const[name,value]of written)if(element.style.getPropertyValue(name)===value){if(previous.has(name))element.style.setProperty(name,previous.get(name));else element.style.removeProperty(name)}}},position(element,anchor,placement="bottom-start",point){const viewport=global.visualViewport,width=viewport?.width||document.documentElement.clientWidth,height=viewport?.height||global.innerHeight;const offsetX=viewport?.offsetLeft||0,offsetY=viewport?.offsetTop||0;const style=getComputedStyle(element),gap=parseFloat(style.marginTop)||0,marginX=parseFloat(style.marginLeft)||0;const edge=Math.max(8,gap);const box=element.getBoundingClientRect(),target=point?{left:point.x,right:point.x,top:point.y,bottom:point.y}:anchor.getBoundingClientRect();const rtl=getComputedStyle(anchor).direction==="rtl",side=placement.split("-")[0],align=placement.split("-")[1]||"center";let x=(target.left+target.right-box.width)/ 2, y = target.bottom + gap, actual = side;
 if(side==="top")y=target.top-box.height-gap;if(side==="left"||side==="right"){x=side==="left"?target.left-box.width-gap:target.right+gap;y=target.top}
 else if(align!=="center")x=(align==="start")!==rtl?target.left:target.right-box.width;if(side==="top"&&y<offsetY){y=target.bottom+gap;actual="bottom"}
 else if(side==="bottom"&&y+box.height>height+offsetY){y=target.top-box.height-gap;actual="top"}
@@ -34,7 +34,10 @@ const cancel=event=>{event.preventDefault();if(uiTopOverlay()===entry)close("can
 if(opened)close("native",options.focus!==false,true)};element.addEventListener("close",nativeClose,true);function setModal(value){if(!opened||modal===value)return;const active=document.activeElement;if(element.localName==="dialog"&&element.open){closeNative(true);if(value)element.showModal();else element.show()}
 uiLockScroll(value);modal=value;if(value)element.setAttribute("aria-modal","true");else element.removeAttribute("aria-modal");if(active&&element.contains(active))active.focus({preventScroll:true})}
 const destroy=()=>{close("destroy",false,true);element.removeEventListener("cancel",cancel);element.removeEventListener("close",nativeClose,true);if(hadTabindex===null)element.removeAttribute("tabindex");else element.setAttribute("tabindex",hadTabindex)};signal?.addEventListener("abort",destroy,{once:true});return{element,open,close,destroy,setModal,get opened(){return opened},get modal(){return modal}}};function uiDialog(root,options,signal,drawer){const labels=UI_TOOLS.labels(options.labels),trigger=options.trigger||document.getElementById(root.dataset.cxTrigger||"");const container=options.container||root.parentElement||document.body,alert=root.getAttribute("role")==="alertdialog";let phone=false;const overlay=UI_TOOLS.overlay(root,{kind:drawer?"drawer":"dialog",trigger,host:options.host||container,focus:options.focus,dismissible:options.dismissible??root.dataset.dismissible!=="false",initialFocus:options.initialFocus||(element=>
-alert?element.querySelector('[data-cx-cancel],button:not([data-danger]):not([type="submit"])'):element.querySelector("input:not([type=hidden]),select,textarea"))},signal);const open=()=>overlay.open({modal:!drawer||phone||options.modal===true||root.dataset.modal==="true"});UI_TOOLS.observe(container,width=>{phone=width<640;root.dataset.phone=String(phone);root.classList.toggle("cx-phone",phone);if(drawer&&overlay.opened)overlay.setModal(phone||options.modal===true||root.dataset.modal==="true")},signal);trigger?.addEventListener("click",open,{signal});root.addEventListener("click",event=>{if(event.target.closest("[data-cx-close],[data-cx-cancel]"))overlay.close("cancel")},{signal});const body=root.querySelector('[data-hfx-part="body"]');body?.addEventListener("scroll",()=>{root.dataset.scrolled=String(body.scrollTop>0)},{signal});if(drawer)root.addEventListener("keydown",event=>{if(!options.records||/^(?:INPUT|TEXTAREA|SELECT)$/.test(event.target.tagName) || event.target.isContentEditable) return;
+alert?element.querySelector('[data-cx-cancel],button:not([data-danger]):not([type="submit"])'):element.querySelector("input:not([type=hidden]),select,textarea"))},signal);const ownerHidden=()=>!container.getClientRects().length||/^(hidden|collapse)$/.test(getComputedStyle(container).visibility);
+const closeHidden=()=>{if(!options.closeWhenHidden||!overlay.opened||!ownerHidden()||matchMedia("print").matches)return false;root._cxHidden=true;overlay.close("hidden",false,true);return true};if(options.closeWhenHidden){const visibility=new MutationObserver(closeHidden);for(let owner=container;owner;owner=owner.parentElement)visibility.observe(owner,{attributes:true,attributeFilter:["style","class","hidden"]});signal?.addEventListener("abort",()=>visibility.disconnect(),{once:true})}
+const open=()=>{const opened=overlay.open({modal:!drawer||phone||options.modal===true||root.dataset.modal==="true"});return opened&&!closeHidden()};UI_TOOLS.observe(container,width=>{if(!width&&!container.getClientRects().length){closeHidden();return}
+phone=width<640;root.dataset.phone=String(phone);root.classList.toggle("cx-phone",phone);if(drawer&&overlay.opened)overlay.setModal(phone||options.modal===true||root.dataset.modal==="true")},signal);trigger?.addEventListener("click",open,{signal});root.addEventListener("click",event=>{if(event.target.closest("[data-cx-close],[data-cx-cancel]"))overlay.close("cancel")},{signal});const body=root.querySelector('[data-hfx-part="body"]');body?.addEventListener("scroll",()=>{root.dataset.scrolled=String(body.scrollTop>0)},{signal});if(drawer)root.addEventListener("keydown",event=>{if(!options.records||/^(?:INPUT|TEXTAREA|SELECT)$/.test(event.target.tagName) || event.target.isContentEditable) return;
 if(event.key==="ArrowUp"||event.key==="ArrowDown"){event.preventDefault();options.records(event.key==="ArrowUp"?-1:1)}},{signal});for(const button of root.querySelectorAll(".cx-overlay-close"))button.setAttribute("aria-label",drawer?labels.drawerClose:labels.dialogClose);return{...overlay,open,refresh(){},getState:()=>({open:overlay.opened,modal:overlay.modal})}}
 UI_IMPL.dialog=(root,options,signal)=>uiDialog(root,options,signal,false);UI_IMPL.drawer=(root,options,signal)=>uiDialog(root,options,signal,true);UI_IMPL.popover=(root,options,signal)=>{const trigger=options.trigger||document.getElementById(root.dataset.cxTrigger||"");const overlay=UI_TOOLS.overlay(root,{...options,trigger,kind:"popover",anchored:true},signal);trigger?.addEventListener("click",()=>overlay.opened?overlay.close():overlay.open(),{signal});trigger?.addEventListener("keydown",event=>{if(event.key==="ArrowDown"){event.preventDefault();overlay.open()}},{signal});root.addEventListener("keydown",event=>{if(event.key!=="Tab")return;const items=UI_TOOLS.focusables(root),at=items.indexOf(document.activeElement);if(event.shiftKey&&at===0||!event.shiftKey&&at===items.length-1){const outside=UI_TOOLS.focusables(trigger?.closest("dialog[open]")||document).filter(item=>!root.contains(item));const next=event.shiftKey?trigger:outside[outside.indexOf(trigger)+ 1];if(overlay.close("tab",false)){event.preventDefault();(next||trigger)?.focus()}}},{signal});return overlay};UI_IMPL.tooltip=(root,options,signal)=>{const trigger=options.trigger||document.getElementById(root.dataset.cxTrigger||"");if(!trigger)throw new Error("CanopyX: tooltip needs a labelled trigger.");const overlay=UI_TOOLS.overlay(root,{...options,trigger,kind:"tooltip",anchored:true,placement:options.placement||root.dataset.placement||"top",focus:false},signal);const described=trigger.getAttribute("aria-describedby"),ids=new Set((described||"").split(/\s+/).filter(Boolean));
 if(!root.id)root.id=trigger.id+"-tooltip";const hadDescription=ids.has(root.id);ids.add(root.id);trigger.setAttribute("aria-describedby",[...ids].join(" "));let showTimer,hideTimer;const hide=()=>{clearTimeout(showTimer);clearTimeout(hideTimer);if(document.activeElement!==trigger)hideTimer=setTimeout(()=>overlay.close("leave",false),100)};const show=delay=>{clearTimeout(showTimer);clearTimeout(hideTimer);showTimer=setTimeout(()=>overlay.open(),delay)};trigger.addEventListener("pointerenter",()=>show(400),{signal});trigger.addEventListener("pointerleave",hide,{signal});root.addEventListener("pointerenter",()=>clearTimeout(hideTimer),{signal});root.addEventListener("pointerleave",hide,{signal});trigger.addEventListener("focus",()=>{clearTimeout(hideTimer);overlay.open()},{signal});trigger.addEventListener("blur",hide,{signal});const destroy=()=>{clearTimeout(showTimer);clearTimeout(hideTimer);overlay.destroy();const current=new Set((trigger.getAttribute("aria-describedby")||"").split(/\s+/).filter(Boolean));

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

@@ -1,8 +1,8 @@
 @layer hfx.components{
 .cx-picker{min-inline-size:0;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));}
 .cx-picker-trigger{inline-size:100%;justify-content:flex-start;min-inline-size:0;text-align:start;}
-.cx-picker-lead,.cx-picker-separator,.cx-picker-chevron{flex:none;color:var(--hfx-color-text-muted,light-dark(#626770,#8f949d));font-weight:var(--hfx-weight-regular,400);}
-.cx-picker-label{min-inline-size:0;overflow-wrap:anywhere;color:var(--hfx-color-text,light-dark(#16181c,#f2f3f5));}
+.cx-picker-lead,.cx-picker-separator,.cx-picker-chevron{flex:none;color:var(--hfx-color-text-secondary,var(--hfx-color-text-muted,light-dark(#626770,#8f949d)));font-weight:var(--hfx-weight-regular,400);}
+.cx-picker-label{min-inline-size:0;overflow-wrap:anywhere;color:var(--hfx-color-text-primary,var(--hfx-color-text,light-dark(#16181c,#f2f3f5)));}
 .cx-picker-icon{display:inline-flex;flex:none;align-items:center;justify-content:center;inline-size:var(--hfx-icon-md,16px);block-size:var(--hfx-icon-md,16px);}
 .cx-picker-icon > :is(svg,img){inline-size:100%;block-size:100%;}
 .cx-picker-chevron{margin-inline-start:auto;}

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

@@ -1,4 +1,4 @@
-(function(global){"use strict";const installed=new WeakSet();const part={version:"02ff3779dd1c1ef4",requires:["ui-menu"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;let uiPickerIdentity=0;UI_TOOLS.picker=(root,options={})=>{const element=h('div','cx-picker');element.dataset.hfxPart='picker';const trigger=h('button','cx-picker-trigger cx-ui-button');trigger.type='button';const lead=h('span','cx-picker-lead'),separator=h('span','cx-picker-separator');separator.setAttribute('aria-hidden','true');setText(separator,'·');const icon=h('span','cx-picker-icon');icon.setAttribute('aria-hidden','true');const label=h('span','cx-picker-label'),badge=h('span','cx-picker-badge');badge.dataset.hfxPart='badge';const chevron=h('span','cx-picker-chevron');chevron.setAttribute('aria-hidden','true');setText(chevron,'▾');trigger.append(lead,separator,icon,label,badge,chevron);const menu=h('div','cx-menu');menu.hidden=true;menu.setAttribute('role','menu');menu.id='cx-ui-picker-menu-' + ++uiPickerIdentity;trigger.id=menu.id+'-trigger';element.append(trigger,menu);root.append(element);let state={...options},destroyed=false,selectionVersion=0;const renderIcon=value=>value?.nodeType?value.cloneNode(true):value;const controller=UI_IMPL.menu(menu,{trigger,host:root,renderIcon,async onSelect(item){const ticket=++selectionVersion;syncChecks();try{await state.onSelect?.(item.id)}
+(function(global){"use strict";const installed=new WeakSet();const part={version:"d415103478faf52a",requires:["ui-menu"],install(context){if(installed.has(context.UI_IMPL))return;const{UI_IMPL,UI_TOOLS,h,setText,fill,watchTheme,overlayTheme,hostHtml}=context;let uiPickerIdentity=0;UI_TOOLS.picker=(root,options={})=>{const element=h('div','cx-picker');element.dataset.hfxPart='picker';const trigger=h('button','cx-picker-trigger cx-ui-button');trigger.type='button';const lead=h('span','cx-picker-lead'),separator=h('span','cx-picker-separator');separator.setAttribute('aria-hidden','true');setText(separator,'·');const icon=h('span','cx-picker-icon');icon.setAttribute('aria-hidden','true');const label=h('span','cx-picker-label'),badge=h('span','cx-picker-badge');badge.dataset.hfxPart='badge';const chevron=h('span','cx-picker-chevron');chevron.setAttribute('aria-hidden','true');setText(chevron,'▾');trigger.append(lead,separator,icon,label,badge,chevron);const menu=h('div','cx-menu');menu.hidden=true;menu.setAttribute('role','menu');menu.id='cx-ui-picker-menu-' + ++uiPickerIdentity;trigger.id=menu.id+'-trigger';element.append(trigger,menu);root.append(element);let state={...options},destroyed=false,selectionVersion=0;const renderIcon=value=>value?.nodeType?value.cloneNode(true):value;const controller=UI_IMPL.menu(menu,{trigger,host:root,renderIcon,async onSelect(item){const ticket=++selectionVersion;syncChecks();try{await state.onSelect?.(item.id)}
 catch{}
 finally{if(!destroyed&&ticket===selectionVersion)syncChecks()}}});function syncChecks(){for(const item of menu.querySelectorAll('[role="menuitemradio"]')){const checked=item.dataset.itemId===state.selected;item.setAttribute('aria-checked',String(checked));item.dataset.state=item.getAttribute('aria-disabled')==='true'?'disabled':checked?'selected':''}}
 function update(next={}){if(destroyed)return;selectionVersion++;state={...state,...next};const items=state.items||[],selected=items.find(item=>item.id===state.selected);setText(lead,state.lead);lead.hidden=!state.lead;setText(label,selected?.label);label.hidden=!selected;separator.hidden=!state.lead||!selected;setText(badge,selected?.badge);badge.hidden=selected?.badge==null||selected.badge==='';icon.replaceChildren();icon.hidden=selected?.icon==null;if(selected?.icon?.nodeType)icon.append(selected.icon.cloneNode(true));else if(selected?.icon!=null)setText(icon,selected.icon);trigger.setAttribute('aria-label',[state.lead,selected?.label,selected?.badge].filter(value=>value!=null&&value!=='').join(' '));trigger.disabled=!items.length;element.dataset.state=!items.length?'disabled':selected?'selected':'';controller.close('update',false,true);UI_TOOLS.menuItems(menu,items.map(item=>({...item,kind:'radio',checked:item.id===state.selected})),{renderIcon});controller.refresh()}

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

@@ -51,8 +51,8 @@ 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));
+background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));
+color:var(--hfx-color-text-secondary,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;
@@ -61,15 +61,15 @@ line-height:1;
 .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));
+color:var(--hfx-color-text-secondary,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"]{color:var(--hfx-color-text-primary,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"]{color:var(--hfx-color-text-primary,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));
@@ -87,12 +87,12 @@ color:var(--hfx-color-status-bad-fg,light-dark(#b8292a,#f47171));
 .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));
+border-color:var(--hfx-color-surface-line,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[data-state="disabled"]::after{background:var(--hfx-color-surface-line,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-state{display:none;color:var(--hfx-color-text-secondary,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{
@@ -102,7 +102,7 @@ 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));
+border-block-start:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));
 }
 .cx-step-position{margin-inline-end:auto;}
 .cx-stepper-footer button,.cx-stepper-phone-back{
@@ -110,8 +110,8 @@ 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));
+background:var(--hfx-color-surface-card,var(--hfx-color-surface,light-dark(#ffffff,#16181c)));
+color:var(--hfx-color-text-primary,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);
@@ -147,7 +147,7 @@ block-size:auto;
 .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{grid-column:1 / -1;block-size:var(--hfx-space-1,0.25rem);border-radius:var(--hfx-radius-pill,999px);background:var(--hfx-color-surface-line,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;}

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

@@ -1,4 +1,4 @@
-(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(global){"use strict";const installed=new WeakSet();const part={version:"5682c49db1b85314",requires:["ui-picker","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)}

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

@@ -17,7 +17,7 @@ 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));
+border-block-end:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,var(--hfx-color-border,light-dark(#e2e4e7,#272a30)));
 }
 .cx-tablist::-webkit-scrollbar{display:none;}
 .cx-tab{
@@ -39,9 +39,9 @@ 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:hover:not([aria-disabled="true"]){color:var(--hfx-color-text-primary,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-selected="true"]{color:var(--hfx-color-text-primary,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);}
@@ -76,14 +76,14 @@ border-radius:var(--hfx-radius-control,var(--hfx-radius-md,6px));
 .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:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,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));
+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-surface-line,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);}
@@ -93,7 +93,7 @@ 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));
+border-inline-end:var(--hfx-border-width,1px) solid var(--hfx-color-surface-line,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;}
@@ -106,6 +106,7 @@ 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-justified="true"]:not(.cx-tabs--vertical) > .cx-tablist > .cx-tab{flex:1 1 0;}
 .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;}
@@ -120,14 +121,14 @@ 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{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-card,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-position{grid-column:1 / -1;color:var(--hfx-color-text-secondary,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;}