@skdx/web-components 0.27.0 → 0.28.0

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

@@ -0,0 +1,29 @@
+import type { SkdxFileUpload } from './FileUpload.cjs';
+import './FileUploadDropzone.cjs';
+import './FileUploadTrigger.cjs';
+import './FileUploadInput.cjs';
+import './FileUploadItemGroup.cjs';
+import './FileUploadItem.cjs';
+import './FileUploadItemName.cjs';
+import './FileUploadItemSizeText.cjs';
+import './FileUploadItemPreview.cjs';
+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.
+ * @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.
+ * @internal
+ */
+export declare function renderFileUploadItems(root: SkdxFileUpload): void;

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

@@ -0,0 +1,29 @@
+import type { SkdxFileUpload } from './FileUpload.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';
+/** @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.
+ * @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.
+ * @internal
+ */
+export declare function renderFileUploadItems(root: SkdxFileUpload): void;

package/dist/file-upload/FileUploadAnatomy.js

@@ -0,0 +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}
+    <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
+          .file=${t}
+          .status=${l?.status??"idle"}
+          ?progress=${l?.progress!==void 0}
+          .progress=${l?.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};

package/dist/file-upload/FileUploadClear.cjs

@@ -0,0 +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`
+      <button
+        part="clear"
+        type="button"
+        ?disabled=${l}
+        data-disabled=${l?"":d.nothing}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};s.shadowRootOptions=r.delegatesFocusShadowRootOptions,s.styles=[r.resetNativeControl,d.css`
+      :host {
+        display: inline-block;
+      }
+    `,r.controlBoxOnHost],s=u([(0,h.customElement)("skdx-file-upload-clear","file-upload","clear")],s);0&&(module.exports={SkdxFileUploadClear});

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

@@ -0,0 +1,24 @@
+import { LitElement } 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
+ * `disabled` or `read-only`. Must be used inside `<skdx-file-upload>`.
+ *
+ * @csspart clear - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxFileUploadClear extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-file-upload-clear': SkdxFileUploadClear;
+    }
+}

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

@@ -0,0 +1,24 @@
+import { LitElement } 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
+ * `disabled` or `read-only`. Must be used inside `<skdx-file-upload>`.
+ *
+ * @csspart clear - The native `<button>` element inside the shadow root.
+ */
+export declare class SkdxFileUploadClear extends LitElement {
+    static shadowRootOptions: ShadowRootInit;
+    static styles: import("lit").CSSResult[];
+    private rootEl;
+    private readonly onUpdate;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private readonly handleClick;
+    protected updated(): void;
+    render(): import("lit").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-file-upload-clear': SkdxFileUploadClear;
+    }
+}

package/dist/file-upload/FileUploadClear.js

@@ -0,0 +1,15 @@
+var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var a=(i,l,t,d)=>{for(var e=d>1?void 0:d?c(l,t):l,s=i.length-1,r;s>=0;s--)(r=i[s])&&(e=(d?r(l,t,e):r(e))||e);return d&&e&&n(l,t,e),e};import{css as p,html as u,LitElement as h,nothing as f}from"lit";import{customElement as m}from"../internal/define.js";import{reflectHostState as E}from"../internal/part.js";import{controlBoxOnHost as b,delegatesFocusShadowRootOptions as v,resetNativeControl as k}from"../internal/styles.js";var o=class extends h{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(){E(this,{"data-disabled":this.rootEl?.disabled?"":null,"data-readonly":this.rootEl?.readOnly?"":null})}render(){let t=(this.rootEl?.disabled??!1)||(this.rootEl?.readOnly??!1)||(this.rootEl?.files.length??0)===0;return u`
+      <button
+        part="clear"
+        type="button"
+        ?disabled=${t}
+        data-disabled=${t?"":f}
+        @click=${this.handleClick}
+      >
+        <slot></slot>
+      </button>
+    `}};o.shadowRootOptions=v,o.styles=[k,p`
+      :host {
+        display: inline-block;
+      }
+    `,b],o=a([m("skdx-file-upload-clear","file-upload","clear")],o);export{o as SkdxFileUploadClear};

package/dist/file-upload/FileUploadDropzone.cjs

@@ -1,5 +1,5 @@
-"use strict";var l=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var c=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var f=(a,t)=>{for(var e in t)l(a,e,{get:t[e],enumerable:!0})},m=(a,t,e,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of c(t))!E.call(a,r)&&r!==e&&l(a,r,{get:()=>t[r],enumerable:!(d=p(t,r))||d.enumerable});return a};var k=a=>m(l({},"__esModule",{value:!0}),a),h=(a,t,e,d)=>{for(var r=d>1?void 0:d?p(t,e):t,o=a.length-1,n;o>=0;o--)(n=a[o])&&(r=(d?n(t,e,r):n(r))||r);return d&&r&&l(t,e,r),r};var b={};f(b,{SkdxFileUploadDropzone:()=>s});module.exports=k(b);var i=require("lit"),v=require("lit/decorators.js"),g=require("../internal/define.cjs"),u=require("../internal/part.cjs");var s=class extends i.LitElement{constructor(){super(...arguments);this.dragging=!1;this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>this.rootEl?.openPicker();this.handleKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&!this.rootEl?.disabled&&(e.preventDefault(),this.rootEl?.openPicker())};this.handleDragOver=e=>{e.preventDefault(),this.rootEl?.disabled||(this.dragging=!0,this.requestUpdate())};this.handleDragLeave=()=>{this.dragging=!1,this.requestUpdate()};this.handleDrop=e=>{e.preventDefault(),this.dragging=!1,this.requestUpdate(),!this.rootEl?.disabled&&e.dataTransfer&&this.rootEl?.addFiles(e.dataTransfer.files)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-dropzone> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),this.setAttribute("role","button"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),super.disconnectedCallback()}updated(){let e=this.rootEl?.disabled??!1;this.tabIndex=e?-1:0,(0,u.reflectHostState)(this,{"aria-disabled":e?"true":null,"data-disabled":e?"":null,"data-dragging":this.dragging?"":null})}render(){return i.html`<slot>${i.nothing}</slot>`}};s.styles=i.css`
+"use strict";var o=Object.defineProperty;var v=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var g=(i,t)=>{for(var e in t)o(i,e,{get:t[e],enumerable:!0})},b=(i,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let r of E(t))!f.call(i,r)&&r!==e&&o(i,r,{get:()=>t[r],enumerable:!(a=v(t,r))||a.enumerable});return i};var y=i=>b(o({},"__esModule",{value:!0}),i),n=(i,t,e,a)=>{for(var r=a>1?void 0:a?v(t,e):t,s=i.length-1,p;s>=0;s--)(p=i[s])&&(r=(a?p(t,e,r):p(r))||r);return a&&r&&o(t,e,r),r};var k={};g(k,{SkdxFileUploadDropzone:()=>l});module.exports=y(k);var d=require("lit"),h=require("lit/decorators.js"),u=require("../internal/define.cjs"),c=require("../internal/part.cjs");var l=class extends d.LitElement{constructor(){super(...arguments);this.disableClick=!1;this.dragging=!1;this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.disableClick||this.rootEl?.openPicker()};this.handleKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&!this.rootEl?.disabled&&!this.rootEl?.readOnly&&(e.preventDefault(),this.rootEl?.openPicker())};this.handleDragOver=e=>{e.preventDefault(),!this.rootEl?.disabled&&!this.rootEl?.readOnly&&(this.dragging=!0,this.requestUpdate())};this.handleDragLeave=()=>{this.dragging=!1,this.requestUpdate()};this.handleDrop=e=>{e.preventDefault(),this.dragging=!1,this.requestUpdate(),!this.rootEl?.disabled&&!this.rootEl?.readOnly&&e.dataTransfer&&this.rootEl?.addFiles(e.dataTransfer.files)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-dropzone> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),this.setAttribute("role","button"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),super.disconnectedCallback()}updated(){let e=this.rootEl?.disabled??!1,a=this.rootEl?.readOnly??!1,r=this.rootEl?.required??!1,s=this.rootEl?.isInvalid??!1;this.tabIndex=e?-1:0,(0,c.reflectHostState)(this,{"aria-labelledby":this.rootEl?.labelPresent?this.rootEl.labelId:null,"aria-disabled":e||a?"true":null,"aria-describedby":r?this.rootEl?.descriptionId??null:null,"data-disabled":e?"":null,"data-readonly":a?"":null,"data-dragging":this.dragging?"":null,"data-invalid":s?"":null})}render(){return d.html`<slot>${d.nothing}</slot>`}};l.styles=d.css`
     :host {
       display: block;
     }
-  `,h([(0,v.state)()],s.prototype,"dragging",2),s=h([(0,g.customElement)("skdx-file-upload-dropzone","file-upload","dropzone")],s);0&&(module.exports={SkdxFileUploadDropzone});
+  `,n([(0,h.property)({type:Boolean,attribute:"disable-click"})],l.prototype,"disableClick",2),n([(0,h.state)()],l.prototype,"dragging",2),l=n([(0,u.customElement)("skdx-file-upload-dropzone","file-upload","dropzone")],l);0&&(module.exports={SkdxFileUploadDropzone});

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

@@ -1,22 +1,26 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-file-upload-dropzone>` — drag-and-drop / click-to-browse target:
- * `role="button"`, keyboard-activatable (Enter/Space), with
- * `aria-disabled`/`data-disabled` and `data-dragging` (set while a drag is
- * over it) reflecting state. Clicking or activating it, or dropping files
- * onto it, opens the native picker or adds the dropped files respectively.
- * Must be used inside `<skdx-file-upload>`.
+ * Drag-and-drop / click-to-browse target with `role="button"`,
+ * keyboard-activatable (Enter/Space). Set `disable-click` to disable clicking.
+ * Must be used inside `<skdx-file-upload>` with siblings (never children):
+ * `<skdx-file-upload-trigger>` and `<skdx-file-upload-input>`.
  *
  * @example
  * ```html
- * <skdx-file-upload-dropzone>
- *   Drag files here or <skdx-file-upload-trigger>browse</skdx-file-upload-trigger>
- *   <skdx-file-upload-input></skdx-file-upload-input>
- * </skdx-file-upload-dropzone>
+ * <skdx-file-upload-dropzone>Drag files here</skdx-file-upload-dropzone>
+ * <skdx-file-upload-trigger>browse</skdx-file-upload-trigger>
+ * <skdx-file-upload-input></skdx-file-upload-input>
  * ```
  */
 export declare class SkdxFileUploadDropzone extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * Suppresses the dropzone's own click-to-open behaviour, leaving
