@vonage/vivid 5.1.0 → 5.2.0

package/file-picker/definition.js

@@ -2,15 +2,16 @@ 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, ref, repeat, html } from '@microsoft/fast-element';
+import { defaultExecutionContext, 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';
 import { W as WithErrorText } from '../unbundled/with-error-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
 import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ":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}";
+const styles = ":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 filesFromDataTransfer(dataTransfer) {
   const browserSupportFolderDrop = dataTransfer.items?.[0]?.webkitGetAsEntry != null;
@@ -99,9 +100,11 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-class FilePicker extends WithFeedback(
-  WithErrorText(
-    FormElement(DelegatesAria(Localized(FormAssociated(VividElement))))
+class FilePicker extends WithContextualHelp(
+  WithFeedback(
+    WithErrorText(
+      FormElement(DelegatesAria(Localized(FormAssociated(VividElement))))
+    )
   )
 ) {
   constructor() {
@@ -427,7 +430,13 @@ const FilePickerTemplate = (context) => {
   const buttonTag = context.tagFor(Button);
   return html`
 		<div class="base">
-			${when((x) => x.label, html`<label>${(x) => x.label}</label>`)}
+			<div class="label-wrapper" ?hidden=${(x) => !x.label && !x._hasContextualHelp}>
+				${when(
+    (x) => x.label,
+    html`<label class="label">${(x) => x.label}</label>`
+  )}
+				<slot name="contextual-help" ${slotted("_contextualHelpSlottedContent")}></slot>
+			</div>
 			<div class="control-wrapper">
 				<button
 					type="button"

package/file-picker/index.cjs

@@ -1,12 +1,15 @@
-"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-error-text.cjs"),y=require("../bundled/form-element.cjs"),k=require("../bundled/localized.cjs"),w=require("../bundled/when.cjs"),v=require("../bundled/ref.cjs"),b=require("../bundled/class-names.cjs"),_=require("../bundled/repeat.cjs"),E=":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}";async function $(a){return a.items?.[0]?.webkitGetAsEntry!=null?await z(a.items):Array.from(a.files)}async function z(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?C(a):Promise.resolve([]);return e.catch(()=>null),e},C=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 D(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 T=Object.defineProperty,P=Object.getOwnPropertyDescriptor,n=(a,r,t,e)=>{for(var o=e>1?void 0:e?P(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&&T(r,t,o),o};class s extends f.WithFeedback(F.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?($(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)):D(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 p=1e3,V={tb:"TB",gb:"GB",mb:"MB",kb:"KB",b:"b"},A=(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(p,4-i)/10;if(r>=d){t=r/Math.pow(p,4-i),e=c;break}}t=Math.round(10*t)/10}return l.html`<strong>${a._formatNumber(t)}</strong>
-		${V[e]}`},q=({size:a,_dragHover:r})=>b.classNames("control",[`size-${a}`,!!a],["drag-hover",r]),S=a=>{const r=a.tagFor(u.Icon),t=a.tagFor(h.Button);return l.html`
+"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>
+		${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">
-			${w.when(e=>e.label,l.html`<label>${e=>e.label}</label>`)}
+			<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
+				${_.when(e=>e.label,l.html`<label class="label">${e=>e.label}</label>`)}
+				<slot name="contextual-help" ${E.slotted("_contextualHelpSlottedContent")}></slot>
+			</div>
 			<div class="control-wrapper">
 				<button
 					type="button"
-					${v.ref("control")}
-					class="${q}"
+					${p.ref("control")}
+					class="${H}"
 					@click="${e=>e._onControlClick()}"
 					@keydown"${()=>!1}"
 					@dragenter="${e=>e._onDragEnter()}"
@@ -28,11 +31,11 @@
 				${e=>e._getFeedbackTemplate(a)}
 			</div>
 			<div class="preview-list">
-				${_.repeat(e=>e._validatedFiles,l.html`
+				${C.repeat(e=>e._validatedFiles,l.html`
 				<div class="${e=>b.classNames("preview",["has-error",!!e.validationError])}">
 					<div class="details">
 						<div class="filename">${e=>e.file.name}</div>
-						<div class="size">${(e,o)=>A(o.parent,e.file.size)}</div>
+						<div class="size">${(e,o)=>S(o.parent,e.file.size)}</div>
 					</div>
 					<div class="error-message">
 						<${r} name="info-line" size="-6"></${r}>
@@ -46,7 +49,7 @@
 			</div>
 		</div>
 		<input
-			${v.ref("_hiddenInput")}
+			${p.ref("_hiddenInput")}
 			class="hidden-input"
 			aria-hidden="true"
 			type="file"
@@ -55,4 +58,4 @@
 			tabindex="-1"
 			@change="${(e,o)=>e._onHiddenInputChange(o.event)}"
 		/>
-	`},B=l.defineVividComponent("file-picker",s,S,[u.iconDefinition,h.buttonDefinition,f.feedbackMessageDefinition],{styles:E,shadowOptions:{delegatesFocus:!0}}),O=l.createRegisterFunction(B);O();
+	`},O=l.defineVividComponent("file-picker",s,B,[u.iconDefinition,h.buttonDefinition,f.feedbackMessageDefinition],{styles:$,shadowOptions:{delegatesFocus:!0}}),I=l.createRegisterFunction(O);I();

package/file-picker/index.js

@@ -1,85 +1,89 @@
 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 k, O as w, a as d, o as v, v as _, h as p, c as E, d as $ } from "../bundled/vivid-element.js";
-import { W as C, f as z } from "../bundled/mixins.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 { 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";
-import { W as V } from "../bundled/with-error-text.js";
-import { F as A } from "../bundled/form-element.js";
+import { W as V } from "../bundled/with-contextual-help.js";
+import { W as A } from "../bundled/with-error-text.js";
+import { F as S } from "../bundled/form-element.js";
 import { L as B } from "../bundled/localized.js";
-import { w as S } from "../bundled/when.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 m } from "../bundled/class-names.js";
-import { r as O } from "../bundled/repeat.js";
-const I = ":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}";
-async function H(a) {
-  return a.items?.[0]?.webkitGetAsEntry != null ? await L(a.items) : Array.from(a.files);
+import { c as f } from "../bundled/class-names.js";
+import { r as I } from "../bundled/repeat.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);
 }
-async function L(a) {
+async function M(a) {
   const r = [];
-  for (const o of a) {
-    const e = o.getAsFile();
+  for (const t of a) {
+    const e = t.getAsFile();
     if (e)
       r.push(Promise.resolve([e]));
     else {
-      const t = o.webkitGetAsEntry();
-      t && r.push(h(t, !1));
+      const o = t.webkitGetAsEntry();
+      o && r.push(h(o, !1));
     }
   }
   return (await Promise.all(r)).flat();
 }
 const h = (a, r) => {
-  const o = (t) => new Promise((i, n) => {
-    t.file((c) => {
+  const t = (o) => new Promise((i, n) => {
+    o.file((c) => {
       r && c.name.substring(0, 1) === "." ? i([]) : i([c]);
     }, n);
-  }), e = a.isFile ? o(a) : a.isDirectory ? M(a) : Promise.resolve([]);
+  }), e = a.isFile ? t(a) : a.isDirectory ? R(a) : Promise.resolve([]);
   return e.catch(() => null), e;
-}, M = async (a) => new Promise((r, o) => {
-  const e = [], t = a.createReader(), i = () => {
-    t.readEntries((n) => {
+}, R = async (a) => new Promise((r, t) => {
+  const e = [], o = a.createReader(), i = () => {
+    o.readEntries((n) => {
       for (const c of n)
         e.push(h(c, !0));
       n.length ? i() : r(Promise.all(e).then((c) => c.flat()));
-    }, o);
+    }, t);
   };
   i();
 });
-function R(a, r) {
+function W(a, r) {
   if (!r)
     return !0;
-  const o = r.split(","), e = (i) => /\/\*$/.test(i), t = (i) => i.replace(/\/.*$/, "");
-  for (let i of o)
+  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 (t(a.type) === t(i))
+      if (o(a.type) === o(i))
         return !0;
     } else if (a.type === i)
       return !0;
   return !1;
 }
-var j = Object.defineProperty, N = Object.getOwnPropertyDescriptor, s = (a, r, o, e) => {
-  for (var t = e > 1 ? void 0 : e ? N(r, o) : r, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (t = (e ? n(r, o, t) : n(t)) || t);
-  return e && t && j(r, o, t), t;
+var N = Object.defineProperty, G = Object.getOwnPropertyDescriptor, s = (a, r, t, e) => {
+  for (var o = e > 1 ? void 0 : e ? G(r, t) : r, i = a.length - 1, n; i >= 0; i--)
+    (n = a[i]) && (o = (e ? n(r, t, o) : n(o)) || o);
+  return e && o && N(r, t, o), o;
 };
-class l extends C(
-  V(
-    A(D(B(T(y))))
+class l extends V(
+  $(
+    A(
+      S(D(B(T(y))))
+    )
   )
 ) {
   constructor() {
-    super(...arguments), this.singleFile = !1, this.maxFileSize = 256, this.valueChanged = (r, o) => {
-      super.valueChanged(r, o), o === "" && this.files.length && this.removeAllFiles();
-    }, this.proxy = document.createElement("input"), this.setFormValue = (r, o) => {
-      typeof r != "string" && super.setFormValue(r, o);
+    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,
-          k
+          w
         );
       }
     }, this._dragHover = !1, this._allFiles = [];
@@ -87,18 +91,18 @@ class l extends C(
   /**
    * @internal
    */
-  nameChanged(r, o) {
-    super.nameChanged(r, o), this.#o();
+  nameChanged(r, t) {
+    super.nameChanged(r, t), this.#t();
   }
-  #o() {
+  #t() {
     const r = this.files;
     if (!this.name)
       this.setFormValue(null);
     else {
-      const o = new FormData();
+      const t = new FormData();
       for (const e of r)
-        o.append(this.name, e);
-      this.setFormValue(o);
+        t.append(this.name, e);
+      this.setFormValue(t);
     }
     this.#i();
   }
@@ -127,7 +131,7 @@ class l extends C(
   #e;
   #r;
   #l() {
-    this.#r = w.binding(
+    this.#r = k.binding(
       () => this.#a(),
       this.#e,
       !0
@@ -154,8 +158,8 @@ class l extends C(
   _onDragOver(r) {
     if (!r.dataTransfer)
       return !0;
-    const o = r.dataTransfer.effectAllowed;
-    return r.dataTransfer.dropEffect = o === "move" || o === "linkMove" ? "move" : "copy", !1;
+    const t = r.dataTransfer.effectAllowed;
+    return r.dataTransfer.dropEffect = t === "move" || t === "linkMove" ? "move" : "copy", !1;
   }
   /**
    * @internal
@@ -167,8 +171,8 @@ class l extends C(
    * @internal
    */
   _onDrop(r) {
-    return this._dragHover = !1, r.dataTransfer ? (H(r.dataTransfer).then((o) => this.#t(o)).catch((o) => {
-      console.error(o);
+    return this._dragHover = !1, r.dataTransfer ? (j(r.dataTransfer).then((t) => this.#o(t)).catch((t) => {
+      console.error(t);
     }), !1) : !0;
   }
   /**
@@ -187,15 +191,15 @@ class l extends C(
    * @internal
    */
   _onRemoveFileClick(r) {
-    this._allFiles = this._allFiles.filter((o) => o !== r), this.$emit("change");
+    this._allFiles = this._allFiles.filter((t) => t !== r), this.$emit("change");
   }
   /**
    * @internal
    */
   _allFilesChanged() {
-    this.#o();
+    this.#t();
   }
-  #t(r) {
+  #o(r) {
     this.singleFile ? r.length > 0 && (this._allFiles = [r[r.length - 1]]) : this._allFiles = [...this._allFiles, ...r], this.$emit("change");
   }
   /**
@@ -205,19 +209,19 @@ class l extends C(
     this._allFiles = [];
   }
   get _validatedFiles() {
-    const r = (t, i) => this.maxFileSize && t.size > this.maxFileSize * 1024 * 1024 ? (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
+    const r = (o, i) => this.maxFileSize && o.size > this.maxFileSize * 1024 * 1024 ? (this.fileTooBigError || this.locale.filePicker.fileTooBigError).replace(
       "{{filesize}}",
-      this._formatNumber(Math.round(t.size / 1024 / 10.24) / 100)
-    ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize)) : R(t, 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, o = [];
+      this._formatNumber(Math.round(o.size / 1024 / 10.24) / 100)
+    ).replace("{{maxFilesize}}", this._formatNumber(this.maxFileSize)) : W(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 t of this._allFiles) {
+    for (const o of this._allFiles) {
       const i = {
-        file: t,
-        validationError: r(t, e)
+        file: o,
+        validationError: r(o, e)
       };
-      o.push(i), i.validationError || e++;
+      t.push(i), i.validationError || e++;
     }
-    return o;
+    return t;
   }
   /**
    * Files that have been added to the file picker and passed validation.
@@ -239,14 +243,14 @@ class l extends C(
    * @internal
    */
   _onHiddenInputChange(r) {
-    this.#t(this._hiddenInput.files), this._hiddenInput.value = "", r.stopPropagation();
+    this.#o(this._hiddenInput.files), this._hiddenInput.value = "", r.stopPropagation();
   }
   /**
    * @internal
    */
   _formatNumber(r) {
-    const o = String(r);
-    return this.locale.common.useCommaAsDecimalSeparator ? o.replace(".", ",") : o;
+    const t = String(r);
+    return this.locale.common.useCommaAsDecimalSeparator ? t.replace(".", ",") : t;
   }
 }
 s([
@@ -285,41 +289,47 @@ s([
 s([
   _
 ], l.prototype, "_validatedFiles", 1);
-const f = 1e3, W = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, G = (a, r) => {
-  let o = 0, e = "b";
+const m = 1e3, Y = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, U = (a, r) => {
+  let t = 0, e = "b";
   if (r > 0) {
-    const t = ["tb", "gb", "mb", "kb", "b"];
-    for (let i = 0; i < t.length; i++) {
-      const n = t[i], c = Math.pow(f, 4 - i) / 10;
+    const o = ["tb", "gb", "mb", "kb", "b"];
+    for (let i = 0; i < o.length; i++) {
+      const n = o[i], c = Math.pow(m, 4 - i) / 10;
       if (r >= c) {
-        o = r / Math.pow(f, 4 - i), e = n;
+        t = r / Math.pow(m, 4 - i), e = n;
         break;
       }
     }
-    o = Math.round(10 * o) / 10;
+    t = Math.round(10 * t) / 10;
   }
-  return p`<strong>${a._formatNumber(o)}</strong>
-		${W[e]}`;
-}, Y = ({ size: a, _dragHover: r }) => m(
+  return p`<strong>${a._formatNumber(t)}</strong>
+		${Y[e]}`;
+}, K = ({ size: a, _dragHover: r }) => f(
   "control",
   [`size-${a}`, !!a],
   ["drag-hover", r]
-), U = (a) => {
-  const r = a.tagFor(b), o = a.tagFor(x);
+), q = (a) => {
+  const r = a.tagFor(b), t = a.tagFor(x);
   return p`
 		<div class="base">
-			${S((e) => e.label, p`<label>${(e) => e.label}</label>`)}
+			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
+				${H(
+    (e) => e.label,
+    p`<label class="label">${(e) => e.label}</label>`
+  )}
+				<slot name="contextual-help" ${O("_contextualHelpSlottedContent")}></slot>
+			</div>
 			<div class="control-wrapper">
 				<button
 					type="button"
 					${u("control")}
-					class="${Y}"
+					class="${K}"
 					@click="${(e) => e._onControlClick()}"
 					@keydown"${() => !1}"
 					@dragenter="${(e) => e._onDragEnter()}"
-					@dragover="${(e, t) => e._onDragOver(t.event)}"
-					@dragleave="${(e, t) => e._onDragLeave(t.event)}"
-					@drop="${(e, t) => e._onDrop(t.event)}"
+					@dragover="${(e, o) => e._onDragOver(o.event)}"
+					@dragleave="${(e, o) => e._onDragLeave(o.event)}"
+					@drop="${(e, o) => e._onDrop(o.event)}"
 					@dragend="${(e) => e._onDragEnd()}"
 					aria-describedby="${(e) => e._feedbackDescribedBy}"
 					${P()}
@@ -335,22 +345,22 @@ const f = 1e3, W = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, G = (a, r
 				${(e) => e._getFeedbackTemplate(a)}
 			</div>
 			<div class="preview-list">
-				${O(
+				${I(
     (e) => e._validatedFiles,
     p`
-				<div class="${(e) => m("preview", ["has-error", !!e.validationError])}">
+				<div class="${(e) => f("preview", ["has-error", !!e.validationError])}">
 					<div class="details">
 						<div class="filename">${(e) => e.file.name}</div>
-						<div class="size">${(e, t) => G(t.parent, e.file.size)}</div>
+						<div class="size">${(e, o) => U(o.parent, e.file.size)}</div>
 					</div>
 					<div class="error-message">
 						<${r} name="info-line" size="-6"></${r}>
 						${(e) => e.validationError}
 					</div>
-					<${o}
+					<${t}
 						class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
-						aria-label="${(e, t) => t.parent.locale.filePicker.removeFileLabel}"
-						@click="${(e, t) => t.parent._onRemoveFileClick(e.file)}"></${o}>
+						aria-label="${(e, o) => o.parent.locale.filePicker.removeFileLabel}"
+						@click="${(e, o) => o.parent._onRemoveFileClick(e.file)}"></${t}>
 				</div>`
   )}
 			</div>
@@ -363,19 +373,19 @@ const f = 1e3, W = { tb: "TB", gb: "GB", mb: "MB", kb: "KB", b: "b" }, G = (a, r
 			?multiple="${(e) => !e.singleFile && (!e.maxFiles || e.maxFiles > 1)}"
 			accept="${(e) => e.accept || null}"
 			tabindex="-1"
-			@change="${(e, t) => e._onHiddenInputChange(t.event)}"
+			@change="${(e, o) => e._onHiddenInputChange(o.event)}"
 		/>
 	`;
-}, K = $(
+}, J = C(
   "file-picker",
   l,
-  U,
+  q,
   [g, F, z],
   {
-    styles: I,
+    styles: L,
     shadowOptions: {
       delegatesFocus: !0
     }
   }
-), q = E(K);
-q();
+), Q = E(J);
+Q();

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

@@ -398,6 +398,10 @@ export declare class AudioPlayer extends AudioPlayer_base {
     connotation?: AudioPlayerConnotation;
     src?: string;
     srcChanged(): void;
+    private revokeSrc;
+    private getCurrentSrc;
+    private canPlayType;
+    private setSrc;
     get playbackRate(): number;
     set playbackRate(value: number);
     disabled: boolean;