@vonage/vivid 5.2.0 → 5.4.0

package/file-picker/definition.cjs

@@ -143,7 +143,7 @@ class FilePicker extends withContextualHelp.WithContextualHelp(
       handleChange: () => {
         this._customValidationError = this.#customValidationChangeObserver.observe(
           this,
-          fastElement.defaultExecutionContext
+          fastElement.ExecutionContext.default
         );
       }
     };
@@ -210,7 +210,7 @@ class FilePicker extends withContextualHelp.WithContextualHelp(
     this.#customValidationChangeHandler.handleChange();
   }
   #stopObservingCustomValidation() {
-    this.#customValidationChangeObserver.disconnect();
+    this.#customValidationChangeObserver.dispose();
   }
   connectedCallback() {
     super.connectedCallback();

package/file-picker/definition.js

@@ -2,7 +2,7 @@ import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
 import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
-import { defaultExecutionContext, Observable, attr, observable, volatile, when, slotted, ref, repeat, html } from '@microsoft/fast-element';
+import { ExecutionContext, Observable, attr, observable, volatile, when, slotted, ref, repeat, html } from '@microsoft/fast-element';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { F as FormAssociated } from '../unbundled/form-associated.js';
 import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
@@ -139,7 +139,7 @@ class FilePicker extends WithContextualHelp(
       handleChange: () => {
         this._customValidationError = this.#customValidationChangeObserver.observe(
           this,
-          defaultExecutionContext
+          ExecutionContext.default
         );
       }
     };
@@ -206,7 +206,7 @@ class FilePicker extends WithContextualHelp(
     this.#customValidationChangeHandler.handleChange();
   }
   #stopObservingCustomValidation() {