+     * drag-and-drop and Enter/Space activation untouched — for layouts where
+     * the sibling trigger is the only thing that should open the picker.
+     * @default false
+     */
+    disableClick: boolean;
     private dragging;
     private rootEl;
     private readonly onUpdate;

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

@@ -1,22 +1,26 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-file-upload-dropzone>` — drag-and-drop / click-to-browse target:
- * `role="button"`, keyboard-activatable (Enter/Space), with
- * `aria-disabled`/`data-disabled` and `data-dragging` (set while a drag is
- * over it) reflecting state. Clicking or activating it, or dropping files
- * onto it, opens the native picker or adds the dropped files respectively.
- * Must be used inside `<skdx-file-upload>`.
+ * Drag-and-drop / click-to-browse target with `role="button"`,
+ * keyboard-activatable (Enter/Space). Set `disable-click` to disable clicking.
+ * Must be used inside `<skdx-file-upload>` with siblings (never children):
+ * `<skdx-file-upload-trigger>` and `<skdx-file-upload-input>`.
  *
  * @example
  * ```html
- * <skdx-file-upload-dropzone>
- *   Drag files here or <skdx-file-upload-trigger>browse</skdx-file-upload-trigger>
- *   <skdx-file-upload-input></skdx-file-upload-input>
- * </skdx-file-upload-dropzone>
+ * <skdx-file-upload-dropzone>Drag files here</skdx-file-upload-dropzone>
+ * <skdx-file-upload-trigger>browse</skdx-file-upload-trigger>
+ * <skdx-file-upload-input></skdx-file-upload-input>
  * ```
  */
 export declare class SkdxFileUploadDropzone extends LitElement {
     static styles: import("lit").CSSResult;
+    /**
+     * Suppresses the dropzone's own click-to-open behaviour, leaving
+     * drag-and-drop and Enter/Space activation untouched — for layouts where
+     * the sibling trigger is the only thing that should open the picker.
+     * @default false
+     */
+    disableClick: boolean;
     private dragging;
     private rootEl;
     private readonly onUpdate;

package/dist/file-upload/FileUploadDropzone.js

@@ -1,5 +1,5 @@
-var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var o=(d,a,e,i)=>{for(var t=i>1?void 0:i?h(a,e):a,s=d.length-1,l;s>=0;s--)(l=d[s])&&(t=(i?l(a,e,t):l(t))||t);return i&&t&&n(a,e,t),t};import{css as p,html as v,LitElement as g,nothing as u}from"lit";import{state as c}from"lit/decorators.js";import{customElement as E}from"../internal/define.js";import{reflectHostState as f}from"../internal/part.js";var r=class extends g{constructor(){super(...arguments);this.dragging=!1;this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>this.rootEl?.openPicker();this.handleKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&!this.rootEl?.disabled&&(e.preventDefault(),this.rootEl?.openPicker())};this.handleDragOver=e=>{e.preventDefault(),this.rootEl?.disabled||(this.dragging=!0,this.requestUpdate())};this.handleDragLeave=()=>{this.dragging=!1,this.requestUpdate()};this.handleDrop=e=>{e.preventDefault(),this.dragging=!1,this.requestUpdate(),!this.rootEl?.disabled&&e.dataTransfer&&this.rootEl?.addFiles(e.dataTransfer.files)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-dropzone> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),this.setAttribute("role","button"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),super.disconnectedCallback()}updated(){let e=this.rootEl?.disabled??!1;this.tabIndex=e?-1:0,f(this,{"aria-disabled":e?"true":null,"data-disabled":e?"":null,"data-dragging":this.dragging?"":null})}render(){return v`<slot>${u}</slot>`}};r.styles=p`
+var n=Object.defineProperty;var h=Object.getOwnPropertyDescriptor;var d=(s,a,e,r)=>{for(var t=r>1?void 0:r?h(a,e):a,l=s.length-1,o;l>=0;l--)(o=s[l])&&(t=(r?o(a,e,t):o(t))||t);return r&&t&&n(a,e,t),t};import{css as p,html as v,LitElement as u,nothing as c}from"lit";import{property as E,state as f}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";import{reflectHostState as b}from"../internal/part.js";var i=class extends u{constructor(){super(...arguments);this.disableClick=!1;this.dragging=!1;this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.disableClick||this.rootEl?.openPicker()};this.handleKeyDown=e=>{(e.key==="Enter"||e.key===" ")&&!this.rootEl?.disabled&&!this.rootEl?.readOnly&&(e.preventDefault(),this.rootEl?.openPicker())};this.handleDragOver=e=>{e.preventDefault(),!this.rootEl?.disabled&&!this.rootEl?.readOnly&&(this.dragging=!0,this.requestUpdate())};this.handleDragLeave=()=>{this.dragging=!1,this.requestUpdate()};this.handleDrop=e=>{e.preventDefault(),this.dragging=!1,this.requestUpdate(),!this.rootEl?.disabled&&!this.rootEl?.readOnly&&e.dataTransfer&&this.rootEl?.addFiles(e.dataTransfer.files)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-dropzone> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),this.setAttribute("role","button"),this.addEventListener("click",this.handleClick),this.addEventListener("keydown",this.handleKeyDown),this.addEventListener("dragover",this.handleDragOver),this.addEventListener("dragleave",this.handleDragLeave),this.addEventListener("drop",this.handleDrop)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),this.removeEventListener("click",this.handleClick),this.removeEventListener("keydown",this.handleKeyDown),this.removeEventListener("dragover",this.handleDragOver),this.removeEventListener("dragleave",this.handleDragLeave),this.removeEventListener("drop",this.handleDrop),super.disconnectedCallback()}updated(){let e=this.rootEl?.disabled??!1,r=this.rootEl?.readOnly??!1,t=this.rootEl?.required??!1,l=this.rootEl?.isInvalid??!1;this.tabIndex=e?-1:0,b(this,{"aria-labelledby":this.rootEl?.labelPresent?this.rootEl.labelId:null,"aria-disabled":e||r?"true":null,"aria-describedby":t?this.rootEl?.descriptionId??null:null,"data-disabled":e?"":null,"data-readonly":r?"":null,"data-dragging":this.dragging?"":null,"data-invalid":l?"":null})}render(){return v`<slot>${c}</slot>`}};i.styles=p`
     :host {
       display: block;
     }
