@skdx/web-components 0.28.0 → 0.29.0

package/dist/file-upload/FileUpload.cjs

@@ -1,5 +1,5 @@
-"use strict";var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var A=Object.getOwnPropertyNames;var D=Object.prototype.hasOwnProperty;var L=(t,r)=>{for(var e in r)p(t,e,{get:r[e],enumerable:!0})},I=(t,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of A(r))!D.call(t,n)&&n!==e&&p(t,n,{get:()=>r[n],enumerable:!(a=b(r,n))||a.enumerable});return t};var B=t=>I(p({},"__esModule",{value:!0}),t),s=(t,r,e,a)=>{for(var n=a>1?void 0:a?b(r,e):r,o=t.length-1,u;o>=0;o--)(u=t[o])&&(n=(a?u(r,e,n):u(n))||n);return a&&n&&p(r,e,n),n};var O={};L(O,{SkdxFileUpload:()=>i});module.exports=B(O);var d=require("lit"),l=require("lit/decorators.js"),g=require("../internal/authored.cjs"),F=require("../internal/define.cjs"),E=require("../internal/form-associated.cjs"),v=require("../internal/ids.cjs"),w=require("../internal/positioning.cjs"),m=require("../utils/live-announcer.cjs"),f=require("./FileUploadAnatomy.cjs");function _(t){return t?"Required. No file selected":"Required"}function q(t,r){if(!r)return!0;let e=r.split(",").map(o=>o.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let a=t.name.toLowerCase(),n=t.type.toLowerCase();return e.some(o=>o.startsWith(".")?a.endsWith(o):o.endsWith("/*")?n.startsWith(o.slice(0,-1)):n===o)}function C(t){return`Remove ${t}`}function y(t){return t.length===0?"":t.length===1?`${t[0]} removed`:`${t.length} files removed`}function P(t,r){let e=[];if(t>0&&e.push(`${t} ${t===1?"file":"files"} added`),r.length>0){let a=[...new Set(r)].join(", "),n=r.length;e.push(`${n} ${n===1?"file":"files"} refused: ${a}`)}return e.join(". ")}function z(t,r){let e=[];return q(t,r.accept)||e.push("file-invalid-type"),r.maxFileSize!==void 0&&t.size>r.maxFileSize&&e.push("file-too-large"),r.minFileSize!==void 0&&t.size<r.minFileSize&&e.push("file-too-small"),e.push(...r.validate?.(t)??[]),e}var i=class extends(0,E.FormAssociated)(d.LitElement){constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.directory=!1;this.preventDocumentDrop=!0;this.required=!1;this.removeLabel=C;this.showList=!0;this.showPreview=!1;this.labelId=(0,v.nextId)("skdx-file-upload-label");this.descriptionId=(0,v.nextId)("skdx-file-upload-description");this.descriptionEl=null;this.labelPresent=!1;this.internalFiles=[];this.inputEl=null;this.onDocumentDrag=e=>{if(!this.preventDocumentDrop)return;let a=e.composedPath()[0]??e.target;a instanceof Element&&a.closest('[data-part="dropzone"]')||e.preventDefault()};this._anatomyBuilt=!1;this._fillAnatomy=()=>{if((0,g.hasAuthoredParts)(this,f.FILE_UPLOAD_ANATOMY_GENERATED)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,(0,f.fillFileUploadAnatomy)(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get files(){return this.value??this.internalFiles}get isInvalid(){return this.invalid||this.required&&this.files.length===0}connectedCallback(){super.connectedCallback(),document.addEventListener("dragover",this.onDocumentDrag),document.addEventListener("drop",this.onDocumentDrag),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){document.removeEventListener("dragover",this.onDocumentDrag),document.removeEventListener("drop",this.onDocumentDrag),super.disconnectedCallback()}willUpdate(e){!this.hasUpdated&&this.value===void 0&&this.defaultValue?.length&&(this.internalFiles=[...this.defaultValue]),super.willUpdate?.(e)}updated(e){e.has("showList")?this._rebuildAnatomy():this._fillAnatomy(),(e.has("value")||e.has("showList")||e.has("showPreview")||e.has("renderFile")||e.has("fileStatus"))&&(0,f.renderFileUploadItems)(this),(e.has("disabled")||e.has("readOnly"))&&(this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.broadcast()),(e.has("invalid")||e.has("directory")||e.has("capture"))&&this.broadcast(),(e.has("value")||e.has("removeLabel")||e.has("labelPresent")||e.has("required")||e.has("invalid"))&&this.broadcast(),this.syncDescription(),(e.has("value")||e.has("required")||e.has("requiredMessage")||e.has("name"))&&this.syncFormState()}syncDescription(){if(!this.required){this.descriptionEl?.remove(),this.descriptionEl=null;return}if(!this.descriptionEl){let e=document.createElement("span");e.id=this.descriptionId,e.setAttribute("data-part","description"),e.style.cssText="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;",this.descriptionEl=e,this.append(e)}this.descriptionEl.textContent=_(this.isInvalid)}syncFormState(){this.setFormValue(this.multiFormValue(this.files)),this.setValueMissing(this.required&&this.files.length===0,this.requiredMessage??"Please select a file.")}formResetCallback(){this.setFiles([...this.defaultValue??[]])}addFiles(e){if(this.disabled||this.readOnly)return;let a=this.multiple?this.files:[],n=(this.multiple?this.maxFiles??1/0:1)-a.length,o=[],u=[];for(let c of Array.from(e)){let h=z(c,this);if(o.length>=n&&h.push("too-many-files"),h.length>0){u.push(h[0]),this.dispatchEvent(new CustomEvent("file-reject",{detail:{file:c,errors:h},bubbles:!0,composed:!0}));continue}o.push(c)}(0,m.announce)(P(o.length,u)),o.length!==0&&this.setFiles([...a,...o])}removeFile(e){if(this.disabled||this.readOnly)return;let a=this.files,n=a.indexOf(e);n!==-1&&((0,m.announce)(y([e.name])),this.setFiles([...a.slice(0,n),...a.slice(n+1)]))}clearFiles(){if(this.disabled||this.readOnly)return;let e=this.files;e.length!==0&&((0,m.announce)(y(e.map(a=>a.name))),this.setFiles([]))}setFiles(e){this.value===void 0&&(this.internalFiles=e),this.syncFormState(),this.syncDescription(),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast()}registerInput(e){this.inputEl=e}openPicker(){!this.disabled&&!this.readOnly&&this.inputEl?.click()}broadcast(){this.dispatchEvent(new CustomEvent("skdx-file-upload-update",{bubbles:!0,composed:!0}))}render(){return d.html`<slot @slotchange=${this._fillAnatomy}></slot>`}};i.styles=d.css`
+"use strict";var p=Object.defineProperty;var b=Object.getOwnPropertyDescriptor;var D=Object.getOwnPropertyNames;var L=Object.prototype.hasOwnProperty;var I=(t,r)=>{for(var e in r)p(t,e,{get:r[e],enumerable:!0})},B=(t,r,e,a)=>{if(r&&typeof r=="object"||typeof r=="function")for(let n of D(r))!L.call(t,n)&&n!==e&&p(t,n,{get:()=>r[n],enumerable:!(a=b(r,n))||a.enumerable});return t};var P=t=>B(p({},"__esModule",{value:!0}),t),s=(t,r,e,a)=>{for(var n=a>1?void 0:a?b(r,e):r,o=t.length-1,u;o>=0;o--)(u=t[o])&&(n=(a?u(r,e,n):u(n))||n);return a&&n&&p(r,e,n),n};var V={};I(V,{SkdxFileUpload:()=>i});module.exports=P(V);var d=require("lit"),l=require("lit/decorators.js"),F=require("../internal/authored.cjs"),E=require("../internal/define.cjs"),m=require("../internal/events.cjs"),w=require("../internal/form-associated.cjs"),y=require("../internal/ids.cjs"),A=require("../internal/positioning.cjs"),c=require("../utils/live-announcer.cjs"),f=require("./FileUploadAnatomy.cjs");function _(t){return t?"Required. No file selected":"Required"}function q(t,r){if(!r)return!0;let e=r.split(",").map(o=>o.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let a=t.name.toLowerCase(),n=t.type.toLowerCase();return e.some(o=>o.startsWith(".")?a.endsWith(o):o.endsWith("/*")?n.startsWith(o.slice(0,-1)):n===o)}function z(t){return`Remove ${t}`}function g(t){return t.length===0?"":t.length===1?`${t[0]} removed`:`${t.length} files removed`}function C(t,r){let e=[];if(t>0&&e.push(`${t} ${t===1?"file":"files"} added`),r.length>0){let a=[...new Set(r)].join(", "),n=r.length;e.push(`${n} ${n===1?"file":"files"} refused: ${a}`)}return e.join(". ")}function O(t,r){let e=[];return q(t,r.accept)||e.push("file-invalid-type"),r.maxFileSize!==void 0&&t.size>r.maxFileSize&&e.push("file-too-large"),r.minFileSize!==void 0&&t.size<r.minFileSize&&e.push("file-too-small"),e.push(...r.validator?.(t)??[]),e}var i=class extends(0,w.FormAssociated)(d.LitElement){constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.directory=!1;this.preventDocumentDrop=!0;this.required=!1;this.removeLabel=z;this.showList=!0;this.showPreview=!1;this.labelId=(0,y.nextId)("skdx-file-upload-label");this.descriptionId=(0,y.nextId)("skdx-file-upload-description");this.descriptionEl=null;this.labelPresent=!1;this.internalFiles=[];this.inputEl=null;this.onDocumentDrag=e=>{if(!this.preventDocumentDrop)return;let a=e.composedPath()[0]??e.target;a instanceof Element&&a.closest('[data-part="dropzone"]')||e.preventDefault()};this._anatomyBuilt=!1;this._fillAnatomy=()=>{if((0,F.hasAuthoredParts)(this,f.FILE_UPLOAD_ANATOMY_GENERATED)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,(0,f.fillFileUploadAnatomy)(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get files(){return this.value??this.internalFiles}get isInvalid(){return this.invalid||this.required&&this.files.length===0}connectedCallback(){super.connectedCallback(),document.addEventListener("dragover",this.onDocumentDrag),document.addEventListener("drop",this.onDocumentDrag),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){document.removeEventListener("dragover",this.onDocumentDrag),document.removeEventListener("drop",this.onDocumentDrag),super.disconnectedCallback()}willUpdate(e){!this.hasUpdated&&this.value===void 0&&this.defaultValue?.length&&(this.internalFiles=[...this.defaultValue]),super.willUpdate?.(e)}updated(e){e.has("showList")?this._rebuildAnatomy():this._fillAnatomy(),(e.has("value")||e.has("showList")||e.has("showPreview")||e.has("renderFile")||e.has("fileStatus"))&&(0,f.renderFileUploadItems)(this),this.syncPartState(e),this.syncDescription(),(e.has("value")||e.has("required")||e.has("requiredMessage")||e.has("name"))&&this.syncFormState()}syncPartState(e){(e.has("disabled")||e.has("readOnly"))&&(this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.broadcast()),(e.has("invalid")||e.has("directory")||e.has("capture"))&&this.broadcast(),(e.has("value")||e.has("removeLabel")||e.has("labelPresent")||e.has("required")||e.has("invalid"))&&this.broadcast()}syncDescription(){if(!this.required){this.descriptionEl?.remove(),this.descriptionEl=null;return}if(!this.descriptionEl){let e=document.createElement("span");e.id=this.descriptionId,e.setAttribute("data-part","description"),e.style.cssText="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;",this.descriptionEl=e,this.append(e)}this.descriptionEl.textContent=_(this.isInvalid)}syncFormState(){this.setFormValue(this.multiFormValue(this.files)),this.setValueMissing(this.required&&this.files.length===0,this.requiredMessage??"Please select a file.")}formResetCallback(){this.setFiles([...this.defaultValue??[]])}addFiles(e){if(this.disabled||this.readOnly)return;let a=this.multiple?this.files:[],n=(this.multiple?this.maxFiles??1/0:1)-a.length,o=[],u=[];for(let v of Array.from(e)){let h=O(v,this);if(o.length>=n&&h.push("too-many-files"),h.length>0){u.push(h[0]),(0,m.emit)(this,"file-reject",{file:v,errors:h});continue}o.push(v)}(0,c.announce)(C(o.length,u)),o.length!==0&&this.setFiles([...a,...o])}removeFile(e){if(this.disabled||this.readOnly)return;let a=this.files,n=a.indexOf(e);n!==-1&&((0,c.announce)(g([e.name])),this.setFiles([...a.slice(0,n),...a.slice(n+1)]))}clearFiles(){if(this.disabled||this.readOnly)return;let e=this.files;e.length!==0&&((0,c.announce)(g(e.map(a=>a.name))),this.setFiles([]))}setFiles(e){this.value===void 0&&(this.internalFiles=e),this.syncFormState(),this.syncDescription(),(0,m.emit)(this,"value-change",e),this.broadcast()}registerInput(e){this.inputEl=e}openPicker(){!this.disabled&&!this.readOnly&&this.inputEl?.click()}broadcast(){(0,m.emit)(this,"skdx-file-upload-update")}render(){return d.html`<slot @slotchange=${this._fillAnatomy}></slot>`}};i.styles=d.css`
     :host {
       display: block;
     }
-  `,s([(0,l.property)({type:String})],i.prototype,"accept",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"multiple",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([(0,l.property)({attribute:!1})],i.prototype,"value",2),s([(0,l.property)({attribute:!1})],i.prototype,"defaultValue",2),s([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"directory",2),s([(0,l.property)({type:String})],i.prototype,"capture",2),s([(0,l.property)({converter:w.optOutBoolean,attribute:"prevent-document-drop"})],i.prototype,"preventDocumentDrop",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"required",2),s([(0,l.property)({type:String,reflect:!0})],i.prototype,"name",2),s([(0,l.property)({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),s([(0,l.property)({attribute:"required-message"})],i.prototype,"requiredMessage",2),s([(0,l.property)({type:Number,attribute:"max-files"})],i.prototype,"maxFiles",2),s([(0,l.property)({type:Number,attribute:"max-file-size"})],i.prototype,"maxFileSize",2),s([(0,l.property)({type:Number,attribute:"min-file-size"})],i.prototype,"minFileSize",2),s([(0,l.property)({attribute:!1})],i.prototype,"validate",2),s([(0,l.property)({attribute:!1})],i.prototype,"removeLabel",2),s([(0,l.property)({type:Boolean,attribute:"show-list"})],i.prototype,"showList",2),s([(0,l.property)({type:Boolean,attribute:"show-preview"})],i.prototype,"showPreview",2),s([(0,l.property)({attribute:!1})],i.prototype,"fileStatus",2),s([(0,l.property)({attribute:!1})],i.prototype,"renderFile",2),s([(0,l.property)({attribute:!1})],i.prototype,"labelPresent",2),i=s([(0,F.customElement)("skdx-file-upload","file-upload","root")],i);0&&(module.exports={SkdxFileUpload});
+  `,s([(0,l.property)({type:String})],i.prototype,"accept",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"multiple",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"disabled",2),s([(0,l.property)({attribute:!1})],i.prototype,"value",2),s([(0,l.property)({attribute:!1})],i.prototype,"defaultValue",2),s([(0,l.property)({type:Boolean,reflect:!0,attribute:"read-only"})],i.prototype,"readOnly",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"invalid",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"directory",2),s([(0,l.property)({type:String})],i.prototype,"capture",2),s([(0,l.property)({converter:A.optOutBoolean,attribute:"prevent-document-drop"})],i.prototype,"preventDocumentDrop",2),s([(0,l.property)({type:Boolean,reflect:!0})],i.prototype,"required",2),s([(0,l.property)({type:String,reflect:!0})],i.prototype,"name",2),s([(0,l.property)({type:String,attribute:"form",reflect:!0})],i.prototype,"formId",2),s([(0,l.property)({attribute:"required-message"})],i.prototype,"requiredMessage",2),s([(0,l.property)({type:Number,attribute:"max-files"})],i.prototype,"maxFiles",2),s([(0,l.property)({type:Number,attribute:"max-file-size"})],i.prototype,"maxFileSize",2),s([(0,l.property)({type:Number,attribute:"min-file-size"})],i.prototype,"minFileSize",2),s([(0,l.property)({attribute:!1})],i.prototype,"validator",2),s([(0,l.property)({attribute:!1})],i.prototype,"removeLabel",2),s([(0,l.property)({type:Boolean,attribute:"show-list"})],i.prototype,"showList",2),s([(0,l.property)({type:Boolean,attribute:"show-preview"})],i.prototype,"showPreview",2),s([(0,l.property)({attribute:!1})],i.prototype,"fileStatus",2),s([(0,l.property)({attribute:!1})],i.prototype,"renderFile",2),s([(0,l.property)({attribute:!1})],i.prototype,"labelPresent",2),i=s([(0,E.customElement)("skdx-file-upload","file-upload","root")],i);0&&(module.exports={SkdxFileUpload});

package/dist/file-upload/FileUpload.d.cts

@@ -1,11 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import type { SkdxFileUploadInput } from './FileUploadInput.cjs';
 import type { FileUploadFileStatus } from './FileUploadItem.cjs';
 /** Where the device camera should open, when `capture` is set. */
 export type SkdxFileUploadCapture = 'user' | 'environment';
 /**
  * Why one file was refused: `file-invalid-type`, `file-too-large`,
- * `file-too-small`, `too-many-files`, or custom codes from `validate` callback.
+ * `file-too-small`, `too-many-files`, or custom codes from `validator` callback.
  */
 export interface FileUploadRejection {
     /** The file that was refused. It is never added to the file list. */
@@ -13,7 +13,7 @@ export interface FileUploadRejection {
     /** Every reason it was refused, built-in codes first. Never empty. */
     errors: string[];
 }
-declare const SkdxFileUpload_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.cjs").SkdxFormAssociated) & {
+declare const SkdxFileUpload_base: typeof LitElement & (new (...args: any[]) => import("../index.cjs").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
@@ -42,7 +42,7 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * and drag-and-drop.
      * @default undefined
      */
-    accept?: string;
+    accept?: string | undefined;
     /** Allow selecting/dropping more than one file; false replaces the existing file on new selection. */
     multiple: boolean;
     /** Disables the dropzone, trigger, and file input. */
@@ -104,16 +104,16 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * Maximum files allowed; files past the cap are rejected with `too-many-files`.
      * @default undefined
      */
-    maxFiles?: number;
+    maxFiles?: number | undefined;
     /** Largest accepted file size in bytes; a bigger file is rejected with `file-too-large`. @default undefined */
-    maxFileSize?: number;
+    maxFileSize?: number | undefined;
     /** Smallest accepted file size in bytes; a smaller file is rejected with `file-too-small`. @default undefined */
-    minFileSize?: number;
+    minFileSize?: number | undefined;
     /**
      * Extra per-file validation after built-in checks; return error codes to reject.
      * @default undefined
      */
-    validate?: (file: File) => string[] | null | undefined;
+    validator?: (file: File) => string[] | null | undefined;
     /**
      * Generates each delete button's accessible name from the file name.
      * @default (fileName) => `Remove ${fileName}`
@@ -142,10 +142,7 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * Renders a derived Item's row content in place of the default layout.
      * @default undefined — the default row: Preview (when `showPreview`), Name,
      */
-    renderFile?: (file: File, state: {
-        status: FileUploadFileStatus;
-        progress?: number;
-    }) => unknown;
+    renderFile?: (file: File) => unknown;
     /** Id a mounted `<skdx-file-upload-label>` claims, and the dropzone names. @internal */
     readonly labelId: string;
     /**
@@ -153,93 +150,46 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * `aria-describedby` at while this root is `required`. @internal
      */
     readonly descriptionId: string;
-    /** Light-DOM description element (IDREF cannot cross shadow boundaries). */
     private descriptionEl;
     /** @internal Whether a file-upload-label is mounted; registration prevents dangling IDREF. */
     labelPresent: boolean;
     private internalFiles;
+    /** @internal The mounted `<skdx-file-upload-input>`, registered on connect. */
     inputEl: SkdxFileUploadInput | null;
     /** Current file list (controlled `value` if set, else internal state). @internal */
     get files(): File[];
     /** @internal Whether the selection is invalid (consumer's invalid OR required and empty). */
     get isInvalid(): boolean;
-    /** Prevents default open-on-drop outside the dropzone (composedPath for accuracy). */
     private readonly onDocumentDrag;
     connectedCallback(): void;
     private _anatomyBuilt;
-    /** Draws canonical anatomy into light DOM when no consumer-authored parts exist. */
     private readonly _fillAnatomy;
-    /** Forces a rebuild — for a change (`showList`) that alters the derived structure itself. */
     private readonly _rebuildAnatomy;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Creates, updates and removes the dropzone's required/validity description.
-     *
-     * The whole of this family's accessible signalling for required-ness and
-     * invalidity lives here: `role="button"` supports `aria-required` in no
-     * version of ARIA and lists `aria-invalid` only as an inherited state
-     * annotated "deprecated on this role in ARIA 1.2", so there is no attribute
-     * left to say either thing with. Visually hidden rather than `aria-hidden`,
-     * because it exists only to be announced, and appended to this host rather
-     * than to the dropzone, because `role="button"` takes its name from its
-     * contents and this text would otherwise land in the dropzone's name instead
-     * of its description.
-     */
+    private syncPartState;
     private syncDescription;
     private syncFormState;
-    /**
-     * Restores the files this element was created with, and fires `value-change`
-     * so controlled usage can follow.
-     *
-     * `defaultValue` rather than "clear the list": a native `<input type="file">`
-     * genuinely does reset to empty, because it has no way to declare an initial
-     * selection; this element does, so its reset target is that
-     * declaration. With no `defaultValue` the two coincide.
-     */
+    /** Restores the files from `defaultValue` on form reset, and fires `value-change`. */
     formResetCallback(): void;
     /**
-     * Feeds files through the same pipeline the picker and the drop handler use —
-     * `accept` filtering, the size bounds, the `maxFiles` cap, `multiple`
-     * replacement, one `file-reject` per refused file, one `value-change` for the
-     * batch, and the live announcement.
-     *
-     * **Public.** A method on a custom element is public whatever its TSDoc
-     * says, and this one is contracted in all five packages. It exists so an
-     * entry point this component does not own can add files without
-     * reimplementing that pipeline, which is
-     * the part that cannot be reproduced from outside:
+     * Feeds files through the same accept/size/maxFiles/multiple pipeline the picker and drop handler use.
      *
+     * @example
      * ```js
      * upload.addEventListener('paste', (event) => upload.addFiles(event.clipboardData.files));
      * ```
-     *
-     * Deliberately *not* a built-in `paste` listener: a component-owned document-
-     * or root-level paste handler competes with every other paste target on the
-     * page and has no way to know whether this upload is the one the user meant.
-     *
-     * A no-op while `disabled` or `readOnly`.
      */
     addFiles(incoming: FileList | File[]): void;
     /**
-     * Removes `file` from the current file list. @internal
-     *
-     * Addressed by the `File` itself, never by an index and never by a name. An
-     * index renumbers on every removal, so the button that read "Remove
-     * notes.txt" when it was painted removed the row below it once
-     * something above went; a name is not unique at all — two files called
-     * `report.pdf` picked from two directories are two rows and one string, and
-     * matching on it would remove both. `indexOf` compares by reference, and only
-     * the first match goes.
+     * Removes `file` from the current file list, addressed by reference — never by index or name.
+     * @internal
      */
     removeFile(file: File): void;
     /**
-     * Empties the list in one change, for `<skdx-file-upload-clear>`. @internal
-     *
-     * One `value-change` for the whole list, not one per file: a consumer's
-     * save handler fires once, and a screen reader hears one sentence rather
-     * than eleven.
+     * Empties the list in one change — one `value-change`, not one per file.
+     * @internal
      */
     clearFiles(): void;
     private setFiles;
@@ -249,7 +199,7 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
     openPicker(): void;
     /** Broadcasts current state to descendant parts. @internal */
     broadcast(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/file-upload/FileUpload.d.ts

@@ -1,11 +1,11 @@
-import { LitElement, type PropertyValues } from 'lit';
+import { LitElement, type PropertyValues, type TemplateResult } from 'lit';
 import type { SkdxFileUploadInput } from './FileUploadInput.js';
 import type { FileUploadFileStatus } from './FileUploadItem.js';
 /** Where the device camera should open, when `capture` is set. */
 export type SkdxFileUploadCapture = 'user' | 'environment';
 /**
  * Why one file was refused: `file-invalid-type`, `file-too-large`,
- * `file-too-small`, `too-many-files`, or custom codes from `validate` callback.
+ * `file-too-small`, `too-many-files`, or custom codes from `validator` callback.
  */
 export interface FileUploadRejection {
     /** The file that was refused. It is never added to the file list. */
@@ -13,7 +13,7 @@ export interface FileUploadRejection {
     /** Every reason it was refused, built-in codes first. Never empty. */
     errors: string[];
 }
-declare const SkdxFileUpload_base: typeof LitElement & (new (...args: any[]) => import("../internal/form-associated.js").SkdxFormAssociated) & {
+declare const SkdxFileUpload_base: typeof LitElement & (new (...args: any[]) => import("../index.js").SkdxFormAssociated) & {
     formAssociated: boolean;
 };
 /**
@@ -42,7 +42,7 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * and drag-and-drop.
      * @default undefined
      */
-    accept?: string;
+    accept?: string | undefined;
     /** Allow selecting/dropping more than one file; false replaces the existing file on new selection. */
     multiple: boolean;
     /** Disables the dropzone, trigger, and file input. */
@@ -104,16 +104,16 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * Maximum files allowed; files past the cap are rejected with `too-many-files`.
      * @default undefined
      */
-    maxFiles?: number;
+    maxFiles?: number | undefined;
     /** Largest accepted file size in bytes; a bigger file is rejected with `file-too-large`. @default undefined */
-    maxFileSize?: number;
+    maxFileSize?: number | undefined;
     /** Smallest accepted file size in bytes; a smaller file is rejected with `file-too-small`. @default undefined */
-    minFileSize?: number;
+    minFileSize?: number | undefined;
     /**
      * Extra per-file validation after built-in checks; return error codes to reject.
      * @default undefined
      */
-    validate?: (file: File) => string[] | null | undefined;
+    validator?: (file: File) => string[] | null | undefined;
     /**
      * Generates each delete button's accessible name from the file name.
      * @default (fileName) => `Remove ${fileName}`
@@ -142,10 +142,7 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * Renders a derived Item's row content in place of the default layout.
      * @default undefined — the default row: Preview (when `showPreview`), Name,
      */
-    renderFile?: (file: File, state: {
-        status: FileUploadFileStatus;
-        progress?: number;
-    }) => unknown;
+    renderFile?: (file: File) => unknown;
     /** Id a mounted `<skdx-file-upload-label>` claims, and the dropzone names. @internal */
     readonly labelId: string;
     /**
@@ -153,93 +150,46 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
      * `aria-describedby` at while this root is `required`. @internal
      */
     readonly descriptionId: string;
-    /** Light-DOM description element (IDREF cannot cross shadow boundaries). */
     private descriptionEl;
     /** @internal Whether a file-upload-label is mounted; registration prevents dangling IDREF. */
     labelPresent: boolean;
     private internalFiles;
+    /** @internal The mounted `<skdx-file-upload-input>`, registered on connect. */
     inputEl: SkdxFileUploadInput | null;
     /** Current file list (controlled `value` if set, else internal state). @internal */
     get files(): File[];
     /** @internal Whether the selection is invalid (consumer's invalid OR required and empty). */
     get isInvalid(): boolean;
-    /** Prevents default open-on-drop outside the dropzone (composedPath for accuracy). */
     private readonly onDocumentDrag;
     connectedCallback(): void;
     private _anatomyBuilt;
-    /** Draws canonical anatomy into light DOM when no consumer-authored parts exist. */
     private readonly _fillAnatomy;
-    /** Forces a rebuild — for a change (`showList`) that alters the derived structure itself. */
     private readonly _rebuildAnatomy;
     disconnectedCallback(): void;
     protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
-    /**
-     * Creates, updates and removes the dropzone's required/validity description.
-     *
-     * The whole of this family's accessible signalling for required-ness and
-     * invalidity lives here: `role="button"` supports `aria-required` in no
-     * version of ARIA and lists `aria-invalid` only as an inherited state
-     * annotated "deprecated on this role in ARIA 1.2", so there is no attribute
-     * left to say either thing with. Visually hidden rather than `aria-hidden`,
-     * because it exists only to be announced, and appended to this host rather
-     * than to the dropzone, because `role="button"` takes its name from its
-     * contents and this text would otherwise land in the dropzone's name instead
-     * of its description.
-     */
+    private syncPartState;
     private syncDescription;
     private syncFormState;
-    /**
-     * Restores the files this element was created with, and fires `value-change`
-     * so controlled usage can follow.
-     *
-     * `defaultValue` rather than "clear the list": a native `<input type="file">`
-     * genuinely does reset to empty, because it has no way to declare an initial
-     * selection; this element does, so its reset target is that
-     * declaration. With no `defaultValue` the two coincide.
-     */
+    /** Restores the files from `defaultValue` on form reset, and fires `value-change`. */
     formResetCallback(): void;
     /**
-     * Feeds files through the same pipeline the picker and the drop handler use —
-     * `accept` filtering, the size bounds, the `maxFiles` cap, `multiple`
-     * replacement, one `file-reject` per refused file, one `value-change` for the
-     * batch, and the live announcement.
-     *
-     * **Public.** A method on a custom element is public whatever its TSDoc
-     * says, and this one is contracted in all five packages. It exists so an
-     * entry point this component does not own can add files without
-     * reimplementing that pipeline, which is
-     * the part that cannot be reproduced from outside:
+     * Feeds files through the same accept/size/maxFiles/multiple pipeline the picker and drop handler use.
      *
+     * @example
      * ```js
      * upload.addEventListener('paste', (event) => upload.addFiles(event.clipboardData.files));
      * ```
-     *
-     * Deliberately *not* a built-in `paste` listener: a component-owned document-
-     * or root-level paste handler competes with every other paste target on the
-     * page and has no way to know whether this upload is the one the user meant.
-     *
-     * A no-op while `disabled` or `readOnly`.
      */
     addFiles(incoming: FileList | File[]): void;
     /**
-     * Removes `file` from the current file list. @internal
-     *
-     * Addressed by the `File` itself, never by an index and never by a name. An
-     * index renumbers on every removal, so the button that read "Remove
-     * notes.txt" when it was painted removed the row below it once
-     * something above went; a name is not unique at all — two files called
-     * `report.pdf` picked from two directories are two rows and one string, and
-     * matching on it would remove both. `indexOf` compares by reference, and only
-     * the first match goes.
+     * Removes `file` from the current file list, addressed by reference — never by index or name.
+     * @internal
      */
     removeFile(file: File): void;
     /**
-     * Empties the list in one change, for `<skdx-file-upload-clear>`. @internal
-     *
-     * One `value-change` for the whole list, not one per file: a consumer's
-     * save handler fires once, and a screen reader hears one sentence rather
-     * than eleven.
+     * Empties the list in one change — one `value-change`, not one per file.
+     * @internal
      */
     clearFiles(): void;
     private setFiles;
@@ -249,7 +199,7 @@ export declare class SkdxFileUpload extends SkdxFileUpload_base {
     openPicker(): void;
     /** Broadcasts current state to descendant parts. @internal */
     broadcast(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/file-upload/FileUpload.js

@@ -1,5 +1,5 @@
-var c=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var i=(r,l,e,n)=>{for(var a=n>1?void 0:n?v(l,e):l,o=r.length-1,u;o>=0;o--)(u=r[o])&&(a=(n?u(l,e,a):u(a))||a);return n&&a&&c(l,e,a),a};import{css as b,html as y,LitElement as g}from"lit";import{property as s}from"lit/decorators.js";import{hasAuthoredParts as F}from"../internal/authored.js";import{customElement as E}from"../internal/define.js";import{FormAssociated as w}from"../internal/form-associated.js";import{nextId as p}from"../internal/ids.js";import{optOutBoolean as A}from"../internal/positioning.js";import{announce as h}from"../utils/live-announcer.js";import{FILE_UPLOAD_ANATOMY_GENERATED as D,fillFileUploadAnatomy as L,renderFileUploadItems as I}from"./FileUploadAnatomy.js";function B(r){return r?"Required. No file selected":"Required"}function _(r,l){if(!l)return!0;let e=l.split(",").map(o=>o.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let n=r.name.toLowerCase(),a=r.type.toLowerCase();return e.some(o=>o.startsWith(".")?n.endsWith(o):o.endsWith("/*")?a.startsWith(o.slice(0,-1)):a===o)}function q(r){return`Remove ${r}`}function m(r){return r.length===0?"":r.length===1?`${r[0]} removed`:`${r.length} files removed`}function C(r,l){let e=[];if(r>0&&e.push(`${r} ${r===1?"file":"files"} added`),l.length>0){let n=[...new Set(l)].join(", "),a=l.length;e.push(`${a} ${a===1?"file":"files"} refused: ${n}`)}return e.join(". ")}function P(r,l){let e=[];return _(r,l.accept)||e.push("file-invalid-type"),l.maxFileSize!==void 0&&r.size>l.maxFileSize&&e.push("file-too-large"),l.minFileSize!==void 0&&r.size<l.minFileSize&&e.push("file-too-small"),e.push(...l.validate?.(r)??[]),e}var t=class extends w(g){constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.directory=!1;this.preventDocumentDrop=!0;this.required=!1;this.removeLabel=q;this.showList=!0;this.showPreview=!1;this.labelId=p("skdx-file-upload-label");this.descriptionId=p("skdx-file-upload-description");this.descriptionEl=null;this.labelPresent=!1;this.internalFiles=[];this.inputEl=null;this.onDocumentDrag=e=>{if(!this.preventDocumentDrop)return;let n=e.composedPath()[0]??e.target;n instanceof Element&&n.closest('[data-part="dropzone"]')||e.preventDefault()};this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(F(this,D)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,L(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get files(){return this.value??this.internalFiles}get isInvalid(){return this.invalid||this.required&&this.files.length===0}connectedCallback(){super.connectedCallback(),document.addEventListener("dragover",this.onDocumentDrag),document.addEventListener("drop",this.onDocumentDrag),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){document.removeEventListener("dragover",this.onDocumentDrag),document.removeEventListener("drop",this.onDocumentDrag),super.disconnectedCallback()}willUpdate(e){!this.hasUpdated&&this.value===void 0&&this.defaultValue?.length&&(this.internalFiles=[...this.defaultValue]),super.willUpdate?.(e)}updated(e){e.has("showList")?this._rebuildAnatomy():this._fillAnatomy(),(e.has("value")||e.has("showList")||e.has("showPreview")||e.has("renderFile")||e.has("fileStatus"))&&I(this),(e.has("disabled")||e.has("readOnly"))&&(this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.broadcast()),(e.has("invalid")||e.has("directory")||e.has("capture"))&&this.broadcast(),(e.has("value")||e.has("removeLabel")||e.has("labelPresent")||e.has("required")||e.has("invalid"))&&this.broadcast(),this.syncDescription(),(e.has("value")||e.has("required")||e.has("requiredMessage")||e.has("name"))&&this.syncFormState()}syncDescription(){if(!this.required){this.descriptionEl?.remove(),this.descriptionEl=null;return}if(!this.descriptionEl){let e=document.createElement("span");e.id=this.descriptionId,e.setAttribute("data-part","description"),e.style.cssText="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;",this.descriptionEl=e,this.append(e)}this.descriptionEl.textContent=B(this.isInvalid)}syncFormState(){this.setFormValue(this.multiFormValue(this.files)),this.setValueMissing(this.required&&this.files.length===0,this.requiredMessage??"Please select a file.")}formResetCallback(){this.setFiles([...this.defaultValue??[]])}addFiles(e){if(this.disabled||this.readOnly)return;let n=this.multiple?this.files:[],a=(this.multiple?this.maxFiles??1/0:1)-n.length,o=[],u=[];for(let f of Array.from(e)){let d=P(f,this);if(o.length>=a&&d.push("too-many-files"),d.length>0){u.push(d[0]),this.dispatchEvent(new CustomEvent("file-reject",{detail:{file:f,errors:d},bubbles:!0,composed:!0}));continue}o.push(f)}h(C(o.length,u)),o.length!==0&&this.setFiles([...n,...o])}removeFile(e){if(this.disabled||this.readOnly)return;let n=this.files,a=n.indexOf(e);a!==-1&&(h(m([e.name])),this.setFiles([...n.slice(0,a),...n.slice(a+1)]))}clearFiles(){if(this.disabled||this.readOnly)return;let e=this.files;e.length!==0&&(h(m(e.map(n=>n.name))),this.setFiles([]))}setFiles(e){this.value===void 0&&(this.internalFiles=e),this.syncFormState(),this.syncDescription(),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast()}registerInput(e){this.inputEl=e}openPicker(){!this.disabled&&!this.readOnly&&this.inputEl?.click()}broadcast(){this.dispatchEvent(new CustomEvent("skdx-file-upload-update",{bubbles:!0,composed:!0}))}render(){return y`<slot @slotchange=${this._fillAnatomy}></slot>`}};t.styles=b`
+var v=Object.defineProperty;var y=Object.getOwnPropertyDescriptor;var i=(r,l,e,n)=>{for(var a=n>1?void 0:n?y(l,e):l,o=r.length-1,u;o>=0;o--)(u=r[o])&&(a=(n?u(l,e,a):u(a))||a);return n&&a&&v(l,e,a),a};import{css as b,html as g,LitElement as F}from"lit";import{property as s}from"lit/decorators.js";import{hasAuthoredParts as E}from"../internal/authored.js";import{customElement as w}from"../internal/define.js";import{emit as h}from"../internal/events.js";import{FormAssociated as A}from"../internal/form-associated.js";import{nextId as m}from"../internal/ids.js";import{optOutBoolean as D}from"../internal/positioning.js";import{announce as p}from"../utils/live-announcer.js";import{FILE_UPLOAD_ANATOMY_GENERATED as L,fillFileUploadAnatomy as I,renderFileUploadItems as B}from"./FileUploadAnatomy.js";function P(r){return r?"Required. No file selected":"Required"}function _(r,l){if(!l)return!0;let e=l.split(",").map(o=>o.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let n=r.name.toLowerCase(),a=r.type.toLowerCase();return e.some(o=>o.startsWith(".")?n.endsWith(o):o.endsWith("/*")?a.startsWith(o.slice(0,-1)):a===o)}function q(r){return`Remove ${r}`}function c(r){return r.length===0?"":r.length===1?`${r[0]} removed`:`${r.length} files removed`}function z(r,l){let e=[];if(r>0&&e.push(`${r} ${r===1?"file":"files"} added`),l.length>0){let n=[...new Set(l)].join(", "),a=l.length;e.push(`${a} ${a===1?"file":"files"} refused: ${n}`)}return e.join(". ")}function C(r,l){let e=[];return _(r,l.accept)||e.push("file-invalid-type"),l.maxFileSize!==void 0&&r.size>l.maxFileSize&&e.push("file-too-large"),l.minFileSize!==void 0&&r.size<l.minFileSize&&e.push("file-too-small"),e.push(...l.validator?.(r)??[]),e}var t=class extends A(F){constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.readOnly=!1;this.invalid=!1;this.directory=!1;this.preventDocumentDrop=!0;this.required=!1;this.removeLabel=q;this.showList=!0;this.showPreview=!1;this.labelId=m("skdx-file-upload-label");this.descriptionId=m("skdx-file-upload-description");this.descriptionEl=null;this.labelPresent=!1;this.internalFiles=[];this.inputEl=null;this.onDocumentDrag=e=>{if(!this.preventDocumentDrop)return;let n=e.composedPath()[0]??e.target;n instanceof Element&&n.closest('[data-part="dropzone"]')||e.preventDefault()};this._anatomyBuilt=!1;this._fillAnatomy=()=>{if(E(this,L)){this._anatomyBuilt=!1;return}this._anatomyBuilt||(this._anatomyBuilt=!0,I(this))};this._rebuildAnatomy=()=>{this._anatomyBuilt=!1,this._fillAnatomy()}}get files(){return this.value??this.internalFiles}get isInvalid(){return this.invalid||this.required&&this.files.length===0}connectedCallback(){super.connectedCallback(),document.addEventListener("dragover",this.onDocumentDrag),document.addEventListener("drop",this.onDocumentDrag),queueMicrotask(this._fillAnatomy)}disconnectedCallback(){document.removeEventListener("dragover",this.onDocumentDrag),document.removeEventListener("drop",this.onDocumentDrag),super.disconnectedCallback()}willUpdate(e){!this.hasUpdated&&this.value===void 0&&this.defaultValue?.length&&(this.internalFiles=[...this.defaultValue]),super.willUpdate?.(e)}updated(e){e.has("showList")?this._rebuildAnatomy():this._fillAnatomy(),(e.has("value")||e.has("showList")||e.has("showPreview")||e.has("renderFile")||e.has("fileStatus"))&&B(this),this.syncPartState(e),this.syncDescription(),(e.has("value")||e.has("required")||e.has("requiredMessage")||e.has("name"))&&this.syncFormState()}syncPartState(e){(e.has("disabled")||e.has("readOnly"))&&(this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.readOnly?this.setAttribute("data-readonly",""):this.removeAttribute("data-readonly"),this.broadcast()),(e.has("invalid")||e.has("directory")||e.has("capture"))&&this.broadcast(),(e.has("value")||e.has("removeLabel")||e.has("labelPresent")||e.has("required")||e.has("invalid"))&&this.broadcast()}syncDescription(){if(!this.required){this.descriptionEl?.remove(),this.descriptionEl=null;return}if(!this.descriptionEl){let e=document.createElement("span");e.id=this.descriptionId,e.setAttribute("data-part","description"),e.style.cssText="position: absolute; border: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; word-wrap: normal;",this.descriptionEl=e,this.append(e)}this.descriptionEl.textContent=P(this.isInvalid)}syncFormState(){this.setFormValue(this.multiFormValue(this.files)),this.setValueMissing(this.required&&this.files.length===0,this.requiredMessage??"Please select a file.")}formResetCallback(){this.setFiles([...this.defaultValue??[]])}addFiles(e){if(this.disabled||this.readOnly)return;let n=this.multiple?this.files:[],a=(this.multiple?this.maxFiles??1/0:1)-n.length,o=[],u=[];for(let f of Array.from(e)){let d=C(f,this);if(o.length>=a&&d.push("too-many-files"),d.length>0){u.push(d[0]),h(this,"file-reject",{file:f,errors:d});continue}o.push(f)}p(z(o.length,u)),o.length!==0&&this.setFiles([...n,...o])}removeFile(e){if(this.disabled||this.readOnly)return;let n=this.files,a=n.indexOf(e);a!==-1&&(p(c([e.name])),this.setFiles([...n.slice(0,a),...n.slice(a+1)]))}clearFiles(){if(this.disabled||this.readOnly)return;let e=this.files;e.length!==0&&(p(c(e.map(n=>n.name))),this.setFiles([]))}setFiles(e){this.value===void 0&&(this.internalFiles=e),this.syncFormState(),this.syncDescription(),h(this,"value-change",e),this.broadcast()}registerInput(e){this.inputEl=e}openPicker(){!this.disabled&&!this.readOnly&&this.inputEl?.click()}broadcast(){h(this,"skdx-file-upload-update")}render(){return g`<slot @slotchange=${this._fillAnatomy}></slot>`}};t.styles=b`
     :host {
       display: block;
     }
-  `,i([s({type:String})],t.prototype,"accept",2),i([s({type:Boolean,reflect:!0})],t.prototype,"multiple",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([s({attribute:!1})],t.prototype,"value",2),i([s({attribute:!1})],t.prototype,"defaultValue",2),i([s({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([s({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([s({type:Boolean,reflect:!0})],t.prototype,"directory",2),i([s({type:String})],t.prototype,"capture",2),i([s({converter:A,attribute:"prevent-document-drop"})],t.prototype,"preventDocumentDrop",2),i([s({type:Boolean,reflect:!0})],t.prototype,"required",2),i([s({type:String,reflect:!0})],t.prototype,"name",2),i([s({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),i([s({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([s({type:Number,attribute:"max-files"})],t.prototype,"maxFiles",2),i([s({type:Number,attribute:"max-file-size"})],t.prototype,"maxFileSize",2),i([s({type:Number,attribute:"min-file-size"})],t.prototype,"minFileSize",2),i([s({attribute:!1})],t.prototype,"validate",2),i([s({attribute:!1})],t.prototype,"removeLabel",2),i([s({type:Boolean,attribute:"show-list"})],t.prototype,"showList",2),i([s({type:Boolean,attribute:"show-preview"})],t.prototype,"showPreview",2),i([s({attribute:!1})],t.prototype,"fileStatus",2),i([s({attribute:!1})],t.prototype,"renderFile",2),i([s({attribute:!1})],t.prototype,"labelPresent",2),t=i([E("skdx-file-upload","file-upload","root")],t);export{t as SkdxFileUpload};
+  `,i([s({type:String})],t.prototype,"accept",2),i([s({type:Boolean,reflect:!0})],t.prototype,"multiple",2),i([s({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([s({attribute:!1})],t.prototype,"value",2),i([s({attribute:!1})],t.prototype,"defaultValue",2),i([s({type:Boolean,reflect:!0,attribute:"read-only"})],t.prototype,"readOnly",2),i([s({type:Boolean,reflect:!0})],t.prototype,"invalid",2),i([s({type:Boolean,reflect:!0})],t.prototype,"directory",2),i([s({type:String})],t.prototype,"capture",2),i([s({converter:D,attribute:"prevent-document-drop"})],t.prototype,"preventDocumentDrop",2),i([s({type:Boolean,reflect:!0})],t.prototype,"required",2),i([s({type:String,reflect:!0})],t.prototype,"name",2),i([s({type:String,attribute:"form",reflect:!0})],t.prototype,"formId",2),i([s({attribute:"required-message"})],t.prototype,"requiredMessage",2),i([s({type:Number,attribute:"max-files"})],t.prototype,"maxFiles",2),i([s({type:Number,attribute:"max-file-size"})],t.prototype,"maxFileSize",2),i([s({type:Number,attribute:"min-file-size"})],t.prototype,"minFileSize",2),i([s({attribute:!1})],t.prototype,"validator",2),i([s({attribute:!1})],t.prototype,"removeLabel",2),i([s({type:Boolean,attribute:"show-list"})],t.prototype,"showList",2),i([s({type:Boolean,attribute:"show-preview"})],t.prototype,"showPreview",2),i([s({attribute:!1})],t.prototype,"fileStatus",2),i([s({attribute:!1})],t.prototype,"renderFile",2),i([s({attribute:!1})],t.prototype,"labelPresent",2),t=i([w("skdx-file-upload","file-upload","root")],t);export{t as SkdxFileUpload};

package/dist/file-upload/FileUploadAnatomy.cjs

@@ -1,13 +1,13 @@
-"use strict";var n=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var x=(e,t)=>{for(var i in t)n(e,i,{get:t[i],enumerable:!0})},k=(e,t,i,s)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of f(t))!c.call(e,o)&&o!==i&&n(e,o,{get:()=>t[o],enumerable:!(s=m(t,o))||s.enumerable});return e};var g=e=>k(n({},"__esModule",{value:!0}),e);var E={};x(E,{FILE_UPLOAD_ANATOMY_GENERATED:()=>d,fillFileUploadAnatomy:()=>w,renderFileUploadItems:()=>a});module.exports=g(E);var r=require("lit"),u=require("lit/directives/repeat.js"),F=require("./FileUploadDropzone.cjs"),S=require("./FileUploadTrigger.cjs"),U=require("./FileUploadInput.cjs"),$=require("./FileUploadItemGroup.cjs"),v=require("./FileUploadItem.cjs"),b=require("./FileUploadItemName.cjs"),z=require("./FileUploadItemSizeText.cjs"),L=require("./FileUploadItemPreview.cjs"),y=require("./FileUploadItemDelete.cjs"),d="data-skdx-file-upload-generated";function h(e){return r.html`
+"use strict";var n=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var x=Object.prototype.hasOwnProperty;var k=(e,t)=>{for(var i in t)n(e,i,{get:t[i],enumerable:!0})},g=(e,t,i,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let o of c(t))!x.call(e,o)&&o!==i&&n(e,o,{get:()=>t[o],enumerable:!(d=f(t,o))||d.enumerable});return e};var h=e=>g(n({},"__esModule",{value:!0}),e);var A={};k(A,{FILE_UPLOAD_ANATOMY_GENERATED:()=>s,fillFileUploadAnatomy:()=>E,renderFileUploadItems:()=>a});module.exports=h(A);var r=require("lit"),m=require("lit/directives/repeat.js"),u=require("../internal/glyphs.cjs"),$=require("./FileUploadDropzone.cjs"),S=require("./FileUploadTrigger.cjs"),U=require("./FileUploadInput.cjs"),v=require("./FileUploadItemGroup.cjs"),b=require("./FileUploadItem.cjs"),y=require("./FileUploadItemName.cjs"),z=require("./FileUploadItemSizeText.cjs"),G=require("./FileUploadItemPreview.cjs"),L=require("./FileUploadItemDelete.cjs"),s="data-skdx-file-upload-generated";function w(e){return r.html`
     ${e?r.html`<skdx-file-upload-item-preview></skdx-file-upload-item-preview>`:r.nothing}
     <skdx-file-upload-item-name></skdx-file-upload-item-name>
     <skdx-file-upload-item-size-text></skdx-file-upload-item-size-text>
-    <skdx-file-upload-item-delete></skdx-file-upload-item-delete>
-  `}function w(e){let t=document.createElement("skdx-file-upload-dropzone");t.setAttribute(d,""),t.textContent="Drag files here";let i=document.createElement("skdx-file-upload-trigger");i.setAttribute(d,""),i.textContent="Browse";let s=document.createElement("skdx-file-upload-input");s.setAttribute(d,"");let o=[t,i,s];if(e.showList){let l=document.createElement("skdx-file-upload-item-group");l.setAttribute(d,""),o.push(l)}e.replaceChildren(...o),a(e)}function a(e){let t=e.querySelector(`:scope > skdx-file-upload-item-group[${d}]`);if(!t)return;let i=e.renderFile,s=e.showPreview,o=e.fileStatus;(0,r.render)((0,u.repeat)(e.files,l=>l,l=>{let p=o?.(l);return r.html`<skdx-file-upload-item
+    <skdx-file-upload-item-delete>${u.closeGlyph}</skdx-file-upload-item-delete>
+  `}function E(e){let t=document.createElement("skdx-file-upload-dropzone");t.setAttribute(s,""),t.textContent="Drag files here";let i=document.createElement("skdx-file-upload-trigger");i.setAttribute(s,""),i.textContent="Browse";let d=document.createElement("skdx-file-upload-input");d.setAttribute(s,"");let o=[t,i,d];if(e.showList){let l=document.createElement("skdx-file-upload-item-group");l.setAttribute(s,""),o.push(l)}e.replaceChildren(...o),a(e)}function a(e){let t=e.querySelector(`:scope > skdx-file-upload-item-group[${s}]`);if(!t)return;let i=e.renderFile,d=e.showPreview,o=e.fileStatus;(0,r.render)((0,m.repeat)(e.files,l=>l,l=>{let p=o?.(l);return r.html`<skdx-file-upload-item
           .file=${l}
           .status=${p?.status??"idle"}
           ?progress=${p?.progress!==void 0}
           .progress=${p?.progress}
         >
-          ${i?i(l,{status:p?.status??"idle",progress:p?.progress}):h(s)}
+          ${i?i(l):w(d)}
         </skdx-file-upload-item>`}),t,{host:e})}0&&(module.exports={FILE_UPLOAD_ANATOMY_GENERATED,fillFileUploadAnatomy,renderFileUploadItems});

package/dist/file-upload/FileUploadAnatomy.d.cts

@@ -11,19 +11,12 @@ import './FileUploadItemDelete.cjs';
 /** @internal Marks a direct child of `<skdx-file-upload>` this module generated. */
 export declare const FILE_UPLOAD_ANATOMY_GENERATED = "data-skdx-file-upload-generated";
 /**
- * Builds the anatomy — Dropzone, Trigger, Input, ItemGroup — as light-DOM children
- * of `root`. Trigger is a sibling of Dropzone, never its child: Dropzone is a
- * `role="button"`, and a real `<button>` nested inside it is an invalid ARIA
- * pattern. ItemGroup rows are re-rendered separately by {@link renderFileUploadItems}
- * on every `value` change.
+ * Builds the Dropzone/Trigger/Input/ItemGroup anatomy as light-DOM children of root; Trigger stays a sibling, never nested in Dropzone's role="button".
  * @internal
  */
 export declare function fillFileUploadAnatomy(root: SkdxFileUpload): void;
 /**
- * (Re)renders the generated ItemGroup's rows from `root.files` — the piece of
- * the anatomy that changes on every selection, deletion or drop, without
- * rebuilding the Dropzone/Input skeleton around it. A no-op when `showList` is
- * off, since there is no generated ItemGroup to render into.
+ * Re-renders the generated ItemGroup's rows from `root.files`, without rebuilding the rest of the anatomy.
  * @internal
  */
 export declare function renderFileUploadItems(root: SkdxFileUpload): void;

package/dist/file-upload/FileUploadAnatomy.d.ts

@@ -11,19 +11,12 @@ import './FileUploadItemDelete.js';
 /** @internal Marks a direct child of `<skdx-file-upload>` this module generated. */
 export declare const FILE_UPLOAD_ANATOMY_GENERATED = "data-skdx-file-upload-generated";
 /**
- * Builds the anatomy — Dropzone, Trigger, Input, ItemGroup — as light-DOM children
- * of `root`. Trigger is a sibling of Dropzone, never its child: Dropzone is a
- * `role="button"`, and a real `<button>` nested inside it is an invalid ARIA
- * pattern. ItemGroup rows are re-rendered separately by {@link renderFileUploadItems}
- * on every `value` change.
+ * Builds the Dropzone/Trigger/Input/ItemGroup anatomy as light-DOM children of root; Trigger stays a sibling, never nested in Dropzone's role="button".
  * @internal
  */
 export declare function fillFileUploadAnatomy(root: SkdxFileUpload): void;
 /**
- * (Re)renders the generated ItemGroup's rows from `root.files` — the piece of
- * the anatomy that changes on every selection, deletion or drop, without
- * rebuilding the Dropzone/Input skeleton around it. A no-op when `showList` is
- * off, since there is no generated ItemGroup to render into.
+ * Re-renders the generated ItemGroup's rows from `root.files`, without rebuilding the rest of the anatomy.
  * @internal
  */
 export declare function renderFileUploadItems(root: SkdxFileUpload): void;

package/dist/file-upload/FileUploadAnatomy.js

@@ -1,13 +1,13 @@
-import{html as p,render as n,nothing as u}from"lit";import{repeat as a}from"lit/directives/repeat.js";import"./FileUploadDropzone.js";import"./FileUploadTrigger.js";import"./FileUploadInput.js";import"./FileUploadItemGroup.js";import"./FileUploadItem.js";import"./FileUploadItemName.js";import"./FileUploadItemSizeText.js";import"./FileUploadItemPreview.js";import"./FileUploadItemDelete.js";var r="data-skdx-file-upload-generated";function m(e){return p`
-    ${e?p`<skdx-file-upload-item-preview></skdx-file-upload-item-preview>`:u}
+import{html as p,render as n,nothing as m}from"lit";import{repeat as u}from"lit/directives/repeat.js";import{closeGlyph as a}from"../internal/glyphs.js";import"./FileUploadDropzone.js";import"./FileUploadTrigger.js";import"./FileUploadInput.js";import"./FileUploadItemGroup.js";import"./FileUploadItem.js";import"./FileUploadItemName.js";import"./FileUploadItemSizeText.js";import"./FileUploadItemPreview.js";import"./FileUploadItemDelete.js";var l="data-skdx-file-upload-generated";function f(e){return p`
+    ${e?p`<skdx-file-upload-item-preview></skdx-file-upload-item-preview>`:m}
     <skdx-file-upload-item-name></skdx-file-upload-item-name>
     <skdx-file-upload-item-size-text></skdx-file-upload-item-size-text>
-    <skdx-file-upload-item-delete></skdx-file-upload-item-delete>
-  `}function $(e){let i=document.createElement("skdx-file-upload-dropzone");i.setAttribute(r,""),i.textContent="Drag files here";let o=document.createElement("skdx-file-upload-trigger");o.setAttribute(r,""),o.textContent="Browse";let s=document.createElement("skdx-file-upload-input");s.setAttribute(r,"");let d=[i,o,s];if(e.showList){let t=document.createElement("skdx-file-upload-item-group");t.setAttribute(r,""),d.push(t)}e.replaceChildren(...d),f(e)}function f(e){let i=e.querySelector(`:scope > skdx-file-upload-item-group[${r}]`);if(!i)return;let o=e.renderFile,s=e.showPreview,d=e.fileStatus;n(a(e.files,t=>t,t=>{let l=d?.(t);return p`<skdx-file-upload-item
+    <skdx-file-upload-item-delete>${a}</skdx-file-upload-item-delete>
+  `}function b(e){let i=document.createElement("skdx-file-upload-dropzone");i.setAttribute(l,""),i.textContent="Drag files here";let o=document.createElement("skdx-file-upload-trigger");o.setAttribute(l,""),o.textContent="Browse";let r=document.createElement("skdx-file-upload-input");r.setAttribute(l,"");let d=[i,o,r];if(e.showList){let t=document.createElement("skdx-file-upload-item-group");t.setAttribute(l,""),d.push(t)}e.replaceChildren(...d),c(e)}function c(e){let i=e.querySelector(`:scope > skdx-file-upload-item-group[${l}]`);if(!i)return;let o=e.renderFile,r=e.showPreview,d=e.fileStatus;n(u(e.files,t=>t,t=>{let s=d?.(t);return p`<skdx-file-upload-item
           .file=${t}
-          .status=${l?.status??"idle"}
-          ?progress=${l?.progress!==void 0}
-          .progress=${l?.progress}
+          .status=${s?.status??"idle"}
+          ?progress=${s?.progress!==void 0}
+          .progress=${s?.progress}
         >
-          ${o?o(t,{status:l?.status??"idle",progress:l?.progress}):m(s)}
-        </skdx-file-upload-item>`}),i,{host:e})}export{r as FILE_UPLOAD_ANATOMY_GENERATED,$ as fillFileUploadAnatomy,f as renderFileUploadItems};
+          ${o?o(t):f(r)}
+        </skdx-file-upload-item>`}),i,{host:e})}export{l as FILE_UPLOAD_ANATOMY_GENERATED,b as fillFileUploadAnatomy,c as renderFileUploadItems};

package/dist/file-upload/FileUploadClear.cjs

@@ -1,15 +1,15 @@
-"use strict";var a=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var m=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)a(o,l,{get:e[l],enumerable:!0})},v=(o,e,l,i)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of m(e))!E.call(o,t)&&t!==l&&a(o,t,{get:()=>e[t],enumerable:!(i=p(e,t))||i.enumerable});return o};var k=o=>v(a({},"__esModule",{value:!0}),o),u=(o,e,l,i)=>{for(var t=i>1?void 0:i?p(e,l):e,n=o.length-1,c;n>=0;n--)(c=o[n])&&(t=(i?c(e,l,t):c(t))||t);return i&&t&&a(e,l,t),t};var y={};b(y,{SkdxFileUploadClear:()=>s});module.exports=k(y);var d=require("lit"),h=require("../internal/define.cjs"),f=require("../internal/part.cjs"),r=require("../internal/styles.cjs");var s=class extends d.LitElement{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.rootEl?.clearFiles()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-clear> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}updated(){(0,f.reflectHostState)(this,{"data-disabled":this.rootEl?.disabled?"":null,"data-readonly":this.rootEl?.readOnly?"":null})}render(){let l=(this.rootEl?.disabled??!1)||(this.rootEl?.readOnly??!1)||(this.rootEl?.files.length??0)===0;return d.html`
+"use strict";var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var b=(o,e)=>{for(var l in e)r(o,l,{get:e[l],enumerable:!0})},v=(o,e,l,d)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!E.call(o,t)&&t!==l&&r(o,t,{get:()=>e[t],enumerable:!(d=p(e,t))||d.enumerable});return o};var k=o=>v(r({},"__esModule",{value:!0}),o),u=(o,e,l,d)=>{for(var t=d>1?void 0:d?p(e,l):e,n=o.length-1,c;n>=0;n--)(c=o[n])&&(t=(d?c(e,l,t):c(t))||t);return d&&t&&r(e,l,t),t};var y={};b(y,{SkdxFileUploadClear:()=>i});module.exports=k(y);var s=require("lit"),h=require("../internal/define.cjs"),m=require("../internal/part.cjs"),a=require("../internal/styles.cjs");var i=class extends s.LitElement{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.rootEl?.clearFiles()}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-clear> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.rootEl?.disabled?"":null,"data-readonly":this.rootEl?.readOnly?"":null})}render(){let l=(this.rootEl?.disabled??!1)||(this.rootEl?.readOnly??!1)||(this.rootEl?.files.length??0)===0;return s.html`
       <button
         part="clear"
         type="button"
         ?disabled=${l}
-        data-disabled=${l?"":d.nothing}
+        data-disabled=${l?"":s.nothing}
         @click=${this.handleClick}
       >
         <slot></slot>
       </button>
-    `}};s.shadowRootOptions=r.delegatesFocusShadowRootOptions,s.styles=[r.resetNativeControl,d.css`
+    `}};i.shadowRootOptions=a.delegatesFocusShadowRootOptions,i.styles=[a.resetNativeControl,s.css`
       :host {
         display: inline-block;
       }
-    `,r.controlBoxOnHost],s=u([(0,h.customElement)("skdx-file-upload-clear","file-upload","clear")],s);0&&(module.exports={SkdxFileUploadClear});
+    `,a.controlBoxOnHost],i=u([(0,h.customElement)("skdx-file-upload-clear","file-upload","clear")],i);0&&(module.exports={SkdxFileUploadClear});

package/dist/file-upload/FileUploadClear.d.cts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * `<skdx-file-upload-clear>` — button that empties the file list in one action,
  * firing `value-change` with `[]`. Disabled while empty, or while the root is
@@ -15,7 +15,7 @@ export declare class SkdxFileUploadClear extends LitElement {
     disconnectedCallback(): void;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/file-upload/FileUploadClear.d.ts

@@ -1,4 +1,4 @@
-import { LitElement } from 'lit';
+import { LitElement, type TemplateResult } from 'lit';
 /**
  * `<skdx-file-upload-clear>` — button that empties the file list in one action,
  * firing `value-change` with `[]`. Disabled while empty, or while the root is
@@ -15,7 +15,7 @@ export declare class SkdxFileUploadClear extends LitElement {
     disconnectedCallback(): void;
     private readonly handleClick;
     protected updated(): void;
-    render(): import("lit").TemplateResult<1>;
+    render(): TemplateResult;
 }
 declare global {
     interface HTMLElementTagNameMap {