@skdx/web-components 0.27.0 → 0.29.0

package/dist/field/FieldRequiredIndicator.d.ts

@@ -0,0 +1,33 @@
+import { LitElement, nothing, type TemplateResult } from 'lit';
+/**
+ * "Required" marker for `<skdx-field>`. Place inside `<skdx-field-label>` to join the accessible name.
+ * Do not use `aria-hidden` — hides from those who need the announcement.
+ *
+ * @slot - Replacement for default `*`.
+ * @csspart required-indicator - The `<span>` the marker renders into.
+ *
+ * @example
+ * ```html
+ * <skdx-field required>
+ *   <skdx-field-label>
+ *     Email <skdx-field-required-indicator>(required)</skdx-field-required-indicator>
+ *   </skdx-field-label>
+ *   <input type="email" />
+ * </skdx-field>
+ * ```
+ */
+export declare class SkdxFieldRequiredIndicator extends LitElement {
+    static styles: import("lit").CSSResult;
+    private isRequired;
+    private get field();
+    connectedCallback(): void;
+    /** @internal Called by the owning field when required prop changes. */
+    refresh(): void;
+    protected updated(): void;
+    render(): TemplateResult | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'skdx-field-required-indicator': SkdxFieldRequiredIndicator;
+    }
+}

package/dist/field/FieldRequiredIndicator.js

@@ -0,0 +1,8 @@
+var p=Object.defineProperty;var f=Object.getOwnPropertyDescriptor;var n=(d,r,e,s)=>{for(var t=s>1?void 0:s?f(r,e):r,l=d.length-1,o;l>=0;l--)(o=d[l])&&(t=(s?o(r,e,t):o(t))||t);return s&&t&&p(r,e,t),t};import{css as h,html as m,LitElement as u,nothing as c}from"lit";import{state as v}from"lit/decorators.js";import{customElement as T}from"../internal/define.js";import{FIELD_REQUIRED_INDICATOR_ATTRIBUTE as a}from"../internal/field-core.js";var i=class extends u{constructor(){super(...arguments);this.isRequired=!1}get field(){return this.closest("skdx-field, skdx-fieldset")}connectedCallback(){super.connectedCallback(),this.refresh()}refresh(){let e=this.field?.required===!0;this.isRequired=e,e?this.setAttribute(a,""):this.removeAttribute(a),this.toggleAttribute("hidden",!e)}updated(){this.refresh()}render(){return this.isRequired?m`<span part="required-indicator"><slot>*</slot></span>`:c}};i.styles=h`
+    :host {
+      display: inline;
+    }
+    :host([hidden]) {
+      display: none;
+    }
+  `,n([v()],i.prototype,"isRequired",2),i=n([T("skdx-field-required-indicator","field","required-indicator")],i);export{i as SkdxFieldRequiredIndicator};