-    this.#customValidationChangeObserver.disconnect();
+    this.#customValidationChangeObserver.dispose();
   }
   connectedCallback() {
     super.connectedCallback();

package/file-picker/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const u=require("../bundled/definition2.cjs"),h=require("../bundled/definition3.cjs"),l=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),m=require("../bundled/delegates-aria.cjs"),x=require("../bundled/form-associated.cjs"),F=require("../bundled/with-contextual-help.cjs"),w=require("../bundled/with-error-text.cjs"),y=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),_=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),p=require("../bundled/ref.cjs"),b=require("../bundled/class-names.cjs"),C=require("../bundled/repeat.cjs"),$=":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";async function z(a){return a.items?.[0]?.webkitGetAsEntry!=null?await D(a.items):Array.from(a.files)}async function D(a){const r=[];for(const t of a){const e=t.getAsFile();if(e)r.push(Promise.resolve([e]));else{const o=t.webkitGetAsEntry();o&&r.push(g(o,!1))}}return(await Promise.all(r)).flat()}const g=(a,r)=>{const t=o=>new Promise((i,c)=>{o.file(d=>{r&&d.name.substring(0,1)==="."?i([]):i([d])},c)}),e=a.isFile?t(a):a.isDirectory?T(a):Promise.resolve([]);return e.catch(()=>null),e},T=async a=>new Promise((r,t)=>{const e=[],o=a.createReader(),i=()=>{o.readEntries(c=>{for(const d of c)e.push(g(d,!0));c.length?i():r(Promise.all(e).then(d=>d.flat()))},t)};i()});function P(a,r){if(!r)return!0;const t=r.split(","),e=i=>/\/\*$/.test(i),o=i=>i.replace(/\/.*$/,"");for(let i of t)if(i=i.trim(),i.charAt(0)==="."){if(a.name.toLowerCase().endsWith(i.toLowerCase()))return!0}else if(e(i)){if(o(a.type)===o(i))return!0}else if(a.type===i)return!0;return!1}var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(a,r,t,e)=>{for(var o=e>1?void 0:e?A(r,t):r,i=a.length-1,c;i>=0;i--)(c=a[i])&&(o=(e?c(r,t,o):c(o))||o);return e&&o&&V(r,t,o),o};class s extends F.WithContextualHelp(f.WithFeedback(w.WithErrorText(y.FormElement(m.DelegatesAria(k.Localized(x.FormAssociated(l.VividElement))))))){constructor(){super(...arguments),this.singleFile=!1,this.maxFileSize=256,this.valueChanged=(r,t)=>{super.valueChanged(r,t),t===""&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement("input"),this.setFormValue=(r,t)=>{typeof r!="string"&&super.setFormValue(r,t)},this._customValidationError=null,this.#e={handleChange:()=>{this._customValidationError=this.#r.observe(this,l.defaultExecutionContext)}},this._dragHover=!1,this._allFiles=[]}nameChanged(r,t){super.nameChanged(r,t),this.#t()}#t(){const r=this.files;if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of r)t.append(this.name,e);this.setFormValue(t)}this.#i()}#i(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:""}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#a(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??""),this.validate()}#e;#r;#l(){this.#r=l.Observable.binding(()=>this.#a(),this.#e,!0),this.#e.handleChange()}#s(){this.#r.disconnect()}connectedCallback(){super.connectedCallback(),this.#l()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}_onDragEnter(){return this._dragHover=!0,!0}_onDragOver(r){if(!r.dataTransfer)return!0;const t=r.dataTransfer.effectAllowed;return r.dataTransfer.dropEffect=t==="move"||t==="linkMove"?"move":"copy",!1}_onDragLeave(r){return r.currentTarget===r.target&&(this._dragHover=!1),!0}_onDrop(r){return this._dragHover=!1,r.dataTransfer?(z(r.dataTransfer).then(t=>this.#o(t)).catch(t=>{console.error(t)}),!1):!0}_onDragEnd(){return this._dragHover=!1,!0}_onControlClick(){this._hiddenInput.click()}_onRemoveFileClick(r){this._allFiles=this._allFiles.filter(t=>t!==r),this.$emit("change")}_allFilesChanged(){this.#t()}#o(r){this.singleFile?r.length>0&&(this._allFiles=[r[r.length-1]]):this._allFiles=[...this._allFiles,...r],this.$emit("change")}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){const r=(o,i)=>this.maxFileSize&&o.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace("{{filesize}}",this._formatNumber(Math.round(o.size/1024/10.24)/100)).replace("{{maxFilesize}}",this._formatNumber(this.maxFileSize)):P(o,this.accept)?typeof this.maxFiles=="number"&&i>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}",String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[];let e=0;for(const o of this._allFiles){const i={file:o,validationError:r(o,e)};t.push(i),i.validationError||e++}return t}get files(){return this._validatedFiles.filter(r=>!r.validationError).map(r=>r.file)}get rejectedFiles(){return this._validatedFiles.filter(r=>!!r.validationError).map(r=>r.file)}_onHiddenInputChange(r){this.#o(this._hiddenInput.files),this._hiddenInput.value="",r.stopPropagation()}_formatNumber(r){const t=String(r);return this.locale.common.useCommaAsDecimalSeparator?t.replace(".",","):t}}n([l.attr({attribute:"single-file",mode:"boolean"})],s.prototype,"singleFile",2);n([l.attr({attribute:"max-files"})],s.prototype,"maxFiles",2);n([l.attr({mode:"fromView",attribute:"max-file-size"})],s.prototype,"maxFileSize",2);n([l.attr],s.prototype,"accept",2);n([l.attr],s.prototype,"size",2);n([l.attr({attribute:"invalid-file-type-error"})],s.prototype,"invalidFileTypeError",2);n([l.attr({attribute:"max-files-exceeded-error"})],s.prototype,"maxFilesExceededError",2);n([l.attr({attribute:"file-too-big-error"})],s.prototype,"fileTooBigError",2);n([l.observable],s.prototype,"_customValidationError",2);n([l.observable],s.prototype,"_dragHover",2);n([l.observable],s.prototype,"_allFiles",2);n([l.volatile],s.prototype,"_validatedFiles",1);const v=1e3,q={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},S=(a,r)=>{let t=0,e="b";if(r>0){const o=["tb","gb","mb","kb","b"];for(let i=0;i<o.length;i++){const c=o[i],d=Math.pow(v,4-i)/10;if(r>=d){t=r/Math.pow(v,4-i),e=c;break}}t=Math.round(10*t)/10}return l.html`<strong>${a._formatNumber(t)}</strong>
+"use strict";const u=require("../bundled/definition2.cjs"),h=require("../bundled/definition3.cjs"),l=require("../bundled/vivid-element.cjs"),f=require("../bundled/mixins.cjs"),m=require("../bundled/delegates-aria.cjs"),x=require("../bundled/form-associated.cjs"),F=require("../bundled/with-contextual-help.cjs"),w=require("../bundled/with-error-text.cjs"),y=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),_=require("../bundled/when.cjs"),E=require("../bundled/slotted.cjs"),p=require("../bundled/ref.cjs"),C=require("../bundled/repeat.cjs"),b=require("../bundled/class-names.cjs"),$=":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";async function z(a){return a.items?.[0]?.webkitGetAsEntry!=null?await D(a.items):Array.from(a.files)}async function D(a){const r=[];for(const t of a){const e=t.getAsFile();if(e)r.push(Promise.resolve([e]));else{const o=t.webkitGetAsEntry();o&&r.push(g(o,!1))}}return(await Promise.all(r)).flat()}const g=(a,r)=>{const t=o=>new Promise((i,c)=>{o.file(d=>{r&&d.name.substring(0,1)==="."?i([]):i([d])},c)}),e=a.isFile?t(a):a.isDirectory?T(a):Promise.resolve([]);return e.catch(()=>null),e},T=async a=>new Promise((r,t)=>{const e=[],o=a.createReader(),i=()=>{o.readEntries(c=>{for(const d of c)e.push(g(d,!0));c.length?i():r(Promise.all(e).then(d=>d.flat()))},t)};i()});function P(a,r){if(!r)return!0;const t=r.split(","),e=i=>/\/\*$/.test(i),o=i=>i.replace(/\/.*$/,"");for(let i of t)if(i=i.trim(),i.charAt(0)==="."){if(a.name.toLowerCase().endsWith(i.toLowerCase()))return!0}else if(e(i)){if(o(a.type)===o(i))return!0}else if(a.type===i)return!0;return!1}var V=Object.defineProperty,A=Object.getOwnPropertyDescriptor,n=(a,r,t,e)=>{for(var o=e>1?void 0:e?A(r,t):r,i=a.length-1,c;i>=0;i--)(c=a[i])&&(o=(e?c(r,t,o):c(o))||o);return e&&o&&V(r,t,o),o};class s extends F.WithContextualHelp(f.WithFeedback(w.WithErrorText(y.FormElement(m.DelegatesAria(k.Localized(x.FormAssociated(l.VividElement))))))){constructor(){super(...arguments),this.singleFile=!1,this.maxFileSize=256,this.valueChanged=(r,t)=>{super.valueChanged(r,t),t===""&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement("input"),this.setFormValue=(r,t)=>{typeof r!="string"&&super.setFormValue(r,t)},this._customValidationError=null,this.#e={handleChange:()=>{this._customValidationError=this.#r.observe(this,l.ExecutionContext.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(r,t){super.nameChanged(r,t),this.#t()}#t(){const r=this.files;if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of r)t.append(this.name,e);this.setFormValue(t)}this.#i()}#i(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:""}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#a(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??""),this.validate()}#e;#r;#l(){this.#r=l.Observable.binding(()=>this.#a(),this.#e,!0),this.#e.handleChange()}#s(){this.#r.dispose()}connectedCallback(){super.connectedCallback(),this.#l()}disconnectedCallback(){super.disconnectedCallback(),this.#s()}_onDragEnter(){return this._dragHover=!0,!0}_onDragOver(r){if(!r.dataTransfer)return!0;const t=r.dataTransfer.effectAllowed;return r.dataTransfer.dropEffect=t==="move"||t==="linkMove"?"move":"copy",!1}_onDragLeave(r){return r.currentTarget===r.target&&(this._dragHover=!1),!0}_onDrop(r){return this._dragHover=!1,r.dataTransfer?(z(r.dataTransfer).then(t=>this.#o(t)).catch(t=>{console.error(t)}),!1):!0}_onDragEnd(){return this._dragHover=!1,!0}_onControlClick(){this._hiddenInput.click()}_onRemoveFileClick(r){this._allFiles=this._allFiles.filter(t=>t!==r),this.$emit("change")}_allFilesChanged(){this.#t()}#o(r){this.singleFile?r.length>0&&(this._allFiles=[r[r.length-1]]):this._allFiles=[...this._allFiles,...r],this.$emit("change")}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){const r=(o,i)=>this.maxFileSize&&o.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace("{{filesize}}",this._formatNumber(Math.round(o.size/1024/10.24)/100)).replace("{{maxFilesize}}",this._formatNumber(this.maxFileSize)):P(o,this.accept)?typeof this.maxFiles=="number"&&i>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace("{{maxFiles}}",String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[];let e=0;for(const o of this._allFiles){const i={file:o,validationError:r(o,e)};t.push(i),i.validationError||e++}return t}get files(){return this._validatedFiles.filter(r=>!r.validationError).map(r=>r.file)}get rejectedFiles(){return this._validatedFiles.filter(r=>!!r.validationError).map(r=>r.file)}_onHiddenInputChange(r){this.#o(this._hiddenInput.files),this._hiddenInput.value="",r.stopPropagation()}_formatNumber(r){const t=String(r);return this.locale.common.useCommaAsDecimalSeparator?t.replace(".",","):t}}n([l.attr({attribute:"single-file",mode:"boolean"})],s.prototype,"singleFile",2);n([l.attr({attribute:"max-files"})],s.prototype,"maxFiles",2);n([l.attr({mode:"fromView",attribute:"max-file-size"})],s.prototype,"maxFileSize",2);n([l.attr],s.prototype,"accept",2);n([l.attr],s.prototype,"size",2);n([l.attr({attribute:"invalid-file-type-error"})],s.prototype,"invalidFileTypeError",2);n([l.attr({attribute:"max-files-exceeded-error"})],s.prototype,"maxFilesExceededError",2);n([l.attr({attribute:"file-too-big-error"})],s.prototype,"fileTooBigError",2);n([l.observable],s.prototype,"_customValidationError",2);n([l.observable],s.prototype,"_dragHover",2);n([l.observable],s.prototype,"_allFiles",2);n([l.volatile],s.prototype,"_validatedFiles",1);const v=1e3,q={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},S=(a,r)=>{let t=0,e="b";if(r>0){const o=["tb","gb","mb","kb","b"];for(let i=0;i<o.length;i++){const c=o[i],d=Math.pow(v,4-i)/10;if(r>=d){t=r/Math.pow(v,4-i),e=c;break}}t=Math.round(10*t)/10}return l.html`<strong>${a._formatNumber(t)}</strong>
 		${q[e]}`},H=({size:a,_dragHover:r})=>b.classNames("control",[`size-${a}`,!!a],["drag-hover",r]),B=a=>{const r=a.tagFor(u.Icon),t=a.tagFor(h.Button);return l.html`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>

package/file-picker/index.js

@@ -1,6 +1,6 @@
 import { I as b, i as g } from "../bundled/definition2.js";
 import { B as x, b as F } from "../bundled/definition3.js";
-import { V as y, b as w, O as k, a as d, o as v, v as _, h as p, c as E, d as C } from "../bundled/vivid-element.js";
+import { V as y, E as w, O as k, a as d, o as v, v as _, h as p, c as E, d as C } from "../bundled/vivid-element.js";
 import { W as $, f as z } from "../bundled/mixins.js";
 import { D, d as P } from "../bundled/delegates-aria.js";
 import { F as T } from "../bundled/form-associated.js";
@@ -11,8 +11,8 @@ import { L as B } from "../bundled/localized.js";
 import { w as H } from "../bundled/when.js";
 import { s as O } from "../bundled/slotted.js";
 import { r as u } from "../bundled/ref.js";
-import { c as f } from "../bundled/class-names.js";
 import { r as I } from "../bundled/repeat.js";
+import { c as f } from "../bundled/class-names.js";
 const L = ":host{display:block;max-inline-size:400px}.base{display:flex;flex-direction:column;block-size:inherit;max-block-size:inherit;--_low-ink-color: var(--vvd-color-neutral-600)}.control-wrapper{display:flex;flex-direction:column;block-size:inherit;gap:4px;max-block-size:inherit}.control{position:relative;display:flex;box-sizing:border-box;flex-wrap:wrap;align-items:center;justify-content:center;padding:16px;border:1px dashed var(--vvd-color-neutral-400);border-radius:8px;background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);gap:8px;inline-size:100%;min-block-size:52px;outline:none;transition:all .3s ease}.control .upload-text{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;transition:all .3s ease}@media (hover: hover){.control:hover .upload-text{color:var(--vvd-color-neutral-800)}}.control.drag-hover .upload-text{color:var(--vvd-color-neutral-800)}.control:not(.size-expanded){min-block-size:52px}.control.size-expanded{min-block-size:120px}.control:focus-visible{--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))}.control:active,.control:focus-visible{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}@media (hover: hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);box-shadow:0 2px 8px #0000001a;transform:translateY(-1px)}}.control:active{box-shadow:0 1px 4px #0000001a;transform:translateY(0)}.control.drag-hover{border-color:var(--vvd-color-cta-200);background-color:var(--vvd-color-cta-200);outline:2px dashed var(--vvd-color-cta-500);transform:scale(1.02)}.upload-icon{animation:subtle-pulse 2s ease-in-out infinite;color:var(--vvd-color-cta-600);pointer-events:none;transition:all .3s ease}@media (hover: hover){.control:hover .upload-icon{animation:none;color:var(--vvd-color-cta-700);transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;color:var(--vvd-color-neutral-800);transform:scale(1.15)}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{display:grid;box-sizing:border-box;padding:8px;border:1px solid var(--vvd-color-neutral-300);border-radius:8px;background-color:var(--file-picker-list-item-background-color, var(--vvd-color-canvas));grid-template-columns:1fr auto;grid-template-rows:auto auto;inline-size:100%}.preview .details{display:flex;min-width:0;flex-direction:column;max-inline-size:100%}.preview .details .filename{overflow:hidden;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{display:flex;align-items:center;color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);gap:4px;margin-block-start:4px}.preview:not(.has-error) .error-message{display:none}.preview.has-error{border:1px solid var(--vvd-color-alert-500);background-color:var(--vvd-color-alert-50)}.preview.has-error .size{display:none}.preview .remove-btn{display:inline;align-self:center;grid-column:2/-1;grid-row:1/-1}.preview-list{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.preview-list{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.preview-list ::-webkit-scrollbar{width:4px}.preview-list ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.preview-list ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.preview-list{display:flex;flex-direction:column;gap:12px;margin-block-start:12px;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{position:absolute;top:0;left:0;width:0;height:0;visibility:hidden}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
 async function j(a) {
   return a.items?.[0]?.webkitGetAsEntry != null ? await M(a.items) : Array.from(a.files);
@@ -83,7 +83,7 @@ class l extends V(
       handleChange: () => {
         this._customValidationError = this.#r.observe(
           this,
-          w
+          w.default
         );
       }
     }, this._dragHover = !1, this._allFiles = [];
@@ -138,7 +138,7 @@ class l extends V(
     ), this.#e.handleChange();
   }
   #s() {
-    this.#r.disconnect();
+    this.#r.dispose();
   }
   connectedCallback() {
     super.connectedCallback(), this.#l();

package/header/definition.cjs

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
 
-const elevation_definition = require('../unbundled/definition5.cjs');
+const elevation_definition = require('../unbundled/definition6.cjs');
 const vividElement = require('../unbundled/vivid-element.cjs');
 const fastElement = require('@microsoft/fast-element');
 const delegatesAria = require('../unbundled/delegates-aria.cjs');

package/header/definition.js

@@ -1,4 +1,4 @@
-import { E as Elevation, e as elevationDefinition } from '../unbundled/definition5.js';
+import { E as Elevation, e as elevationDefinition } from '../unbundled/definition6.js';
 import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
 import { attr, html } from '@microsoft/fast-element';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';

package/icon/definition.cjs

@@ -139,18 +139,22 @@ const iconTemplate = (context) => {
   const visuallyHiddenTag = context.tagFor(visuallyHidden_definition.VwcVisuallyHiddenElement);
   const isDecorative = (x) => !x.label || x.label.trim().length === 0;
   return fastElement.html`
-		<figure class="${getClasses}" ?aria-hidden="${(x) => isDecorative(x)}" ?aria-busy="${(x) => !x.iconLoaded}">
+		<figure
+			class="${getClasses}"
+			?aria-hidden="${(x) => isDecorative(x)}"
+			?aria-busy="${(x) => !x?.iconLoaded}"
+		>
 			<slot>
 				${fastElement.when(
-    (x) => !x.iconLoaded,
-    fastElement.html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+    (x) => !x?.iconLoaded,
+    fastElement.html`<img alt="${(x) => x?.name}" src="${(x) => x?.iconUrl}" />`
   )}
 				${fastElement.when(
-    (x) => x.iconLoaded && x._svg,
-    (x) => fastElement.html`${x._svg}`
+    (x) => x?.iconLoaded && x?._svg,
+    (x) => fastElement.html`${fastElement.html.partial(x._svg)}`
   )}
 			</slot>
-			<${visuallyHiddenTag} class="label">${(x) => x.label}</${visuallyHiddenTag}>
+			<${visuallyHiddenTag} class="label">${(x) => x?.label}</${visuallyHiddenTag}>
 		</figure>
 	`;
 };

package/icon/definition.js

@@ -135,18 +135,22 @@ const iconTemplate = (context) => {
   const visuallyHiddenTag = context.tagFor(VisuallyHidden);
   const isDecorative = (x) => !x.label || x.label.trim().length === 0;
   return html`
-		<figure class="${getClasses}" ?aria-hidden="${(x) => isDecorative(x)}" ?aria-busy="${(x) => !x.iconLoaded}">
+		<figure
+			class="${getClasses}"
+			?aria-hidden="${(x) => isDecorative(x)}"
+			?aria-busy="${(x) => !x?.iconLoaded}"
+		>
 			<slot>
 				${when(
-    (x) => !x.iconLoaded,
-    html`<img alt="${(x) => x.name}" src="${(x) => x.iconUrl}" />`
+    (x) => !x?.iconLoaded,
+    html`<img alt="${(x) => x?.name}" src="${(x) => x?.iconUrl}" />`
   )}
 				${when(
-    (x) => x.iconLoaded && x._svg,
-    (x) => html`${x._svg}`
+    (x) => x?.iconLoaded && x?._svg,
+    (x) => html`${html.partial(x._svg)}`
   )}
 			</slot>
-			<${visuallyHiddenTag} class="label">${(x) => x.label}</${visuallyHiddenTag}>
+			<${visuallyHiddenTag} class="label">${(x) => x?.label}</${visuallyHiddenTag}>
 		</figure>
 	`;
 };

package/index.cjs

@@ -21,6 +21,7 @@ const calendarEvent = require('./unbundled/calendar-event.cjs');
 const calendar_definition = require('./calendar/definition.cjs');
 const card_definition = require('./card/definition.cjs');
 const checkbox_definition = require('./checkbox/definition.cjs');
+const colorPicker_definition = require('./color-picker/definition.cjs');
 const combobox_definition = require('./combobox/definition.cjs');
 const dataGrid_definition = require('./data-grid/definition.cjs');
 const datePicker_definition = require('./date-picker/definition.cjs');
@@ -43,8 +44,7 @@ const navItem_definition = require('./nav-item/definition.cjs');
 const nav_definition = require('./nav/definition.cjs');
 const note_definition = require('./note/definition.cjs');
 const numberField_definition = require('./number-field/definition.cjs');
-const option_definition = require('./option/definition.cjs');
-const option = require('./unbundled/option.cjs');
+const option_definition = require('./unbundled/definition3.cjs');
 const pagination_definition = require('./pagination/definition.cjs');
 const progressRing_definition = require('./progress-ring/definition.cjs');
 const progress_definition = require('./progress/definition.cjs');
@@ -71,7 +71,7 @@ const timePicker_definition = require('./time-picker/definition.cjs');
 const timeSelectionPicker_template = require('./unbundled/time-selection-picker.template.cjs');
 const toggletip_definition = require('./toggletip/definition.cjs');
 const tooltip_definition = require('./tooltip/definition.cjs');
-const treeItem_definition = require('./unbundled/definition3.cjs');
+const treeItem_definition = require('./unbundled/definition4.cjs');
 const treeView_definition = require('./tree-view/definition.cjs');
 const videoPlayer_definition = require('./video-player/definition.cjs');
 
@@ -136,6 +136,9 @@ exports.registerCard = card_definition.registerCard;
 exports.VwcCheckboxElement = checkbox_definition.VwcCheckboxElement;
 exports.checkboxDefinition = checkbox_definition.checkboxDefinition;
 exports.registerCheckbox = checkbox_definition.registerCheckbox;
+exports.VwcColorPickerElement = colorPicker_definition.VwcColorPickerElement;
+exports.colorPickerDefinition = colorPicker_definition.colorPickerDefinition;
+exports.registerColorPicker = colorPicker_definition.registerColorPicker;
 exports.VwcComboboxElement = combobox_definition.VwcComboboxElement;
 exports.comboboxDefinition = combobox_definition.comboboxDefinition;
 exports.registerCombobox = combobox_definition.registerCombobox;
@@ -204,9 +207,9 @@ exports.registerNote = note_definition.registerNote;
 exports.VwcNumberFieldElement = numberField_definition.VwcNumberFieldElement;
 exports.numberFieldDefinition = numberField_definition.numberFieldDefinition;
 exports.registerNumberField = numberField_definition.registerNumberField;
+exports.VwcOptionElement = option_definition.ListboxOption;
 exports.listboxOptionDefinition = option_definition.listboxOptionDefinition;
 exports.registerOption = option_definition.registerOption;
-exports.VwcOptionElement = option.ListboxOption;
 exports.VwcPaginationElement = pagination_definition.VwcPaginationElement;
 exports.paginationDefinition = pagination_definition.paginationDefinition;
 exports.registerPagination = pagination_definition.registerPagination;

package/index.js

@@ -17,6 +17,7 @@ export { C as VwcCalendarEventElement } from './unbundled/calendar-event.js';
 export { VwcCalendarElement, calendarDefinition, registerCalendar } from './calendar/definition.js';
 export { VwcCardElement, cardDefinition, registerCard } from './card/definition.js';
 export { VwcCheckboxElement, checkboxDefinition, registerCheckbox } from './checkbox/definition.js';
+export { VwcColorPickerElement, colorPickerDefinition, registerColorPicker } from './color-picker/definition.js';
 export { VwcComboboxElement, comboboxDefinition, registerCombobox } from './combobox/definition.js';
 export { VwcDataGridCellElement, VwcDataGridElement, VwcDataGridRowElement, dataGridCellDefinition, dataGridDefinition, dataGridRowDefinition, registerDataGrid } from './data-grid/definition.js';
 export { VwcDatePickerElement, datePickerDefinition, registerDatePicker } from './date-picker/definition.js';
@@ -39,8 +40,7 @@ export { VwcNavItemElement, navItemDefinition, registerNavItem } from './nav-ite
 export { VwcNavElement, navDefinition, registerNav } from './nav/definition.js';
 export { VwcNoteElement, noteDefinition, registerNote } from './note/definition.js';
 export { VwcNumberFieldElement, numberFieldDefinition, registerNumberField } from './number-field/definition.js';
-export { listboxOptionDefinition, registerOption } from './option/definition.js';
-export { L as VwcOptionElement } from './unbundled/option.js';
+export { L as VwcOptionElement, l as listboxOptionDefinition, r as registerOption } from './unbundled/definition3.js';
 export { VwcPaginationElement, paginationDefinition, registerPagination } from './pagination/definition.js';
 export { VwcProgressRingElement, progressRingDefinition, registerProgressRing } from './progress-ring/definition.js';
 export { VwcProgressElement, progressDefinition, registerProgress } from './progress/definition.js';
@@ -67,6 +67,6 @@ export { registerTimePicker, timePickerDefinition } from './time-picker/definiti
 export { T as VwcTimePickerElement } from './unbundled/time-selection-picker.template.js';
 export { VwcToggletipElement, registerToggletip, toggletipDefinition } from './toggletip/definition.js';
 export { VwcTooltipElement, registerTooltip, tooltipDefinition } from './tooltip/definition.js';
-export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from './unbundled/definition3.js';
+export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from './unbundled/definition4.js';
 export { VwcTreeViewElement, registerTreeView, treeViewDefinition } from './tree-view/definition.js';
 export { VwcVideoPlayerElement, registerVideoPlayer, videoPlayerDefinition } from './video-player/definition.js';

package/lib/accordion/accordion.d.ts

@@ -3,7 +3,7 @@ export declare const AccordionExpandMode: {
     readonly single: "single";
     readonly multi: "multi";
 };
-export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export type AccordionExpandMode = (typeof AccordionExpandMode)[keyof typeof AccordionExpandMode];
 export declare class Accordion extends VividElement {
     expandmode: AccordionExpandMode;
     activeid: string | null;

package/lib/accordion/definition.d.ts

@@ -3,6 +3,6 @@ export declare const AccordionExpandMode: {
     readonly single: "single";
     readonly multi: "multi";
 };
-export type AccordionExpandMode = typeof AccordionExpandMode[keyof typeof AccordionExpandMode];
+export type AccordionExpandMode = (typeof AccordionExpandMode)[keyof typeof AccordionExpandMode];
 export declare const registerAccordion: (prefix?: string) => void;
 export { Accordion as VwcAccordionElement };

package/lib/accordion-item/accordion-item.d.ts

@@ -10,10 +10,10 @@ declare const AccordionItem_base: {
         iconSlottedContent?: HTMLElement[] | undefined;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/action-group/action-group.d.ts

@@ -7,10 +7,10 @@ declare const ActionGroup_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/alert/alert.d.ts

@@ -17,10 +17,10 @@ declare const Alert_base: {
         iconSlottedContent?: HTMLElement[] | undefined;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -394,10 +394,10 @@ declare const Alert_base: {
         readonly locale: import("../../shared/localization/Locale").Locale;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/audio-player/audio-player.d.ts

@@ -8,17 +8,17 @@ export declare const SKIP_DIRECTIONS: {
     FORWARD: number;
     BACKWARD: number;
 };
-export type SKIP_DIRECTIONS_TYPE = typeof SKIP_DIRECTIONS[keyof typeof SKIP_DIRECTIONS];
+export type SKIP_DIRECTIONS_TYPE = (typeof SKIP_DIRECTIONS)[keyof typeof SKIP_DIRECTIONS];
 export declare function formatTime(time: number): string;
 declare const AudioPlayer_base: {
     new (...args: any[]): {
         readonly locale: import("../../shared/localization/Locale").Locale;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/avatar/avatar.d.ts

@@ -62,10 +62,10 @@ declare const Avatar_base: {
         }> | undefined) => import("@microsoft/fast-element").ViewTemplate<T, any>;
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/badge/badge.d.ts

@@ -12,10 +12,10 @@ declare const Badge_base: {
         iconSlottedContent?: HTMLElement[] | undefined;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/banner/banner.d.ts

@@ -14,10 +14,10 @@ declare const Banner_base: {
         iconSlottedContent?: HTMLElement[] | undefined;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -391,10 +391,10 @@ declare const Banner_base: {
         readonly locale: import("../../shared/localization/Locale").Locale;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -767,10 +767,10 @@ declare const Banner_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/breadcrumb/breadcrumb.d.ts

@@ -3,10 +3,10 @@ declare const Breadcrumb_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/breadcrumb-item/breadcrumb-item.d.ts

@@ -56,10 +56,10 @@ declare const BreadcrumbItem_base: {
         }> | undefined) => import("@microsoft/fast-element").ViewTemplate<T, any>;
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/button/button.d.ts

@@ -12,10 +12,10 @@ declare const Button_base: {
         iconSlottedContent?: HTMLElement[] | undefined;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin.js").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -389,10 +389,10 @@ declare const Button_base: {
         readonly locale: import("../../shared/localization/Locale.js").Locale;
         connectedCallback(): void;
         _vividAriaBehaviour: import("../../shared/aria/aria-mixin.js").VividAriaBehaviour;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;
@@ -818,10 +818,10 @@ declare const Button_base: {
         }> | undefined) => import("@microsoft/fast-element").ViewTemplate<T_5, any>;
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/button/button.template.d.ts

@@ -1,2 +1,3 @@
 import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
-export declare const buttonTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<any, any>;
+import type { Button } from './button';
+export declare const buttonTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<Button, any>;

package/lib/calendar/calendar.d.ts

@@ -9,7 +9,7 @@ export declare class Calendar extends VividElement {
     locales?: string | string[] | undefined;
     hour12: boolean;
     stickyMode: CalendarSticky;
-    getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
+    getEventContext: (this: Calendar, e: MouseEvent | KeyboardEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
     private getCalendarEventContainingCell;
     private arrowKeysInteractions;
     private activateElement;

package/lib/calendar-event/calendar-event.d.ts

@@ -7,10 +7,10 @@ declare const CalendarEvent_base: {
     new (...args: any[]): {
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;

package/lib/card/card.d.ts

@@ -59,10 +59,10 @@ declare const Card_base: {
         }> | undefined) => import("@microsoft/fast-element").ViewTemplate<T, any>;
         _vividAriaBehaviour: "delegate";
         connectedCallback(): void;
-        readonly $fastController: import("@microsoft/fast-element").Controller;
+        readonly $fastController: import("@microsoft/fast-element").ElementController<HTMLElement>;
         $emit(type: string, detail?: any, options?: Omit<CustomEventInit<any>, "detail"> | undefined): boolean | void;
         disconnectedCallback(): void;
-        attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+        attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
         accessKey: string;
         readonly accessKeyLabel: string;
         autocapitalize: string;