@vonage/vivid 5.24.0 → 5.27.0

package/fab/index.js

@@ -2,12 +2,16 @@ import { d as e, m as t, p as n, u as r } from "../bundled/vivid-element.js";
 import { t as i } from "../bundled/ref.js";
 import { t as a } from "../bundled/decorate.js";
 import { t as o } from "../bundled/class-names.js";
-import { t as s } from "../bundled/definition3.js";
+import { t as s } from "../bundled/definition2.js";
 import { a as c, i as l, n as u } from "../bundled/affix.js";
 import { n as d } from "../bundled/delegates-aria.js";
 import { t as f } from "../bundled/button.js";
 //#region src/lib/fab/fab.scss?inline
-var p = ".control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-fab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-fab-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-fab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-fab-accent-firm,var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary:var(--vvd-fab-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-fab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-contrast:var(--vvd-fab-cta-contrast,var(--vvd-color-cta-800));--_connotation-color-fierce:var(--vvd-fab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-firm:var(--vvd-fab-cta-firm,var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary:var(--vvd-fab-announcement-primary,var(--vvd-color-announcement-500));--_connotation-color-primary-text:var(--vvd-fab-announcement-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-fab-announcement-primary-increment,var(--vvd-color-announcement-600));--_connotation-color-contrast:var(--vvd-fab-announcement-contrast,var(--vvd-color-announcement-800));--_connotation-color-fierce:var(--vvd-fab-announcement-fierce,var(--vvd-color-announcement-700));--_connotation-color-firm:var(--vvd-fab-announcement-firm,var(--vvd-color-announcement-600))}.control{--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-fierce);--_appearance-color-outline:transparent}.control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control{user-select:none}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}", m = class extends u(f) {
+var p = ".control{--_fab-inline-padding:12px;box-sizing:border-box;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill,var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text,var(--vvd-color-canvas-text));align-items:center;column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);vertical-align:middle;border:0;transition:background-color .15s linear,filter .15s linear;display:inline-flex}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color:transparent}.control:focus-visible{outline:none;position:relative}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in sRGB, var(--focus-stroke-color,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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.control{user-select:none}.control.size-expanded{--_fab-border-radius:40px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16));--_fab-inline-padding:20px}.control.size-condensed{--_fab-border-radius:20px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed [data-vvd-component=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius:24px;--_fab-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding:0;border-radius:50%;place-content:center}@supports (aspect-ratio:1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio:1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap:10px}.control.disabled{--_elevation-fill:var(--_vvd-tinted-color-surface-nonedp,var(--vvd-color-surface-nonedp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-nonedp,var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill:var(--_vvd-tinted-color-surface-4dp,var(--vvd-color-surface-4dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-4dp,var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover:hover){.control:not(.disabled):hover{--_elevation-fill:var(--_vvd-tinted-color-surface-12dp,var(--vvd-color-surface-12dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-12dp,var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill:var(--_vvd-tinted-color-surface-24dp,var(--vvd-color-surface-24dp));--_elevation-shadow:var(--_vvd-tinted-shadow-surface-24dp,var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{order:1;display:inline-block}.control.size-extended slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16)) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2)}", m = [
+	"cta",
+	"accent",
+	"announcement"
+], h = class extends u(f) {
 	clickHandler(e) {
 		/* v8 ignore else -- @preserve */
 		if (this.disabled) {
@@ -17,13 +21,14 @@ var p = ".control.connotation-accent{--_connotation-color-primary:var(--vvd-fab-
 		return !0;
 	}
 };
+a([t], h.prototype, "connotation", void 0), a([t], h.prototype, "size", void 0), a([t], h.prototype, "label", void 0);
 //#endregion
-//#region src/lib/fab/index.ts
-a([t], m.prototype, "connotation", void 0), a([t], m.prototype, "size", void 0), a([t], m.prototype, "label", void 0), e(r("fab", m, (e) => {
+//#region src/lib/fab/definition.ts
+var g = r("fab", h, (e) => {
 	let t = c(e);
 	return n`
 		<button
-			class="${(e) => o("control", [`connotation-${e.connotation}`, !!e.connotation], [`size-${e.size}`, !!e.size], ["icon-only", !e.label && !!(e.icon || e.iconSlottedContent?.length)], ["icon-trailing", e.iconTrailing], ["disabled", e.disabled])} "
+			class="${(e) => o("control", "appearance-filled", "with-idle", "with-hover", "with-active", "with-disabled", [`connotation-${e.connotation}`, m.includes(e.connotation ?? "")], [`size-${e.size}`, !!e.size], ["icon-only", !e.label && !!(e.icon || e.iconSlottedContent?.length)], ["icon-trailing", e.iconTrailing], ["disabled", e.disabled])} "
 			?autofocus="${(e) => e.autofocus}"
 			form="${(e) => e.formId}"
 			formaction="${(e) => e.formaction}"
@@ -44,5 +49,8 @@ a([t], m.prototype, "connotation", void 0), a([t], m.prototype, "size", void 0),
 }, [s], {
 	styles: p,
 	shadowOptions: { delegatesFocus: !0 }
-}))();
+});
+//#endregion
+//#region src/lib/fab/index.ts
+e(g)();
 //#endregion

package/file-picker/index.cjs

@@ -1,5 +1,5 @@
-const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.cjs`),n=require(`../bundled/repeat.cjs`),r=require(`../bundled/slotted.cjs`),i=require(`../bundled/ref.cjs`),a=require(`../bundled/when.cjs`),o=require(`../bundled/decorate.cjs`),s=require(`../bundled/class-names.cjs`),c=require(`../bundled/definition3.cjs`),l=require(`../bundled/delegates-aria.cjs`),u=require(`../bundled/form-associated.cjs`),d=require(`../bundled/definition6.cjs`),f=require(`../bundled/mixins.cjs`),p=require(`../bundled/form-element.cjs`),m=require(`../bundled/with-contextual-help.cjs`),h=require(`../bundled/with-error-text.cjs`);var g=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@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(--focus-stroke-color,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);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.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{color:var(--vvd-color-cta-600);pointer-events:none}@media (prefers-reduced-motion:no-preference){.upload-icon{transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.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{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}`;async function _(e){return e.items?.[0]?.webkitGetAsEntry==null?Array.from(e.files):await v(e.items)}async function v(e){let t=[];for(let n of e){let e=n.getAsFile();if(e)t.push(Promise.resolve([e]));else{let e=n.webkitGetAsEntry();e&&t.push(y(e,!1))}}return(await Promise.all(t)).flat()}var y=(e,t)=>{let n=e.isFile?(e=>new Promise((n,r)=>{e.file(e=>{t&&e.name.substring(0,1)===`.`?n([]):n([e])},r)}))(e):e.isDirectory?b(e):Promise.resolve([]);return n.catch(()=>null),n},b=async e=>new Promise((t,n)=>{let r=[],i=e.createReader(),a=()=>{i.readEntries(e=>{for(let t of e)r.push(y(t,!0));e.length?a():t(Promise.all(r).then(e=>e.flat()))},n)};a()});function x(e,t){if(!t)return!0;let n=t.split(`,`),r=e=>/\/\*$/.test(e),i=e=>e.replace(/\/.*$/,``);for(let t of n)if(t=t.trim(),t.charAt(0)===`.`){if(e.name.toLowerCase().endsWith(t.toLowerCase()))return!0}else if(r(t)){if(i(e.type)===i(t))return!0}else if(e.type===t)return!0;return!1}var S=class extends m.t(f.t(h.t(p.t(l.t(e.t(u.n(t.t))))))){constructor(...e){super(...e),this.singleFile=!1,this.maxFiles=null,this.maxFileSize=256,this.valueChanged=(e,t)=>{super.valueChanged(e,t),t===``&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{typeof e!=`string`&&super.setFormValue(e,t)},this._customValidationError=null,this.#r={handleChange:()=>{this._customValidationError=this.#i.observe(this,t.O.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(e,t){super.nameChanged(e,t),this.#e()}#e(){let e=this.files;if(!this.name)this.setFormValue(null);else{let t=new FormData;for(let n of e)t.append(this.name,n);this.setFormValue(t)}this.#t()}#t(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:``}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#n(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??``),this.validate()}#r;#i;#a(){this.#i=t.k.binding(()=>this.#n(),this.#r,!0),this.#r.handleChange()}#o(){this.#i.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_onDragEnter(){return this.disabled||(this._dragHover=!0),!0}_onDragOver(e){if(this.disabled||!e.dataTransfer)return!0;let t=e.dataTransfer.effectAllowed;return e.dataTransfer.dropEffect=t===`move`||t===`linkMove`?`move`:`copy`,!1}_onDragLeave(e){return this.disabled||e.currentTarget===e.target&&(this._dragHover=!1),!0}_onDrop(e){return this.disabled||(this._dragHover=!1,!e.dataTransfer)?!0:(_(e.dataTransfer).then(e=>this.#s(e)).catch(e=>{console.error(e)}),!1)}_onDragEnd(){return this.disabled||(this._dragHover=!1),!0}_onControlClick(){this.disabled||this._hiddenInput.click()}_onRemoveFileClick(e){this.disabled||(this._allFiles=this._allFiles.filter(t=>t!==e),this.$emit(`change`))}_allFilesChanged(){this.#e()}#s(e){let t=Array.from(e).filter(e=>!this._allFiles.some(t=>t.name===e.name&&t.size===e.size));this.singleFile&&t.length>0?this._allFiles=[t[t.length-1]]:this._allFiles=[...this._allFiles,...t],this.$emit(`change`)}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){let e=(e,t)=>this.maxFileSize&&e.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace(`{{filesize}}`,this._formatNumber(Math.round(e.size/1024/10.24)/100)).replace(`{{maxFilesize}}`,this._formatNumber(this.maxFileSize)):x(e,this.accept)?typeof this.maxFiles==`number`&&t>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace(`{{maxFiles}}`,String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[],n=0;for(let r of this._allFiles){let i={file:r,validationError:e(r,n)};t.push(i),i.validationError||n++}return t}get files(){return this._validatedFiles.filter(e=>!e.validationError).map(e=>e.file)}get rejectedFiles(){return this._validatedFiles.filter(e=>!!e.validationError).map(e=>e.file)}_onHiddenInputChange(e){this.#s(this._hiddenInput.files),this._hiddenInput.value=``,e.stopPropagation()}_formatNumber(e){let t=String(e);return this.locale.common.useCommaAsDecimalSeparator?t.replace(`.`,`,`):t}};o.t([t.m({attribute:`single-file`,mode:`boolean`})],S.prototype,`singleFile`,void 0),o.t([t.m({attribute:`max-files`,converter:t.h,mode:`fromView`})],S.prototype,`maxFiles`,void 0),o.t([t.m({mode:`fromView`,attribute:`max-file-size`})],S.prototype,`maxFileSize`,void 0),o.t([t.m],S.prototype,`accept`,void 0),o.t([t.m],S.prototype,`size`,void 0),o.t([t.m({attribute:`invalid-file-type-error`})],S.prototype,`invalidFileTypeError`,void 0),o.t([t.m({attribute:`max-files-exceeded-error`})],S.prototype,`maxFilesExceededError`,void 0),o.t([t.m({attribute:`file-too-big-error`})],S.prototype,`fileTooBigError`,void 0),o.t([t.A],S.prototype,`_customValidationError`,void 0),o.t([t.A],S.prototype,`_dragHover`,void 0),o.t([t.A],S.prototype,`_allFiles`,void 0),o.t([t.j],S.prototype,`_validatedFiles`,null);var C=1e3,w={tb:`TB`,gb:`GB`,mb:`MB`,kb:`KB`,b:`b`},T=(e,n)=>{let r=0,i=`b`;if(n>0){let e=[`tb`,`gb`,`mb`,`kb`,`b`];for(let t=0;t<e.length;t++){let a=e[t];if(n>=C**(4-t)/10){r=n/C**(4-t),i=a;break}}r=Math.round(10*r)/10}return t.p`<strong>${e._formatNumber(r)}</strong>
-		${w[i]}`},E=t.u(`file-picker`,S,e=>{let o=e.tagFor(c.r),u=e.tagFor(d.i);return t.p`
+const e=require("../bundled/localized.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/repeat.cjs"),r=require("../bundled/slotted.cjs"),i=require("../bundled/ref.cjs"),a=require("../bundled/when.cjs"),o=require("../bundled/decorate.cjs"),s=require("../bundled/class-names.cjs"),c=require("../bundled/definition2.cjs"),l=require("../bundled/icon.cjs"),u=require("../bundled/delegates-aria.cjs"),d=require("../bundled/form-associated.cjs"),f=require("../bundled/definition5.cjs"),p=require("../bundled/feedback-message.cjs"),m=require("../bundled/form-element.cjs"),h=require("../bundled/with-contextual-help.cjs"),g=require("../bundled/with-error-text.cjs"),_=require("../bundled/mixins.cjs");var v=`.label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;inline-size:100%;padding:15px 16px;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;pointer-events:none;transform:none}.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(--focus-stroke-color,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);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.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{pointer-events:none;font-size:20px;display:block}.upload-icon slot[name=icon]::slotted([data-vvd-component=icon]),.upload-icon [data-vvd-component=icon]{display:inline}@media (prefers-reduced-motion:no-preference){.upload-icon{transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}}@media (hover:hover){.control:hover .upload-icon{animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;transform:scale(1.15)}.control.disabled .upload-icon{animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.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{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}`;async function y(e){return e.items?.[0]?.webkitGetAsEntry==null?Array.from(e.files):await b(e.items)}async function b(e){let t=[];for(let n of e){let e=n.getAsFile();if(e)t.push(Promise.resolve([e]));else{let e=n.webkitGetAsEntry();e&&t.push(x(e,!1))}}return(await Promise.all(t)).flat()}var x=(e,t)=>{let n=e.isFile?(e=>new Promise((n,r)=>{e.file(e=>{t&&e.name.substring(0,1)===`.`?n([]):n([e])},r)}))(e):e.isDirectory?S(e):Promise.resolve([]);return n.catch(()=>null),n},S=async e=>new Promise((t,n)=>{let r=[],i=e.createReader(),a=()=>{i.readEntries(e=>{for(let t of e)r.push(x(t,!0));e.length?a():t(Promise.all(r).then(e=>e.flat()))},n)};a()});function C(e,t){if(!t)return!0;let n=t.split(`,`),r=e=>/\/\*$/.test(e),i=e=>e.replace(/\/.*$/,``);for(let t of n)if(t=t.trim(),t.charAt(0)===`.`){if(e.name.toLowerCase().endsWith(t.toLowerCase()))return!0}else if(r(t)){if(i(e.type)===i(t))return!0}else if(e.type===t)return!0;return!1}var w=class extends h.t(_.t(g.t(m.t(u.t(e.t(d.n(t.t))))))){constructor(...e){super(...e),this.singleFile=!1,this.maxFiles=null,this.maxFileSize=256,this.valueChanged=(e,t)=>{super.valueChanged(e,t),t===``&&this.files.length&&this.removeAllFiles()},this.proxy=document.createElement(`input`),this.setFormValue=(e,t)=>{typeof e!=`string`&&super.setFormValue(e,t)},this._customValidationError=null,this.#r={handleChange:()=>{this._customValidationError=this.#i.observe(this,t.O.default)}},this._dragHover=!1,this._allFiles=[]}nameChanged(e,t){super.nameChanged(e,t),this.#e()}#e(){let e=this.files;if(!this.name)this.setFormValue(null);else{let t=new FormData;for(let n of e)t.append(this.name,n);this.setFormValue(t)}this.#t()}#t(){this.value=this.files.length>0?`C:\\fakepath\\${this.files[0].name}`:``}validate(){super.validate(this.control)}formResetCallback(){this.removeAllFiles(),super.formResetCallback()}#n(){return this.rejectedFiles.length>0?this.locale.filePicker.invalidFilesError:null}_customValidationErrorChanged(){this.proxy&&this.proxy.setCustomValidity(this._customValidationError??``),this.validate()}#r;#i;#a(){this.#i=t.k.binding(()=>this.#n(),this.#r,!0),this.#r.handleChange()}#o(){this.#i.dispose()}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_onDragEnter(){return this.disabled||(this._dragHover=!0),!0}_onDragOver(e){if(this.disabled||!e.dataTransfer)return!0;let t=e.dataTransfer.effectAllowed;return e.dataTransfer.dropEffect=t===`move`||t===`linkMove`?`move`:`copy`,!1}_onDragLeave(e){return this.disabled||e.currentTarget===e.target&&(this._dragHover=!1),!0}_onDrop(e){return this.disabled||(this._dragHover=!1,!e.dataTransfer)?!0:(y(e.dataTransfer).then(e=>this.#s(e)).catch(e=>{console.error(e)}),!1)}_onDragEnd(){return this.disabled||(this._dragHover=!1),!0}_onControlClick(){this.disabled||this._hiddenInput.click()}_onRemoveFileClick(e){this.disabled||(this._allFiles=this._allFiles.filter(t=>t!==e),this.$emit(`change`))}_allFilesChanged(){this.#e()}#s(e){let t=Array.from(e).filter(e=>!this._allFiles.some(t=>t.name===e.name&&t.size===e.size));this._allFiles=this.singleFile&&t.length>0?[t[t.length-1]]:[...this._allFiles,...t],this.$emit(`change`)}removeAllFiles(){this._allFiles=[]}get _validatedFiles(){let e=(e,t)=>this.maxFileSize&&e.size>this.maxFileSize*1024*1024?(this.fileTooBigError||this.locale.filePicker.fileTooBigError).replace(`{{filesize}}`,this._formatNumber(Math.round(e.size/1024/10.24)/100)).replace(`{{maxFilesize}}`,this._formatNumber(this.maxFileSize)):C(e,this.accept)?typeof this.maxFiles==`number`&&t>=this.maxFiles?(this.maxFilesExceededError||this.locale.filePicker.maxFilesExceededError).replace(`{{maxFiles}}`,String(this.maxFiles)):null:this.invalidFileTypeError||this.locale.filePicker.invalidFileTypeError,t=[],n=0;for(let r of this._allFiles){let i={file:r,validationError:e(r,n)};t.push(i),i.validationError||n++}return t}get files(){return this._validatedFiles.filter(e=>!e.validationError).map(e=>e.file)}get rejectedFiles(){return this._validatedFiles.filter(e=>!!e.validationError).map(e=>e.file)}_onHiddenInputChange(e){this.#s(this._hiddenInput.files),this._hiddenInput.value=``,e.stopPropagation()}_formatNumber(e){let t=String(e);return this.locale.common.useCommaAsDecimalSeparator?t.replace(`.`,`,`):t}};o.t([t.m({attribute:`single-file`,mode:`boolean`})],w.prototype,`singleFile`,void 0),o.t([t.m({attribute:`max-files`,converter:t.h,mode:`fromView`})],w.prototype,`maxFiles`,void 0),o.t([t.m({mode:`fromView`,attribute:`max-file-size`})],w.prototype,`maxFileSize`,void 0),o.t([t.m],w.prototype,`accept`,void 0),o.t([t.m],w.prototype,`size`,void 0),o.t([t.m({attribute:`invalid-file-type-error`})],w.prototype,`invalidFileTypeError`,void 0),o.t([t.m({attribute:`max-files-exceeded-error`})],w.prototype,`maxFilesExceededError`,void 0),o.t([t.m({attribute:`file-too-big-error`})],w.prototype,`fileTooBigError`,void 0),o.t([t.A],w.prototype,`_customValidationError`,void 0),o.t([t.A],w.prototype,`_dragHover`,void 0),o.t([t.A],w.prototype,`_allFiles`,void 0),o.t([t.j],w.prototype,`_validatedFiles`,null);var T=1e3,E={tb:`TB`,gb:`GB`,mb:`MB`,kb:`KB`,b:`b`},D=(e,n)=>{let r=0,i=`b`;if(n>0){let e=[`tb`,`gb`,`mb`,`kb`,`b`];for(let t=0;t<e.length;t++){let a=e[t];if(n>=T**(4-t)/10){r=n/T**(4-t),i=a;break}}r=Math.round(10*r)/10}return t.p`<strong>${e._formatNumber(r)}</strong>
+		${E[i]}`},O=t.u(`file-picker`,w,e=>{let o=e.tagFor(l.t),c=e.tagFor(f.i);return t.p`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${e=>!e.label&&!e._hasContextualHelp}>
 				${a.t(e=>e.label,t.p`<label class="label">${e=>e.label}</label>`)}
@@ -18,14 +18,12 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 					@dragleave="${(e,t)=>e._onDragLeave(t.event)}"
 					@drop="${(e,t)=>e._onDrop(t.event)}"
 					@dragend="${e=>e._onDragEnd()}"
-					${l.n({ariaDescribedBy:e=>e._feedbackDescribedBy})}
+					${u.n({ariaDescribedBy:e=>e._feedbackDescribedBy})}
 				>
-					<${o}
-						class="upload-icon"
-						name="cloud-upload-line"
-						size="-4"
-						label="${e=>e.locale.filePicker.uploadFilesLabel}"
-					></${o}>
+					<span class="upload-icon"><slot name="icon"><${o}
+								name="cloud-upload-line"
+								label="${e=>e.locale.filePicker.uploadFilesLabel}"
+							></${o}></slot></span>
 					<span class="upload-text"><slot></slot></span>
 				</button>
 				${t=>t._getFeedbackTemplate(e)}
@@ -35,17 +33,17 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 				<div class="${e=>s.t(`preview`,[`has-error`,!!e.validationError])}">
 					<div class="details">
 						<div class="filename">${e=>e.file.name}</div>
-						<div class="size">${(e,t)=>T(t.parent,e.file.size)}</div>
+						<div class="size">${(e,t)=>D(t.parent,e.file.size)}</div>
 					</div>
 					<div class="error-message">
 						<${o} name="info-line" size="-6"></${o}>
 						${e=>e.validationError}
 					</div>
-				<${u}
+				<${c}
 					class="remove-btn" icon="delete-line" appearance="ghost-light" size="condensed"
 					?disabled="${(e,t)=>t.parent.disabled}"
 					aria-label="${(e,t)=>t.parent.locale.filePicker.removeFileLabel}"
-					@click="${(e,t)=>t.parent._onRemoveFileClick(e.file)}"></${u}>
+					@click="${(e,t)=>t.parent._onRemoveFileClick(e.file)}"></${c}>
 				</div>`)}
 			</div>
 		</div>
@@ -60,4 +58,4 @@ const e=require(`../bundled/localized.cjs`),t=require(`../bundled/vivid-element.
 			tabindex="-1"
 			@change="${(e,t)=>e._onHiddenInputChange(t.event)}"
 		/>
-	`},[c.t,d.t,f.r],{styles:g,shadowOptions:{delegatesFocus:!0}});t.d(E)();
+	`},[c.t,f.t,p.n],{styles:v,shadowOptions:{delegatesFocus:!0}});t.d(O)();

package/file-picker/index.js

@@ -6,16 +6,18 @@ import { t as p } from "../bundled/ref.js";
 import { t as m } from "../bundled/when.js";
 import { t as h } from "../bundled/decorate.js";
 import { t as g } from "../bundled/class-names.js";
-import { r as _, t as v } from "../bundled/definition3.js";
+import { t as _ } from "../bundled/definition2.js";
+import { t as v } from "../bundled/icon.js";
 import { n as y, t as b } from "../bundled/delegates-aria.js";
 import { n as x } from "../bundled/form-associated.js";
-import { i as S, t as C } from "../bundled/definition6.js";
-import { r as w, t as T } from "../bundled/mixins.js";
-import { t as E } from "../bundled/form-element.js";
-import { t as D } from "../bundled/with-contextual-help.js";
-import { t as O } from "../bundled/with-error-text.js";
+import { i as S, t as C } from "../bundled/definition5.js";
+import { n as w } from "../bundled/feedback-message.js";
+import { t as T } from "../bundled/form-element.js";
+import { t as E } from "../bundled/with-contextual-help.js";
+import { t as D } from "../bundled/with-error-text.js";
+import { t as O } from "../bundled/mixins.js";
 //#region src/lib/file-picker/file-picker.scss?inline
-var k = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;min-block-size:52px;inline-size:100%;padding:16px;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{color:var(--vvd-color-neutral-600);isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;color:var(--vvd-color-neutral-300);pointer-events:none;transform:none}.control.disabled .upload-text{color:var(--vvd-color-neutral-300)}@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(--focus-stroke-color,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);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.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{color:var(--vvd-color-cta-600);pointer-events:none}@media (prefers-reduced-motion:no-preference){.upload-icon{transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}}@media (hover:hover){.control:hover .upload-icon{color:var(--vvd-color-cta-700);animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{color:var(--vvd-color-neutral-800);animation:none;transform:scale(1.15)}.control.disabled .upload-icon{color:var(--vvd-color-neutral-300);animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.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{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
+var k = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}:host{max-inline-size:400px;display:block}:host([disabled]){cursor:not-allowed}.base{block-size:inherit;max-block-size:inherit;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;display:flex}.control-wrapper{block-size:inherit;max-block-size:inherit;flex-direction:column;gap:4px;display:flex}.control{box-sizing:border-box;border:1px dashed var(--vvd-color-neutral-400);background-color:var(--vvd-color-cta-50);color:var(--vvd-color-neutral-600);cursor:pointer;font:var(--vvd-typography-base);border-radius:8px;outline:none;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;inline-size:100%;padding:15px 16px;display:flex;position:relative}@media (prefers-reduced-motion:no-preference){.control{transition:all .3s}}.control .upload-text{isolation:isolate;pointer-events:none;text-align:center;justify-content:center;align-items:center;display:flex}@media (prefers-reduced-motion:no-preference){.control .upload-text{transition:all .3s}}.control.disabled{border-color:var(--vvd-color-neutral-300);background-color:var(--vvd-color-neutral-100);box-shadow:none;pointer-events:none;transform:none}.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(--focus-stroke-color,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);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}@media (hover:hover){.control:hover{border-color:var(--vvd-color-cta-400);background-color:var(--vvd-color-cta-100);transform:translateY(-1px);box-shadow:0 2px 8px #0000001a}}.control:active{transform:translateY(0);box-shadow:0 1px 4px #0000001a}.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{pointer-events:none;font-size:20px;display:block}.upload-icon slot[name=icon]::slotted([data-vvd-component=icon]),.upload-icon [data-vvd-component=icon]{display:inline}@media (prefers-reduced-motion:no-preference){.upload-icon{transition:all .3s;animation:2s ease-in-out infinite subtle-pulse}}@media (hover:hover){.control:hover .upload-icon{animation:none;transform:scale(1.1)}}.control:active .upload-icon{transform:scale(1.05)}.control.drag-hover .upload-icon{animation:none;transform:scale(1.15)}.control.disabled .upload-icon{animation:none}@keyframes subtle-pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.8;transform:scale(1.05)}}.main{pointer-events:none}.preview{box-sizing:border-box;border:1px solid var(--vvd-color-neutral-300);background-color:var(--file-picker-list-item-background-color,var(--vvd-color-canvas));border-radius:8px;grid-template-rows:auto auto;grid-template-columns:1fr auto;inline-size:100%;padding:8px;display:grid}.preview .details{min-width:0;flex-direction:column;max-inline-size:100%;display:flex}.preview .details .filename{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);text-overflow:ellipsis;white-space:nowrap;overflow:hidden}.preview .details .size{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.preview .error-message{color:var(--vvd-color-alert-600);font:var(--vvd-typography-base-condensed-bold);align-items:center;gap:4px;margin-block-start:4px;display:flex}.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{grid-area:1/2/-1/-1;align-self:center;display:inline}.preview-list{--scrollbar-track-color:transparent;--scrollbar-thumb-color:color-mix(in sRGB, var(--vvd-color-neutral-950), transparent 70%);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{background-color:var(--scrollbar-fallback-track-color,var(--scrollbar-thumb-color));border:0;border-radius:4px}.preview-list{flex-direction:column;gap:12px;margin-block-start:12px;display:flex;overflow-y:auto}.preview-list:not(:has(.preview)){display:none}.hidden-input{visibility:hidden;width:0;height:0;position:absolute;top:0;left:0}";
 //#endregion
 //#region src/lib/file-picker/data-transfer.ts
 async function A(e) {
@@ -63,7 +65,7 @@ function P(e, t) {
 }
 //#endregion
 //#region src/lib/file-picker/file-picker.ts
-var F = class extends D(T(O(E(b(e(x(l))))))) {
+var F = class extends E(O(D(T(b(e(x(l))))))) {
 	constructor(...e) {
 		super(...e), this.singleFile = !1, this.maxFiles = null, this.maxFileSize = 256, this.valueChanged = (e, t) => {
 			super.valueChanged(e, t), t === "" && this.files.length && this.removeAllFiles();
@@ -124,7 +126,9 @@ var F = class extends D(T(O(E(b(e(x(l))))))) {
 		return e.dataTransfer.dropEffect = t === "move" || t === "linkMove" ? "move" : "copy", !1;
 	}
 	_onDragLeave(e) {
-		return this.disabled || e.currentTarget === e.target && (this._dragHover = !1), !0;
+		return this.disabled || 
+		/* v8 ignore else -- @preserve */
+		e.currentTarget === e.target && (this._dragHover = !1), !0;
 	}
 	_onDrop(e) {
 		return this.disabled || (this._dragHover = !1, !e.dataTransfer) ? !0 : (A(e.dataTransfer).then((e) => this.#s(e)).catch((e) => {
@@ -145,7 +149,7 @@ var F = class extends D(T(O(E(b(e(x(l))))))) {
 	}
 	#s(e) {
 		let t = Array.from(e).filter((e) => !this._allFiles.some((t) => t.name === e.name && t.size === e.size));
-		this.singleFile && t.length > 0 ? this._allFiles = [t[t.length - 1]] : this._allFiles = [...this._allFiles, ...t], this.$emit("change");
+		this._allFiles = this.singleFile && t.length > 0 ? [t[t.length - 1]] : [...this._allFiles, ...t], this.$emit("change");
 	}
 	removeAllFiles() {
 		this._allFiles = [];
@@ -216,11 +220,8 @@ var I = 1e3, L = {
 	}
 	return c`<strong>${e._formatNumber(n)}</strong>
 		${L[r]}`;
-};
-//#endregion
-//#region src/lib/file-picker/index.ts
-r(u("file-picker", F, (e) => {
-	let t = e.tagFor(_), n = e.tagFor(S);
+}, z = u("file-picker", F, (e) => {
+	let t = e.tagFor(v), n = e.tagFor(S);
 	return c`
 		<div class="base">
 			<div class="label-wrapper" ?hidden=${(e) => !e.label && !e._hasContextualHelp}>
@@ -234,7 +235,9 @@ r(u("file-picker", F, (e) => {
 				class="${(e) => g("control", [`size-${e.size}`, !!e.size], ["drag-hover", e._dragHover], ["disabled", e.disabled])}"
 				?disabled="${(e) => e.disabled}"
 				@click="${(e) => e._onControlClick()}"
-					@keydown="${() => !1}"
+					@keydown="${
+	/* v8 ignore next -- @preserve -- Prevent implicit form submission on Enter */
+	() => !1}"
 					@dragenter="${(e) => e._onDragEnter()}"
 					@dragover="${(e, t) => e._onDragOver(t.event)}"
 					@dragleave="${(e, t) => e._onDragLeave(t.event)}"
@@ -242,12 +245,10 @@ r(u("file-picker", F, (e) => {
 					@dragend="${(e) => e._onDragEnd()}"
 					${y({ ariaDescribedBy: (e) => e._feedbackDescribedBy })}
 				>
-					<${t}
-						class="upload-icon"
-						name="cloud-upload-line"
-						size="-4"
-						label="${(e) => e.locale.filePicker.uploadFilesLabel}"
-					></${t}>
+					<span class="upload-icon"><slot name="icon"><${t}
+								name="cloud-upload-line"
+								label="${(e) => e.locale.filePicker.uploadFilesLabel}"
+							></${t}></slot></span>
 					<span class="upload-text"><slot></slot></span>
 				</button>
 				${(t) => t._getFeedbackTemplate(e)}
@@ -284,11 +285,14 @@ r(u("file-picker", F, (e) => {
 		/>
 	`;
 }, [
-	v,
+	_,
 	C,
 	w
 ], {
 	styles: k,
 	shadowOptions: { delegatesFocus: !0 }
-}))();
+});
+//#endregion
+//#region src/lib/file-picker/index.ts
+r(z)();
 //#endregion

package/flag/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/definition.cjs`),r=require(`../bundled/decorate.cjs`),i=require(`../bundled/class-names.cjs`),a=require(`../bundled/numberConverter.cjs`),o=require(`../bundled/utils.cjs`);var s=`:host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}`,c=500,l=2e3,u=class extends e.t{constructor(...e){super(...e),this.flagLoaded=!1,this.#e=0,this.#t=null}#e;#t;async codeChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController;let t=o.t(this.code);if(!t){this._svg=``,this.flagLoaded=!0;return}this._svg=void 0,this.flagLoaded=!1;let n=setTimeout(()=>{this.#e===e&&(this._svg=a.r,n=setTimeout(()=>{this.#e===e&&this._svg===a.r&&(this._svg=void 0)},l))},c);try{let n=await a.n(t,this.#t.signal);this.#e===e&&(this._svg=n)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(n),this.flagLoaded=!0)}}};r.t([e.m],u.prototype,`code`,void 0),r.t([e.m],u.prototype,`label`,void 0),r.t([e.m({converter:a.t})],u.prototype,`size`,void 0),r.t([e.A],u.prototype,`_svg`,void 0),r.t([e.A],u.prototype,`flagLoaded`,void 0);var d=e.u(`flag`,u,r=>{let a=r.tagFor(n.r),o=e=>!e.label||e.label.trim().length===0;return e.p`
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/when.cjs"),n=require("../bundled/definition.cjs"),r=require("../bundled/decorate.cjs"),i=require("../bundled/class-names.cjs"),a=require("../bundled/numberConverter.cjs"),o=require("../bundled/utils.cjs");var s=`:host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)) - 1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20))}.control.size--4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16))}.control.size--3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 12))}.control.size--2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8))}.control.size--1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4))}.control.size-0{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)))}.control.size-1{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 4))}.control.size-2{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 8))}.control.size-3{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 12))}.control.size-4{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 16))}.control.size-5{--_flag-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) + 20))}.control:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-0,.size-1,.size-2,.size-3,.size-4,.size-5){--_flag-block-size:1em}.control{margin:unset;block-size:var(--_flag-block-size);color:currentColor;contain:strict;inline-size:var(--_flag-block-size);display:flex}svg{block-size:inherit;inline-size:inherit;margin:auto}`,c=500,l=2e3,u=class extends e.t{constructor(...e){super(...e),this.flagLoaded=!1,this.#e=0,this.#t=null}#e;#t;async codeChanged(){let e=++this.#e;this.#t&&this.#t.abort(),this.#t=new AbortController;let t=o.t(this.code);if(!t){this._svg=``,this.flagLoaded=!0;return}this._svg=void 0,this.flagLoaded=!1;let n=setTimeout(()=>{this.#e===e&&(this._svg=a.r,n=setTimeout(()=>{this.#e===e&&this._svg===a.r&&(this._svg=void 0)},l))},c);try{let n=await a.n(t,this.#t.signal);this.#e===e&&(this._svg=n)}catch{this.#e===e&&(this._svg=void 0)}finally{this.#e===e&&(clearTimeout(n),this.flagLoaded=!0)}}};r.t([e.m],u.prototype,`code`,void 0),r.t([e.m],u.prototype,`label`,void 0),r.t([e.m({converter:a.t})],u.prototype,`size`,void 0),r.t([e.A],u.prototype,`_svg`,void 0),r.t([e.A],u.prototype,`flagLoaded`,void 0);var d=e.u(`flag`,u,r=>{let a=r.tagFor(n.r),o=e=>!e.label||e.label.trim().length===0;return e.p`
 		<figure
 			class="${e=>i.t(`control`,[`size-${e.size}`,typeof e.size==`number`])}"
 			?aria-hidden="${e=>o(e)}"

package/flag/index.js

@@ -39,9 +39,10 @@ var h = ":host{vertical-align:sub;display:inline-block}.control.size--6{--_flag-
 		}
 	}
 };
+l([n], v.prototype, "code", void 0), l([n], v.prototype, "label", void 0), l([n({ converter: p })], v.prototype, "size", void 0), l([e], v.prototype, "_svg", void 0), l([e], v.prototype, "flagLoaded", void 0);
 //#endregion
-//#region src/lib/flag/index.ts
-l([n], v.prototype, "code", void 0), l([n], v.prototype, "label", void 0), l([n({ converter: p })], v.prototype, "size", void 0), l([e], v.prototype, "_svg", void 0), l([e], v.prototype, "flagLoaded", void 0), t(a("flag", v, (e) => {
+//#region src/lib/flag/definition.ts
+var y = a("flag", v, (e) => {
 	let t = e.tagFor(c), n = (e) => !e.label || e.label.trim().length === 0;
 	return r`
 		<figure
@@ -53,5 +54,8 @@ l([n], v.prototype, "code", void 0), l([n], v.prototype, "label", void 0), l([n(
 			<${t} class="label">${(e) => e?.label}</${t}>
 		</figure>
 	`;
-}, [s], { styles: h }))();
+}, [s], { styles: h });
+//#endregion
+//#region src/lib/flag/index.ts
+t(y)();
 //#endregion

package/form-field/definition.cjs

@@ -0,0 +1,5 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition45.cjs");
+exports.VwcFormFieldElement = require_definition.FormField;
+exports.formFieldDefinition = require_definition.formFieldDefinition;
+exports.registerFormField = require_definition.registerFormField;

package/form-field/definition.js

@@ -0,0 +1,2 @@
+import { n as registerFormField, r as FormField, t as formFieldDefinition } from "../unbundled/definition45.js";
+export { FormField as VwcFormFieldElement, formFieldDefinition, registerFormField };

package/form-field/index.cjs

@@ -0,0 +1,29 @@
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/slotted.cjs"),n=require("../bundled/decorate.cjs"),r=require("../bundled/feedback-message.cjs");var i=class extends e.t{get _hasLabelRow(){let e=this._labelSlottedContent?.length??0,t=this._contextualHelpSlottedContent?.length??0,n=this._accessorySlottedContent?.length??0;return e+t+n>0}get _hasAccessory(){return!!this._accessorySlottedContent?.length}_getMessageType(){let e=this.state;return this._messageSlottedContent?.length?e??`helper`:`none`}};n.t([e.m],i.prototype,`state`,void 0),n.t([e.A],i.prototype,`_labelSlottedContent`,void 0),n.t([e.A],i.prototype,`_contextualHelpSlottedContent`,void 0),n.t([e.A],i.prototype,`_accessorySlottedContent`,void 0),n.t([e.A],i.prototype,`_messageSlottedContent`,void 0);var a=e.u(`form-field`,i,n=>{let i=n.tagFor(r.t);return e.p`
+		<div class="base">
+			<div class="label-row" ?hidden="${e=>!e._hasLabelRow}">
+				<span class="label-group">
+					<slot
+						name="label"
+						${t.t(`_labelSlottedContent`)}
+					></slot>
+					<slot
+						name="contextual-help"
+						${t.t(`_contextualHelpSlottedContent`)}
+					></slot>
+				</span>
+				<span class="accessory" ?hidden="${e=>!e._hasAccessory}">
+					<slot
+						name="accessory"
+						${t.t(`_accessorySlottedContent`)}
+					></slot>
+				</span>
+			</div>
+			<slot></slot>
+			<${i} class="message" :type="${e=>e._getMessageType()}">
+				<slot
+					name="message"
+					${t.t(`_messageSlottedContent`)}
+				></slot>
+			</${i}>
+		</div>
+	`},[r.n],{styles:`:host{display:inline-block}.base{overflow-wrap:anywhere;grid-template-columns:100%;gap:4px;display:grid}.label-row:not([hidden]){justify-content:space-between;align-items:baseline;gap:8px;display:flex}.label-group{align-items:center;gap:4px;display:inline-flex}slot[name=label]{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.accessory{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.message{font:var(--vvd-typography-base-condensed)}`});e.d(a)();

package/form-field/index.js

@@ -0,0 +1,57 @@
+import { A as e, d as t, m as n, p as r, t as i, u as a } from "../bundled/vivid-element.js";
+import { t as o } from "../bundled/slotted.js";
+import { t as s } from "../bundled/decorate.js";
+import { n as c, t as l } from "../bundled/feedback-message.js";
+//#region src/lib/form-field/form-field.ts
+var u = class extends i {
+	get _hasLabelRow() {
+		let e = this._labelSlottedContent?.length ?? 0, t = this._contextualHelpSlottedContent?.length ?? 0, n = this._accessorySlottedContent?.length ?? 0;
+		return e + t + n > 0;
+	}
+	get _hasAccessory() {
+		return !!this._accessorySlottedContent?.length;
+	}
+	_getMessageType() {
+		let e = this.state;
+		return this._messageSlottedContent?.length ? e ?? "helper" : "none";
+	}
+};
+s([n], u.prototype, "state", void 0), s([e], u.prototype, "_labelSlottedContent", void 0), s([e], u.prototype, "_contextualHelpSlottedContent", void 0), s([e], u.prototype, "_accessorySlottedContent", void 0), s([e], u.prototype, "_messageSlottedContent", void 0);
+//#endregion
+//#region src/lib/form-field/definition.ts
+var d = a("form-field", u, (e) => {
+	let t = e.tagFor(l);
+	return r`
+		<div class="base">
+			<div class="label-row" ?hidden="${(e) => !e._hasLabelRow}">
+				<span class="label-group">
+					<slot
+						name="label"
+						${o("_labelSlottedContent")}
+					></slot>
+					<slot
+						name="contextual-help"
+						${o("_contextualHelpSlottedContent")}
+					></slot>
+				</span>
+				<span class="accessory" ?hidden="${(e) => !e._hasAccessory}">
+					<slot
+						name="accessory"
+						${o("_accessorySlottedContent")}
+					></slot>
+				</span>
+			</div>
+			<slot></slot>
+			<${t} class="message" :type="${(e) => e._getMessageType()}">
+				<slot
+					name="message"
+					${o("_messageSlottedContent")}
+				></slot>
+			</${t}>
+		</div>
+	`;
+}, [c], { styles: ":host{display:inline-block}.base{overflow-wrap:anywhere;grid-template-columns:100%;gap:4px;display:grid}.label-row:not([hidden]){justify-content:space-between;align-items:baseline;gap:8px;display:flex}.label-group{align-items:center;gap:4px;display:inline-flex}slot[name=label]{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.accessory{color:var(--vvd-color-neutral-600);font:var(--vvd-typography-base-condensed)}.message{font:var(--vvd-typography-base-condensed)}" });
+//#endregion
+//#region src/lib/form-field/index.ts
+t(d)();
+//#endregion

package/header/definition.cjs

@@ -1,5 +1,5 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_definition = require("../unbundled/definition45.cjs");
+const require_definition = require("../unbundled/definition46.cjs");
 exports.VwcHeaderElement = require_definition.Header;
 exports.headerDefinition = require_definition.headerDefinition;
 exports.registerHeader = require_definition.registerHeader;

package/header/definition.js

@@ -1,2 +1,2 @@
-import { n as registerHeader, r as Header, t as headerDefinition } from "../unbundled/definition45.js";
+import { n as registerHeader, r as Header, t as headerDefinition } from "../unbundled/definition46.js";
 export { Header as VwcHeaderElement, headerDefinition, registerHeader };

package/header/index.cjs

@@ -1,4 +1,4 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`),i=require(`../bundled/definition7.cjs`);var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.m({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=e.u(`header`,o,t=>{let a=t.tagFor(i.r);return e.p`
+const e=require("../bundled/vivid-element.cjs"),t=require("../bundled/decorate.cjs"),n=require("../bundled/class-names.cjs"),r=require("../bundled/delegates-aria.cjs"),i=require("../bundled/definition6.cjs");var a=`.base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}`,o=class extends r.t(e.t){constructor(...e){super(...e),this.elevationShadow=!1,this.alternate=!1}};t.t([e.m({attribute:`elevation-shadow`,mode:`boolean`})],o.prototype,`elevationShadow`,void 0),t.t([e.m({mode:`boolean`})],o.prototype,`alternate`,void 0);var s=e.u(`header`,o,t=>{let a=t.tagFor(i.r);return e.p`
     <${a} dp="4" ?no-shadow=${e=>!e.elevationShadow}>
       <header class="base" part="base" ${r.n()}>
         <!-- a container is needed to distinguish the surface background color of the

package/header/index.js

@@ -2,19 +2,20 @@ import { d as e, m as t, p as n, t as r, u as i } from "../bundled/vivid-element
 import { t as a } from "../bundled/decorate.js";
 import { t as o } from "../bundled/class-names.js";
 import { n as s, t as c } from "../bundled/delegates-aria.js";
-import { r as l, t as u } from "../bundled/definition7.js";
+import { r as l, t as u } from "../bundled/definition6.js";
 //#region src/lib/header/header.scss?inline
 var d = ".base{z-index:1;block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)));font:var(--vvd-typography-heading-4);inline-size:100%}.base .header-content{align-items:center;column-gap:4px;display:inline-flex}.container{box-sizing:border-box;background-color:var(--header-bg-color,var(--vvd-color-canvas));block-size:inherit;color:var(--vvd-color-canvas-text);justify-content:space-between;column-gap:12px;padding-block:8px;padding-inline:16px;display:flex}.container[part~=vvd-theme-alternate]{color-scheme:var(--vvd-color-scheme)}.app-content{--vvd-header-block-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) + calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)))}", f = class extends c(r) {
 	constructor(...e) {
 		super(...e), this.elevationShadow = !1, this.alternate = !1;
 	}
 };
-//#endregion
-//#region src/lib/header/index.ts
 a([t({
 	attribute: "elevation-shadow",
 	mode: "boolean"
-})], f.prototype, "elevationShadow", void 0), a([t({ mode: "boolean" })], f.prototype, "alternate", void 0), e(i("header", f, (e) => {
+})], f.prototype, "elevationShadow", void 0), a([t({ mode: "boolean" })], f.prototype, "alternate", void 0);
+//#endregion
+//#region src/lib/header/definition.ts
+var p = i("header", f, (e) => {
 	let t = e.tagFor(l);
 	return n`
     <${t} dp="4" ?no-shadow=${(e) => !e.elevationShadow}>
@@ -35,5 +36,8 @@ a([t({
       <slot name="app-content"></slot>
     </div>
 	`;
-}, [u], { styles: d }))();
+}, [u], { styles: d });
+//#endregion
+//#region src/lib/header/index.ts
+e(p)();
 //#endregion

package/icon/definition.cjs

@@ -1,5 +1,6 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_definition = require("../unbundled/definition.cjs");
-exports.VwcIconElement = require_definition.Icon;
+const require_icon = require("../unbundled/icon.cjs");
+exports.VwcIconElement = require_icon.Icon;
 exports.iconDefinition = require_definition.iconDefinition;
 exports.registerIcon = require_definition.registerIcon;

package/icon/definition.js

@@ -1,2 +1,3 @@
-import { n as registerIcon, r as Icon, t as iconDefinition } from "../unbundled/definition.js";
+import { n as registerIcon, t as iconDefinition } from "../unbundled/definition.js";
+import { t as Icon } from "../unbundled/icon.js";
 export { Icon as VwcIconElement, iconDefinition, registerIcon };

package/icon/index.cjs

@@ -1 +1 @@
-require(`../bundled/definition3.cjs`).n();
+require("../bundled/definition2.cjs").n();

package/icon/index.js

@@ -1,4 +1,4 @@
-import { n as e } from "../bundled/definition3.js";
+import { n as e } from "../bundled/definition2.js";
 //#region src/lib/icon/index.ts
 e();
 //#endregion