@oddkin/components 0.0.0-stage → 1.0.0-beta.0

package/dist/file-input/file-input.js

@@ -0,0 +1,183 @@
+import { event, prop } from '@oddkin/core/element';
+import { format, formatNumber, langOf, strings } from '@oddkin/core/i18n';
+import { computed, signal, untracked } from '@oddkin/core/reactive';
+import { OddkinFormControl } from '../form-control/form-control.js';
+export const FILE_INPUT_STRINGS = {
+    title: 'Choose a file or drop it here',
+    titleMultiple: 'Choose files or drop them here',
+    remove: 'Remove {name}',
+};
+/** Native `input` crosses the shadow boundary; a drop or a removal dispatches it at the host. */
+export const fileInputEvent = event('input', {
+    bubbles: true,
+    composed: true,
+    cancelable: false,
+    intent: 'user',
+});
+/** Re-dispatched at the host for each user change (native `change` is not composed). */
+export const fileChangeEvent = event('change', {
+    bubbles: true,
+    composed: false,
+    cancelable: false,
+    intent: 'user',
+});
+const UNITS = ['byte', 'kilobyte', 'megabyte', 'gigabyte'];
+/**
+ * A file chooser over a native `<input type="file">`: a drop zone with a title, the help text,
+ * the browser's own picker button, and the chosen files as rows with their size and a remove
+ * button. The form value is the files under `name`, as a native file input submits them.
+ *
+ * @csspart field - The field: label, surface, and external descriptions.
+ * @csspart label - The visible label.
+ * @csspart surface - The drop zone: title (or error), description, picker button, and files.
+ * @csspart title - The instruction, "Choose a file or drop it here"; the error replaces it.
+ * @csspart description - Help text, referenced by `aria-describedby`.
+ * @csspart control - The native file input; its `::file-selector-button` takes the secondary button look.
+ * @csspart files - The list of chosen files.
+ * @csspart file - A chosen file's row: glyph, name, size, and remove button.
+ * @csspart remove - A row's remove button.
+ * @csspart error - The error message, in the title's place, referenced by `aria-describedby`.
+ * @cssstate user-invalid - The field shows its error: `error` is set, or a required field has no file after focus left it or a validity check failed.
+ * @cssstate drop-target - Files are being dragged over the surface.
+ * @a11y The native file input, named by the label and described by the description and error; the browser announces its button and the chosen files. Each row's remove button is named "Remove {name}" (`strings.remove`); removing a file moves focus to the next row's button, or to the input. Dropping files is an alternative to the picker, never the only way.
+ * @keyboard Tab reaches the file input, then each remove button; Enter or Space opens the browser's picker or removes a file.
+ * @previewRole fileInput
+ * @useFor Attaching files to a form submission.
+ * @notFor Uploading in the background with progress (render your own rows); choosing an image to preview and crop.
+ * @limitation The picker button's text ("Choose File", "Browse…") is the browser's and follows the browser's language; the input's own file-count text is hidden, since the rows list the files.
+ * @limitation `files` is read-only; the user chooses, drops, and removes files. Dropped files are not filtered by `accept`, as on a native input: check them on the server. Reset clears them, and the browser does not restore chosen files after navigation.
+ * @category Forms
+ * @customization 1 2 3
+ */
+export class OddkinFileInput extends OddkinFormControl.with({
+    label: prop.string({ default: '', description: 'Visible label; names the control.' }),
+    accept: prop.string({
+        default: '',
+        description: 'File types the picker offers, as on native inputs (image/*, or .pdf for PDFs).',
+    }),
+    multiple: prop.boolean({ reflect: true, description: 'Several files can be chosen.' }),
+    required: prop.boolean({ reflect: true, description: 'A file is required to submit.' }),
+    strings: prop.object({
+        description: 'Localized string overrides: `title`, `titleMultiple`, `remove`.',
+    }),
+}) {
+    static shadowRootOptions = { mode: 'open', delegatesFocus: true };
+    static events = { input: fileInputEvent, change: fileChangeEvent };
+    #files = signal([]);
+    #focusAfterRemove = null;
+    #dragDepth = 0;
+    /** The chosen files, in the order the picker or the drop gave them. */
+    get files() {
+        return this.#files.value;
+    }
+    /** @internal The chosen files for the template. */
+    _files = this.#files;
+    /** @internal The built-in text with the author's overrides. */
+    _strings = computed(() => strings(FILE_INPUT_STRINGS, this.strings));
+    /** @internal A file's size in the page language ("2.4 MB"). */
+    _size(bytes) {
+        let unit = 0;
+        while (bytes >= 1000 && unit < UNITS.length - 1) {
+            bytes /= 1000;
+            unit++;
+        }
+        return formatNumber(bytes, langOf(this), {
+            style: 'unit',
+            unit: UNITS[unit],
+            unitDisplay: 'short',
+            maximumFractionDigits: 1,
+        });
+    }
+    /** @internal A row's remove-button name. */
+    _removeLabel(file) {
+        return format(this._strings.value.remove, { name: file.name });
+    }
+    #input() {
+        return this.shadowRoot?.querySelector('[part~="control"]');
+    }
+    #inactive() {
+        return this._formDisabled.value;
+    }
+    _formOptions() {
+        return {
+            value: () => {
+                const files = this.#files.value;
+                // As native: no file submits one empty, unnamed file under the name.
+                if (!files.length)
+                    return new File([], '', { type: 'application/octet-stream' });
+                const data = new FormData();
+                for (const file of files)
+                    data.append(this.name ?? '', file);
+                return data;
+            },
+            control: () => this.#input(),
+            watch: () => [this.required, this.#files.value],
+            onReset: () => {
+                const input = this.#input();
+                if (input)
+                    input.value = '';
+                this.#files.value = [];
+            },
+        };
+    }
+    /** Puts `files` in the native input and the rows, then reports the user's change. */
+    #set(files) {
+        const input = this.#input();
+        if (!input)
+            return;
+        const transfer = new DataTransfer();
+        for (const file of files)
+            transfer.items.add(file);
+        input.files = transfer.files;
+        this.#files.value = files;
+        this.emit(fileInputEvent);
+        this.emit(fileChangeEvent);
+    }
+    /** @internal Template handler: the user chose files in the picker. */
+    _onChange = (event) => {
+        this.#files.value = [...(event.target.files ?? [])];
+        this.emit(fileChangeEvent);
+    };
+    /** @internal Template handler: files dragged over the surface can drop there. */
+    _onDragOver = (event) => {
+        if (this.#inactive() || !event.dataTransfer?.types.includes('Files'))
+            return;
+        event.preventDefault();
+    };
+    /** @internal Template handler: a drag entered or left the surface or one of its children. */
+    _onDragEdge = (event) => {
+        this.#dragDepth = Math.max(0, this.#dragDepth + (event.type === 'dragenter' ? 1 : -1));
+        const over = this.#dragDepth > 0 && !this.#inactive();
+        this.setState('drop-target', over && !!event.dataTransfer?.types.includes('Files'));
+    };
+    /** @internal Template handler: files dropped on the surface. */
+    _onDrop = (event) => {
+        this.#dragDepth = 0;
+        this.setState('drop-target', false);
+        const dropped = [...(event.dataTransfer?.files ?? [])];
+        if (this.#inactive() || !dropped.length)
+            return;
+        event.preventDefault();
+        this.#set(this.multiple ? dropped : dropped.slice(0, 1));
+    };
+    /** @internal Template handler: the user removed one file. */
+    _remove(file) {
+        const files = this.#files.value;
+        this.#focusAfterRemove = files.indexOf(file);
+        this.#set(files.filter((f) => f !== file));
+    }
+    mounted(scope) {
+        super.mounted(scope);
+        scope.effect(() => {
+            void this.#files.value;
+            const index = this.#focusAfterRemove;
+            if (index === null)
+                return;
+            this.#focusAfterRemove = null;
+            // The row that took the removed one's place, the one before it, or the input.
+            const buttons = this.shadowRoot.querySelectorAll('[part~="remove"]');
+            untracked(() => (buttons[Math.min(index, buttons.length - 1)] ?? this.#input())?.focus());
+        }, { phase: 'post', name: '<odd-file-input> focus after removal' });
+    }
+}
+//# sourceMappingURL=file-input.js.map

package/dist/file-input/file-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.js","sourceRoot":"","sources":["../../src/file-input/file-input.ts"],"names":[],"mappings":"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"}

package/dist/file-input/file-input.structural.styles.d.ts

@@ -0,0 +1,8 @@
+/**
+ * The drop zone under the label: the glyph and title in a row, then the description, the picker
+ * button, and the file rows, indented under the title; each row a glyph, the name over the size,
+ * and the remove button. The native input shows only its button: its own file-count text is
+ * sized out, since the rows list the files. No brand or visual tokens.
+ */
+export declare const fileInputStructuralStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=file-input.structural.styles.d.ts.map

package/dist/file-input/file-input.structural.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.structural.styles.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.structural.styles.ts"],"names":[],"mappings":"AAEA;;;;;GAKG;AACH,eAAO,MAAM,yBAAyB,yCAsDrC,CAAC"}

package/dist/file-input/file-input.structural.styles.js

@@ -0,0 +1,63 @@
+import { css } from '@oddkin/core/styles';
+/**
+ * The drop zone under the label: the glyph and title in a row, then the description, the picker
+ * button, and the file rows, indented under the title; each row a glyph, the name over the size,
+ * and the remove button. The native input shows only its button: its own file-count text is
+ * sized out, since the rows list the files. No brand or visual tokens.
+ */
+export const fileInputStructuralStyles = css `
+  :host {
+    display: block;
+  }
+  .surface {
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+  }
+  .header,
+  .file {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    min-inline-size: 0;
+  }
+  .header-glyph,
+  .file-glyph {
+    display: inline-flex;
+  }
+  .title,
+  .file-text {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+  }
+  .picker {
+    margin: 0;
+    font-size: 0;
+  }
+  .picker::file-selector-button {
+    font-size: initial;
+  }
+  .files {
+    display: flex;
+    flex-direction: column;
+    align-self: stretch;
+    margin: 0;
+    padding: 0;
+  }
+  .file-text {
+    display: flex;
+    flex-direction: column;
+  }
+  .remove {
+    display: inline-flex;
+    flex: none;
+    align-items: center;
+    justify-content: center;
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    cursor: pointer;
+  }
+`;
+//# sourceMappingURL=file-input.structural.styles.js.map

package/dist/file-input/file-input.structural.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.structural.styles.js","sourceRoot":"","sources":["../../src/file-input/file-input.structural.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAE1C;;;;;GAKG;AACH,MAAM,CAAC,MAAM,yBAAyB,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsD3C,CAAC"}

package/dist/file-input/file-input.styles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Oddkin's default file input: Figma `fileUpload`. The surface takes the card radius, the strong
+ * border, and the default surface; the upload glyph at `icon.size.lg`, `space.md` before the
+ * title in the UI style (the error takes its place in the danger colour); the native
+ * `::file-selector-button` is a secondary button (the tokens of `odd-button`, compared in the
+ * tests); file rows show the name in the UI style over the size in Small and secondary text.
+ * Files dragged over the surface give it the action border and the selection surface.
+ */
+export declare const fileInputStyles: import("@oddkin/core/styles").CSSResult;
+//# sourceMappingURL=file-input.styles.d.ts.map

package/dist/file-input/file-input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.styles.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.styles.ts"],"names":[],"mappings":"AAGA;;;;;;;GAOG;AACH,eAAO,MAAM,eAAe,yCA8G3B,CAAC"}

package/dist/file-input/file-input.styles.js

@@ -0,0 +1,122 @@
+import { css } from '@oddkin/core/styles';
+import { token } from '@oddkin/tokens/refs';
+/**
+ * Oddkin's default file input: Figma `fileUpload`. The surface takes the card radius, the strong
+ * border, and the default surface; the upload glyph at `icon.size.lg`, `space.md` before the
+ * title in the UI style (the error takes its place in the danger colour); the native
+ * `::file-selector-button` is a secondary button (the tokens of `odd-button`, compared in the
+ * tests); file rows show the name in the UI style over the size in Small and secondary text.
+ * Files dragged over the surface give it the action border and the selection surface.
+ */
+export const fileInputStyles = css `
+  .surface {
+    gap: ${token('space.xs')};
+    padding: ${token('card.padding')};
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    border-radius: ${token('card.radius')};
+    background: ${token('color.surface.default')};
+    transition-property: background-color, border-color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  :host(:state(drop-target)) .surface {
+    border-color: ${token('color.action.default')};
+    background: ${token('color.selection.surface')};
+  }
+  .header,
+  .file {
+    gap: ${token('space.md')};
+  }
+  .header-glyph,
+  .file-glyph {
+    color: ${token('color.text.secondary')};
+    font-size: ${token('icon.size.lg')};
+  }
+  .title,
+  .header .error,
+  .file-name {
+    font-family: ${token('type.ui.family')};
+    font-size: ${token('type.ui.size')};
+    font-weight: ${token('type.ui.weight')};
+    line-height: ${token('type.ui.line-height')};
+    letter-spacing: ${token('type.ui.letter-spacing')};
+  }
+  .title,
+  .file-name {
+    color: ${token('color.text.primary')};
+  }
+  .description,
+  .picker {
+    margin-inline-start: calc(${token('icon.size.lg')} + ${token('space.md')});
+  }
+  .picker {
+    max-inline-size: calc(100% - ${token('icon.size.lg')} - ${token('space.md')});
+    margin-block-start: ${token('space.xs')};
+    color: ${token('color.text.primary')};
+    cursor: pointer;
+  }
+  .picker::file-selector-button {
+    box-sizing: border-box;
+    min-block-size: max(${token('control.height.md')}, ${token('target.min')});
+    margin: ${token('space.none')};
+    padding-block: ${token('space.none')};
+    padding-inline: ${token('control.padding.inline.md')};
+    border: ${token('border.width.default')} solid ${token('color.border.strong')};
+    border-radius: ${token('control.radius')};
+    background: ${token('color.surface.default')};
+    color: ${token('color.text.primary')};
+    font-family: ${token('type.ui.family')};
+    font-size: ${token('type.ui.size')};
+    font-weight: ${token('type.ui.weight')};
+    line-height: ${token('type.ui.line-height')};
+    letter-spacing: ${token('type.ui.letter-spacing')};
+    cursor: pointer;
+    transition-property: background-color, border-color, color;
+    transition-duration: ${token('motion.duration.fast')};
+    transition-timing-function: ${token('motion.easing.standard')};
+  }
+  @media (hover: hover) {
+    .picker:enabled:hover::file-selector-button {
+      background: ${token('color.surface.hover')};
+    }
+  }
+  .picker:enabled:active::file-selector-button {
+    background: ${token('color.surface.sunken')};
+  }
+  .picker:disabled::file-selector-button {
+    border-color: transparent;
+    background: ${token('color.surface.sunken')};
+    color: ${token('color.text.disabled')};
+    cursor: not-allowed;
+  }
+  .field:has(.picker:disabled) :is(.label, .title) {
+    color: ${token('color.text.disabled')};
+  }
+  .files {
+    gap: ${token('space.sm')};
+  }
+  .file-size {
+    color: ${token('color.text.secondary')};
+    font-size: ${token('type.small.size')};
+    line-height: ${token('type.small.line-height')};
+  }
+  .remove {
+    min-inline-size: max(${token('control.height.sm')}, ${token('target.min')});
+    min-block-size: max(${token('control.height.sm')}, ${token('target.min')});
+    border-radius: ${token('control.radius')};
+    background: transparent;
+    color: ${token('color.text.secondary')};
+    font-size: ${token('icon.size.md')};
+  }
+  @media (hover: hover) {
+    .remove:enabled:hover {
+      background: ${token('color.surface.hover')};
+      color: ${token('color.text.primary')};
+    }
+  }
+  .remove:disabled {
+    color: ${token('color.text.disabled')};
+    cursor: not-allowed;
+  }
+`;
+//# sourceMappingURL=file-input.styles.js.map

package/dist/file-input/file-input.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.styles.js","sourceRoot":"","sources":["../../src/file-input/file-input.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,qBAAqB,CAAC;AAC1C,OAAO,EAAE,KAAK,EAAE,MAAM,qBAAqB,CAAC;AAE5C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;WAEvB,KAAK,CAAC,UAAU,CAAC;eACb,KAAK,CAAC,cAAc,CAAC;cACtB,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,aAAa,CAAC;kBACvB,KAAK,CAAC,uBAAuB,CAAC;;2BAErB,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;oBAG7C,KAAK,CAAC,sBAAsB,CAAC;kBAC/B,KAAK,CAAC,yBAAyB,CAAC;;;;WAIvC,KAAK,CAAC,UAAU,CAAC;;;;aAIf,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;;mBAKnB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;;aAIxC,KAAK,CAAC,oBAAoB,CAAC;;;;gCAIR,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;;;mCAGzC,KAAK,CAAC,cAAc,CAAC,MAAM,KAAK,CAAC,UAAU,CAAC;0BACrD,KAAK,CAAC,UAAU,CAAC;aAC9B,KAAK,CAAC,oBAAoB,CAAC;;;;;0BAKd,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;cAC9D,KAAK,CAAC,YAAY,CAAC;qBACZ,KAAK,CAAC,YAAY,CAAC;sBAClB,KAAK,CAAC,2BAA2B,CAAC;cAC1C,KAAK,CAAC,sBAAsB,CAAC,UAAU,KAAK,CAAC,qBAAqB,CAAC;qBAC5D,KAAK,CAAC,gBAAgB,CAAC;kBAC1B,KAAK,CAAC,uBAAuB,CAAC;aACnC,KAAK,CAAC,oBAAoB,CAAC;mBACrB,KAAK,CAAC,gBAAgB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;mBACnB,KAAK,CAAC,gBAAgB,CAAC;mBACvB,KAAK,CAAC,qBAAqB,CAAC;sBACzB,KAAK,CAAC,wBAAwB,CAAC;;;2BAG1B,KAAK,CAAC,sBAAsB,CAAC;kCACtB,KAAK,CAAC,wBAAwB,CAAC;;;;oBAI7C,KAAK,CAAC,qBAAqB,CAAC;;;;kBAI9B,KAAK,CAAC,sBAAsB,CAAC;;;;kBAI7B,KAAK,CAAC,sBAAsB,CAAC;aAClC,KAAK,CAAC,qBAAqB,CAAC;;;;aAI5B,KAAK,CAAC,qBAAqB,CAAC;;;WAG9B,KAAK,CAAC,UAAU,CAAC;;;aAGf,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,iBAAiB,CAAC;mBACtB,KAAK,CAAC,wBAAwB,CAAC;;;2BAGvB,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;0BACnD,KAAK,CAAC,mBAAmB,CAAC,KAAK,KAAK,CAAC,YAAY,CAAC;qBACvD,KAAK,CAAC,gBAAgB,CAAC;;aAE/B,KAAK,CAAC,sBAAsB,CAAC;iBACzB,KAAK,CAAC,cAAc,CAAC;;;;oBAIlB,KAAK,CAAC,qBAAqB,CAAC;eACjC,KAAK,CAAC,oBAAoB,CAAC;;;;aAI7B,KAAK,CAAC,qBAAqB,CAAC;;;CAGxC,CAAC"}

package/dist/file-input/file-input.template.d.ts

@@ -0,0 +1,9 @@
+import type { OddkinFileInput } from './file-input.js';
+/**
+ * Anatomy: a `label` part labelling the native `<input type="file" part="control">` inside the
+ * `surface` drop zone, which holds the upload glyph with the `title` (or the `error` in its
+ * place), the `description`, the input, and the `files` list of `file` rows (file glyph, name,
+ * size, `remove` button). `description` and `error` are referenced by `aria-describedby`.
+ */
+export declare const fileInputTemplate: (input: OddkinFileInput) => import("@oddkin/core/template").TemplateResult;
+//# sourceMappingURL=file-input.template.d.ts.map

package/dist/file-input/file-input.template.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.template.d.ts","sourceRoot":"","sources":["../../src/file-input/file-input.template.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,iBAAiB,CAAC;AAEvD;;;;;GAKG;AACH,eAAO,MAAM,iBAAiB,UAAW,eAAe,mDAiEvD,CAAC"}

package/dist/file-input/file-input.template.js

@@ -0,0 +1,71 @@
+import { html, repeat } from '@oddkin/core/template';
+import { externalDescriptionTemplate } from '../form-control/description.js';
+import { closeGlyph, fileGlyph, uploadGlyph } from '../styles/glyphs.js';
+/**
+ * Anatomy: a `label` part labelling the native `<input type="file" part="control">` inside the
+ * `surface` drop zone, which holds the upload glyph with the `title` (or the `error` in its
+ * place), the `description`, the input, and the `files` list of `file` rows (file glyph, name,
+ * size, `remove` button). `description` and `error` are referenced by `aria-describedby`.
+ */
+export const fileInputTemplate = (input) => {
+    const files = input._files.value;
+    const text = input._strings.value;
+    const inactive = input._formDisabled.value;
+    return html `<div part="field" class="field">
+    <label part="label" class="label" for="control" ?hidden=${!input.label}>${input.label}</label>
+    <div
+      part="surface"
+      class="surface"
+      @dragenter=${input._onDragEdge}
+      @dragleave=${input._onDragEdge}
+      @dragover=${input._onDragOver}
+      @drop=${input._onDrop}
+    >
+      <div class="header">
+        <span class="header-glyph">${uploadGlyph}</span>
+        <span part="title" class="title" ?hidden=${!!input.error}>
+          ${input.multiple ? text.titleMultiple : text.title}
+        </span>
+        <span part="error" id="error" class="error" ?hidden=${!input.error}>${input.error}</span>
+      </div>
+      <div part="description" id="description" class="description" ?hidden=${!input.description}>
+        ${input.description}
+      </div>
+      <input
+        part="control"
+        id="control"
+        class="picker"
+        type="file"
+        accept=${input.accept}
+        ?multiple=${input.multiple}
+        ?required=${input.required}
+        ?disabled=${inactive}
+        aria-describedby=${input._describedBy}
+        aria-invalid=${input._userInvalid.value ? 'true' : null}
+        @change=${input._onChange}
+        @blur=${input._onBlur}
+      />
+      <ul part="files" class="files" ?hidden=${!files.length}>
+        ${repeat(files, (file) => file, (file) => html `<li part="file" class="file">
+              <span class="file-glyph">${fileGlyph}</span>
+              <span class="file-text">
+                <span class="file-name">${file.name}</span>
+                <span class="file-size">${input._size(file.size)}</span>
+              </span>
+              <button
+                part="remove"
+                class="remove"
+                type="button"
+                aria-label=${input._removeLabel(file)}
+                ?disabled=${inactive}
+                @click=${() => input._remove(file)}
+              >
+                ${closeGlyph}
+              </button>
+            </li>`)}
+      </ul>
+    </div>
+    ${externalDescriptionTemplate(input._externalDescription)}
+  </div>`;
+};
+//# sourceMappingURL=file-input.template.js.map

package/dist/file-input/file-input.template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"file-input.template.js","sourceRoot":"","sources":["../../src/file-input/file-input.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,uBAAuB,CAAC;AACrD,OAAO,EAAE,2BAA2B,EAAE,MAAM,gCAAgC,CAAC;AAC7E,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAGzE;;;;;GAKG;AACH,MAAM,CAAC,MAAM,iBAAiB,GAAG,CAAC,KAAsB,EAAE,EAAE;IAC1D,MAAM,KAAK,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;IACjC,MAAM,IAAI,GAAG,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC;IAClC,MAAM,QAAQ,GAAG,KAAK,CAAC,aAAa,CAAC,KAAK,CAAC;IAC3C,OAAO,IAAI,CAAA;8DACiD,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK;;;;mBAItE,KAAK,CAAC,WAAW;mBACjB,KAAK,CAAC,WAAW;kBAClB,KAAK,CAAC,WAAW;cACrB,KAAK,CAAC,OAAO;;;qCAGU,WAAW;mDACG,CAAC,CAAC,KAAK,CAAC,KAAK;YACpD,KAAK,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,IAAI,CAAC,KAAK;;8DAEE,CAAC,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,KAAK;;6EAEZ,CAAC,KAAK,CAAC,WAAW;UACrF,KAAK,CAAC,WAAW;;;;;;;iBAOV,KAAK,CAAC,MAAM;oBACT,KAAK,CAAC,QAAQ;oBACd,KAAK,CAAC,QAAQ;oBACd,QAAQ;2BACD,KAAK,CAAC,YAAY;uBACtB,KAAK,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI;kBAC7C,KAAK,CAAC,SAAS;gBACjB,KAAK,CAAC,OAAO;;+CAEkB,CAAC,KAAK,CAAC,MAAM;UAClD,MAAM,CACN,KAAK,EACL,CAAC,IAAI,EAAE,EAAE,CAAC,IAAI,EACd,CAAC,IAAI,EAAE,EAAE,CACP,IAAI,CAAA;yCACyB,SAAS;;0CAER,IAAI,CAAC,IAAI;0CACT,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC;;;;;;6BAMnC,KAAK,CAAC,YAAY,CAAC,IAAI,CAAC;4BACzB,QAAQ;yBACX,GAAG,EAAE,CAAC,KAAK,CAAC,OAAO,CAAC,IAAI,CAAC;;kBAEhC,UAAU;;kBAEV,CACT;;;MAGH,2BAA2B,CAAC,KAAK,CAAC,oBAAoB,CAAC;SACpD,CAAC;AACV,CAAC,CAAC"}

package/dist/file-input/foundation.d.ts

@@ -0,0 +1,7 @@
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinFileInput, FILE_INPUT_STRINGS } from './file-input.js';
+export { fileInputTemplate } from './file-input.template.js';
+export { fileInputStructuralStyles } from './file-input.structural.styles.js';
+//# sourceMappingURL=foundation.d.ts.map

package/dist/file-input/foundation.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.d.ts","sourceRoot":"","sources":["../../src/file-input/foundation.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/file-input/foundation.js

@@ -0,0 +1,9 @@
+// Skin-free foundation: behavior, anatomy, and structural styles (shared host defaults first).
+// Loads no default visual styles and registers nothing (multi-product.md §4).
+export { hostStyles } from '../styles/host.styles.js';
+export { fieldStructuralStyles } from '../styles/field.structural.styles.js';
+export { glyphStyles } from '../styles/glyphs.js';
+export { OddkinFileInput, FILE_INPUT_STRINGS } from './file-input.js';
+export { fileInputTemplate } from './file-input.template.js';
+export { fileInputStructuralStyles } from './file-input.structural.styles.js';
+//# sourceMappingURL=foundation.js.map

package/dist/file-input/foundation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"foundation.js","sourceRoot":"","sources":["../../src/file-input/foundation.ts"],"names":[],"mappings":"AAAA,+FAA+F;AAC/F,8EAA8E;AAC9E,OAAO,EAAE,UAAU,EAAE,MAAM,0BAA0B,CAAC;AACtD,OAAO,EAAE,qBAAqB,EAAE,MAAM,sCAAsC,CAAC;AAC7E,OAAO,EAAE,WAAW,EAAE,MAAM,qBAAqB,CAAC;AAClD,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC"}

package/dist/file-input/index.d.ts

@@ -0,0 +1,6 @@
+export { OddkinFileInput, FILE_INPUT_STRINGS } from './file-input.js';
+export { fileInputTemplate } from './file-input.template.js';
+export { fileInputStructuralStyles } from './file-input.structural.styles.js';
+export { fileInputStyles } from './file-input.styles.js';
+export { fileInputDefinition } from './file-input.definition.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/file-input/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/file-input/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/file-input/index.js

@@ -0,0 +1,7 @@
+// Side-effect free. Register with `@oddkin/components/define/file-input`.
+export { OddkinFileInput, FILE_INPUT_STRINGS } from './file-input.js';
+export { fileInputTemplate } from './file-input.template.js';
+export { fileInputStructuralStyles } from './file-input.structural.styles.js';
+export { fileInputStyles } from './file-input.styles.js';
+export { fileInputDefinition } from './file-input.definition.js';
+//# sourceMappingURL=index.js.map

package/dist/file-input/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/file-input/index.ts"],"names":[],"mappings":"AAAA,0EAA0E;AAC1E,OAAO,EAAE,eAAe,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AACtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,0BAA0B,CAAC;AAC7D,OAAO,EAAE,yBAAyB,EAAE,MAAM,mCAAmC,CAAC;AAC9E,OAAO,EAAE,eAAe,EAAE,MAAM,wBAAwB,CAAC;AACzD,OAAO,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC"}

package/dist/form-control/checkable.d.ts

@@ -0,0 +1,41 @@
+import { type ElementEvents } from '@oddkin/core/element';
+import { type Readable } from '@oddkin/core/reactive';
+import { OddkinFormControl, type FormControlOptions } from './form-control.js';
+/** Native `input` events cross the shadow boundary once; declared here for metadata and sync. */
+export declare const inputEvent: import("@oddkin/core/element").EventDefinition<void>;
+/** Re-dispatched at the host when the user toggles (native `change` is not composed). */
+export declare const changeEvent: import("@oddkin/core/element").EventDefinition<void>;
+declare const OddkinCheckable_base: import("@oddkin/core/element").WithProps<typeof OddkinFormControl, {
+    readonly defaultChecked: import("@oddkin/core/element").PropDefinition<boolean>;
+    readonly value: import("@oddkin/core/element").PropDefinition<string>;
+    readonly required: import("@oddkin/core/element").PropDefinition<boolean>;
+}>;
+/**
+ * A form control over a native checkbox (`odd-checkbox`, `odd-switch`): `checked` as native (the
+ * attribute is the default), `value` submitted while checked, `required`. Subclasses bind
+ * `_currentChecked`, `_onInput`, `_onChange`, and `_onBlur` on their inner checkbox.
+ */
+export declare class OddkinCheckable extends OddkinCheckable_base {
+    #private;
+    static shadowRootOptions: ShadowRootInit;
+    static events: {
+        input: import("@oddkin/core/element").EventDefinition<void>;
+        change: import("@oddkin/core/element").EventDefinition<void>;
+    };
+    readonly _events?: ElementEvents<typeof OddkinCheckable>;
+    /** @internal Checkedness as a readable for the template's live binding. */
+    readonly _currentChecked: Readable<boolean>;
+    constructor();
+    /** The current checkedness. Setting it (or toggling) detaches it from `defaultChecked`. */
+    get checked(): boolean;
+    set checked(checked: boolean);
+    protected _formOptions(): FormControlOptions;
+    /** @internal Called after the user toggled, before `input` reaches listeners at the host. */
+    protected _toggled(): void;
+    /** @internal Template handler: the user toggled. */
+    readonly _onInput: (event: Event) => void;
+    /** @internal Template handler: the user committed the toggle. */
+    readonly _onChange: () => void;
+}
+export {};
+//# sourceMappingURL=checkable.d.ts.map

package/dist/form-control/checkable.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkable.d.ts","sourceRoot":"","sources":["../../src/form-control/checkable.ts"],"names":[],"mappings":"AAAA,OAAO,EAAe,KAAK,aAAa,EAAE,MAAM,sBAAsB,CAAC;AACvE,OAAO,EAAoB,KAAK,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AACxE,OAAO,EAAE,iBAAiB,EAAE,KAAK,kBAAkB,EAAE,MAAM,mBAAmB,CAAC;AAE/E,iGAAiG;AACjG,eAAO,MAAM,UAAU,sDAMrB,CAAC;AACH,yFAAyF;AACzF,eAAO,MAAM,WAAW,sDAKtB,CAAC;;;;;;AAEH;;;;GAIG;AACH,qBAAa,eAAgB,SAAQ,oBAOnC;;IACA,OAAgB,iBAAiB,EAAE,cAAc,CAA0C;IAC3F,OAAgB,MAAM;QAAK,KAAK;QAAc,MAAM;MAAgB;IACpE,SAAiB,OAAO,CAAC,EAAE,aAAa,CAAC,OAAO,eAAe,CAAC,CAAC;IAKjE,2EAA2E;IAC3E,QAAQ,CAAC,eAAe,EAAE,QAAQ,CAAC,OAAO,CAAC,CAAgC;IAE3E,cAQC;IAED,2FAA2F;IAC3F,IAAI,OAAO,IAAI,OAAO,CAErB;IACD,IAAI,OAAO,CAAC,OAAO,EAAE,OAAO,EAE3B;IAED,UAAmB,YAAY,IAAI,kBAAkB,CAapD;IAED,6FAA6F;IAC7F,SAAS,CAAC,QAAQ,IAAI,IAAI,CAAG;IAE7B,oDAAoD;IACpD,QAAQ,CAAC,QAAQ,UAAW,KAAK,KAAG,IAAI,CAGtC;IACF,iEAAiE;IACjE,QAAQ,CAAC,SAAS,QAAO,IAAI,CAE3B;CACH"}