package/dist/field/Fieldset.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var b=Object.prototype.hasOwnProperty;var f=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},g=(r,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of p(e))!b.call(r,t)&&t!==o&&i(r,t,{get:()=>e[t],enumerable:!(l=d(e,t))||l.enumerable});return r};var h=r=>g(i({},"__esModule",{value:!0}),r),n=(r,e,o,l)=>{for(var t=l>1?void 0:l?d(e,o):e,s=r.length-1,c;s>=0;s--)(c=r[s])&&(t=(l?c(e,o,t):c(t))||t);return l&&t&&i(e,o,t),t};var k={};f(k,{SkdxFieldset:()=>a});module.exports=h(k);var m=require("../internal/define.cjs"),u=require("./Field.cjs");var a=class extends u.SkdxField{get grouped(){return!0}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","group"),super.connectedCallback()}};a=n([(0,m.customElement)("skdx-fieldset")],a);0&&(module.exports={SkdxFieldset});
+"use strict";var i=Object.defineProperty;var c=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var p=Object.prototype.hasOwnProperty;var b=(r,e)=>{for(var o in e)i(r,o,{get:e[o],enumerable:!0})},g=(r,e,o,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let t of f(e))!p.call(r,t)&&t!==o&&i(r,t,{get:()=>e[t],enumerable:!(l=c(e,t))||l.enumerable});return r};var h=r=>g(i({},"__esModule",{value:!0}),r),n=(r,e,o,l)=>{for(var t=l>1?void 0:l?c(e,o):e,s=r.length-1,d;s>=0;s--)(d=r[s])&&(t=(l?d(e,o,t):d(t))||t);return l&&t&&i(e,o,t),t};var k={};b(k,{SkdxFieldset:()=>a});module.exports=h(k);var m=require("../internal/define.cjs"),u=require("./Field.cjs");var a=class extends u.SkdxFieldBase{get grouped(){return!0}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","group"),super.connectedCallback()}};a=n([(0,m.customElement)("skdx-fieldset","field","root")],a);0&&(module.exports={SkdxFieldset});

package/dist/field/Fieldset.d.cts

@@ -1,21 +1,12 @@
-import { SkdxField } from './Field.cjs';
+import { SkdxFieldBase } from './Field.cjs';
 /**
  * `<skdx-fieldset>` — a `<skdx-field>` in group mode: its `<skdx-field-label>`
  * renders a `<legend>` and the group control is named with `aria-labelledby`
  * instead of `for`/`id`, because a `<label for>` may not reference a
- * `[role="radiogroup"]`. Same properties, same validation model, same state
- * hooks as `<skdx-field>`.
+ * `[role="radiogroup"]`. Same validation and state hooks as `<skdx-field>`.
  *
- * **Why no `<fieldset>` element.** Rendering `<fieldset><slot></slot></fieldset>`
- * would put the shadow `<fieldset>` between this host and the slotted control
- * in the *flattened* tree only — the control still lives in this element's
- * light DOM, but the `<legend>` would then live in the shadow root where its
- * `id` cannot be referenced by a light-DOM control's `aria-labelledby` (an
- * IDREF does not cross a shadow boundary). So the shadow root stays a bare
- * `<slot>` and the host carries `role="group"` itself, which is what a
- * `<fieldset>` maps to anyway. The consumer keeps the `<legend>` — rendered by
- * `<skdx-field-label>` — and its host id in the light DOM, where the group's
- * `aria-labelledby` resolves.
+ * The host carries `role="group"` because `<legend>` lives in light DOM (an IDREF
+ * cannot cross the shadow boundary), so the shadow root is a bare `<slot>`.
  *
  * @slot - A `<skdx-field-label>`, the group control, an optional
  * `<skdx-field-description>`, and a `<skdx-field-error>`.
@@ -32,7 +23,8 @@ import { SkdxField } from './Field.cjs';
  * </skdx-fieldset>
  * ```
  */
-export declare class SkdxFieldset extends SkdxField {
+export declare class SkdxFieldset extends SkdxFieldBase {
+    /** @internal Marks this field wrapper as a fieldset for descendant controls. */
     get grouped(): boolean;
     connectedCallback(): void;
 }

package/dist/field/Fieldset.d.ts

@@ -1,21 +1,12 @@
-import { SkdxField } from './Field.js';
+import { SkdxFieldBase } from './Field.js';
 /**
  * `<skdx-fieldset>` — a `<skdx-field>` in group mode: its `<skdx-field-label>`
  * renders a `<legend>` and the group control is named with `aria-labelledby`
  * instead of `for`/`id`, because a `<label for>` may not reference a
- * `[role="radiogroup"]`. Same properties, same validation model, same state
- * hooks as `<skdx-field>`.
+ * `[role="radiogroup"]`. Same validation and state hooks as `<skdx-field>`.
  *
- * **Why no `<fieldset>` element.** Rendering `<fieldset><slot></slot></fieldset>`
- * would put the shadow `<fieldset>` between this host and the slotted control
- * in the *flattened* tree only — the control still lives in this element's
- * light DOM, but the `<legend>` would then live in the shadow root where its
- * `id` cannot be referenced by a light-DOM control's `aria-labelledby` (an
- * IDREF does not cross a shadow boundary). So the shadow root stays a bare
- * `<slot>` and the host carries `role="group"` itself, which is what a
- * `<fieldset>` maps to anyway. The consumer keeps the `<legend>` — rendered by
- * `<skdx-field-label>` — and its host id in the light DOM, where the group's
- * `aria-labelledby` resolves.
+ * The host carries `role="group"` because `<legend>` lives in light DOM (an IDREF
+ * cannot cross the shadow boundary), so the shadow root is a bare `<slot>`.
  *
  * @slot - A `<skdx-field-label>`, the group control, an optional
  * `<skdx-field-description>`, and a `<skdx-field-error>`.
@@ -32,7 +23,8 @@ import { SkdxField } from './Field.js';
  * </skdx-fieldset>
  * ```
  */
-export declare class SkdxFieldset extends SkdxField {
+export declare class SkdxFieldset extends SkdxFieldBase {
+    /** @internal Marks this field wrapper as a fieldset for descendant controls. */
     get grouped(): boolean;
     connectedCallback(): void;
 }

package/dist/field/Fieldset.js

@@ -1 +1 @@
-var d=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var c=(l,t,a,r)=>{for(var e=r>1?void 0:r?n(t,a):t,i=l.length-1,s;i>=0;i--)(s=l[i])&&(e=(r?s(t,a,e):s(e))||e);return r&&e&&d(t,a,e),e};import{customElement as m}from"../internal/define.js";import{SkdxField as u}from"./Field.js";var o=class extends u{get grouped(){return!0}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","group"),super.connectedCallback()}};o=c([m("skdx-fieldset")],o);export{o as SkdxFieldset};
+var c=Object.defineProperty;var n=Object.getOwnPropertyDescriptor;var d=(l,t,a,r)=>{for(var e=r>1?void 0:r?n(t,a):t,i=l.length-1,s;i>=0;i--)(s=l[i])&&(e=(r?s(t,a,e):s(e))||e);return r&&e&&c(t,a,e),e};import{customElement as m}from"../internal/define.js";import{SkdxFieldBase as u}from"./Field.js";var o=class extends u{get grouped(){return!0}connectedCallback(){this.hasAttribute("role")||this.setAttribute("role","group"),super.connectedCallback()}};o=d([m("skdx-fieldset","field","root")],o);export{o as SkdxFieldset};

package/dist/field/index.cjs

@@ -1 +1 @@
-"use strict";var i=Object.defineProperty;var s=Object.getOwnPropertyDescriptor;var E=Object.getOwnPropertyNames;var c=Object.prototype.hasOwnProperty;var f=(t,e)=>{for(var d in e)i(t,d,{get:e[d],enumerable:!0})},m=(t,e,d,l)=>{if(e&&typeof e=="object"||typeof e=="function")for(let o of E(e))!c.call(t,o)&&o!==d&&i(t,o,{get:()=>e[o],enumerable:!(l=s(e,o))||l.enumerable});return t};var S=t=>m(i({},"__esModule",{value:!0}),t);var T={};f(T,{FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>r.FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT:()=>r.FIELD_VALIDITY_CHANGE_EVENT,SkdxField:()=>a.SkdxField,SkdxFieldCharacterCount:()=>n.SkdxFieldCharacterCount,SkdxFieldDescription:()=>F.SkdxFieldDescription,SkdxFieldError:()=>C.SkdxFieldError,SkdxFieldLabel:()=>x.SkdxFieldLabel,SkdxFieldset:()=>p.SkdxFieldset,characterCountMessage:()=>r.characterCountMessage,characterCountVisible:()=>r.characterCountVisible});module.exports=S(T);var a=require("./Field.cjs"),p=require("./Fieldset.cjs"),x=require("./FieldLabel.cjs"),F=require("./FieldDescription.cjs"),C=require("./FieldError.cjs"),n=require("./FieldCharacterCount.cjs"),r=require("./field-core.cjs");0&&(module.exports={FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT,SkdxField,SkdxFieldCharacterCount,SkdxFieldDescription,SkdxFieldError,SkdxFieldLabel,SkdxFieldset,characterCountMessage,characterCountVisible});
+"use strict";var a=Object.defineProperty;var T=Object.getOwnPropertyDescriptor;var p=Object.getOwnPropertyNames;var F=Object.prototype.hasOwnProperty;var I=(o,t)=>{for(var r in t)a(o,r,{get:t[r],enumerable:!0})},C=(o,t,r,d)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of p(t))!F.call(o,i)&&i!==r&&a(o,i,{get:()=>t[i],enumerable:!(d=T(t,i))||d.enumerable});return o};var _=o=>C(a({},"__esModule",{value:!0}),o);var R={};I(R,{FIELD_CHARACTER_COUNT_ATTRIBUTE:()=>e.FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_REQUIRED_INDICATOR_ATTRIBUTE:()=>e.FIELD_REQUIRED_INDICATOR_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT:()=>e.FIELD_VALIDITY_CHANGE_EVENT,SkdxField:()=>l.SkdxField,SkdxFieldset:()=>E.SkdxFieldset,characterCountMessage:()=>e.characterCountMessage,characterCountVisible:()=>e.characterCountVisible});module.exports=_(R);var l=require("./Field.cjs"),E=require("./Fieldset.cjs"),e=require("../internal/field-core.cjs");0&&(module.exports={FIELD_CHARACTER_COUNT_ATTRIBUTE,FIELD_REQUIRED_INDICATOR_ATTRIBUTE,FIELD_VALIDITY_CHANGE_EVENT,SkdxField,SkdxFieldset,characterCountMessage,characterCountVisible});

package/dist/field/index.d.cts

@@ -1,7 +1,3 @@
 export { SkdxField } from './Field.cjs';
 export { SkdxFieldset } from './Fieldset.cjs';
-export { SkdxFieldLabel } from './FieldLabel.cjs';
-export { SkdxFieldDescription } from './FieldDescription.cjs';
-export { SkdxFieldError } from './FieldError.cjs';
-export { SkdxFieldCharacterCount } from './FieldCharacterCount.cjs';
-export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from './field-core.cjs';
+export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from '../internal/field-core.cjs';

package/dist/field/index.d.ts

@@ -1,7 +1,3 @@
 export { SkdxField } from './Field.js';
 export { SkdxFieldset } from './Fieldset.js';
-export { SkdxFieldLabel } from './FieldLabel.js';
-export { SkdxFieldDescription } from './FieldDescription.js';
-export { SkdxFieldError } from './FieldError.js';
-export { SkdxFieldCharacterCount } from './FieldCharacterCount.js';
-export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from './field-core.js';
+export { characterCountMessage, characterCountVisible, FIELD_CHARACTER_COUNT_ATTRIBUTE, FIELD_REQUIRED_INDICATOR_ATTRIBUTE, FIELD_VALIDITY_CHANGE_EVENT, type FieldCharacterCountOptions, type FieldMode, type FieldSnapshot, type FieldValidationResult, type FieldValidator, } from '../internal/field-core.js';

package/dist/field/index.js

@@ -1 +1 @@
-import{SkdxField as t}from"./Field.js";import{SkdxFieldset as d}from"./Fieldset.js";import{SkdxFieldLabel as l}from"./FieldLabel.js";import{SkdxFieldDescription as p}from"./FieldDescription.js";import{SkdxFieldError as F}from"./FieldError.js";import{SkdxFieldCharacterCount as n}from"./FieldCharacterCount.js";import{characterCountMessage as E,characterCountVisible as c,FIELD_CHARACTER_COUNT_ATTRIBUTE as f,FIELD_VALIDITY_CHANGE_EVENT as m}from"./field-core.js";export{f as FIELD_CHARACTER_COUNT_ATTRIBUTE,m as FIELD_VALIDITY_CHANGE_EVENT,t as SkdxField,n as SkdxFieldCharacterCount,p as SkdxFieldDescription,F as SkdxFieldError,l as SkdxFieldLabel,d as SkdxFieldset,E as characterCountMessage,c as characterCountVisible};
+import{SkdxField as o}from"./Field.js";import{SkdxFieldset as r}from"./Fieldset.js";import{characterCountMessage as d,characterCountVisible as l,FIELD_CHARACTER_COUNT_ATTRIBUTE as E,FIELD_REQUIRED_INDICATOR_ATTRIBUTE as T,FIELD_VALIDITY_CHANGE_EVENT as p}from"../internal/field-core.js";export{E as FIELD_CHARACTER_COUNT_ATTRIBUTE,T as FIELD_REQUIRED_INDICATOR_ATTRIBUTE,p as FIELD_VALIDITY_CHANGE_EVENT,o as SkdxField,r as SkdxFieldset,d as characterCountMessage,l as characterCountVisible};

package/dist/field/primitives.cjs

@@ -0,0 +1 @@
+"use strict";var x=Object.defineProperty;var m=Object.getOwnPropertyDescriptor;var F=Object.getOwnPropertyNames;var S=Object.prototype.hasOwnProperty;var a=(e,r)=>{for(var d in r)x(e,d,{get:r[d],enumerable:!0})},c=(e,r,d,i)=>{if(r&&typeof r=="object"||typeof r=="function")for(let o of F(r))!S.call(e,o)&&o!==d&&x(e,o,{get:()=>r[o],enumerable:!(i=m(r,o))||i.enumerable});return e};var n=e=>c(x({},"__esModule",{value:!0}),e);var u={};a(u,{SkdxFieldCharacterCount:()=>k.SkdxFieldCharacterCount,SkdxFieldDescription:()=>p.SkdxFieldDescription,SkdxFieldError:()=>f.SkdxFieldError,SkdxFieldLabel:()=>t.SkdxFieldLabel,SkdxFieldRequiredIndicator:()=>l.SkdxFieldRequiredIndicator});module.exports=n(u);var t=require("./FieldLabel.cjs"),l=require("./FieldRequiredIndicator.cjs"),p=require("./FieldDescription.cjs"),f=require("./FieldError.cjs"),k=require("./FieldCharacterCount.cjs");0&&(module.exports={SkdxFieldCharacterCount,SkdxFieldDescription,SkdxFieldError,SkdxFieldLabel,SkdxFieldRequiredIndicator});

package/dist/field/primitives.d.cts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `<skdx-field>` — the derived parts. Use when anatomy isn't the
+ * structure you need. Built from same elements as recipe (see FieldAnatomy.ts). Class imports
+ * resolve to this path; tag names are global.
+ *
+ * @example
+ * ```ts
+ * import * as Field from '@skdx/web-components/primitives/field';
+ * ```
+ * ```html
+ * <skdx-field name="bio">
+ *   <skdx-field-label>Bio <skdx-field-required-indicator>(required)</skdx-field-required-indicator></skdx-field-label>
+ *   <textarea></textarea>
+ *   <skdx-field-character-count max="280"></skdx-field-character-count>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export { SkdxFieldLabel } from './FieldLabel.cjs';
+export { SkdxFieldRequiredIndicator } from './FieldRequiredIndicator.cjs';
+export { SkdxFieldDescription } from './FieldDescription.cjs';
+export { SkdxFieldError } from './FieldError.cjs';
+export { SkdxFieldCharacterCount } from './FieldCharacterCount.cjs';

package/dist/field/primitives.d.ts

@@ -0,0 +1,23 @@
+/**
+ * Advanced primitives for `<skdx-field>` — the derived parts. Use when anatomy isn't the
+ * structure you need. Built from same elements as recipe (see FieldAnatomy.ts). Class imports
+ * resolve to this path; tag names are global.
+ *
+ * @example
+ * ```ts
+ * import * as Field from '@skdx/web-components/primitives/field';
+ * ```
+ * ```html
+ * <skdx-field name="bio">
+ *   <skdx-field-label>Bio <skdx-field-required-indicator>(required)</skdx-field-required-indicator></skdx-field-label>
+ *   <textarea></textarea>
+ *   <skdx-field-character-count max="280"></skdx-field-character-count>
+ *   <skdx-field-error></skdx-field-error>
+ * </skdx-field>
+ * ```
+ */
+export { SkdxFieldLabel } from './FieldLabel.js';
+export { SkdxFieldRequiredIndicator } from './FieldRequiredIndicator.js';
+export { SkdxFieldDescription } from './FieldDescription.js';
+export { SkdxFieldError } from './FieldError.js';
+export { SkdxFieldCharacterCount } from './FieldCharacterCount.js';

package/dist/field/primitives.js

@@ -0,0 +1 @@
+import{SkdxFieldLabel as o}from"./FieldLabel.js";import{SkdxFieldRequiredIndicator as x}from"./FieldRequiredIndicator.js";import{SkdxFieldDescription as t}from"./FieldDescription.js";import{SkdxFieldError as p}from"./FieldError.js";import{SkdxFieldCharacterCount as k}from"./FieldCharacterCount.js";export{k as SkdxFieldCharacterCount,t as SkdxFieldDescription,p as SkdxFieldError,o as SkdxFieldLabel,x as SkdxFieldRequiredIndicator};

package/dist/file-upload/FileUpload.cjs

@@ -1,5 +1,5 @@
-"use strict";var f=Object.defineProperty;var d=Object.getOwnPropertyDescriptor;var b=Object.getOwnPropertyNames;var v=Object.prototype.hasOwnProperty;var F=(s,t)=>{for(var e in t)f(s,e,{get:t[e],enumerable:!0})},y=(s,t,e,a)=>{if(t&&typeof t=="object"||typeof t=="function")for(let i of b(t))!v.call(s,i)&&i!==e&&f(s,i,{get:()=>t[i],enumerable:!(a=d(t,i))||a.enumerable});return s};var g=s=>y(f({},"__esModule",{value:!0}),s),n=(s,t,e,a)=>{for(var i=a>1?void 0:a?d(t,e):t,l=s.length-1,o;l>=0;l--)(o=s[l])&&(i=(a?o(t,e,i):o(i))||i);return a&&i&&f(t,e,i),i};var C={};F(C,{SkdxFileUpload:()=>r});module.exports=g(C);var m=require("lit"),u=require("lit/decorators.js"),p=require("../internal/define.cjs"),c=require("../internal/form-associated.cjs");function E(s,t){if(!t)return!0;let e=t.split(",").map(l=>l.trim().toLowerCase()).filter(Boolean);if(e.length===0)return!0;let a=s.name.toLowerCase(),i=s.type.toLowerCase();return e.some(l=>l.startsWith(".")?a.endsWith(l):l.endsWith("/*")?i.startsWith(l.slice(0,-1)):i===l)}function z(s,t){let e=[];return E(s,t.accept)||e.push("file-invalid-type"),t.maxFileSize!==void 0&&s.size>t.maxFileSize&&e.push("file-too-large"),t.minFileSize!==void 0&&s.size<t.minFileSize&&e.push("file-too-small"),e.push(...t.validate?.(s)??[]),e}var r=class extends(0,c.FormAssociated)(m.LitElement){constructor(){super(...arguments);this.multiple=!1;this.disabled=!1;this.required=!1;this.internalFiles=[];this.inputEl=null}get files(){return this.value??this.internalFiles}updated(e){e.has("disabled")&&(this.disabled?this.setAttribute("data-disabled",""):this.removeAttribute("data-disabled"),this.broadcast()),e.has("value")&&this.broadcast(),(e.has("value")||e.has("required")||e.has("name"))&&this.syncFormState()}syncFormState(){this.setFormValue(this.multiFormValue(this.files)),this.setValueMissing(this.required&&this.files.length===0,"Please select a file.")}formResetCallback(){this.setFiles([])}addFiles(e){if(this.disabled)return;let a=this.multiple?this.files:[],i=(this.multiple?this.maxFiles??1/0:1)-a.length,l=[];for(let o of Array.from(e)){let h=z(o,this);if(l.length>=i&&h.push("too-many-files"),h.length>0){this.dispatchEvent(new CustomEvent("file-reject",{detail:{file:o,errors:h},bubbles:!0,composed:!0}));continue}l.push(o)}l.length!==0&&this.setFiles([...a,...l])}removeFile(e){this.setFiles(this.files.filter((a,i)=>i!==e))}setFiles(e){this.value===void 0&&(this.internalFiles=e),this.syncFormState(),this.dispatchEvent(new CustomEvent("value-change",{detail:e,bubbles:!0,composed:!0})),this.broadcast()}registerInput(e){this.inputEl=e}openPicker(){this.disabled||this.inputEl?.click()}broadcast(){this.dispatchEvent(new CustomEvent("skdx-file-upload-update",{bubbles:!0,composed:!0}))}render(){return m.html`<slot></slot>`}};r.styles=m.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;
     }
-  `,n([(0,u.property)({type:String})],r.prototype,"accept",2),n([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"multiple",2),n([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"disabled",2),n([(0,u.property)({attribute:!1})],r.prototype,"value",2),n([(0,u.property)({type:Boolean,reflect:!0})],r.prototype,"required",2),n([(0,u.property)({type:String,reflect:!0})],r.prototype,"name",2),n([(0,u.property)({attribute:"required-message"})],r.prototype,"requiredMessage",2),n([(0,u.property)({type:Number,attribute:"max-files"})],r.prototype,"maxFiles",2),n([(0,u.property)({type:Number,attribute:"max-file-size"})],r.prototype,"maxFileSize",2),n([(0,u.property)({type:Number,attribute:"min-file-size"})],r.prototype,"minFileSize",2),n([(0,u.property)({attribute:!1})],r.prototype,"validate",2),r=n([(0,p.customElement)("skdx-file-upload","file-upload","root")],r);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,10 +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. Built-in codes are `file-invalid-type` (fails
- * `accept`), `file-too-large` / `file-too-small` (fails `maxFileSize` /
- * `minFileSize`), and `too-many-files` (would exceed `maxFiles`); a `validate`
- * callback contributes its own codes alongside them.
+ * Why one file was refused: `file-invalid-type`, `file-too-large`,
+ * `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. */
@@ -12,106 +13,185 @@ 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;
 };
 /**
- * `<skdx-file-upload>` — the Web Components implementation of the shared
- * FileUpload contract (see `@skdx/shared`'s `fileUploadContract`). Owns a
- * controllable `File[]` list and hands it to descendant
- * `<skdx-file-upload-dropzone>` / `<skdx-file-upload-trigger>` /
- * `<skdx-file-upload-input>` / `<skdx-file-upload-item-delete>` (found via
- * `closest('skdx-file-upload')`). Sets `data-disabled` when `disabled`.
+ * File list with drag-and-drop and native picker. Filters both entry points
+ * through `accept` (native attribute only filters the picker). Owns a `File[]`
+ * list, passes it to descendants via `closest()`. `value` is JS-only (can't
+ * round-trip HTML attributes); use for controlled, `defaultValue` for
+ * uncontrolled. Form-associated: named files submit as separate entries. Supports
+ * `required` and `invalid` validation.
  *
- * The OS file dialog and drag-and-drop are the platform's job —
- * Dropzone/Trigger both just proxy to a visually-hidden native
- * `<input type="file">` (`<skdx-file-upload-input>`); this root only tracks
- * the resulting files, filtering both entry points through `accept` (the
- * native attribute alone only filters the picker, not drag-and-drop) and
- * applying `multiple`.
- *
- * `value` is a JS-only property (a `File[]` can't round-trip through an HTML
- * attribute) — set it for controlled usage and listen for `value-change` to
- * observe or override changes; leave it `undefined` for uncontrolled usage.
- *
- * Form-associated via `ElementInternals`: with a `name`, every selected file
- * is submitted as its own `name` entry — the same shape a native
- * `<input type="file" multiple>` produces, so `formData.getAll(name)` returns
- * the `File` objects. The visually-hidden `<input type="file">` inside
- * `<skdx-file-upload-input>` lives in a shadow root and never reaches the
- * outer form on its own; this root is what submits.
- *
- * @fires value-change - Fires with the new file list whenever files are added or removed, including on form reset.
- * @fires file-reject - Fires once per refused file with `{ file, errors }`, before the accepted files are committed.
+ * @fires value-change - Fired with new file list when files are added or removed.
+ * @fires file-reject - Fired per refused file with `{ file, errors }`.
  *
  * @example
  * ```html
  * <skdx-file-upload accept="image/*" multiple>
- *   <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>
  * ```
  */
 export declare class SkdxFileUpload extends SkdxFileUpload_base {
     static styles: import("lit").CSSResult;
     /**
-     * Comma-separated file-type filter (extensions or MIME patterns), applied to picker and drag-and-drop alike.
+     * Comma-separated file-type filter (extensions or MIME patterns) for both picker
+     * 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. */
     disabled: boolean;
-    /** Selected files, for controlled usage. Pair with `value-change`. Leave `undefined` for uncontrolled usage. */
+    /**
+     * Selected files for controlled usage; listen for `value-change`. Property-only
+     * since `File[]` cannot round-trip through HTML attributes.
+     */
     value?: File[];
+    /**
+     * Initially selected files for uncontrolled usage; restored on form reset.
+     * Property-only like `value`.
+     * @default undefined — starts empty.
+     */
+    defaultValue?: File[];
+    /**
+     * Shows the selection but prevents changes; unlike `disabled`, keeps tab stop
+     * and readability. Announces `aria-disabled` rather than `aria-readonly`.
+     * @default false
+     */
+    readOnly: boolean;
+    /**
+     * Marks the selection invalid from outside (server error, cross-field rule).
+     * ORed with element's own invalidity (`required` with no files).
+     * @default false
+     */
+    invalid: boolean;
+    /**
+     * Lets the picker select a whole directory via `webkitdirectory` (browser-dependent).
+     * @default false
+     */
+    directory: boolean;
+    /**
+     * Opens the device camera (`user` front, `environment` rear) on mobile.
+     * @default undefined — the ordinary file picker.
+     */
+    capture?: SkdxFileUploadCapture;
+    /**
+     * Suppresses default open-on-drop outside the dropzone (true by default
+     * because missing the target is the normal failure mode).
+     */
+    preventDocumentDrop: boolean;
     /** Marks the field required for native form validation, until at least one file is selected. @default false */
     required: boolean;
     /** Name used as the `FormData` entry key for every selected file when inside a `<form>`. @default undefined */
     name?: string;
     /**
-     * Replaces the message the browser shows when a `required` field is
-     * submitted with no files. Sealed inside the shadow root otherwise, so this
-     * is the only way to translate it or to name what has to be attached
-     * ("Attach a proof of address.").
+     * Id of the form this upload submits into (property is `formId`, not `form`,
+     * because `form` is read-only on form-associated elements).
+     * @default undefined — submits into its nearest ancestor form.
+     */
+    formId?: string;
+    /**
+     * Replaces the browser's validation message for required empty uploads.
      * @default undefined — keeps `'Please select a file.'`
      */
     requiredMessage?: string;
     /**
-     * Most files the list may hold; files past the cap are rejected with
-     * `too-many-files` rather than added. Ignored while `multiple` is `false`,
-     * which caps the list at one file anyway.
+     * 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 check, run after the built-in ones. Return error codes to
-     * reject the file, or `null`/`undefined`/`[]` to accept it. JS-only property
-     * — a function cannot round-trip through an HTML attribute.
+     * 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}`
+     */
+    removeLabel: (fileName: string) => string;
+    /**
+     * Whether the derived anatomy includes an ItemGroup listing selected files.
+     * @default true
+     */
+    showList: boolean;
+    /**
+     * Whether a derived Item's row includes an ItemPreview (empty container the consumer fills).
+     * @default false
+     */
+    showPreview: boolean;
+    /**
+     * Per-file upload state for derived rows, keyed by File (not index).
+     * Returns the row's `status`, `progress`, `data-state`, and `data-progress`.
+     * @default undefined — every derived row is `idle` with no progress.
+     */
+    fileStatus?: (file: File) => {
+        status?: FileUploadFileStatus;
+        progress?: number;
+    } | undefined;
+    /**
+     * 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) => unknown;
+    /** Id a mounted `<skdx-file-upload-label>` claims, and the dropzone names. @internal */
+    readonly labelId: string;
+    /**
+     * Id of the visually-hidden required/validity description the dropzone points
+     * `aria-describedby` at while this root is `required`. @internal
+     */
+    readonly descriptionId: string;
+    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;
+    private readonly onDocumentDrag;
+    connectedCallback(): void;
+    private _anatomyBuilt;
+    private readonly _fillAnatomy;
+    private readonly _rebuildAnatomy;
+    disconnectedCallback(): void;
+    protected willUpdate(changed: PropertyValues): void;
     protected updated(changed: PropertyValues): void;
+    private syncPartState;
+    private syncDescription;
     private syncFormState;
-    /** Clears the selection, like a native file input on form reset. Fires `value-change` so controlled usage can follow. */
+    /** Restores the files from `defaultValue` on form reset, and fires `value-change`. */
     formResetCallback(): void;
     /**
-     * Validates `incoming`, fires `file-reject` for every refused file, applies
-     * `multiple`, and commits the accepted ones. @internal
+     * 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));
+     * ```
      */
     addFiles(incoming: FileList | File[]): void;
-    /** Removes the file at `index` from the current file list. @internal */
-    removeFile(index: number): void;
+    /**
+     * 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 — one `value-change`, not one per file.
+     * @internal
+     */
+    clearFiles(): void;
     private setFiles;
     /** Registers the descendant `<skdx-file-upload-input>` so `openPicker()` can click it. @internal */
     registerInput(el: SkdxFileUploadInput): void;
@@ -119,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 {