-  `,o([c()],r.prototype,"dragging",2),r=o([E("skdx-file-upload-dropzone","file-upload","dropzone")],r);export{r as SkdxFileUploadDropzone};
+  `,d([E({type:Boolean,attribute:"disable-click"})],i.prototype,"disableClick",2),d([f()],i.prototype,"dragging",2),i=d([g("skdx-file-upload-dropzone","file-upload","dropzone")],i);export{i as SkdxFileUploadDropzone};

package/dist/file-upload/FileUploadInput.cjs

@@ -1,15 +1,17 @@
-"use strict";var s=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var f=Object.prototype.hasOwnProperty;var m=(o,t)=>{for(var e in t)s(o,e,{get:t[e],enumerable:!0})},E=(o,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of v(t))!f.call(o,i)&&i!==e&&s(o,i,{get:()=>t[i],enumerable:!(l=p(t,i))||l.enumerable});return o};var k=o=>E(s({},"__esModule",{value:!0}),o),c=(o,t,e,l)=>{for(var i=l>1?void 0:l?p(t,e):t,d=o.length-1,r;d>=0;d--)(r=o[d])&&(i=(l?r(t,e,i):r(i))||i);return l&&i&&s(t,e,i),i};var b={};m(b,{SkdxFileUploadInput:()=>a});module.exports=k(b);var n=require("lit"),h=require("../internal/define.cjs"),u=require("../internal/styles.cjs");var a=class extends n.LitElement{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleChange=e=>{let l=e.target;l.files&&this.rootEl?.addFiles(l.files),l.value="",this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};this.handleInputClick=e=>e.stopPropagation()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-input> must be used inside <skdx-file-upload>.");this.rootEl.registerInput(this),this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}click(){this.shadowRoot?.querySelector("input")?.click()}render(){let e=this.rootEl;return n.html`
+"use strict";var n=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var m=(o,t)=>{for(var e in t)n(o,e,{get:t[e],enumerable:!0})},E=(o,t,e,l)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of f(t))!v.call(o,i)&&i!==e&&n(o,i,{get:()=>t[i],enumerable:!(l=c(t,i))||l.enumerable});return o};var k=o=>E(n({},"__esModule",{value:!0}),o),h=(o,t,e,l)=>{for(var i=l>1?void 0:l?c(t,e):t,s=o.length-1,p;s>=0;s--)(p=o[s])&&(i=(l?p(t,e,i):p(i))||i);return l&&i&&n(t,e,i),i};var b={};m(b,{SkdxFileUploadInput:()=>r});module.exports=k(b);var a=require("lit"),d=require("../internal/define.cjs"),u=require("../internal/styles.cjs");var r=class extends a.LitElement{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleChange=e=>{let l=e.target;l.files&&this.rootEl?.addFiles(l.files),l.value="",this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};this.handleInputClick=e=>e.stopPropagation()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-input> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),(0,d.whenUpgraded)(this.rootEl,()=>this.rootEl?.registerInput(this))}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}click(){this.shadowRoot?.querySelector("input")?.click()}render(){let e=this.rootEl;return a.html`
       <input
         type="file"
         aria-hidden="true"
         tabindex="-1"
-        accept=${e?.accept??n.nothing}
+        accept=${e?.accept??a.nothing}
         ?multiple=${e?.multiple??!1}
-        ?disabled=${e?.disabled??!1}
+        ?webkitdirectory=${e?.directory??!1}
+        capture=${e?.capture??a.nothing}
+        ?disabled=${(e?.disabled??!1)||(e?.readOnly??!1)}
         @click=${this.handleInputClick}
         @change=${this.handleChange}
       />
-    `}};a.styles=[u.resetNativeControl,n.css`
+    `}};r.styles=[u.resetNativeControl,a.css`
       :host {
         display: inline-block;
         position: absolute;
@@ -24,4 +26,4 @@
         width: 1px;
         height: 1px;
       }
-    `],a=c([(0,h.customElement)("skdx-file-upload-input","file-upload","input")],a);0&&(module.exports={SkdxFileUploadInput});
+    `],r=h([(0,d.customElement)("skdx-file-upload-input","file-upload","input")],r);0&&(module.exports={SkdxFileUploadInput});

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

@@ -1,22 +1,6 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-file-upload-input>` — the visually-hidden native
- * `<input type="file">` that actually opens the OS file dialog and receives
- * its selection. Its `accept`, `multiple`, and `disabled` come from the
- * ancestor `<skdx-file-upload>`. Render it once anywhere inside
- * `<skdx-file-upload>` — `<skdx-file-upload-dropzone>`/`<skdx-file-upload-trigger>`
- * open it programmatically via `openPicker()`; you never need to interact
- * with it directly. Must be used inside `<skdx-file-upload>`.
- *
- * **Why this one keeps its shadow root** while the other native controls in
- * this package moved into the light DOM. Its `static styles` are not cosmetic —
- * they are what makes the control invisible, and `static styles` is a
- * shadow-root-only mechanism, so a light-DOM version of this element would drop
- * them and render a bare "Choose File" button into the middle of every
- * consumer's layout. The usual answer, moving the rules into the shared
- * light-DOM sheet in `internal/styles.ts`, is the prerequisite for converting
- * it; nothing about the labelling argument applies here anyway, since the
- * `<input>` is `aria-hidden` and `tabindex="-1"` and is never named or focused.
+ * Visually-hidden native `<input type="file">` that opens OS file dialog. `accept`, `multiple`, `disabled` from ancestor. Dropzone/Trigger open via `openPicker()`. Keeps shadow root (`static styles` make it invisible; only work in shadow DOM).
  */
 export declare class SkdxFileUploadInput extends LitElement {
     static styles: import("lit").CSSResult[];

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

@@ -1,22 +1,6 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-file-upload-input>` — the visually-hidden native
- * `<input type="file">` that actually opens the OS file dialog and receives
- * its selection. Its `accept`, `multiple`, and `disabled` come from the
- * ancestor `<skdx-file-upload>`. Render it once anywhere inside
- * `<skdx-file-upload>` — `<skdx-file-upload-dropzone>`/`<skdx-file-upload-trigger>`
- * open it programmatically via `openPicker()`; you never need to interact
- * with it directly. Must be used inside `<skdx-file-upload>`.
- *
- * **Why this one keeps its shadow root** while the other native controls in
- * this package moved into the light DOM. Its `static styles` are not cosmetic —
- * they are what makes the control invisible, and `static styles` is a
- * shadow-root-only mechanism, so a light-DOM version of this element would drop
- * them and render a bare "Choose File" button into the middle of every
- * consumer's layout. The usual answer, moving the rules into the shared
- * light-DOM sheet in `internal/styles.ts`, is the prerequisite for converting
- * it; nothing about the labelling argument applies here anyway, since the
- * `<input>` is `aria-hidden` and `tabindex="-1"` and is never named or focused.
+ * Visually-hidden native `<input type="file">` that opens OS file dialog. `accept`, `multiple`, `disabled` from ancestor. Dropzone/Trigger open via `openPicker()`. Keeps shadow root (`static styles` make it invisible; only work in shadow DOM).
  */
 export declare class SkdxFileUploadInput extends LitElement {
     static styles: import("lit").CSSResult[];

package/dist/file-upload/FileUploadInput.js

@@ -1,15 +1,17 @@
-var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(n,o,e,t)=>{for(var i=t>1?void 0:t?p(o,e):o,a=n.length-1,s;a>=0;a--)(s=n[a])&&(i=(t?s(o,e,i):s(i))||i);return t&&i&&r(o,e,i),i};import{css as c,html as h,LitElement as u,nothing as v}from"lit";import{customElement as f}from"../internal/define.js";import{resetNativeControl as m}from"../internal/styles.js";var l=class extends u{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleChange=e=>{let t=e.target;t.files&&this.rootEl?.addFiles(t.files),t.value="",this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};this.handleInputClick=e=>e.stopPropagation()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-input> must be used inside <skdx-file-upload>.");this.rootEl.registerInput(this),this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}click(){this.shadowRoot?.querySelector("input")?.click()}render(){let e=this.rootEl;return h`
+var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var d=(a,o,e,t)=>{for(var i=t>1?void 0:t?c(o,e):o,r=a.length-1,n;r>=0;r--)(n=a[r])&&(i=(t?n(o,e,i):n(i))||i);return t&&i&&p(o,e,i),i};import{css as h,html as u,LitElement as f,nothing as s}from"lit";import{customElement as v,whenUpgraded as m}from"../internal/define.js";import{resetNativeControl as E}from"../internal/styles.js";var l=class extends f{constructor(){super(...arguments);this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleChange=e=>{let t=e.target;t.files&&this.rootEl?.addFiles(t.files),t.value="",this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))};this.handleInputClick=e=>e.stopPropagation()}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-input> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),m(this.rootEl,()=>this.rootEl?.registerInput(this))}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}click(){this.shadowRoot?.querySelector("input")?.click()}render(){let e=this.rootEl;return u`
       <input
         type="file"
         aria-hidden="true"
         tabindex="-1"
-        accept=${e?.accept??v}
+        accept=${e?.accept??s}
         ?multiple=${e?.multiple??!1}
-        ?disabled=${e?.disabled??!1}
+        ?webkitdirectory=${e?.directory??!1}
+        capture=${e?.capture??s}
+        ?disabled=${(e?.disabled??!1)||(e?.readOnly??!1)}
         @click=${this.handleInputClick}
         @change=${this.handleChange}
       />
-    `}};l.styles=[m,c`
+    `}};l.styles=[E,h`
       :host {
         display: inline-block;
         position: absolute;
@@ -24,4 +26,4 @@ var r=Object.defineProperty;var p=Object.getOwnPropertyDescriptor;var d=(n,o,e,t
         width: 1px;
         height: 1px;
       }
-    `],l=d([f("skdx-file-upload-input","file-upload","input")],l);export{l as SkdxFileUploadInput};
+    `],l=d([v("skdx-file-upload-input","file-upload","input")],l);export{l as SkdxFileUploadInput};

package/dist/file-upload/FileUploadItem.cjs

@@ -1,5 +1,5 @@
-"use strict";var u=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var g=Object.prototype.hasOwnProperty;var b=(r,t)=>{for(var i in t)u(r,i,{get:t[i],enumerable:!0})},h=(r,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of f(t))!g.call(r,e)&&e!==i&&u(r,e,{get:()=>t[e],enumerable:!(o=n(t,e))||o.enumerable});return r};var y=r=>h(u({},"__esModule",{value:!0}),r),p=(r,t,i,o)=>{for(var e=o>1?void 0:o?n(t,i):t,d=r.length-1,m;d>=0;d--)(m=r[d])&&(e=(o?m(t,i,e):m(e))||e);return o&&e&&u(t,i,e),e};var v={};b(v,{SkdxFileUploadItem:()=>s});module.exports=y(v);var a=require("lit"),l=require("lit/decorators.js"),c=require("../internal/define.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.index=0;this.status="idle"}updated(){this.setAttribute("data-status",this.status),this.progress===void 0?this.removeAttribute("data-progress"):this.setAttribute("data-progress",String(this.progress))}render(){return a.html`<slot></slot>`}};s.styles=a.css`
+"use strict";var p=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var g=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var b=(r,t)=>{for(var i in t)p(r,i,{get:t[i],enumerable:!0})},h=(r,t,i,o)=>{if(t&&typeof t=="object"||typeof t=="function")for(let e of g(t))!c.call(r,e)&&e!==i&&p(r,e,{get:()=>t[e],enumerable:!(o=n(t,e))||o.enumerable});return r};var y=r=>h(p({},"__esModule",{value:!0}),r),l=(r,t,i,o)=>{for(var e=o>1?void 0:o?n(t,i):t,d=r.length-1,m;d>=0;d--)(m=r[d])&&(e=(o?m(t,i,e):m(e))||e);return o&&e&&p(t,i,e),e};var v={};b(v,{SkdxFileUploadItem:()=>s});module.exports=y(v);var a=require("lit"),u=require("lit/decorators.js"),f=require("../internal/define.cjs");var s=class extends a.LitElement{constructor(){super(...arguments);this.status="idle"}updated(){this.setAttribute("data-state",this.status),this.progress===void 0?this.removeAttribute("data-progress"):this.setAttribute("data-progress",String(this.progress))}render(){return a.html`<slot></slot>`}};s.styles=a.css`
     :host {
       display: block;
     }
-  `,p([(0,l.property)({type:Number,reflect:!0})],s.prototype,"index",2),p([(0,l.property)({type:String})],s.prototype,"status",2),p([(0,l.property)({type:Number})],s.prototype,"progress",2),s=p([(0,c.customElement)("skdx-file-upload-item","file-upload","item")],s);0&&(module.exports={SkdxFileUploadItem});
+  `,l([(0,u.property)({attribute:!1})],s.prototype,"file",2),l([(0,u.property)({type:String})],s.prototype,"status",2),l([(0,u.property)({type:Number})],s.prototype,"progress",2),s=l([(0,f.customElement)("skdx-file-upload-item","file-upload","item")],s);0&&(module.exports={SkdxFileUploadItem});

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

@@ -2,29 +2,27 @@ import { LitElement } from 'lit';
 /** Per-file upload status a consumer pushes onto `<skdx-file-upload-item>`. */
 export type FileUploadFileStatus = 'idle' | 'uploading' | 'complete' | 'error';
 /**
- * `<skdx-file-upload-item>` — row for a single selected file, identified by
- * its `index` in the ancestor `<skdx-file-upload>`'s current file list.
- * Render the file's name/size/preview and a `<skdx-file-upload-item-delete>`
- * as slotted content.
- *
- * `status`/`progress` are pushed in by the consumer: `<skdx-file-upload>` is
- * transport-free, so it never learns that a file finished uploading. They
- * surface on the host as `data-status` / `data-progress` so per-file progress
- * and error UIs are styleable without forking the component.
+ * Row for a single file, identified by `file` property (cannot serialize
+ * through attribute). Parts find this element via `closest()`. `status`/`progress`
+ * pushed by consumer; surface as `data-state`/`data-progress` for styling.
  *
  * @example
- * ```html
- * <skdx-file-upload-item index="0" status="uploading" progress="40">
- *   report.pdf
- *   <skdx-file-upload-item-delete index="0"></skdx-file-upload-item-delete>
- * </skdx-file-upload-item>
+ * ```js
+ * const row = document.createElement('skdx-file-upload-item');
+ * row.file = upload.value[0];
+ * row.status = 'uploading';
+ * row.progress = 40;
+ * row.innerHTML = `<skdx-file-upload-item-name></skdx-file-upload-item-name>`;
  * ```
  */
 export declare class SkdxFileUploadItem extends LitElement {
     static styles: import("lit").CSSResult;
-    /** Index of this file in the ancestor `<skdx-file-upload>`'s current file list. */
-    index: number;
-    /** This file's upload status, owned by whoever runs the transport. Reflected as `data-status`. @default 'idle' */
+    /**
+     * File this row shows (compared by reference). Property-only: `File` is not
+     * serializable through attributes.
+     */
+    file: File;
+    /** This file's upload status, owned by whoever runs the transport. Reflected as `data-state`. @default 'idle' */
     status: FileUploadFileStatus;
     /** This file's upload progress, 0-100. Reflected as `data-progress`; omitted when unset. @default undefined */
     progress?: number;

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

@@ -2,29 +2,27 @@ import { LitElement } from 'lit';
 /** Per-file upload status a consumer pushes onto `<skdx-file-upload-item>`. */
 export type FileUploadFileStatus = 'idle' | 'uploading' | 'complete' | 'error';
 /**
- * `<skdx-file-upload-item>` — row for a single selected file, identified by
- * its `index` in the ancestor `<skdx-file-upload>`'s current file list.
- * Render the file's name/size/preview and a `<skdx-file-upload-item-delete>`
- * as slotted content.
- *
- * `status`/`progress` are pushed in by the consumer: `<skdx-file-upload>` is
- * transport-free, so it never learns that a file finished uploading. They
- * surface on the host as `data-status` / `data-progress` so per-file progress
- * and error UIs are styleable without forking the component.
+ * Row for a single file, identified by `file` property (cannot serialize
+ * through attribute). Parts find this element via `closest()`. `status`/`progress`
+ * pushed by consumer; surface as `data-state`/`data-progress` for styling.
  *
  * @example
- * ```html
- * <skdx-file-upload-item index="0" status="uploading" progress="40">
- *   report.pdf
- *   <skdx-file-upload-item-delete index="0"></skdx-file-upload-item-delete>
- * </skdx-file-upload-item>
+ * ```js
+ * const row = document.createElement('skdx-file-upload-item');
+ * row.file = upload.value[0];
+ * row.status = 'uploading';
+ * row.progress = 40;
+ * row.innerHTML = `<skdx-file-upload-item-name></skdx-file-upload-item-name>`;
  * ```
  */
 export declare class SkdxFileUploadItem extends LitElement {
     static styles: import("lit").CSSResult;
-    /** Index of this file in the ancestor `<skdx-file-upload>`'s current file list. */
-    index: number;
-    /** This file's upload status, owned by whoever runs the transport. Reflected as `data-status`. @default 'idle' */
+    /**
+     * File this row shows (compared by reference). Property-only: `File` is not
+     * serializable through attributes.
+     */
+    file: File;
+    /** This file's upload status, owned by whoever runs the transport. Reflected as `data-state`. @default 'idle' */
     status: FileUploadFileStatus;
     /** This file's upload progress, 0-100. Reflected as `data-progress`; omitted when unset. @default undefined */
     progress?: number;

package/dist/file-upload/FileUploadItem.js

@@ -1,5 +1,5 @@
-var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(o,r,a,i)=>{for(var e=i>1?void 0:i?m(r,a):r,p=o.length-1,u;p>=0;p--)(u=o[p])&&(e=(i?u(r,a,e):u(e))||e);return i&&e&&d(r,a,e),e};import{css as n,html as c,LitElement as f}from"lit";import{property as l}from"lit/decorators.js";import{customElement as g}from"../internal/define.js";var t=class extends f{constructor(){super(...arguments);this.index=0;this.status="idle"}updated(){this.setAttribute("data-status",this.status),this.progress===void 0?this.removeAttribute("data-progress"):this.setAttribute("data-progress",String(this.progress))}render(){return c`<slot></slot>`}};t.styles=n`
+var d=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var s=(o,r,a,i)=>{for(var e=i>1?void 0:i?m(r,a):r,l=o.length-1,p;l>=0;l--)(p=o[l])&&(e=(i?p(r,a,e):p(e))||e);return i&&e&&d(r,a,e),e};import{css as n,html as f,LitElement as g}from"lit";import{property as u}from"lit/decorators.js";import{customElement as c}from"../internal/define.js";var t=class extends g{constructor(){super(...arguments);this.status="idle"}updated(){this.setAttribute("data-state",this.status),this.progress===void 0?this.removeAttribute("data-progress"):this.setAttribute("data-progress",String(this.progress))}render(){return f`<slot></slot>`}};t.styles=n`
     :host {
       display: block;
     }
-  `,s([l({type:Number,reflect:!0})],t.prototype,"index",2),s([l({type:String})],t.prototype,"status",2),s([l({type:Number})],t.prototype,"progress",2),t=s([g("skdx-file-upload-item","file-upload","item")],t);export{t as SkdxFileUploadItem};
+  `,s([u({attribute:!1})],t.prototype,"file",2),s([u({type:String})],t.prototype,"status",2),s([u({type:Number})],t.prototype,"progress",2),t=s([c("skdx-file-upload-item","file-upload","item")],t);export{t as SkdxFileUploadItem};

package/dist/file-upload/FileUploadItemDelete.cjs

@@ -1,15 +1,16 @@
-"use strict";var a=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var E=(o,e)=>{for(var i in e)a(o,i,{get:e[i],enumerable:!0})},k=(o,e,i,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!v.call(o,t)&&t!==i&&a(o,t,{get:()=>e[t],enumerable:!(r=u(e,t))||r.enumerable});return o};var x=o=>k(a({},"__esModule",{value:!0}),o),c=(o,e,i,r)=>{for(var t=r>1?void 0:r?u(e,i):e,n=o.length-1,p;n>=0;n--)(p=o[n])&&(t=(r?p(e,i,t):p(t))||t);return r&&t&&a(e,i,t),t};var y={};E(y,{SkdxFileUploadItemDelete:()=>l});module.exports=x(y);var d=require("lit"),h=require("lit/decorators.js"),b=require("../internal/define.cjs"),m=require("../internal/part.cjs"),s=require("../internal/styles.cjs");var l=class extends d.LitElement{constructor(){super(...arguments);this.index=0;this.rootEl=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{this.rootEl?.disabled||this.rootEl?.removeFile(this.index)}}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-item-delete> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),this.hasAttribute("aria-label")||this.setAttribute("aria-label","Remove file")}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}updated(){(0,m.reflectHostState)(this,{"data-disabled":this.rootEl?.disabled?"":null})}render(){let i=this.rootEl?.disabled??!1;return d.html`
+"use strict";var p=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var v=Object.getOwnPropertyNames;var E=Object.prototype.hasOwnProperty;var k=(i,l)=>{for(var e in l)p(i,e,{get:l[e],enumerable:!0})},y=(i,l,e,o)=>{if(l&&typeof l=="object"||typeof l=="function")for(let t of v(l))!E.call(i,t)&&t!==e&&p(i,t,{get:()=>l[t],enumerable:!(o=c(l,t))||o.enumerable});return i};var g=i=>y(p({},"__esModule",{value:!0}),i),u=(i,l,e,o)=>{for(var t=o>1?void 0:o?c(l,e):l,s=i.length-1,d;s>=0;s--)(d=i[s])&&(t=(o?d(l,e,t):d(t))||t);return o&&t&&p(l,e,t),t};var x={};k(x,{SkdxFileUploadItemDelete:()=>a});module.exports=g(x);var r=require("lit"),h=require("lit/decorators.js"),m=require("../internal/aria-label.cjs"),f=require("../internal/define.cjs"),b=require("../internal/part.cjs"),n=require("../internal/styles.cjs");var a=class extends r.LitElement{constructor(){super(...arguments);this.rootEl=null;this.label=null;this.onUpdate=()=>this.requestUpdate();this.handleClick=()=>{if(this.rootEl?.disabled||this.rootEl?.readOnly)return;let e=this.target;if(!e)return;let o=this.closest('[data-part="root"]');if(o){let t=[...o.querySelectorAll('[data-part="item-delete"]')],s=t.indexOf(this),d=t[s+1]??t[s-1]??o.querySelector('[data-part="dropzone"], [data-part="trigger"]');(d?.shadowRoot?.querySelector("button")??d)?.focus()}this.rootEl?.removeFile(e)}}get target(){return this.file??this.closest("skdx-file-upload-item")?.file??null}connectedCallback(){if(super.connectedCallback(),this.rootEl=this.closest("skdx-file-upload"),!this.rootEl)throw new Error("<skdx-file-upload-item-delete> must be used inside <skdx-file-upload>.");this.rootEl.addEventListener("skdx-file-upload-update",this.onUpdate),this.label=(0,m.takeHostAriaLabel)(this)??this.label}get accessibleName(){if(this.label!==null)return this.label;let e=this.target?.name;return e===void 0?null:(this.rootEl?.removeLabel??(o=>`Remove ${o}`))(e)}disconnectedCallback(){this.rootEl?.removeEventListener("skdx-file-upload-update",this.onUpdate),super.disconnectedCallback()}updated(){(0,b.reflectHostState)(this,{"data-disabled":this.rootEl?.disabled?"":null,"data-readonly":this.rootEl?.readOnly?"":null})}render(){let e=(this.rootEl?.disabled??!1)||(this.rootEl?.readOnly??!1);return r.html`
       <button
         part="delete"
         type="button"
-        ?disabled=${i}
-        data-disabled=${i?"":d.nothing}
+        aria-label=${this.accessibleName??r.nothing}
+        ?disabled=${e}
+        data-disabled=${e?"":r.nothing}
         @click=${this.handleClick}
       >
         <slot></slot>
       </button>
-    `}};l.shadowRootOptions=s.delegatesFocusShadowRootOptions,l.styles=[s.resetNativeControl,d.css`
+    `}};a.shadowRootOptions=n.delegatesFocusShadowRootOptions,a.styles=[n.resetNativeControl,r.css`
       :host {
         display: inline-block;
       }
-    `,s.controlBoxOnHost],c([(0,h.property)({type:Number})],l.prototype,"index",2),l=c([(0,b.customElement)("skdx-file-upload-item-delete","file-upload","item-delete")],l);0&&(module.exports={SkdxFileUploadItemDelete});
+    `,n.controlBoxOnHost],u([(0,h.property)({attribute:!1})],a.prototype,"file",2),a=u([(0,f.customElement)("skdx-file-upload-item-delete","file-upload","item-delete")],a);0&&(module.exports={SkdxFileUploadItemDelete});

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

