@vonage/vivid 5.1.0 → 5.2.0

package/bundled/vivid-element.cjs

@@ -1 +1 @@
-"use strict";const v=function(){if(typeof globalThis<"u")return globalThis;if(typeof global<"u")return global;if(typeof self<"u")return self;if(typeof window<"u")return window;try{return new Function("return this")()}catch{return{}}}();v.trustedTypes===void 0&&(v.trustedTypes={createPolicy:(s,e)=>e});const ee={configurable:!1,enumerable:!1,writable:!1};v.FAST===void 0&&Reflect.defineProperty(v,"FAST",Object.assign({value:Object.create(null)},ee));const S=v.FAST;if(S.getById===void 0){const s=Object.create(null);Reflect.defineProperty(S,"getById",Object.assign({value(e,t){let i=s[e];return i===void 0&&(i=t?s[e]=t():null),i}},ee))}const ge=Object.freeze([]);function R(){const s=new WeakMap;return function(e){let t=s.get(e);if(t===void 0){let i=Reflect.getPrototypeOf(e);for(;t===void 0&&i!==null;)t=s.get(i),i=Reflect.getPrototypeOf(i);t=t===void 0?[]:t.slice(0),s.set(e,t)}return t}}const M=v.FAST.getById(1,()=>{const s=[],e=[];function t(){if(e.length)throw e.shift()}function i(o){try{o.call()}catch(a){e.push(a),setTimeout(t,0)}}function n(){let a=0;for(;a<s.length;)if(i(s[a]),a++,a>1024){for(let c=0,l=s.length-a;c<l;c++)s[c]=s[c+a];s.length-=a,a=0}s.length=0}function r(o){s.length<1&&v.requestAnimationFrame(n),s.push(o)}return Object.freeze({enqueue:r,process:n})}),te=v.trustedTypes.createPolicy("fast-html",{createHTML:s=>s});let E=te;const y=`fast-${Math.random().toString(36).substring(2,8)}`,se=`${y}{`,_=`}${y}`,u=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(s){if(E!==te)throw new Error("The HTML policy can only be set once.");E=s},createHTML(s){return E.createHTML(s)},isMarker(s){return s&&s.nodeType===8&&s.data.startsWith(y)},extractDirectiveIndexFromMarker(s){return parseInt(s.data.replace(`${y}:`,""))},createInterpolationPlaceholder(s){return`${se}${s}${_}`},createCustomAttributePlaceholder(s,e){return`${s}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder(s){return`<!--${y}:${s}-->`},queueUpdate:M.enqueue,processUpdates:M.process,nextUpdate(){return new Promise(M.enqueue)},setAttribute(s,e,t){t==null?s.removeAttribute(e):s.setAttribute(e,t)},setBooleanAttribute(s,e,t){t?s.setAttribute(e,""):s.removeAttribute(e)},removeChildNodes(s){for(let e=s.firstChild;e!==null;e=s.firstChild)s.removeChild(e)},createTemplateWalker(s){return document.createTreeWalker(s,133,null,!1)}});class x{constructor(e,t){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=e,this.sub1=t}has(e){return this.spillover===void 0?this.sub1===e||this.sub2===e:this.spillover.indexOf(e)!==-1}subscribe(e){const t=this.spillover;if(t===void 0){if(this.has(e))return;if(this.sub1===void 0){this.sub1=e;return}if(this.sub2===void 0){this.sub2=e;return}this.spillover=[this.sub1,this.sub2,e],this.sub1=void 0,this.sub2=void 0}else t.indexOf(e)===-1&&t.push(e)}unsubscribe(e){const t=this.spillover;if(t===void 0)this.sub1===e?this.sub1=void 0:this.sub2===e&&(this.sub2=void 0);else{const i=t.indexOf(e);i!==-1&&t.splice(i,1)}}notify(e){const t=this.spillover,i=this.source;if(t===void 0){const n=this.sub1,r=this.sub2;n!==void 0&&n.handleChange(i,e),r!==void 0&&r.handleChange(i,e)}else for(let n=0,r=t.length;n<r;++n)t[n].handleChange(i,e)}}class ie{constructor(e){this.subscribers={},this.sourceSubscribers=null,this.source=e}notify(e){var t;const i=this.subscribers[e];i!==void 0&&i.notify(e),(t=this.sourceSubscribers)===null||t===void 0||t.notify(e)}subscribe(e,t){var i;if(t){let n=this.subscribers[t];n===void 0&&(this.subscribers[t]=n=new x(this.source)),n.subscribe(e)}else this.sourceSubscribers=(i=this.sourceSubscribers)!==null&&i!==void 0?i:new x(this.source),this.sourceSubscribers.subscribe(e)}unsubscribe(e,t){var i;if(t){const n=this.subscribers[t];n!==void 0&&n.unsubscribe(e)}else(i=this.sourceSubscribers)===null||i===void 0||i.unsubscribe(e)}}const b=S.getById(2,()=>{const s=/(:|&&|\|\||if)/,e=new WeakMap,t=u.queueUpdate;let i,n=l=>{throw new Error("Must call enableArrayObservation before observing arrays.")};function r(l){let h=l.$fastController||e.get(l);return h===void 0&&(Array.isArray(l)?h=n(l):e.set(l,h=new ie(l))),h}const o=R();class a{constructor(h){this.name=h,this.field=`_${h}`,this.callback=`${h}Changed`}getValue(h){return i!==void 0&&i.watch(h,this.name),h[this.field]}setValue(h,d){const f=this.field,m=h[f];if(m!==d){h[f]=d;const g=h[this.callback];typeof g=="function"&&g.call(h,m,d),r(h).notify(this.name)}}}class c extends x{constructor(h,d,f=!1){super(h,d),this.binding=h,this.isVolatileBinding=f,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(h,d){this.needsRefresh&&this.last!==null&&this.disconnect();const f=i;i=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const m=this.binding(h,d);return i=f,m}disconnect(){if(this.last!==null){let h=this.first;for(;h!==void 0;)h.notifier.unsubscribe(this,h.propertyName),h=h.next;this.last=null,this.needsRefresh=this.needsQueue=!0}}watch(h,d){const f=this.last,m=r(h),g=f===null?this.first:{};if(g.propertySource=h,g.propertyName=d,g.notifier=m,m.subscribe(this,d),f!==null){if(!this.needsRefresh){let q;i=void 0,q=f.propertySource[f.propertyName],i=this,h===q&&(this.needsRefresh=!0)}f.next=g}this.last=g}handleChange(){this.needsQueue&&(this.needsQueue=!1,t(this))}call(){this.last!==null&&(this.needsQueue=!0,this.notify(this))}records(){let h=this.first;return{next:()=>{const d=h;return d===void 0?{value:void 0,done:!0}:(h=h.next,{value:d,done:!1})},[Symbol.iterator]:function(){return this}}}}return Object.freeze({setArrayObserverFactory(l){n=l},getNotifier:r,track(l,h){i!==void 0&&i.watch(l,h)},trackVolatile(){i!==void 0&&(i.needsRefresh=!0)},notify(l,h){r(l).notify(h)},defineProperty(l,h){typeof h=="string"&&(h=new a(h)),o(l).push(h),Reflect.defineProperty(l,h.name,{enumerable:!0,get:function(){return h.getValue(this)},set:function(d){h.setValue(this,d)}})},getAccessors:o,binding(l,h,d=this.isVolatileBinding(l)){return new c(l,h,d)},isVolatileBinding(l){return s.test(l.toString())}})});function ve(s,e){b.defineProperty(s,e)}function me(s,e,t){return Object.assign({},t,{get:function(){return b.trackVolatile(),t.get.apply(this)}})}const U=S.getById(3,()=>{let s=null;return{get(){return s},set(e){s=e}}});class w{constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return U.get()}get isEven(){return this.index%2===0}get isOdd(){return this.index%2!==0}get isFirst(){return this.index===0}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}static setEvent(e){U.set(e)}}b.defineProperty(w.prototype,"index");b.defineProperty(w.prototype,"length");const C=Object.seal(new w);class k{constructor(){this.targetIndex=0}}class ne extends k{constructor(){super(...arguments),this.createPlaceholder=u.createInterpolationPlaceholder}}class ye extends k{constructor(e,t,i){super(),this.name=e,this.behavior=t,this.options=i}createPlaceholder(e){return u.createCustomAttributePlaceholder(this.name,e)}createBehavior(e){return new this.behavior(e,this.options)}}function Ce(s,e){this.source=s,this.context=e,this.bindingObserver===null&&(this.bindingObserver=b.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(s,e))}function Se(s,e){this.source=s,this.context=e,this.target.addEventListener(this.targetName,this)}function we(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function xe(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const s=this.target.$fastView;s!==void 0&&s.isComposed&&(s.unbind(),s.needsBindOnly=!0)}function Te(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function Ae(s){u.setAttribute(this.target,this.targetName,s)}function Be(s){u.setBooleanAttribute(this.target,this.targetName,s)}function Ne(s){if(s==null&&(s=""),s.create){this.target.textContent="";let e=this.target.$fastView;e===void 0?e=s.create():this.target.$fastTemplate!==s&&(e.isComposed&&(e.remove(),e.unbind()),e=s.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=s)}else{const e=this.target.$fastView;e!==void 0&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=s}}function ke(s){this.target[this.targetName]=s}function Fe(s){const e=this.classVersions||Object.create(null),t=this.target;let i=this.version||0;if(s!=null&&s.length){const n=s.split(/\s+/);for(let r=0,o=n.length;r<o;++r){const a=n[r];a!==""&&(e[a]=i,t.classList.add(a))}}if(this.classVersions=e,this.version=i+1,i!==0){i-=1;for(const n in e)e[n]===i&&t.classList.remove(n)}}class H extends ne{constructor(e){super(),this.binding=e,this.bind=Ce,this.unbind=we,this.updateTarget=Ae,this.isBindingVolatile=b.isVolatileBinding(this.binding)}get targetName(){return this.originalTargetName}set targetName(e){if(this.originalTargetName=e,e!==void 0)switch(e[0]){case":":if(this.cleanedTargetName=e.substr(1),this.updateTarget=ke,this.cleanedTargetName==="innerHTML"){const t=this.binding;this.binding=(i,n)=>u.createHTML(t(i,n))}break;case"?":this.cleanedTargetName=e.substr(1),this.updateTarget=Be;break;case"@":this.cleanedTargetName=e.substr(1),this.bind=Se,this.unbind=Te;break;default:this.cleanedTargetName=e,e==="class"&&(this.updateTarget=Fe);break}}targetAtContent(){this.updateTarget=Ne,this.unbind=xe}createBehavior(e){return new Me(e,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class Me{constructor(e,t,i,n,r,o,a){this.source=null,this.context=null,this.bindingObserver=null,this.target=e,this.binding=t,this.isBindingVolatile=i,this.bind=n,this.unbind=r,this.updateTarget=o,this.targetName=a}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(e){w.setEvent(e);const t=this.binding(this.source,this.context);w.setEvent(null),t!==!0&&e.preventDefault()}}let O=null;class j{addFactory(e){e.targetIndex=this.targetIndex,this.behaviorFactories.push(e)}captureContentBinding(e){e.targetAtContent(),this.addFactory(e)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){O=this}static borrow(e){const t=O||new j;return t.directives=e,t.reset(),O=null,t}}function Ee(s){if(s.length===1)return s[0];let e;const t=s.length,i=s.map(o=>typeof o=="string"?()=>o:(e=o.targetName||e,o.binding)),n=(o,a)=>{let c="";for(let l=0;l<t;++l)c+=i[l](o,a);return c},r=new H(n);return r.targetName=e,r}const Oe=_.length;function re(s,e){const t=e.split(se);if(t.length===1)return null;const i=[];for(let n=0,r=t.length;n<r;++n){const o=t[n],a=o.indexOf(_);let c;if(a===-1)c=o;else{const l=parseInt(o.substring(0,a));i.push(s.directives[l]),c=o.substring(a+Oe)}c!==""&&i.push(c)}return i}function W(s,e,t=!1){const i=e.attributes;for(let n=0,r=i.length;n<r;++n){const o=i[n],a=o.value,c=re(s,a);let l=null;c===null?t&&(l=new H(()=>a),l.targetName=o.name):l=Ee(c),l!==null&&(e.removeAttributeNode(o),n--,r--,s.addFactory(l))}}function Ie(s,e,t){const i=re(s,e.textContent);if(i!==null){let n=e;for(let r=0,o=i.length;r<o;++r){const a=i[r],c=r===0?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);typeof a=="string"?c.textContent=a:(c.textContent=" ",s.captureContentBinding(a)),n=c,s.targetIndex++,c!==e&&t.nextNode()}s.targetIndex--}}function Ve(s,e){const t=s.content;document.adoptNode(t);const i=j.borrow(e);W(i,s,!0);const n=i.behaviorFactories;i.reset();const r=u.createTemplateWalker(t);let o;for(;o=r.nextNode();)switch(i.targetIndex++,o.nodeType){case 1:W(i,o);break;case 3:Ie(i,o,r);break;case 8:u.isMarker(o)&&i.addFactory(e[u.extractDirectiveIndexFromMarker(o)])}let a=0;(u.isMarker(t.firstChild)||t.childNodes.length===1&&e.length)&&(t.insertBefore(document.createComment(""),t.firstChild),a=-1);const c=i.behaviorFactories;return i.release(),{fragment:t,viewBehaviorFactories:c,hostBehaviorFactories:n,targetOffset:a}}const I=document.createRange();class oe{constructor(e,t){this.fragment=e,this.behaviors=t,this.source=null,this.context=null,this.firstChild=e.firstChild,this.lastChild=e.lastChild}appendTo(e){e.appendChild(this.fragment)}insertBefore(e){if(this.fragment.hasChildNodes())e.parentNode.insertBefore(this.fragment,e);else{const t=this.lastChild;if(e.previousSibling===t)return;const i=e.parentNode;let n=this.firstChild,r;for(;n!==t;)r=n.nextSibling,i.insertBefore(n,e),n=r;i.insertBefore(t,e)}}remove(){const e=this.fragment,t=this.lastChild;let i=this.firstChild,n;for(;i!==t;)n=i.nextSibling,e.appendChild(i),i=n;e.appendChild(t)}dispose(){const e=this.firstChild.parentNode,t=this.lastChild;let i=this.firstChild,n;for(;i!==t;)n=i.nextSibling,e.removeChild(i),i=n;e.removeChild(t);const r=this.behaviors,o=this.source;for(let a=0,c=r.length;a<c;++a)r[a].unbind(o)}bind(e,t){const i=this.behaviors;if(this.source!==e)if(this.source!==null){const n=this.source;this.source=e,this.context=t;for(let r=0,o=i.length;r<o;++r){const a=i[r];a.unbind(n),a.bind(e,t)}}else{this.source=e,this.context=t;for(let n=0,r=i.length;n<r;++n)i[n].bind(e,t)}}unbind(){if(this.source===null)return;const e=this.behaviors,t=this.source;for(let i=0,n=e.length;i<n;++i)e[i].unbind(t);this.source=null}static disposeContiguousBatch(e){if(e.length!==0){I.setStartBefore(e[0].firstChild),I.setEndAfter(e[e.length-1].lastChild),I.deleteContents();for(let t=0,i=e.length;t<i;++t){const n=e[t],r=n.behaviors,o=n.source;for(let a=0,c=r.length;a<c;++a)r[a].unbind(o)}}}}class Q{constructor(e,t){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=e,this.directives=t}create(e){if(this.fragment===null){let l;const h=this.html;if(typeof h=="string"){l=document.createElement("template"),l.innerHTML=u.createHTML(h);const f=l.content.firstElementChild;f!==null&&f.tagName==="TEMPLATE"&&(l=f)}else l=h;const d=Ve(l,this.directives);this.fragment=d.fragment,this.viewBehaviorFactories=d.viewBehaviorFactories,this.hostBehaviorFactories=d.hostBehaviorFactories,this.targetOffset=d.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const t=this.fragment.cloneNode(!0),i=this.viewBehaviorFactories,n=new Array(this.behaviorCount),r=u.createTemplateWalker(t);let o=0,a=this.targetOffset,c=r.nextNode();for(let l=i.length;o<l;++o){const h=i[o],d=h.targetIndex;for(;c!==null;)if(a===d){n[o]=h.createBehavior(c);break}else c=r.nextNode(),a++}if(this.hasHostBehaviors){const l=this.hostBehaviorFactories;for(let h=0,d=l.length;h<d;++h,++o)n[o]=l[h].createBehavior(e)}return new oe(t,n)}render(e,t,i){typeof t=="string"&&(t=document.getElementById(t)),i===void 0&&(i=t);const n=this.create(i);return n.bind(e,C),n.appendTo(t),n}}const $e=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function Pe(s,...e){const t=[];let i="";for(let n=0,r=s.length-1;n<r;++n){const o=s[n];let a=e[n];if(i+=o,a instanceof Q){const c=a;a=()=>c}if(typeof a=="function"&&(a=new H(a)),a instanceof ne){const c=$e.exec(o);c!==null&&(a.targetName=c[2])}a instanceof k?(i+=a.createPlaceholder(t.length),t.push(a)):i+=a}return i+=s[s.length-1],new Q(i,t)}class p{constructor(){this.targets=new WeakSet}addStylesTo(e){this.targets.add(e)}removeStylesFrom(e){this.targets.delete(e)}isAttachedTo(e){return this.targets.has(e)}withBehaviors(...e){return this.behaviors=this.behaviors===null?e:this.behaviors.concat(e),this}}p.create=(()=>{if(u.supportsAdoptedStyleSheets){const s=new Map;return e=>new Re(e,s)}return s=>new je(s)})();function D(s){return s.map(e=>e instanceof p?D(e.styles):[e]).reduce((e,t)=>e.concat(t),[])}function ae(s){return s.map(e=>e instanceof p?e.behaviors:null).reduce((e,t)=>t===null?e:(e===null&&(e=[]),e.concat(t)),null)}const Le=Symbol("prependToAdoptedStyleSheets");function le(s){const e=[],t=[];return s.forEach(i=>(i[Le]?e:t).push(i)),{prepend:e,append:t}}let he=(s,e)=>{const{prepend:t,append:i}=le(e);s.adoptedStyleSheets=[...t,...s.adoptedStyleSheets,...i]},ce=(s,e)=>{s.adoptedStyleSheets=s.adoptedStyleSheets.filter(t=>e.indexOf(t)===-1)};if(u.supportsAdoptedStyleSheets)try{document.adoptedStyleSheets.push(),document.adoptedStyleSheets.splice(),he=(s,e)=>{const{prepend:t,append:i}=le(e);s.adoptedStyleSheets.splice(0,0,...t),s.adoptedStyleSheets.push(...i)},ce=(s,e)=>{for(const t of e){const i=s.adoptedStyleSheets.indexOf(t);i!==-1&&s.adoptedStyleSheets.splice(i,1)}}}catch{}class Re extends p{constructor(e,t){super(),this.styles=e,this.styleSheetCache=t,this._styleSheets=void 0,this.behaviors=ae(e)}get styleSheets(){if(this._styleSheets===void 0){const e=this.styles,t=this.styleSheetCache;this._styleSheets=D(e).map(i=>{if(i instanceof CSSStyleSheet)return i;let n=t.get(i);return n===void 0&&(n=new CSSStyleSheet,n.replaceSync(i),t.set(i,n)),n})}return this._styleSheets}addStylesTo(e){he(e,this.styleSheets),super.addStylesTo(e)}removeStylesFrom(e){ce(e,this.styleSheets),super.removeStylesFrom(e)}}let _e=0;function He(){return`fast-style-class-${++_e}`}class je extends p{constructor(e){super(),this.styles=e,this.behaviors=null,this.behaviors=ae(e),this.styleSheets=D(e),this.styleClass=He()}addStylesTo(e){const t=this.styleSheets,i=this.styleClass;e=this.normalizeTarget(e);for(let n=0;n<t.length;n++){const r=document.createElement("style");r.innerHTML=t[n],r.className=i,e.append(r)}super.addStylesTo(e)}removeStylesFrom(e){e=this.normalizeTarget(e);const t=e.querySelectorAll(`.${this.styleClass}`);for(let i=0,n=t.length;i<n;++i)e.removeChild(t[i]);super.removeStylesFrom(e)}isAttachedTo(e){return super.isAttachedTo(this.normalizeTarget(e))}normalizeTarget(e){return e===document?document.body:e}}const de=Object.freeze({locate:R()}),De={toView(s){return s?"true":"false"},fromView(s){return!(s==null||s==="false"||s===!1||s===0)}},ze={toView(s){if(s==null)return null;const e=s*1;return isNaN(e)?null:e.toString()},fromView(s){if(s==null)return null;const e=s*1;return isNaN(e)?null:e}};class T{constructor(e,t,i=t.toLowerCase(),n="reflect",r){this.guards=new Set,this.Owner=e,this.name=t,this.attribute=i,this.mode=n,this.converter=r,this.fieldName=`_${t}`,this.callbackName=`${t}Changed`,this.hasCallback=this.callbackName in e.prototype,n==="boolean"&&r===void 0&&(this.converter=De)}setValue(e,t){const i=e[this.fieldName],n=this.converter;n!==void 0&&(t=n.fromView(t)),i!==t&&(e[this.fieldName]=t,this.tryReflectToAttribute(e),this.hasCallback&&e[this.callbackName](i,t),e.$fastController.notify(this.name))}getValue(e){return b.track(e,this.name),e[this.fieldName]}onAttributeChangedCallback(e,t){this.guards.has(e)||(this.guards.add(e),this.setValue(e,t),this.guards.delete(e))}tryReflectToAttribute(e){const t=this.mode,i=this.guards;i.has(e)||t==="fromView"||u.queueUpdate(()=>{i.add(e);const n=e[this.fieldName];switch(t){case"reflect":const r=this.converter;u.setAttribute(e,this.attribute,r!==void 0?r.toView(n):n);break;case"boolean":u.setBooleanAttribute(e,this.attribute,n);break}i.delete(e)})}static collect(e,...t){const i=[];t.push(de.locate(e));for(let n=0,r=t.length;n<r;++n){const o=t[n];if(o!==void 0)for(let a=0,c=o.length;a<c;++a){const l=o[a];typeof l=="string"?i.push(new T(e,l)):i.push(new T(e,l.property,l.attribute,l.mode,l.converter))}}return i}}function ue(s,e){let t;function i(n,r){arguments.length>1&&(t.property=r),de.locate(n.constructor).push(t)}if(arguments.length>1){t={},i(s,e);return}return t=s===void 0?{}:s,i}const K={mode:"open"},G={},P=S.getById(4,()=>{const s=new Map;return Object.freeze({register(e){return s.has(e.type)?!1:(s.set(e.type,e),!0)},getByType(e){return s.get(e)}})});class F{constructor(e,t=e.definition){typeof t=="string"&&(t={name:t}),this.type=e,this.name=t.name,this.template=t.template;const i=T.collect(e,t.attributes),n=new Array(i.length),r={},o={};for(let a=0,c=i.length;a<c;++a){const l=i[a];n[a]=l.attribute,r[l.name]=l,o[l.attribute]=l}this.attributes=i,this.observedAttributes=n,this.propertyLookup=r,this.attributeLookup=o,this.shadowOptions=t.shadowOptions===void 0?K:t.shadowOptions===null?void 0:Object.assign(Object.assign({},K),t.shadowOptions),this.elementOptions=t.elementOptions===void 0?G:Object.assign(Object.assign({},G),t.elementOptions),this.styles=t.styles===void 0?void 0:Array.isArray(t.styles)?p.create(t.styles):t.styles instanceof p?t.styles:p.create([t.styles])}get isDefined(){return!!P.getByType(this.type)}define(e=customElements){const t=this.type;if(P.register(this)){const i=this.attributes,n=t.prototype;for(let r=0,o=i.length;r<o;++r)b.defineProperty(n,i[r]);Reflect.defineProperty(t,"observedAttributes",{value:this.observedAttributes,enumerable:!0})}return e.get(this.name)||e.define(this.name,t,this.elementOptions),this}}F.forType=P.getByType;const fe=new WeakMap,qe={bubbles:!0,composed:!0,cancelable:!0};function V(s){return s.shadowRoot||fe.get(s)||null}class z extends ie{constructor(e,t){super(e),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this._isConnected=!1,this.$fastController=this,this.view=null,this.element=e,this.definition=t;const i=t.shadowOptions;if(i!==void 0){const r=e.attachShadow(i);i.mode==="closed"&&fe.set(e,r)}const n=b.getAccessors(e);if(n.length>0){const r=this.boundObservables=Object.create(null);for(let o=0,a=n.length;o<a;++o){const c=n[o].name,l=e[c];l!==void 0&&(delete e[c],r[c]=l)}}}get isConnected(){return b.track(this,"isConnected"),this._isConnected}setIsConnected(e){this._isConnected=e,b.notify(this,"isConnected")}get template(){return this._template}set template(e){this._template!==e&&(this._template=e,this.needsInitialization||this.renderTemplate(e))}get styles(){return this._styles}set styles(e){this._styles!==e&&(this._styles!==null&&this.removeStyles(this._styles),this._styles=e,!this.needsInitialization&&e!==null&&this.addStyles(e))}addStyles(e){const t=V(this.element)||this.element.getRootNode();if(e instanceof HTMLStyleElement)t.append(e);else if(!e.isAttachedTo(t)){const i=e.behaviors;e.addStylesTo(t),i!==null&&this.addBehaviors(i)}}removeStyles(e){const t=V(this.element)||this.element.getRootNode();if(e instanceof HTMLStyleElement)t.removeChild(e);else if(e.isAttachedTo(t)){const i=e.behaviors;e.removeStylesFrom(t),i!==null&&this.removeBehaviors(i)}}addBehaviors(e){const t=this.behaviors||(this.behaviors=new Map),i=e.length,n=[];for(let r=0;r<i;++r){const o=e[r];t.has(o)?t.set(o,t.get(o)+1):(t.set(o,1),n.push(o))}if(this._isConnected){const r=this.element;for(let o=0;o<n.length;++o)n[o].bind(r,C)}}removeBehaviors(e,t=!1){const i=this.behaviors;if(i===null)return;const n=e.length,r=[];for(let o=0;o<n;++o){const a=e[o];if(i.has(a)){const c=i.get(a)-1;c===0||t?i.delete(a)&&r.push(a):i.set(a,c)}}if(this._isConnected){const o=this.element;for(let a=0;a<r.length;++a)r[a].unbind(o)}}onConnectedCallback(){if(this._isConnected)return;const e=this.element;this.needsInitialization?this.finishInitialization():this.view!==null&&this.view.bind(e,C);const t=this.behaviors;if(t!==null)for(const[i]of t)i.bind(e,C);this.setIsConnected(!0)}onDisconnectedCallback(){if(!this._isConnected)return;this.setIsConnected(!1);const e=this.view;e!==null&&e.unbind();const t=this.behaviors;if(t!==null){const i=this.element;for(const[n]of t)n.unbind(i)}}onAttributeChangedCallback(e,t,i){const n=this.definition.attributeLookup[e];n!==void 0&&n.onAttributeChangedCallback(this.element,i)}emit(e,t,i){return this._isConnected?this.element.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign({detail:t},qe),i))):!1}finishInitialization(){const e=this.element,t=this.boundObservables;if(t!==null){const n=Object.keys(t);for(let r=0,o=n.length;r<o;++r){const a=n[r];e[a]=t[a]}this.boundObservables=null}const i=this.definition;this._template===null&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():i.template&&(this._template=i.template||null)),this._template!==null&&this.renderTemplate(this._template),this._styles===null&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():i.styles&&(this._styles=i.styles||null)),this._styles!==null&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(e){const t=this.element,i=V(t)||t;this.view!==null?(this.view.dispose(),this.view=null):this.needsInitialization||u.removeChildNodes(i),e&&(this.view=e.render(t,i,t))}static forCustomElement(e){const t=e.$fastController;if(t!==void 0)return t;const i=F.forType(e.constructor);if(i===void 0)throw new Error("Missing FASTElement definition.");return e.$fastController=new z(e,i)}}function J(s){return class extends s{constructor(){super(),z.forCustomElement(this)}$emit(e,t,i){return this.$fastController.emit(e,t,i)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(e,t,i){this.$fastController.onAttributeChangedCallback(e,t,i)}}}const Ue=Object.assign(J(HTMLElement),{from(s){return J(s)},define(s,e){return new F(s,e).define().type}});function We(s,e){return s instanceof Function?s(e):s}const X=new Set,$=new Map,Qe=s=>(e="vwc")=>{const t=n=>`${e}-${n}`,i=n=>{const r=t(n.name);let o=n.type;if(o.componentName=n.name,X.has(r))return;$.has(o)&&$.get(o)!==r&&(o=class extends o{}),X.add(r),$.set(o,r);for(const l of n.dependencies)i(l);const a=new Map([[n.type,r],...n.dependencies.map(l=>[l.type,t(l.name)])]),c={tagFor(l){if(!a.has(l))throw new Error(`Could not get tag for ${l.name} as it is not a dependency of ${n.name}.`);return a.get(l)},tagForNonDependency(l){return t(l)}};new F(o,{...n.options,template:We(n.template,c),name:`${e}-${n.name}`}).define()};i(s)},Ke=(s,e,t,i,n)=>({name:s,type:e,template:t,dependencies:i,options:n}),Y=new WeakMap,A=s=>{let e=Y.get(s);return e||(e=[],Y.set(s,e)),e},Ge=(s,e)=>{A(s).push(e)},Je=(s,e)=>{A(s).splice(A(s).indexOf(e),1)},Xe=(s,e)=>{A(s).forEach(t=>t(s,e))},Ye=s=>s==="delegate",Z=s=>`vvd${s.charAt(0).toUpperCase()}${s.slice(1)}`,be=(s,e)=>{if(Ye(s._vividAriaBehaviour)){const t=s[e];s[`_${e}`]=null,s.removeAttribute(N(e)),s[`_${e}`]=t,s[e]!==null?s.dataset[Z(e)]=s[e]:delete s.dataset[Z(e)]}else u.setAttribute(s,N(e),s[e])},B=new WeakMap,Ze=(s,e)=>{const t=B.get(s);t?t.add(e):B.set(s,new Set([e]))},et=(s,e)=>{s.isConnected?be(s,e):Ze(s,e)},tt=s=>{const e=B.get(s);if(e){for(const t of e)be(s,t);B.delete(s)}},L=["role","ariaAtomic","ariaAutoComplete","ariaBusy","ariaChecked","ariaColCount","ariaColIndex","ariaColIndexText","ariaColSpan","ariaCurrent","ariaDescription","ariaDisabled","ariaExpanded","ariaHasPopup","ariaHidden","ariaInvalid","ariaKeyShortcuts","ariaLabel","ariaLevel","ariaLive","ariaModal","ariaMultiLine","ariaMultiSelectable","ariaOrientation","ariaPlaceholder","ariaPosInSet","ariaPressed","ariaReadOnly","ariaRequired","ariaRoleDescription","ariaRowCount","ariaRowIndex","ariaRowIndexText","ariaRowSpan","ariaSelected","ariaSetSize","ariaSort","ariaValueMax","ariaValueMin","ariaValueNow","ariaValueText","ariaRelevant"],N=s=>s.replace("aria","aria-").toLowerCase(),st=s=>{class e extends s{constructor(...i){super(...i),this._vividAriaBehaviour="default";for(const n of L)this[`_${n}`]=null}connectedCallback(){super.connectedCallback(),tt(this)}}for(const t of L)ue({attribute:N(t),mode:"fromView"})(e.prototype,t),e.prototype[`${t}Changed`]=function(){et(this,t),this._vividAriaBehaviour!=="default"&&Xe(this,t)};return e},pe=R(),it=s=>(e,t)=>{pe(e.constructor).push({newPropertyName:t,...s})},nt=s=>{class e extends s{#e(i){let n=!1,r=!1;const o=h=>r&&i.fromDeprecated(h[i.deprecatedPropertyName])===h[i.newPropertyName],a=h=>n&&i.toDeprecated&&i.toDeprecated(h[i.newPropertyName])===h[i.deprecatedPropertyName],c={handleChange(h,d){if(d===i.newPropertyName){if(n=!0,!i.toDeprecated||o(h))return;h[i.deprecatedPropertyName]=i.toDeprecated(h[i.newPropertyName])}if(d===i.deprecatedPropertyName){if(r=!0,a(h))return;h[i.newPropertyName]=i.fromDeprecated(h[i.deprecatedPropertyName])}}},l=b.getNotifier(this);l.subscribe(c,i.newPropertyName),l.subscribe(c,i.deprecatedPropertyName)}constructor(...i){super(...i);for(const n of pe(this.constructor))this.#e(n)}}return e};class rt extends st(nt(Ue)){static{this.VIVID_VERSION="5.1.0"}connectedCallback(){super.connectedCallback();const e=this.constructor.componentName;this.setAttribute("data-vvd-component",e)}}exports.AttachedBehaviorHTMLDirective=ye;exports.DOM=u;exports.ElementStyles=p;exports.HTMLDirective=k;exports.HTMLView=oe;exports.Observable=b;exports.SubscriberSet=x;exports.VividElement=rt;exports.ariaAttributeName=N;exports.ariaMixinProperties=L;exports.attr=ue;exports.createRegisterFunction=Qe;exports.defaultExecutionContext=C;exports.defineVividComponent=Ke;exports.emptyArray=ge;exports.html=Pe;exports.nullableNumberConverter=ze;exports.observable=ve;exports.replaces=it;exports.subscribeToAriaPropertyChanges=Ge;exports.unsubscribeFromAriaPropertyChanges=Je;exports.volatile=me;
+"use strict";const v=function(){if(typeof globalThis<"u")return globalThis;if(typeof global<"u")return global;if(typeof self<"u")return self;if(typeof window<"u")return window;try{return new Function("return this")()}catch{return{}}}();v.trustedTypes===void 0&&(v.trustedTypes={createPolicy:(s,e)=>e});const ee={configurable:!1,enumerable:!1,writable:!1};v.FAST===void 0&&Reflect.defineProperty(v,"FAST",Object.assign({value:Object.create(null)},ee));const S=v.FAST;if(S.getById===void 0){const s=Object.create(null);Reflect.defineProperty(S,"getById",Object.assign({value(e,t){let i=s[e];return i===void 0&&(i=t?s[e]=t():null),i}},ee))}const ge=Object.freeze([]);function R(){const s=new WeakMap;return function(e){let t=s.get(e);if(t===void 0){let i=Reflect.getPrototypeOf(e);for(;t===void 0&&i!==null;)t=s.get(i),i=Reflect.getPrototypeOf(i);t=t===void 0?[]:t.slice(0),s.set(e,t)}return t}}const M=v.FAST.getById(1,()=>{const s=[],e=[];function t(){if(e.length)throw e.shift()}function i(o){try{o.call()}catch(a){e.push(a),setTimeout(t,0)}}function n(){let a=0;for(;a<s.length;)if(i(s[a]),a++,a>1024){for(let c=0,l=s.length-a;c<l;c++)s[c]=s[c+a];s.length-=a,a=0}s.length=0}function r(o){s.length<1&&v.requestAnimationFrame(n),s.push(o)}return Object.freeze({enqueue:r,process:n})}),te=v.trustedTypes.createPolicy("fast-html",{createHTML:s=>s});let E=te;const y=`fast-${Math.random().toString(36).substring(2,8)}`,se=`${y}{`,_=`}${y}`,u=Object.freeze({supportsAdoptedStyleSheets:Array.isArray(document.adoptedStyleSheets)&&"replace"in CSSStyleSheet.prototype,setHTMLPolicy(s){if(E!==te)throw new Error("The HTML policy can only be set once.");E=s},createHTML(s){return E.createHTML(s)},isMarker(s){return s&&s.nodeType===8&&s.data.startsWith(y)},extractDirectiveIndexFromMarker(s){return parseInt(s.data.replace(`${y}:`,""))},createInterpolationPlaceholder(s){return`${se}${s}${_}`},createCustomAttributePlaceholder(s,e){return`${s}="${this.createInterpolationPlaceholder(e)}"`},createBlockPlaceholder(s){return`<!--${y}:${s}-->`},queueUpdate:M.enqueue,processUpdates:M.process,nextUpdate(){return new Promise(M.enqueue)},setAttribute(s,e,t){t==null?s.removeAttribute(e):s.setAttribute(e,t)},setBooleanAttribute(s,e,t){t?s.setAttribute(e,""):s.removeAttribute(e)},removeChildNodes(s){for(let e=s.firstChild;e!==null;e=s.firstChild)s.removeChild(e)},createTemplateWalker(s){return document.createTreeWalker(s,133,null,!1)}});class x{constructor(e,t){this.sub1=void 0,this.sub2=void 0,this.spillover=void 0,this.source=e,this.sub1=t}has(e){return this.spillover===void 0?this.sub1===e||this.sub2===e:this.spillover.indexOf(e)!==-1}subscribe(e){const t=this.spillover;if(t===void 0){if(this.has(e))return;if(this.sub1===void 0){this.sub1=e;return}if(this.sub2===void 0){this.sub2=e;return}this.spillover=[this.sub1,this.sub2,e],this.sub1=void 0,this.sub2=void 0}else t.indexOf(e)===-1&&t.push(e)}unsubscribe(e){const t=this.spillover;if(t===void 0)this.sub1===e?this.sub1=void 0:this.sub2===e&&(this.sub2=void 0);else{const i=t.indexOf(e);i!==-1&&t.splice(i,1)}}notify(e){const t=this.spillover,i=this.source;if(t===void 0){const n=this.sub1,r=this.sub2;n!==void 0&&n.handleChange(i,e),r!==void 0&&r.handleChange(i,e)}else for(let n=0,r=t.length;n<r;++n)t[n].handleChange(i,e)}}class ie{constructor(e){this.subscribers={},this.sourceSubscribers=null,this.source=e}notify(e){var t;const i=this.subscribers[e];i!==void 0&&i.notify(e),(t=this.sourceSubscribers)===null||t===void 0||t.notify(e)}subscribe(e,t){var i;if(t){let n=this.subscribers[t];n===void 0&&(this.subscribers[t]=n=new x(this.source)),n.subscribe(e)}else this.sourceSubscribers=(i=this.sourceSubscribers)!==null&&i!==void 0?i:new x(this.source),this.sourceSubscribers.subscribe(e)}unsubscribe(e,t){var i;if(t){const n=this.subscribers[t];n!==void 0&&n.unsubscribe(e)}else(i=this.sourceSubscribers)===null||i===void 0||i.unsubscribe(e)}}const b=S.getById(2,()=>{const s=/(:|&&|\|\||if)/,e=new WeakMap,t=u.queueUpdate;let i,n=l=>{throw new Error("Must call enableArrayObservation before observing arrays.")};function r(l){let h=l.$fastController||e.get(l);return h===void 0&&(Array.isArray(l)?h=n(l):e.set(l,h=new ie(l))),h}const o=R();class a{constructor(h){this.name=h,this.field=`_${h}`,this.callback=`${h}Changed`}getValue(h){return i!==void 0&&i.watch(h,this.name),h[this.field]}setValue(h,d){const f=this.field,m=h[f];if(m!==d){h[f]=d;const g=h[this.callback];typeof g=="function"&&g.call(h,m,d),r(h).notify(this.name)}}}class c extends x{constructor(h,d,f=!1){super(h,d),this.binding=h,this.isVolatileBinding=f,this.needsRefresh=!0,this.needsQueue=!0,this.first=this,this.last=null,this.propertySource=void 0,this.propertyName=void 0,this.notifier=void 0,this.next=void 0}observe(h,d){this.needsRefresh&&this.last!==null&&this.disconnect();const f=i;i=this.needsRefresh?this:void 0,this.needsRefresh=this.isVolatileBinding;const m=this.binding(h,d);return i=f,m}disconnect(){if(this.last!==null){let h=this.first;for(;h!==void 0;)h.notifier.unsubscribe(this,h.propertyName),h=h.next;this.last=null,this.needsRefresh=this.needsQueue=!0}}watch(h,d){const f=this.last,m=r(h),g=f===null?this.first:{};if(g.propertySource=h,g.propertyName=d,g.notifier=m,m.subscribe(this,d),f!==null){if(!this.needsRefresh){let q;i=void 0,q=f.propertySource[f.propertyName],i=this,h===q&&(this.needsRefresh=!0)}f.next=g}this.last=g}handleChange(){this.needsQueue&&(this.needsQueue=!1,t(this))}call(){this.last!==null&&(this.needsQueue=!0,this.notify(this))}records(){let h=this.first;return{next:()=>{const d=h;return d===void 0?{value:void 0,done:!0}:(h=h.next,{value:d,done:!1})},[Symbol.iterator]:function(){return this}}}}return Object.freeze({setArrayObserverFactory(l){n=l},getNotifier:r,track(l,h){i!==void 0&&i.watch(l,h)},trackVolatile(){i!==void 0&&(i.needsRefresh=!0)},notify(l,h){r(l).notify(h)},defineProperty(l,h){typeof h=="string"&&(h=new a(h)),o(l).push(h),Reflect.defineProperty(l,h.name,{enumerable:!0,get:function(){return h.getValue(this)},set:function(d){h.setValue(this,d)}})},getAccessors:o,binding(l,h,d=this.isVolatileBinding(l)){return new c(l,h,d)},isVolatileBinding(l){return s.test(l.toString())}})});function ve(s,e){b.defineProperty(s,e)}function me(s,e,t){return Object.assign({},t,{get:function(){return b.trackVolatile(),t.get.apply(this)}})}const U=S.getById(3,()=>{let s=null;return{get(){return s},set(e){s=e}}});class w{constructor(){this.index=0,this.length=0,this.parent=null,this.parentContext=null}get event(){return U.get()}get isEven(){return this.index%2===0}get isOdd(){return this.index%2!==0}get isFirst(){return this.index===0}get isInMiddle(){return!this.isFirst&&!this.isLast}get isLast(){return this.index===this.length-1}static setEvent(e){U.set(e)}}b.defineProperty(w.prototype,"index");b.defineProperty(w.prototype,"length");const C=Object.seal(new w);class k{constructor(){this.targetIndex=0}}class ne extends k{constructor(){super(...arguments),this.createPlaceholder=u.createInterpolationPlaceholder}}class ye extends k{constructor(e,t,i){super(),this.name=e,this.behavior=t,this.options=i}createPlaceholder(e){return u.createCustomAttributePlaceholder(this.name,e)}createBehavior(e){return new this.behavior(e,this.options)}}function Ce(s,e){this.source=s,this.context=e,this.bindingObserver===null&&(this.bindingObserver=b.binding(this.binding,this,this.isBindingVolatile)),this.updateTarget(this.bindingObserver.observe(s,e))}function Se(s,e){this.source=s,this.context=e,this.target.addEventListener(this.targetName,this)}function we(){this.bindingObserver.disconnect(),this.source=null,this.context=null}function xe(){this.bindingObserver.disconnect(),this.source=null,this.context=null;const s=this.target.$fastView;s!==void 0&&s.isComposed&&(s.unbind(),s.needsBindOnly=!0)}function Te(){this.target.removeEventListener(this.targetName,this),this.source=null,this.context=null}function Ae(s){u.setAttribute(this.target,this.targetName,s)}function Be(s){u.setBooleanAttribute(this.target,this.targetName,s)}function Ne(s){if(s==null&&(s=""),s.create){this.target.textContent="";let e=this.target.$fastView;e===void 0?e=s.create():this.target.$fastTemplate!==s&&(e.isComposed&&(e.remove(),e.unbind()),e=s.create()),e.isComposed?e.needsBindOnly&&(e.needsBindOnly=!1,e.bind(this.source,this.context)):(e.isComposed=!0,e.bind(this.source,this.context),e.insertBefore(this.target),this.target.$fastView=e,this.target.$fastTemplate=s)}else{const e=this.target.$fastView;e!==void 0&&e.isComposed&&(e.isComposed=!1,e.remove(),e.needsBindOnly?e.needsBindOnly=!1:e.unbind()),this.target.textContent=s}}function ke(s){this.target[this.targetName]=s}function Fe(s){const e=this.classVersions||Object.create(null),t=this.target;let i=this.version||0;if(s!=null&&s.length){const n=s.split(/\s+/);for(let r=0,o=n.length;r<o;++r){const a=n[r];a!==""&&(e[a]=i,t.classList.add(a))}}if(this.classVersions=e,this.version=i+1,i!==0){i-=1;for(const n in e)e[n]===i&&t.classList.remove(n)}}class H extends ne{constructor(e){super(),this.binding=e,this.bind=Ce,this.unbind=we,this.updateTarget=Ae,this.isBindingVolatile=b.isVolatileBinding(this.binding)}get targetName(){return this.originalTargetName}set targetName(e){if(this.originalTargetName=e,e!==void 0)switch(e[0]){case":":if(this.cleanedTargetName=e.substr(1),this.updateTarget=ke,this.cleanedTargetName==="innerHTML"){const t=this.binding;this.binding=(i,n)=>u.createHTML(t(i,n))}break;case"?":this.cleanedTargetName=e.substr(1),this.updateTarget=Be;break;case"@":this.cleanedTargetName=e.substr(1),this.bind=Se,this.unbind=Te;break;default:this.cleanedTargetName=e,e==="class"&&(this.updateTarget=Fe);break}}targetAtContent(){this.updateTarget=Ne,this.unbind=xe}createBehavior(e){return new Me(e,this.binding,this.isBindingVolatile,this.bind,this.unbind,this.updateTarget,this.cleanedTargetName)}}class Me{constructor(e,t,i,n,r,o,a){this.source=null,this.context=null,this.bindingObserver=null,this.target=e,this.binding=t,this.isBindingVolatile=i,this.bind=n,this.unbind=r,this.updateTarget=o,this.targetName=a}handleChange(){this.updateTarget(this.bindingObserver.observe(this.source,this.context))}handleEvent(e){w.setEvent(e);const t=this.binding(this.source,this.context);w.setEvent(null),t!==!0&&e.preventDefault()}}let O=null;class j{addFactory(e){e.targetIndex=this.targetIndex,this.behaviorFactories.push(e)}captureContentBinding(e){e.targetAtContent(),this.addFactory(e)}reset(){this.behaviorFactories=[],this.targetIndex=-1}release(){O=this}static borrow(e){const t=O||new j;return t.directives=e,t.reset(),O=null,t}}function Ee(s){if(s.length===1)return s[0];let e;const t=s.length,i=s.map(o=>typeof o=="string"?()=>o:(e=o.targetName||e,o.binding)),n=(o,a)=>{let c="";for(let l=0;l<t;++l)c+=i[l](o,a);return c},r=new H(n);return r.targetName=e,r}const Oe=_.length;function re(s,e){const t=e.split(se);if(t.length===1)return null;const i=[];for(let n=0,r=t.length;n<r;++n){const o=t[n],a=o.indexOf(_);let c;if(a===-1)c=o;else{const l=parseInt(o.substring(0,a));i.push(s.directives[l]),c=o.substring(a+Oe)}c!==""&&i.push(c)}return i}function W(s,e,t=!1){const i=e.attributes;for(let n=0,r=i.length;n<r;++n){const o=i[n],a=o.value,c=re(s,a);let l=null;c===null?t&&(l=new H(()=>a),l.targetName=o.name):l=Ee(c),l!==null&&(e.removeAttributeNode(o),n--,r--,s.addFactory(l))}}function Ie(s,e,t){const i=re(s,e.textContent);if(i!==null){let n=e;for(let r=0,o=i.length;r<o;++r){const a=i[r],c=r===0?e:n.parentNode.insertBefore(document.createTextNode(""),n.nextSibling);typeof a=="string"?c.textContent=a:(c.textContent=" ",s.captureContentBinding(a)),n=c,s.targetIndex++,c!==e&&t.nextNode()}s.targetIndex--}}function Ve(s,e){const t=s.content;document.adoptNode(t);const i=j.borrow(e);W(i,s,!0);const n=i.behaviorFactories;i.reset();const r=u.createTemplateWalker(t);let o;for(;o=r.nextNode();)switch(i.targetIndex++,o.nodeType){case 1:W(i,o);break;case 3:Ie(i,o,r);break;case 8:u.isMarker(o)&&i.addFactory(e[u.extractDirectiveIndexFromMarker(o)])}let a=0;(u.isMarker(t.firstChild)||t.childNodes.length===1&&e.length)&&(t.insertBefore(document.createComment(""),t.firstChild),a=-1);const c=i.behaviorFactories;return i.release(),{fragment:t,viewBehaviorFactories:c,hostBehaviorFactories:n,targetOffset:a}}const I=document.createRange();class oe{constructor(e,t){this.fragment=e,this.behaviors=t,this.source=null,this.context=null,this.firstChild=e.firstChild,this.lastChild=e.lastChild}appendTo(e){e.appendChild(this.fragment)}insertBefore(e){if(this.fragment.hasChildNodes())e.parentNode.insertBefore(this.fragment,e);else{const t=this.lastChild;if(e.previousSibling===t)return;const i=e.parentNode;let n=this.firstChild,r;for(;n!==t;)r=n.nextSibling,i.insertBefore(n,e),n=r;i.insertBefore(t,e)}}remove(){const e=this.fragment,t=this.lastChild;let i=this.firstChild,n;for(;i!==t;)n=i.nextSibling,e.appendChild(i),i=n;e.appendChild(t)}dispose(){const e=this.firstChild.parentNode,t=this.lastChild;let i=this.firstChild,n;for(;i!==t;)n=i.nextSibling,e.removeChild(i),i=n;e.removeChild(t);const r=this.behaviors,o=this.source;for(let a=0,c=r.length;a<c;++a)r[a].unbind(o)}bind(e,t){const i=this.behaviors;if(this.source!==e)if(this.source!==null){const n=this.source;this.source=e,this.context=t;for(let r=0,o=i.length;r<o;++r){const a=i[r];a.unbind(n),a.bind(e,t)}}else{this.source=e,this.context=t;for(let n=0,r=i.length;n<r;++n)i[n].bind(e,t)}}unbind(){if(this.source===null)return;const e=this.behaviors,t=this.source;for(let i=0,n=e.length;i<n;++i)e[i].unbind(t);this.source=null}static disposeContiguousBatch(e){if(e.length!==0){I.setStartBefore(e[0].firstChild),I.setEndAfter(e[e.length-1].lastChild),I.deleteContents();for(let t=0,i=e.length;t<i;++t){const n=e[t],r=n.behaviors,o=n.source;for(let a=0,c=r.length;a<c;++a)r[a].unbind(o)}}}}class Q{constructor(e,t){this.behaviorCount=0,this.hasHostBehaviors=!1,this.fragment=null,this.targetOffset=0,this.viewBehaviorFactories=null,this.hostBehaviorFactories=null,this.html=e,this.directives=t}create(e){if(this.fragment===null){let l;const h=this.html;if(typeof h=="string"){l=document.createElement("template"),l.innerHTML=u.createHTML(h);const f=l.content.firstElementChild;f!==null&&f.tagName==="TEMPLATE"&&(l=f)}else l=h;const d=Ve(l,this.directives);this.fragment=d.fragment,this.viewBehaviorFactories=d.viewBehaviorFactories,this.hostBehaviorFactories=d.hostBehaviorFactories,this.targetOffset=d.targetOffset,this.behaviorCount=this.viewBehaviorFactories.length+this.hostBehaviorFactories.length,this.hasHostBehaviors=this.hostBehaviorFactories.length>0}const t=this.fragment.cloneNode(!0),i=this.viewBehaviorFactories,n=new Array(this.behaviorCount),r=u.createTemplateWalker(t);let o=0,a=this.targetOffset,c=r.nextNode();for(let l=i.length;o<l;++o){const h=i[o],d=h.targetIndex;for(;c!==null;)if(a===d){n[o]=h.createBehavior(c);break}else c=r.nextNode(),a++}if(this.hasHostBehaviors){const l=this.hostBehaviorFactories;for(let h=0,d=l.length;h<d;++h,++o)n[o]=l[h].createBehavior(e)}return new oe(t,n)}render(e,t,i){typeof t=="string"&&(t=document.getElementById(t)),i===void 0&&(i=t);const n=this.create(i);return n.bind(e,C),n.appendTo(t),n}}const $e=/([ \x09\x0a\x0c\x0d])([^\0-\x1F\x7F-\x9F "'>=/]+)([ \x09\x0a\x0c\x0d]*=[ \x09\x0a\x0c\x0d]*(?:[^ \x09\x0a\x0c\x0d"'`<>=]*|"[^"]*|'[^']*))$/;function Pe(s,...e){const t=[];let i="";for(let n=0,r=s.length-1;n<r;++n){const o=s[n];let a=e[n];if(i+=o,a instanceof Q){const c=a;a=()=>c}if(typeof a=="function"&&(a=new H(a)),a instanceof ne){const c=$e.exec(o);c!==null&&(a.targetName=c[2])}a instanceof k?(i+=a.createPlaceholder(t.length),t.push(a)):i+=a}return i+=s[s.length-1],new Q(i,t)}class p{constructor(){this.targets=new WeakSet}addStylesTo(e){this.targets.add(e)}removeStylesFrom(e){this.targets.delete(e)}isAttachedTo(e){return this.targets.has(e)}withBehaviors(...e){return this.behaviors=this.behaviors===null?e:this.behaviors.concat(e),this}}p.create=(()=>{if(u.supportsAdoptedStyleSheets){const s=new Map;return e=>new Re(e,s)}return s=>new je(s)})();function D(s){return s.map(e=>e instanceof p?D(e.styles):[e]).reduce((e,t)=>e.concat(t),[])}function ae(s){return s.map(e=>e instanceof p?e.behaviors:null).reduce((e,t)=>t===null?e:(e===null&&(e=[]),e.concat(t)),null)}const Le=Symbol("prependToAdoptedStyleSheets");function le(s){const e=[],t=[];return s.forEach(i=>(i[Le]?e:t).push(i)),{prepend:e,append:t}}let he=(s,e)=>{const{prepend:t,append:i}=le(e);s.adoptedStyleSheets=[...t,...s.adoptedStyleSheets,...i]},ce=(s,e)=>{s.adoptedStyleSheets=s.adoptedStyleSheets.filter(t=>e.indexOf(t)===-1)};if(u.supportsAdoptedStyleSheets)try{document.adoptedStyleSheets.push(),document.adoptedStyleSheets.splice(),he=(s,e)=>{const{prepend:t,append:i}=le(e);s.adoptedStyleSheets.splice(0,0,...t),s.adoptedStyleSheets.push(...i)},ce=(s,e)=>{for(const t of e){const i=s.adoptedStyleSheets.indexOf(t);i!==-1&&s.adoptedStyleSheets.splice(i,1)}}}catch{}class Re extends p{constructor(e,t){super(),this.styles=e,this.styleSheetCache=t,this._styleSheets=void 0,this.behaviors=ae(e)}get styleSheets(){if(this._styleSheets===void 0){const e=this.styles,t=this.styleSheetCache;this._styleSheets=D(e).map(i=>{if(i instanceof CSSStyleSheet)return i;let n=t.get(i);return n===void 0&&(n=new CSSStyleSheet,n.replaceSync(i),t.set(i,n)),n})}return this._styleSheets}addStylesTo(e){he(e,this.styleSheets),super.addStylesTo(e)}removeStylesFrom(e){ce(e,this.styleSheets),super.removeStylesFrom(e)}}let _e=0;function He(){return`fast-style-class-${++_e}`}class je extends p{constructor(e){super(),this.styles=e,this.behaviors=null,this.behaviors=ae(e),this.styleSheets=D(e),this.styleClass=He()}addStylesTo(e){const t=this.styleSheets,i=this.styleClass;e=this.normalizeTarget(e);for(let n=0;n<t.length;n++){const r=document.createElement("style");r.innerHTML=t[n],r.className=i,e.append(r)}super.addStylesTo(e)}removeStylesFrom(e){e=this.normalizeTarget(e);const t=e.querySelectorAll(`.${this.styleClass}`);for(let i=0,n=t.length;i<n;++i)e.removeChild(t[i]);super.removeStylesFrom(e)}isAttachedTo(e){return super.isAttachedTo(this.normalizeTarget(e))}normalizeTarget(e){return e===document?document.body:e}}const de=Object.freeze({locate:R()}),De={toView(s){return s?"true":"false"},fromView(s){return!(s==null||s==="false"||s===!1||s===0)}},ze={toView(s){if(s==null)return null;const e=s*1;return isNaN(e)?null:e.toString()},fromView(s){if(s==null)return null;const e=s*1;return isNaN(e)?null:e}};class T{constructor(e,t,i=t.toLowerCase(),n="reflect",r){this.guards=new Set,this.Owner=e,this.name=t,this.attribute=i,this.mode=n,this.converter=r,this.fieldName=`_${t}`,this.callbackName=`${t}Changed`,this.hasCallback=this.callbackName in e.prototype,n==="boolean"&&r===void 0&&(this.converter=De)}setValue(e,t){const i=e[this.fieldName],n=this.converter;n!==void 0&&(t=n.fromView(t)),i!==t&&(e[this.fieldName]=t,this.tryReflectToAttribute(e),this.hasCallback&&e[this.callbackName](i,t),e.$fastController.notify(this.name))}getValue(e){return b.track(e,this.name),e[this.fieldName]}onAttributeChangedCallback(e,t){this.guards.has(e)||(this.guards.add(e),this.setValue(e,t),this.guards.delete(e))}tryReflectToAttribute(e){const t=this.mode,i=this.guards;i.has(e)||t==="fromView"||u.queueUpdate(()=>{i.add(e);const n=e[this.fieldName];switch(t){case"reflect":const r=this.converter;u.setAttribute(e,this.attribute,r!==void 0?r.toView(n):n);break;case"boolean":u.setBooleanAttribute(e,this.attribute,n);break}i.delete(e)})}static collect(e,...t){const i=[];t.push(de.locate(e));for(let n=0,r=t.length;n<r;++n){const o=t[n];if(o!==void 0)for(let a=0,c=o.length;a<c;++a){const l=o[a];typeof l=="string"?i.push(new T(e,l)):i.push(new T(e,l.property,l.attribute,l.mode,l.converter))}}return i}}function ue(s,e){let t;function i(n,r){arguments.length>1&&(t.property=r),de.locate(n.constructor).push(t)}if(arguments.length>1){t={},i(s,e);return}return t=s===void 0?{}:s,i}const K={mode:"open"},G={},P=S.getById(4,()=>{const s=new Map;return Object.freeze({register(e){return s.has(e.type)?!1:(s.set(e.type,e),!0)},getByType(e){return s.get(e)}})});class F{constructor(e,t=e.definition){typeof t=="string"&&(t={name:t}),this.type=e,this.name=t.name,this.template=t.template;const i=T.collect(e,t.attributes),n=new Array(i.length),r={},o={};for(let a=0,c=i.length;a<c;++a){const l=i[a];n[a]=l.attribute,r[l.name]=l,o[l.attribute]=l}this.attributes=i,this.observedAttributes=n,this.propertyLookup=r,this.attributeLookup=o,this.shadowOptions=t.shadowOptions===void 0?K:t.shadowOptions===null?void 0:Object.assign(Object.assign({},K),t.shadowOptions),this.elementOptions=t.elementOptions===void 0?G:Object.assign(Object.assign({},G),t.elementOptions),this.styles=t.styles===void 0?void 0:Array.isArray(t.styles)?p.create(t.styles):t.styles instanceof p?t.styles:p.create([t.styles])}get isDefined(){return!!P.getByType(this.type)}define(e=customElements){const t=this.type;if(P.register(this)){const i=this.attributes,n=t.prototype;for(let r=0,o=i.length;r<o;++r)b.defineProperty(n,i[r]);Reflect.defineProperty(t,"observedAttributes",{value:this.observedAttributes,enumerable:!0})}return e.get(this.name)||e.define(this.name,t,this.elementOptions),this}}F.forType=P.getByType;const fe=new WeakMap,qe={bubbles:!0,composed:!0,cancelable:!0};function V(s){return s.shadowRoot||fe.get(s)||null}class z extends ie{constructor(e,t){super(e),this.boundObservables=null,this.behaviors=null,this.needsInitialization=!0,this._template=null,this._styles=null,this._isConnected=!1,this.$fastController=this,this.view=null,this.element=e,this.definition=t;const i=t.shadowOptions;if(i!==void 0){const r=e.attachShadow(i);i.mode==="closed"&&fe.set(e,r)}const n=b.getAccessors(e);if(n.length>0){const r=this.boundObservables=Object.create(null);for(let o=0,a=n.length;o<a;++o){const c=n[o].name,l=e[c];l!==void 0&&(delete e[c],r[c]=l)}}}get isConnected(){return b.track(this,"isConnected"),this._isConnected}setIsConnected(e){this._isConnected=e,b.notify(this,"isConnected")}get template(){return this._template}set template(e){this._template!==e&&(this._template=e,this.needsInitialization||this.renderTemplate(e))}get styles(){return this._styles}set styles(e){this._styles!==e&&(this._styles!==null&&this.removeStyles(this._styles),this._styles=e,!this.needsInitialization&&e!==null&&this.addStyles(e))}addStyles(e){const t=V(this.element)||this.element.getRootNode();if(e instanceof HTMLStyleElement)t.append(e);else if(!e.isAttachedTo(t)){const i=e.behaviors;e.addStylesTo(t),i!==null&&this.addBehaviors(i)}}removeStyles(e){const t=V(this.element)||this.element.getRootNode();if(e instanceof HTMLStyleElement)t.removeChild(e);else if(e.isAttachedTo(t)){const i=e.behaviors;e.removeStylesFrom(t),i!==null&&this.removeBehaviors(i)}}addBehaviors(e){const t=this.behaviors||(this.behaviors=new Map),i=e.length,n=[];for(let r=0;r<i;++r){const o=e[r];t.has(o)?t.set(o,t.get(o)+1):(t.set(o,1),n.push(o))}if(this._isConnected){const r=this.element;for(let o=0;o<n.length;++o)n[o].bind(r,C)}}removeBehaviors(e,t=!1){const i=this.behaviors;if(i===null)return;const n=e.length,r=[];for(let o=0;o<n;++o){const a=e[o];if(i.has(a)){const c=i.get(a)-1;c===0||t?i.delete(a)&&r.push(a):i.set(a,c)}}if(this._isConnected){const o=this.element;for(let a=0;a<r.length;++a)r[a].unbind(o)}}onConnectedCallback(){if(this._isConnected)return;const e=this.element;this.needsInitialization?this.finishInitialization():this.view!==null&&this.view.bind(e,C);const t=this.behaviors;if(t!==null)for(const[i]of t)i.bind(e,C);this.setIsConnected(!0)}onDisconnectedCallback(){if(!this._isConnected)return;this.setIsConnected(!1);const e=this.view;e!==null&&e.unbind();const t=this.behaviors;if(t!==null){const i=this.element;for(const[n]of t)n.unbind(i)}}onAttributeChangedCallback(e,t,i){const n=this.definition.attributeLookup[e];n!==void 0&&n.onAttributeChangedCallback(this.element,i)}emit(e,t,i){return this._isConnected?this.element.dispatchEvent(new CustomEvent(e,Object.assign(Object.assign({detail:t},qe),i))):!1}finishInitialization(){const e=this.element,t=this.boundObservables;if(t!==null){const n=Object.keys(t);for(let r=0,o=n.length;r<o;++r){const a=n[r];e[a]=t[a]}this.boundObservables=null}const i=this.definition;this._template===null&&(this.element.resolveTemplate?this._template=this.element.resolveTemplate():i.template&&(this._template=i.template||null)),this._template!==null&&this.renderTemplate(this._template),this._styles===null&&(this.element.resolveStyles?this._styles=this.element.resolveStyles():i.styles&&(this._styles=i.styles||null)),this._styles!==null&&this.addStyles(this._styles),this.needsInitialization=!1}renderTemplate(e){const t=this.element,i=V(t)||t;this.view!==null?(this.view.dispose(),this.view=null):this.needsInitialization||u.removeChildNodes(i),e&&(this.view=e.render(t,i,t))}static forCustomElement(e){const t=e.$fastController;if(t!==void 0)return t;const i=F.forType(e.constructor);if(i===void 0)throw new Error("Missing FASTElement definition.");return e.$fastController=new z(e,i)}}function J(s){return class extends s{constructor(){super(),z.forCustomElement(this)}$emit(e,t,i){return this.$fastController.emit(e,t,i)}connectedCallback(){this.$fastController.onConnectedCallback()}disconnectedCallback(){this.$fastController.onDisconnectedCallback()}attributeChangedCallback(e,t,i){this.$fastController.onAttributeChangedCallback(e,t,i)}}}const Ue=Object.assign(J(HTMLElement),{from(s){return J(s)},define(s,e){return new F(s,e).define().type}});function We(s,e){return s instanceof Function?s(e):s}const X=new Set,$=new Map,Qe=s=>(e="vwc")=>{const t=n=>`${e}-${n}`,i=n=>{const r=t(n.name);let o=n.type;if(o.componentName=n.name,X.has(r))return;$.has(o)&&$.get(o)!==r&&(o=class extends o{}),X.add(r),$.set(o,r);for(const l of n.dependencies)i(l);const a=new Map([[n.type,r],...n.dependencies.map(l=>[l.type,t(l.name)])]),c={tagFor(l){if(!a.has(l))throw new Error(`Could not get tag for ${l.name} as it is not a dependency of ${n.name}.`);return a.get(l)},tagForNonDependency(l){return t(l)}};new F(o,{...n.options,template:We(n.template,c),name:`${e}-${n.name}`}).define()};i(s)},Ke=(s,e,t,i,n)=>({name:s,type:e,template:t,dependencies:i,options:n}),Y=new WeakMap,A=s=>{let e=Y.get(s);return e||(e=[],Y.set(s,e)),e},Ge=(s,e)=>{A(s).push(e)},Je=(s,e)=>{A(s).splice(A(s).indexOf(e),1)},Xe=(s,e)=>{A(s).forEach(t=>t(s,e))},Ye=s=>s==="delegate",Z=s=>`vvd${s.charAt(0).toUpperCase()}${s.slice(1)}`,be=(s,e)=>{if(Ye(s._vividAriaBehaviour)){const t=s[e];s[`_${e}`]=null,s.removeAttribute(N(e)),s[`_${e}`]=t,s[e]!==null?s.dataset[Z(e)]=s[e]:delete s.dataset[Z(e)]}else u.setAttribute(s,N(e),s[e])},B=new WeakMap,Ze=(s,e)=>{const t=B.get(s);t?t.add(e):B.set(s,new Set([e]))},et=(s,e)=>{s.isConnected?be(s,e):Ze(s,e)},tt=s=>{const e=B.get(s);if(e){for(const t of e)be(s,t);B.delete(s)}},L=["role","ariaAtomic","ariaAutoComplete","ariaBusy","ariaChecked","ariaColCount","ariaColIndex","ariaColIndexText","ariaColSpan","ariaCurrent","ariaDescription","ariaDisabled","ariaExpanded","ariaHasPopup","ariaHidden","ariaInvalid","ariaKeyShortcuts","ariaLabel","ariaLevel","ariaLive","ariaModal","ariaMultiLine","ariaMultiSelectable","ariaOrientation","ariaPlaceholder","ariaPosInSet","ariaPressed","ariaReadOnly","ariaRequired","ariaRoleDescription","ariaRowCount","ariaRowIndex","ariaRowIndexText","ariaRowSpan","ariaSelected","ariaSetSize","ariaSort","ariaValueMax","ariaValueMin","ariaValueNow","ariaValueText","ariaRelevant"],N=s=>s.replace("aria","aria-").toLowerCase(),st=s=>{class e extends s{constructor(...i){super(...i),this._vividAriaBehaviour="default";for(const n of L)this[`_${n}`]=null}connectedCallback(){super.connectedCallback(),tt(this)}}for(const t of L)ue({attribute:N(t),mode:"fromView"})(e.prototype,t),e.prototype[`${t}Changed`]=function(){et(this,t),this._vividAriaBehaviour!=="default"&&Xe(this,t)};return e},pe=R(),it=s=>(e,t)=>{pe(e.constructor).push({newPropertyName:t,...s})},nt=s=>{class e extends s{#e(i){let n=!1,r=!1;const o=h=>r&&i.fromDeprecated(h[i.deprecatedPropertyName])===h[i.newPropertyName],a=h=>n&&i.toDeprecated&&i.toDeprecated(h[i.newPropertyName])===h[i.deprecatedPropertyName],c={handleChange(h,d){if(d===i.newPropertyName){if(n=!0,!i.toDeprecated||o(h))return;h[i.deprecatedPropertyName]=i.toDeprecated(h[i.newPropertyName])}if(d===i.deprecatedPropertyName){if(r=!0,a(h))return;h[i.newPropertyName]=i.fromDeprecated(h[i.deprecatedPropertyName])}}},l=b.getNotifier(this);l.subscribe(c,i.newPropertyName),l.subscribe(c,i.deprecatedPropertyName)}constructor(...i){super(...i);for(const n of pe(this.constructor))this.#e(n)}}return e};class rt extends st(nt(Ue)){static{this.VIVID_VERSION="5.2.0"}connectedCallback(){super.connectedCallback();const e=this.constructor.componentName;this.setAttribute("data-vvd-component",e)}}exports.AttachedBehaviorHTMLDirective=ye;exports.DOM=u;exports.ElementStyles=p;exports.HTMLDirective=k;exports.HTMLView=oe;exports.Observable=b;exports.SubscriberSet=x;exports.VividElement=rt;exports.ariaAttributeName=N;exports.ariaMixinProperties=L;exports.attr=ue;exports.createRegisterFunction=Qe;exports.defaultExecutionContext=C;exports.defineVividComponent=Ke;exports.emptyArray=ge;exports.html=Pe;exports.nullableNumberConverter=ze;exports.observable=ve;exports.replaces=it;exports.subscribeToAriaPropertyChanges=Ge;exports.unsubscribeFromAriaPropertyChanges=Je;exports.volatile=me;

package/bundled/vivid-element.js

@@ -1723,7 +1723,7 @@ const J = /* @__PURE__ */ new Set(), M = /* @__PURE__ */ new Map(), et = (s) =>
 };
 class rt extends We(Qe(Le)) {
   static {
-    this.VIVID_VERSION = "5.1.0";
+    this.VIVID_VERSION = "5.2.0";
   }
   /**
    * Add data-vvd-component attribute with component name globally,

package/bundled/with-contextual-help.cjs

@@ -1 +1 @@
-"use strict";const a=require("./vivid-element.cjs");var s=Object.defineProperty,u=(l,e,n,p)=>{for(var t=void 0,o=l.length-1,r;o>=0;o--)(r=l[o])&&(t=r(e,n,t)||t);return t&&s(e,n,t),t};const i=l=>{class e extends l{get _hasContextualHelp(){return(this._contextualHelpSlottedContent?.length??0)>0}}return u([a.observable],e.prototype,"_contextualHelpSlottedContent"),e};exports.WithContextualHelp=i;
+"use strict";const s=require("./vivid-element.cjs");var p=Object.defineProperty,u=(n,e,o,a)=>{for(var t=void 0,l=n.length-1,r;l>=0;l--)(r=n[l])&&(t=r(e,o,t)||t);return t&&p(e,o,t),t};const c=n=>{class e extends n{get _hasContextualHelp(){return(this._contextualHelpSlottedContent?.length??0)>0}_isFromContextualHelp(a){return a.composedPath().some(l=>l?.closest?.('[slot="contextual-help"],[data-vvd-component="contextual-help"]'))}}return u([s.observable],e.prototype,"_contextualHelpSlottedContent"),e};exports.WithContextualHelp=c;

package/bundled/with-contextual-help.js

@@ -1,10 +1,10 @@
-import { o as a } from "./vivid-element.js";
-var p = Object.defineProperty, s = (l, e, n, u) => {
+import { o as p } from "./vivid-element.js";
+var s = Object.defineProperty, u = (l, e, n, a) => {
   for (var t = void 0, o = l.length - 1, r; o >= 0; o--)
     (r = l[o]) && (t = r(e, n, t) || t);
-  return t && p(e, n, t), t;
+  return t && s(e, n, t), t;
 };
-const x = (l) => {
+const c = (l) => {
   class e extends l {
     /**
      * @internal
@@ -12,11 +12,21 @@ const x = (l) => {
     get _hasContextualHelp() {
       return (this._contextualHelpSlottedContent?.length ?? 0) > 0;
     }
+    /**
+     * @internal
+     */
+    _isFromContextualHelp(a) {
+      return a.composedPath().some(
+        (o) => o?.closest?.(
+          '[slot="contextual-help"],[data-vvd-component="contextual-help"]'
+        )
+      );
+    }
   }
-  return s([
-    a
+  return u([
+    p
   ], e.prototype, "_contextualHelpSlottedContent"), e;
 };
 export {
-  x as W
+  c as W
 };

package/combobox/definition.cjs

@@ -12,6 +12,7 @@ const fastElement = require('@microsoft/fast-element');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const listbox = require('../unbundled/listbox.cjs');
 const formAssociated = require('../unbundled/form-associated.cjs');
+const withContextualHelp = require('../unbundled/with-contextual-help.cjs');
 const withErrorText = require('../unbundled/with-error-text.cjs');
 const withSuccessText = require('../unbundled/with-success-text.cjs');
 const formElement = require('../unbundled/form-element.cjs');
@@ -19,7 +20,7 @@ const affix = require('../unbundled/affix.cjs');
 const index = require('../unbundled/index.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
 
 const ComboboxAutocomplete = {
   inline: "inline",
@@ -37,9 +38,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Combobox extends mixins.WithFeedback(
-  withErrorText.WithErrorText(
-    withSuccessText.WithSuccessText(formElement.FormElement(affix.AffixIcon(formAssociated.FormAssociated(listbox.Listbox))))
+class Combobox extends withContextualHelp.WithContextualHelp(
+  mixins.WithFeedback(
+    withErrorText.WithErrorText(
+      withSuccessText.WithSuccessText(formElement.FormElement(affix.AffixIcon(formAssociated.FormAssociated(listbox.Listbox))))
+    )
   )
 ) {
   constructor() {
@@ -153,7 +156,7 @@ class Combobox extends mixins.WithFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     if (this.open) {
@@ -558,6 +561,10 @@ function renderInput(context) {
   const chevronTemplate = button_definition.chevronTemplateFactory(context);
   return fastElement.html` <div class="${getStateClasses}" ${fastElement.ref("_anchor")}>
 		${fastElement.when((x) => x.label, renderLabel())}
+		<slot
+			name="contextual-help"
+			${fastElement.slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
 			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
 			<div class="wrapper">

package/combobox/definition.js

@@ -8,6 +8,7 @@ import { DOM, Observable, attr, observable, ref, slotted, html, when } from '@mi
 import { uniqueId, limit, classNames } from '@microsoft/fast-web-utilities';
 import { L as Listbox } from '../unbundled/listbox.js';
 import { F as FormAssociated } from '../unbundled/form-associated.js';
+import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
@@ -15,7 +16,7 @@ import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from
 import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 import { c as chevronTemplateFactory } from '../unbundled/definition.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
 
 const ComboboxAutocomplete = {
   inline: "inline",
@@ -33,9 +34,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class Combobox extends WithFeedback(
-  WithErrorText(
-    WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))
+class Combobox extends WithContextualHelp(
+  WithFeedback(
+    WithErrorText(
+      WithSuccessText(FormElement(AffixIcon(FormAssociated(Listbox))))
+    )
   )
 ) {
   constructor() {
@@ -149,7 +152,7 @@ class Combobox extends WithFeedback(
    * @internal
    */
   clickHandler(e) {
-    if (this.disabled) {
+    if (this.disabled || this._isFromContextualHelp(e)) {
       return;
     }
     if (this.open) {
@@ -554,6 +557,10 @@ function renderInput(context) {
   const chevronTemplate = chevronTemplateFactory(context);
   return html` <div class="${getStateClasses}" ${ref("_anchor")}>
 		${when((x) => x.label, renderLabel())}
+		<slot
+			name="contextual-help"
+			${slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
 			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
 			<div class="wrapper">

package/combobox/index.cjs

@@ -1,9 +1,13 @@
-"use strict";const k=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),$=require("../bundled/definition10.cjs"),I=require("../bundled/text-field.cjs"),r=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),b=require("../bundled/listbox.cjs"),O=require("../bundled/form-associated.cjs"),C=require("../bundled/with-error-text.cjs"),S=require("../bundled/with-success-text.cjs"),A=require("../bundled/form-element.cjs"),h=require("../bundled/affix.cjs"),q=require("../bundled/strings.cjs"),V=require("../bundled/numbers.cjs"),T=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),x=require("../bundled/slotted.cjs"),E=require("../bundled/class-names.cjs"),H=require("../bundled/when.cjs"),B='.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}',p={inline:"inline",list:"list",both:"both",none:"none"};var F=Object.defineProperty,s=(a,t,e,o)=>{for(var n=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(n=c(t,e,n)||n);return n&&F(t,e,n),n};class i extends f.WithFeedback(C.WithErrorText(S.WithSuccessText(A.FormElement(h.AffixIcon(O.FormAssociated(b.Listbox)))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=q.uniqueId("listbox-"),this.maxHeight=0,this.open=!1,this.proxy=document.createElement("input")}formResetCallback(){super.formResetCallback(),this.setDefaultSelectedOption(),this.updateValue()}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),r.DOM.queueUpdate(()=>this.control.focus());return}}get options(){return r.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){this._options=t,r.Observable.notify(this,"options")}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),n=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=n!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!this.disabled){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.inputType.includes("deleteContent")||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=V.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex(e=>e.getAttribute("selected")!==null||e.selected);this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(n=>{o&&(n.setAttribute("scale",o),n.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([r.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([r.attr],i.prototype,"appearance");s([r.attr],i.prototype,"shape");s([r.attr()],i.prototype,"scale");s([r.attr],i.prototype,"placement");s([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([r.observable],i.prototype,"metaSlottedContent");s([r.observable],i.prototype,"maxHeight");s([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([r.attr],i.prototype,"placeholder");const L=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:n,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:u,open:w,_activeDescendant:y})=>E.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${u}`,!!u],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!n]);function R(){return r.html` <label for="control" class="label">
+"use strict";const $=require("../bundled/definition2.cjs"),v=require("../bundled/definition9.cjs"),k=require("../bundled/definition10.cjs"),C=require("../bundled/text-field.cjs"),r=require("../bundled/vivid-element.cjs"),b=require("../bundled/mixins.cjs"),x=require("../bundled/listbox.cjs"),I=require("../bundled/form-associated.cjs"),O=require("../bundled/with-contextual-help.cjs"),S=require("../bundled/with-error-text.cjs"),A=require("../bundled/with-success-text.cjs"),q=require("../bundled/form-element.cjs"),u=require("../bundled/affix.cjs"),V=require("../bundled/strings.cjs"),T=require("../bundled/numbers.cjs"),H=require("../bundled/index.cjs"),D=require("../bundled/definition3.cjs"),d=require("../bundled/ref.cjs"),h=require("../bundled/slotted.cjs"),E=require("../bundled/class-names.cjs"),F=require("../bundled/when.cjs"),B='.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}',p={inline:"inline",list:"list",both:"both",none:"none"};var L=Object.defineProperty,s=(a,t,e,o)=>{for(var n=void 0,l=a.length-1,c;l>=0;l--)(c=a[l])&&(n=c(t,e,n)||n);return n&&L(t,e,n),n};class i extends O.WithContextualHelp(b.WithFeedback(S.WithErrorText(A.WithSuccessText(q.FormElement(u.AffixIcon(I.FormAssociated(x.Listbox))))))){constructor(){super(...arguments),this.filteredOptions=[],this.filter="",this.fixedDropdown=!1,this.listboxId=V.uniqueId("listbox-"),this.maxHeight=0,this.open=!1,this.proxy=document.createElement("input")}formResetCallback(){super.formResetCallback(),this.setDefaultSelectedOption(),this.updateValue()}validate(){super.validate(this.control)}get isAutocompleteInline(){return this.autocomplete===p.inline||this.isAutocompleteBoth}get isAutocompleteList(){return this.autocomplete===p.list||this.isAutocompleteBoth}get isAutocompleteBoth(){return this.autocomplete===p.both}openChanged(){if(this.open){this.focusAndScrollOptionIntoView(),r.DOM.queueUpdate(()=>this.control.focus());return}}get options(){return r.Observable.track(this,"options"),this.filteredOptions.length?this.filteredOptions:this._options}set options(t){this._options=t,r.Observable.notify(this,"options")}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}valueChanged(t,e){if(this.$fastController.isConnected&&this.options){const o=this.options.findIndex(c=>c.text.toLowerCase()===e.toLowerCase()),n=this.options[this.selectedIndex]?.text,l=this.options[o]?.text;this.selectedIndex=n!==l?o:this.selectedIndex}super.valueChanged(t,e)}clickHandler(t){if(!(this.disabled||this._isFromContextualHelp(t))){if(this.open){const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(!e||e.disabled)return;this.selectedOptions=[e],this.control.value=e.text,this.clearSelectionRange(),this.updateValue(!0)}return this.open=!this.open,this.open&&this.control.focus(),!0}}_chevronIconClickHandler(t){this.open&&(t.stopPropagation(),this.open=!1)}connectedCallback(){super.connectedCallback(),this.value&&(this.initialValue=this.value),this._popup.anchor=this._anchor}filterOptions(){(!this.autocomplete||this.autocomplete===p.none)&&(this.filter=""),this.filteredOptions=this._options.filter(t=>t.text.toLowerCase().startsWith(this.filter.toLowerCase())),this.isAutocompleteList&&this._options.forEach(t=>{t.hidden=!this.filteredOptions.includes(t)})}focusAndScrollOptionIntoView(){if(this.contains(document.activeElement)){this.control.focus();const t=this.firstSelectedOption;t&&requestAnimationFrame(()=>{t.scrollIntoView({block:"nearest"})})}}focusoutHandler(t){if(this.syncValue(),!this.open)return!0;const e=t.relatedTarget;if(this.isSameNode(e)){this.focus();return}this.open=!1}inputHandler(t){if(this.filter=this.control.value,this.filterOptions(),this.isAutocompleteInline||(this.selectedIndex=this.options.map(e=>e.text).indexOf(this.control.value)),t.inputType.includes("deleteContent")||!this.filter.length)return!0;this.isAutocompleteList&&!this.open&&(this.open=!0),this.isAutocompleteInline&&(this.filteredOptions.length?(this.selectedOptions=[this.filteredOptions[0]],this.selectedIndex=this.options.indexOf(this.firstSelectedOption),this.setInlineSelection()):this.selectedIndex=-1)}keydownHandler(t){const e=t.key;if(t.ctrlKey||t.shiftKey)return!0;switch(e){case"Enter":{this.syncValue(),this.isAutocompleteInline&&(this.filter=this.value),this.open=!1,this.clearSelectionRange();break}case"Escape":{if(this.isAutocompleteInline||(this.selectedIndex=-1),this.open){this.open=!1;break}this.value="",this.control.value="",this.filter="",this.filterOptions();break}case"Tab":{if(this.setInputToSelection(),!this.open)return!0;t.preventDefault(),this.open=!1;break}case"ArrowUp":case"ArrowDown":{if(this.filterOptions(),!this.open){this.open=!0;break}this.filteredOptions.length>0&&super.keydownHandler(t),this.isAutocompleteInline&&this.setInlineSelection();break}default:return!0}}selectedIndexChanged(t,e){if(this.$fastController.isConnected){if(e=T.limit(-1,this.options.length-1,e),e!==this.selectedIndex){this.selectedIndex=e;return}super.selectedIndexChanged(t,e)}}selectPreviousOption(){!this.disabled&&this.selectedIndex>=0&&(this.selectedIndex=this.selectedIndex-1)}setDefaultSelectedOption(){if(this.$fastController.isConnected&&this.options){const t=this.options.findIndex(e=>e.getAttribute("selected")!==null||e.selected);this.selectedIndex=t,!this.dirtyValue&&this.firstSelectedOption&&(this.value=this.firstSelectedOption.text),this.setSelectedOptions()}}setInputToSelection(){this.firstSelectedOption&&(this.control.value=this.firstSelectedOption.text,this.control.focus())}setInlineSelection(){this.firstSelectedOption&&(this.setInputToSelection(),this.control.setSelectionRange(this.filter.length,this.control.value.length,"backward"))}syncValue(){const t=this.firstSelectedOption?.text??this.control.value;this.updateValue(this.value!==t)}selectedOptionsChanged(t,e){this.$fastController.isConnected&&this._options.forEach(o=>{o.selected=e.includes(o)})}slottedOptionsChanged(t,e){super.slottedOptionsChanged(t,e),this.updateValue();const o=this.getAttribute("scale")||this.scale;e.forEach(n=>{o&&(n.setAttribute("scale",o),n.scale=o)})}updateValue(t){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.text||this.control.value,this.control.value=this.value),t&&this.$emit("change")}clearSelectionRange(){const t=this.control.value.length;this.control.setSelectionRange(t,t)}}s([r.attr({attribute:"autocomplete",mode:"fromView"})],i.prototype,"autocomplete");s([r.attr],i.prototype,"appearance");s([r.attr],i.prototype,"shape");s([r.attr()],i.prototype,"scale");s([r.attr],i.prototype,"placement");s([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown");s([r.observable],i.prototype,"metaSlottedContent");s([r.observable],i.prototype,"maxHeight");s([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open");s([r.attr],i.prototype,"placeholder");const R=({icon:a,iconSlottedContent:t,metaSlottedContent:e,errorValidationMessage:o,successText:n,shape:l,scale:c,disabled:m,placeholder:g,label:_,appearance:f,open:w,_activeDescendant:y})=>E.classNames("base",["disabled",m],[`shape-${l}`,!!l],[`size-${c}`,!!c],["placeholder",!!g],[`appearance-${f}`,!!f],["no-label",!_],["has-icon",!!a||!!t?.length],["has-meta",!!e?.length],["has-activedescendant",!!y&&w],["error",!!o],["success",!!n]);function z(){return r.html` <label for="control" class="label">
 		${a=>a.label}
-	</label>`}function z(a){return a.open&&a.fixedDropdown?`--_combobox-fixed-width: ${Math.round(a.getBoundingClientRect().width)}px`:null}function P(a){const t=h.affixIconTemplateFactory(a),e=D.chevronTemplateFactory(a);return r.html` <div class="${L}" ${d.ref("_anchor")}>
-		${H.when(o=>o.label,R())}
+	</label>`}function P(a){return a.open&&a.fixedDropdown?`--_combobox-fixed-width: ${Math.round(a.getBoundingClientRect().width)}px`:null}function W(a){const t=u.affixIconTemplateFactory(a),e=D.chevronTemplateFactory(a);return r.html` <div class="${R}" ${d.ref("_anchor")}>
+		${F.when(o=>o.label,z())}
+		<slot
+			name="contextual-help"
+			${h.slotted("_contextualHelpSlottedContent")}
+		></slot>
 		<div class="fieldset">
-			${o=>t(o.icon,h.IconWrapper.Slot)}
+			${o=>t(o.icon,u.IconWrapper.Slot)}
 			<div class="wrapper">
 				<input
 					id="control"
@@ -25,7 +29,7 @@
 				/>
 			</div>
 			<div class="leading-items-wrapper">
-				<slot name="meta" ${x.slotted("metaSlottedContent")}></slot>
+				<slot name="meta" ${h.slotted("metaSlottedContent")}></slot>
 				<div
 					@click="${(o,n)=>o._chevronIconClickHandler(n.event)}"
 				>
@@ -33,17 +37,17 @@
 				</div>
 			</div>
 		</div>
-	</div>`}const W=a=>{const t=a.tagFor(v.Popup);return r.html`
+	</div>`}const M=a=>{const t=a.tagFor(v.Popup);return r.html`
 		<template
 			tabindex="${e=>e.disabled?null:"0"}"
 			@click="${(e,o)=>e.clickHandler(o.event)}"
 			@focusout="${(e,o)=>e.focusoutHandler(o.event)}"
-			@keydown="${(e,{event:o})=>(e.open&&T.handleEscapeKeyAndStopPropogation(o),e.keydownHandler(o))}"
+			@keydown="${(e,{event:o})=>(e.open&&H.handleEscapeKeyAndStopPropogation(o),e.keydownHandler(o))}"
 		>
 			<div class="control-wrapper">
-				${()=>P(a)}
+				${()=>W(a)}
 				<${t} class="popup"
-					style="${z}"
+					style="${P}"
 					?open="${e=>e.open}"
 					placement="${e=>e.placement??"bottom-start"}"
 					strategy="${e=>e.fixedDropdown?"fixed":"absolute"}"
@@ -53,7 +57,7 @@
 						role="listbox"
 						?disabled="${e=>e.disabled}"
 						${d.ref("listbox")}>
-						<slot ${x.slotted({filter:b.Listbox.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}>
+						<slot ${h.slotted({filter:x.Listbox.slottedOptionFilter,flatten:!0,property:"slottedOptions"})}>
 						</slot>
 					</div>
 				</${t}>
@@ -62,4 +66,4 @@
 				${e=>e._getFeedbackTemplate(a)}
 			</div>
     </template>
-	`},M=r.defineVividComponent("combobox",i,W,[k.iconDefinition,v.popupDefinition,$.listboxOptionDefinition,f.feedbackMessageDefinition],{styles:[I.styles,B],shadowOptions:{delegatesFocus:!0}}),K=r.createRegisterFunction(M);K();
+	`},K=r.defineVividComponent("combobox",i,M,[$.iconDefinition,v.popupDefinition,k.listboxOptionDefinition,b.feedbackMessageDefinition],{styles:[C.styles,B],shadowOptions:{delegatesFocus:!0}}),N=r.createRegisterFunction(K);N();