@@ -1,21 +1,33 @@
 import { LitElement } from 'lit';
 /**
- * `<skdx-file-upload-item-delete>` — button that removes its `index`-th file
- * from the ancestor `<skdx-file-upload>`'s file list when clicked. Defaults
- * `aria-label` to `"Remove file"` (set your own `aria-label` attribute on
- * the host to override), and mirrors the upload's `disabled` state. Must be
- * used inside `<skdx-file-upload>`.
- *
+ * `<skdx-file-upload-item-delete>` — removes one file when clicked.
+ * Defaults to enclosing `<skdx-file-upload-item>`'s file; address by identity.
+ * Focus moves to next delete button before row removal. Named by `removeLabel` (`"Remove {name}"`).
  * @csspart delete - The native `<button>` element inside the shadow root.
  */
 export declare class SkdxFileUploadItemDelete extends LitElement {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
-    /** Index of the file to remove from the ancestor `<skdx-file-upload>`'s current file list. */
-    index: number;
+    /**
+     * The file this button removes, matched by identity against the root's list.
+     * Defaults to the enclosing `<skdx-file-upload-item>`'s file, which is where
+     * it belongs in every composition the docs show; set it explicitly only for a
+     * delete control that sits outside its row.
+     *
+     * Property-only, like the row's own `file` and for the same reason: a `File`
+     * cannot round-trip through an HTML attribute.
+     * @default the enclosing Item's file
+     */
+    file?: File;
     private rootEl;
+    /** A consumer-supplied `aria-label`, moved off the host so it names the element that carries the role. */
+    private label;
+    /** The file this button acts on: its own property, or the enclosing row's. */
+    private get target();
     private readonly onUpdate;
     connectedCallback(): void;
+    /** Button name: consumer's `aria-label`, or worded from file name via `removeLabel`. */
+    private get accessibleName();
     disconnectedCallback(): void;
     private readonly handleClick;
     protected updated(): void;