@vielzeug/refine 1.1.3 → 1.3.0

package/dist/file-input.js

@@ -3,13 +3,15 @@ import { forcedColorsFocusMixin as t } from "./styles/mixins/theme.css.js";
 import { fieldMixins as n } from "./styles/index.js";
 import { FILE_INPUT_SIZE_PRESET as r } from "./shared/size-presets.js";
 import { createInteraction as i } from "./headless/keyboard.js";
-import { FORM_CTX as a, useFormContext as o } from "./inputs/shared/form-context.js";
-import s from "./inputs/file-input/file-input.css?inline.js";
-import { createStableId as c, define as l, html as u, inject as d, prop as f, ref as p, useField as m } from "@vielzeug/ore";
-import { computed as h, signal as g, watch as _ } from "@vielzeug/ripple";
-import { createDropZone as v, matchesAccept as y } from "@vielzeug/dnd";
+import { useField as a } from "./ore/dist/forms/field.js";
+import "./ore/dist/forms.js";
+import { FORM_CTX as o, useFormContext as s } from "./inputs/shared/form-context.js";
+import c from "./inputs/file-input/file-input.css.js";
+import { bind as l, createStableId as u, define as d, html as f, inject as p, onCleanup as m, onElement as h, onEvent as g, onMounted as _, prop as v, ref as y, useEmit as b } from "@vielzeug/ore";
+import { computed as x, signal as S, watch as C } from "@vielzeug/ripple";
+import { createDropZone as w, matchesAccept as T } from "@vielzeug/dnd";
 //#region src/inputs/file-input/file-input.ts
-var b = (e) => {
+var E = (e) => {
 	if (e === 0) return "0 B";
 	let t = 1024, n = [
 		"B",
@@ -19,136 +21,149 @@ var b = (e) => {
 		"TB"
 	], r = Math.floor(Math.log(e) / Math.log(t));
 	return parseFloat((e / t ** r).toFixed(1)) + " " + n[r];
-}, x = (e, t) => !t || e.size <= t, S = "ore-file-input";
-l(S, {
+}, D = (e, t) => !t || e.size <= t, O = (e) => e.type.startsWith("image/"), k = "ore-file-input";
+d(k, {
 	formAssociated: !0,
 	props: {
-		accept: f.string(),
-		color: f.string(),
-		disabled: f.bool(!1),
-		error: f.string(),
-		helper: f.string(),
-		label: f.string(),
-		"max-files": f.number(0),
-		"max-size": f.number(0),
-		multiple: f.bool(!1),
-		name: f.string(),
-		ref: f.json(void 0),
-		required: f.bool(!1),
-		size: f.string()
+		accept: v.string(),
+		color: v.string(),
+		disabled: v.bool(!1),
+		error: v.string(),
+		gallery: v.bool(!1),
+		helper: v.string(),
+		label: v.string(),
+		"max-files": v.number(0),
+		"max-size": v.number(0),
+		multiple: v.bool(!1),
+		name: v.string(),
+		ref: v.json(void 0),
+		required: v.bool(!1),
+		size: v.string()
 	},
-	setup(e, { bind: t, emit: n, onCleanup: r, onElement: s, onEvent: l, onMounted: f }) {
-		let S = g([]), C = g(!1), w = o(t, e, d(a)), T = w.disabled, E = h(() => e["max-files"].value ?? 0), D = h(() => e["max-size"].value ?? 0);
-		m({
-			disabled: T,
+	setup(e) {
+		let t = b(), n = S([]), r = S(!1), c = s(e, p(o)), d = c.disabled, v = x(() => e["max-files"].value ?? 0), k = x(() => e["max-size"].value ?? 0);
+		a({
+			disabled: d,
 			toFormValue: (t) => {
 				if (t.length === 0) return null;
 				let n = e.name.value || "file", r = new FormData();
 				for (let e of t) r.append(n, e);
 				return r;
 			},
-			value: S
+			value: n
 		});
-		let O = h(() => !!e.error.value);
-		t({ attr: {
-			"drag-over": () => C.value ? !0 : void 0,
-			invalid: () => O.value ? !0 : void 0,
-			size: w.size
+		let A = x(() => !!e.error.value);
+		l({ attr: {
+			"drag-over": () => r.value ? !0 : void 0,
+			invalid: () => A.value ? !0 : void 0,
+			size: c.size
 		} });
-		let k = c("file-input"), A = `label-${k}`, j = `helper-${k}`, M = `error-${k}`, N = p(), P = p(), F = h(() => {
+		let j = u("file-input"), M = `label-${j}`, N = `helper-${j}`, P = `error-${j}`, F = y(), I = y(), L = x(() => {
 			let t = [];
 			e.accept.value && t.push(e.accept.value.split(",").map((e) => e.trim()).join(", "));
-			let n = D.value;
-			n > 0 && t.push(`max ${b(n)}`);
-			let r = E.value;
+			let n = k.value;
+			n > 0 && t.push(`max ${E(n)}`);
+			let r = v.value;
 			return r > 0 && t.push(`up to ${r} file${r === 1 ? "" : "s"}`), t.join(" · ");
 		});
-		function I(t, r) {
-			if (T.value) return;
-			let i = e.accept.value, a = !!e.multiple.value, o = Array.from(t);
-			a || (o = o.slice(0, 1)), o = o.filter((e) => y(e, i ? i.split(",").map((e) => e.trim()) : []) && x(e, D.value));
-			let s = a ? [...S.value] : [];
-			for (let e of o) s.includes(e) || s.push(e);
-			E.value > 0 && s.length > E.value && (s = s.slice(0, E.value)), S.value = s, n("change", {
-				files: S.value,
-				originalEvent: r,
-				value: S.value
+		function R(r, i) {
+			if (d.value) return;
+			let a = e.accept.value, o = !!e.multiple.value, s = Array.from(r);
+			o || (s = s.slice(0, 1)), s = s.filter((e) => T(e, a ? a.split(",").map((e) => e.trim()) : []) && D(e, k.value));
+			let c = o ? [...n.value] : [];
+			for (let e of s) c.includes(e) || c.push(e);
+			v.value > 0 && c.length > v.value && (c = c.slice(0, v.value)), n.value = c, t("change", {
+				files: n.value,
+				originalEvent: i,
+				value: n.value
 			});
 		}
-		function L(e, t) {
-			S.value = S.value.filter((t) => t !== e), n("remove", {
+		function z(e, r) {
+			n.value = n.value.filter((t) => t !== e), t("remove", {
 				file: e,
-				files: S.value,
-				originalEvent: t,
-				value: S.value
-			}), n("change", {
-				files: S.value,
-				originalEvent: t,
-				value: S.value
+				files: n.value,
+				originalEvent: r,
+				value: n.value
+			}), t("change", {
+				files: n.value,
+				originalEvent: r,
+				value: n.value
 			});
 		}
-		return s(P, (t) => {
+		let B = /* @__PURE__ */ new Map();
+		function V(e) {
+			let t = B.get(e);
+			return t || (t = URL.createObjectURL(e), B.set(e, t)), t;
+		}
+		function H(e) {
+			let t = new Set(e);
+			for (let [e, n] of B) t.has(e) || (URL.revokeObjectURL(n), B.delete(e));
+		}
+		return C(n, H), m(() => {
+			for (let e of B.values()) URL.revokeObjectURL(e);
+			B.clear();
+		}), h(I, (t) => {
 			e.ref.value?.(t);
-			let n = _(e.ref, (e) => {
+			let n = C(e.ref, (e) => {
 				e?.(t);
 			});
 			return () => {
 				n.dispose(), e.ref.value?.(null);
 			};
-		}), f(() => {
-			let e = P.value, t = N.value, n = !1, a = i({
-				disabled: T,
+		}), _(() => {
+			let e = I.value, t = F.value, n = !1, a = i({
+				disabled: d,
 				onPress: () => {
 					e.click();
 				}
 			});
-			l(e, "change", (e) => {
+			g(e, "change", (e) => {
 				let t = e.target;
-				t.files?.length && I(Array.from(t.files), e), t.value = "";
-			}), l(t, "click", (t) => {
+				t.files?.length && R(Array.from(t.files), e), t.value = "";
+			}), g(t, "click", (t) => {
 				if (t.target !== e) {
 					if (n) {
 						n = !1;
 						return;
 					}
-					T.value || e.click();
+					d.value || e.click();
 				}
-			}), l(t, "keydown", (e) => {
+			}), g(t, "keydown", (e) => {
 				n = a.handleKeydown(e) && e.key === "Enter";
 			});
-			let o = v({
-				disabled: T.value,
+			let o = w({
+				disabled: d.value,
 				element: t,
-				onDrop: (e) => I(e),
+				onDrop: (e) => R(e),
 				onHoverChange: (e) => {
-					C.value = e;
+					r.value = e;
 				}
 			});
-			r(() => o.dispose());
-		}), u`
+			m(() => o.dispose());
+		}), f`
       <div class="file-input-wrapper" part="wrapper">
-        <label class="label-outside" id="${A}" part="label" ?hidden=${() => !e.label.value}
+        <label class="label-outside" id="${M}" part="label" ?hidden=${() => !e.label.value}
           >${e.label}</label
         >
         <div
           class="dropzone"
           part="dropzone"
-          ref=${N}
+          ref=${F}
           role="button"
-          :tabindex="${() => T.value ? "-1" : "0"}"
-          :aria-disabled="${() => String(T.value)}"
+          :tabindex="${() => d.value ? "-1" : "0"}"
+          :aria-disabled="${() => String(d.value)}"
           :aria-label="${() => e.label.value ? null : "File upload drop zone"}"
-          :aria-labelledby="${() => e.label.value ? A : null}"
-          aria-describedby="${j}">
+          :aria-labelledby="${() => e.label.value ? M : null}"
+          aria-describedby="${N}">
           <input
             type="file"
-            ref=${P}
+            ref=${I}
             part="input"
-            id="${k}"
+            id="${j}"
             :accept="${e.accept}"
             ?multiple="${e.multiple}"
             ?required="${e.required}"
-            ?disabled="${T}"
+            ?disabled="${d}"
             :name="${e.name}"
             hidden
             inert
@@ -158,38 +173,62 @@ l(S, {
               <ore-icon name="upload" size="36" stroke-width="1.5" aria-hidden="true"></ore-icon>
             </span>
             <span class="dropzone-title">Drop files here or <u>click to browse</u></span>
-            <span class="dropzone-hint" ?hidden=${() => !F.value}>${F}</span>
+            <span class="dropzone-hint" ?hidden=${() => !L.value}>${L}</span>
           </div>
         </div>
-        <ul class="file-list" role="list" aria-label="Selected files" ?hidden=${() => S.value.length === 0}>
-          ${() => S.value.map((e) => u`
-                <li class="file-item">
-                  <span class="file-icon" aria-hidden="true">
-                    <ore-icon name="file" size="18" stroke-width="1.75" aria-hidden="true"></ore-icon>
-                  </span>
-                  <span class="file-meta">
-                    <span class="file-name" title="${e.name}">${e.name}</span>
-                    <span class="file-size">${b(e.size)}</span>
-                  </span>
-                  <button
-                    class="file-remove"
-                    type="button"
-                    aria-label="${`Remove ${e.name}`}"
-                    @click=${(t) => L(e, t)}>
-                    <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
-                  </button>
-                </li>
-              `)}
+        <ul
+          class="${() => e.gallery.value ? "file-grid" : "file-list"}"
+          part="${() => e.gallery.value ? "gallery" : null}"
+          role="list"
+          aria-label="Selected files"
+          ?hidden=${() => n.value.length === 0}>
+          ${() => n.value.map((t) => e.gallery.value ? f`
+                    <li class="file-card">
+                      ${O(t) ? f`<img
+                              class="file-thumb"
+                              alt=""
+                              ref="${(e) => {
+			e && (e.src = V(t));
+		}}" />` : f`<span class="file-thumb file-thumb-generic" aria-hidden="true">
+                              <ore-icon name="file" size="28" stroke-width="1.5" aria-hidden="true"></ore-icon>
+                            </span>`}
+                      <span class="file-card-name" title="${t.name}">${t.name}</span>
+                      <button
+                        class="file-card-remove"
+                        type="button"
+                        aria-label="${`Remove ${t.name}`}"
+                        @click=${(e) => z(t, e)}>
+                        <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                      </button>
+                    </li>
+                  ` : f`
+                    <li class="file-item">
+                      <span class="file-icon" aria-hidden="true">
+                        <ore-icon name="file" size="18" stroke-width="1.75" aria-hidden="true"></ore-icon>
+                      </span>
+                      <span class="file-meta">
+                        <span class="file-name" title="${t.name}">${t.name}</span>
+                        <span class="file-size">${E(t.size)}</span>
+                      </span>
+                      <button
+                        class="file-remove"
+                        type="button"
+                        aria-label="${`Remove ${t.name}`}"
+                        @click=${(e) => z(t, e)}>
+                        <ore-icon name="x" size="12" stroke-width="2.5" aria-hidden="true"></ore-icon>
+                      </button>
+                    </li>
+                  `)}
         </ul>
-        <div class="helper-text" id="${j}" part="helper" ?hidden=${() => O.value || !e.helper.value}>
+        <div class="helper-text" id="${N}" part="helper" ?hidden=${() => A.value || !e.helper.value}>
           ${e.helper}
         </div>
         <div
           class="helper-text helper-text-error"
-          id="${M}"
+          id="${P}"
           role="alert"
           part="error"
-          ?hidden=${() => !O.value}>
+          ?hidden=${() => !A.value}>
           ${() => e.error.value ?? ""}
         </div>
       </div>
@@ -200,10 +239,10 @@ l(S, {
 		...n,
 		e(r),
 		t(".dropzone"),
-		s
+		c
 	]
 });
 //#endregion
-export { S as FILE_INPUT_TAG };
+export { k as FILE_INPUT_TAG };
 
 //# sourceMappingURL=file-input.js.map

package/dist/file-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"file-input.js","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import { createDropZone, matchesAccept } from '@vielzeug/dnd';\nimport { createStableId, define, useField, html, inject, prop, ref } from '@vielzeug/ore';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport { createInteraction } from '../../headless';\nimport { FILE_INPUT_SIZE_PRESET } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './file-input.css?inline';\n\nconst formatBytes = (bytes: number) => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n};\n\nconst isFileSizeAllowed = (file: File, maxSize?: number) => !maxSize || file.size <= maxSize;\n\n/** File input component properties */\nexport type OreFileInputProps = {\n  /** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */\n  accept?: string;\n  /** Theme color tint */\n  color?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /** Helper text displayed below the input */\n  helper?: string;\n  /** Input label text */\n  label?: string;\n  /** Max number of files allowed (only used if multiple is true) */\n  'max-files'?: number;\n  /** Max size of a single file in bytes */\n  'max-size'?: number;\n  /** Allow multiple files selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /**\n   * JS-only callback fired with the inner `<input type=\"file\">` element when it\n   * mounts, and with `null` when it unmounts. Intended for composed components\n   * that need imperative access to the raw element.\n   * Set as a JS property: `bitFileInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Required field */\n  required?: boolean;\n  /** Field size preset */\n  size?: string;\n};\n\n/** Events emitted by the file-input component */\nexport type OreFileInputEvents = {\n  /** Emitted when files are added or removed */\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  /** Emitted when a specific file is removed */\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n};\n\n/**\n * A file upload field with drag-and-drop support and built-in validation messaging.\n *\n * @element ore-file-input\n *\n * @attr {string} accept - Comma-separated file extensions or MIME types\n * @attr {boolean} multiple - Enable multiple files selection\n * @attr {number} max-files - Max number of files allowed\n * @attr {number} max-size - Max size of each file in bytes\n * @attr {boolean} disabled - Disable interaction\n * @attr {string} error - Show an error state/message\n * @attr {string} helper - Provide helper context below the dropzone\n *\n * @fires change - detail: { files: File[], value: File[] }\n * @fires remove - detail: { file: File, files: File[] }\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-font-size - Font size\n * @cssprop --file-input-radius - Dropzone border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-hover-bg - Dropzone background on hover (flat/ghost variants)\n * @cssprop --file-input-hover-border-color - Dropzone border on hover (flat/bordered variants)\n * @cssprop --file-input-focus-bg - Dropzone background when focused/drag-over (flat variant)\n * @cssprop --file-input-focus-border-color - Dropzone border when focused/drag-over (flat variant)\n * @part wrapper - Root wrapper around the file input field\n * @part label - Visible label rendered above the dropzone\n * @part dropzone - Interactive drag-and-drop target\n * @part input - Native file input element\n * @part helper - Helper text shown beneath the dropzone\n * @part error - Error message shown beneath the field\n * @example\n * ```html\n * <ore-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <ore-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <ore-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const FILE_INPUT_TAG = 'ore-file-input' as const;\ndefine<OreFileInputProps, OreFileInputEvents>(FILE_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    accept: prop.string(),\n    color: prop.string(),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    helper: prop.string(),\n    label: prop.string(),\n    'max-files': prop.number(0),\n    'max-size': prop.number(0),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    ref: prop.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    size: prop.string(),\n  },\n  setup(props, { bind, emit, onCleanup, onElement, onEvent, onMounted }) {\n    // ============================================\n    // State\n    // ============================================\n\n    const files = signal<File[]>([]);\n    const isDragging = signal(false);\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(bind, props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n    const maxFilesLimit = computed(() => props['max-files'].value ?? 0);\n    const maxSizeLimit = computed(() => props['max-size'].value ?? 0);\n\n    // ============================================\n    // Form Integration\n    // ============================================\n\n    useField({\n      disabled: isDisabled,\n      toFormValue: (fi: File[]) => {\n        if (fi.length === 0) return null;\n\n        const name = props.name.value || 'file';\n        const fd = new FormData();\n\n        for (const file of fi) fd.append(name, file);\n\n        return fd;\n      },\n      value: files,\n    });\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    bind({\n      attr: {\n        'drag-over': () => (isDragging.value ? true : undefined),\n        invalid: () => (isInvalid.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createStableId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = maxSizeLimit.value;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = maxFilesLimit.value;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // File Management\n    // ============================================\n    function addFiles(newFiles: File[], originalEvent?: Event): void {\n      if (isDisabled.value) return;\n\n      const acceptVal = props.accept.value;\n      const isMultiple = Boolean(props.multiple.value);\n      let incoming = Array.from(newFiles);\n\n      if (!isMultiple) incoming = incoming.slice(0, 1);\n\n      incoming = incoming.filter(\n        (f) =>\n          matchesAccept(f, acceptVal ? acceptVal.split(',').map((t) => t.trim()) : []) &&\n          isFileSizeAllowed(f, maxSizeLimit.value),\n      );\n\n      let updated: File[] = isMultiple ? [...files.value] : [];\n\n      for (const f of incoming) {\n        if (!updated.includes(f)) updated.push(f);\n      }\n\n      if (maxFilesLimit.value > 0 && updated.length > maxFilesLimit.value) {\n        updated = updated.slice(0, maxFilesLimit.value);\n      }\n\n      files.value = updated;\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    function removeFile(file: File, originalEvent?: Event): void {\n      files.value = files.value.filter((f) => f !== file);\n      emit('remove', { file, files: files.value, originalEvent, value: files.value });\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n\n    // ============================================\n    // Mount\n    // ============================================\n    // ============================================\n    // Template\n    // ============================================\n    onElement(inputRef, (inp) => {\n      props.ref.value?.(inp);\n\n      const sub = watch(props.ref, (cb) => {\n        cb?.(inp);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    onMounted(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n      let skipNextClick = false;\n      const pressControl = createInteraction({\n        disabled: isDisabled,\n        onPress: () => {\n          inp.click();\n        },\n      });\n\n      // Native input → add files\n      onEvent(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n\n        if (input.files?.length) addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      onEvent(dz, 'click', (e: MouseEvent) => {\n        if (e.target === inp) return;\n\n        if (skipNextClick) {\n          skipNextClick = false;\n\n          return;\n        }\n\n        if (!isDisabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      onEvent(dz, 'keydown', (e: KeyboardEvent) => {\n        skipNextClick = pressControl.handleKeydown(e) && e.key === 'Enter';\n      });\n\n      const dropZone = createDropZone({\n        disabled: isDisabled.value,\n        element: dz,\n        onDrop: (droppedFiles) => addFiles(droppedFiles),\n        onHoverChange: (hovered) => {\n          isDragging.value = hovered;\n        },\n      });\n\n      onCleanup(() => dropZone.dispose());\n    });\n\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${props.label}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n          :aria-disabled=\"${() => String(isDisabled.value)}\"\n          :aria-label=\"${() => (!props.label.value ? 'File upload drop zone' : null)}\"\n          :aria-labelledby=\"${() => (props.label.value ? labelId : null)}\"\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=\"${props.accept}\"\n            ?multiple=\"${props.multiple}\"\n            ?required=\"${props.required}\"\n            ?disabled=\"${isDisabled}\"\n            :name=\"${props.name}\"\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\">\n              <ore-icon name=\"upload\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n            </span>\n            <span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul class=\"file-list\" role=\"list\" aria-label=\"Selected files\" ?hidden=${() => files.value.length === 0}>\n          ${() =>\n            files.value.map(\n              (file: File) => html`\n                <li class=\"file-item\">\n                  <span class=\"file-icon\" aria-hidden=\"true\">\n                    <ore-icon name=\"file\" size=\"18\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n                  </span>\n                  <span class=\"file-meta\">\n                    <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                    <span class=\"file-size\">${formatBytes(file.size)}</span>\n                  </span>\n                  <button\n                    class=\"file-remove\"\n                    type=\"button\"\n                    aria-label=\"${`Remove ${file.name}`}\"\n                    @click=${(e: Event) => removeFile(file, e)}>\n                    <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                  </button>\n                </li>\n              `,\n            )}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${props.helper}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value ?? ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...fieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}
+{"version":3,"file":"file-input.js","names":[],"sources":["../src/inputs/file-input/file-input.ts"],"sourcesContent":["import { createDropZone, matchesAccept } from '@vielzeug/dnd';\nimport {\n  createStableId,\n  define,\n  html,\n  inject,\n  prop,\n  ref,\n  bind,\n  onCleanup,\n  onElement,\n  onEvent,\n  onMounted,\n  useEmit,\n} from '@vielzeug/ore';\nimport { useField } from '@vielzeug/ore/forms';\nimport { computed, signal, watch } from '@vielzeug/ripple';\n\nimport { createInteraction } from '../../headless';\nimport { FILE_INPUT_SIZE_PRESET } from '../../shared';\nimport { fieldMixins, forcedColorsFocusMixin, sizeVariantMixin } from '../../styles';\nimport { FORM_CTX, useFormContext } from '../shared/form-context';\nimport componentStyles from './file-input.css?inline';\n\nconst formatBytes = (bytes: number) => {\n  if (bytes === 0) return '0 B';\n\n  const k = 1024;\n  const sizes = ['B', 'KB', 'MB', 'GB', 'TB'];\n  const i = Math.floor(Math.log(bytes) / Math.log(k));\n\n  return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i];\n};\n\nconst isFileSizeAllowed = (file: File, maxSize?: number) => !maxSize || file.size <= maxSize;\n\nconst isImageFile = (file: File): boolean => file.type.startsWith('image/');\n\n/** File input component properties */\nexport type OreFileInputProps = {\n  /** Accepted file types (comma-separated, e.g. '.jpg, .png, image/*') */\n  accept?: string;\n  /** Theme color tint */\n  color?: string;\n  /** Disabled state */\n  disabled?: boolean;\n  /** Error message text */\n  error?: string;\n  /**\n   * Render selected files as a grid of image thumbnails/previews instead of the default\n   * single-column list. Non-image files fall back to a generic file icon in the same grid.\n   */\n  gallery?: boolean;\n  /** Helper text displayed below the input */\n  helper?: string;\n  /** Input label text */\n  label?: string;\n  /** Max number of files allowed (only used if multiple is true) */\n  'max-files'?: number;\n  /** Max size of a single file in bytes */\n  'max-size'?: number;\n  /** Allow multiple files selection */\n  multiple?: boolean;\n  /** Form field name */\n  name?: string;\n  /**\n   * JS-only callback fired with the inner `<input type=\"file\">` element when it\n   * mounts, and with `null` when it unmounts. Intended for composed components\n   * that need imperative access to the raw element.\n   * Set as a JS property: `bitFileInput.ref = (el) => { ... }`.\n   */\n  ref?: ((el: HTMLInputElement | null) => void) | null;\n  /** Required field */\n  required?: boolean;\n  /** Field size preset */\n  size?: string;\n};\n\n/** Events emitted by the file-input component */\nexport type OreFileInputEvents = {\n  /** Emitted when files are added or removed */\n  change: { files: File[]; originalEvent?: Event; value: File[] };\n  /** Emitted when a specific file is removed */\n  remove: { file: File; files: File[]; originalEvent?: Event; value: File[] };\n};\n\n/**\n * A file upload field with drag-and-drop support and built-in validation messaging.\n *\n * @element ore-file-input\n *\n * @attr {string} accept - Comma-separated file extensions or MIME types\n * @attr {boolean} multiple - Enable multiple files selection\n * @attr {boolean} gallery - Show selected files as an image thumbnail/preview grid\n * @attr {number} max-files - Max number of files allowed\n * @attr {number} max-size - Max size of each file in bytes\n * @attr {boolean} disabled - Disable interaction\n * @attr {string} error - Show an error state/message\n * @attr {string} helper - Provide helper context below the dropzone\n *\n * @fires change - detail: { files: File[], value: File[] }\n * @fires remove - detail: { file: File, files: File[] }\n *\n * @cssprop --file-input-bg - Dropzone background color\n * @cssprop --file-input-border-color - Dropzone border color\n * @cssprop --file-input-font-size - Font size\n * @cssprop --file-input-radius - Dropzone border radius\n * @cssprop --file-input-min-height - Minimum dropzone height\n * @cssprop --file-input-hover-bg - Dropzone background on hover (flat/ghost variants)\n * @cssprop --file-input-hover-border-color - Dropzone border on hover (flat/bordered variants)\n * @cssprop --file-input-focus-bg - Dropzone background when focused/drag-over (flat variant)\n * @cssprop --file-input-focus-border-color - Dropzone border when focused/drag-over (flat variant)\n * @cssprop --file-input-thumb-size - Gallery thumbnail width/height\n * @part wrapper - Root wrapper around the file input field\n * @part label - Visible label rendered above the dropzone\n * @part dropzone - Interactive drag-and-drop target\n * @part input - Native file input element\n * @part gallery - Gallery grid container (rendered instead of `file-list` when `gallery` is set)\n * @part helper - Helper text shown beneath the dropzone\n * @part error - Error message shown beneath the field\n * @example\n * ```html\n * <ore-file-input label=\"Upload files\" accept=\"image/*\" multiple />\n * <ore-file-input label=\"Photos\" accept=\"image/*\" multiple gallery />\n * <ore-file-input label=\"Resume\" accept=\".pdf,.doc,.docx\" max-size=\"5242880\" />\n * <ore-file-input variant=\"bordered\" color=\"primary\" />\n * ```\n */\nexport const FILE_INPUT_TAG = 'ore-file-input' as const;\ndefine<OreFileInputProps>(FILE_INPUT_TAG, {\n  formAssociated: true,\n  props: {\n    accept: prop.string(),\n    color: prop.string(),\n    disabled: prop.bool(false),\n    error: prop.string(),\n    gallery: prop.bool(false),\n    helper: prop.string(),\n    label: prop.string(),\n    'max-files': prop.number(0),\n    'max-size': prop.number(0),\n    multiple: prop.bool(false),\n    name: prop.string(),\n    ref: prop.json(undefined as ((el: HTMLInputElement | null) => void) | null | undefined),\n    required: prop.bool(false),\n    size: prop.string(),\n  },\n  setup(props) {\n    const emit = useEmit<OreFileInputEvents>();\n\n    // ============================================\n    // State\n    // ============================================\n\n    const files = signal<File[]>([]);\n    const isDragging = signal(false);\n    const formCtx = inject(FORM_CTX);\n    const fCtxProps = useFormContext(props, formCtx);\n    const isDisabled = fCtxProps.disabled;\n    const maxFilesLimit = computed(() => props['max-files'].value ?? 0);\n    const maxSizeLimit = computed(() => props['max-size'].value ?? 0);\n\n    // ============================================\n    // Form Integration\n    // ============================================\n\n    useField({\n      disabled: isDisabled,\n      toFormValue: (fi: File[]) => {\n        if (fi.length === 0) return null;\n\n        const name = props.name.value || 'file';\n        const fd = new FormData();\n\n        for (const file of fi) fd.append(name, file);\n\n        return fd;\n      },\n      value: files,\n    });\n\n    // Sync host attributes for CSS selectors\n    const isInvalid = computed(() => Boolean(props.error.value));\n\n    bind({\n      attr: {\n        'drag-over': () => (isDragging.value ? true : undefined),\n        invalid: () => (isInvalid.value ? true : undefined),\n        size: fCtxProps.size,\n      },\n    });\n\n    // ============================================\n    // IDs\n    // ============================================\n    const fileInputId = createStableId('file-input');\n    const labelId = `label-${fileInputId}`;\n    const helperId = `helper-${fileInputId}`;\n    const errorId = `error-${fileInputId}`;\n\n    // ============================================\n    // Refs\n    // ============================================\n    const dropzoneRef = ref<HTMLDivElement>();\n    const inputRef = ref<HTMLInputElement>();\n    const hintText = computed(() => {\n      const parts: string[] = [];\n\n      if (props.accept.value) {\n        parts.push(\n          props.accept.value\n            .split(',')\n            .map((s: string) => s.trim())\n            .join(', '),\n        );\n      }\n\n      const maxSize = maxSizeLimit.value;\n\n      if (maxSize > 0) parts.push(`max ${formatBytes(maxSize)}`);\n\n      const maxFiles = maxFilesLimit.value;\n\n      if (maxFiles > 0) parts.push(`up to ${maxFiles} file${maxFiles !== 1 ? 's' : ''}`);\n\n      return parts.join(' · ');\n    });\n\n    // ============================================\n    // File Management\n    // ============================================\n    function addFiles(newFiles: File[], originalEvent?: Event): void {\n      if (isDisabled.value) return;\n\n      const acceptVal = props.accept.value;\n      const isMultiple = Boolean(props.multiple.value);\n      let incoming = Array.from(newFiles);\n\n      if (!isMultiple) incoming = incoming.slice(0, 1);\n\n      incoming = incoming.filter(\n        (f) =>\n          matchesAccept(f, acceptVal ? acceptVal.split(',').map((t) => t.trim()) : []) &&\n          isFileSizeAllowed(f, maxSizeLimit.value),\n      );\n\n      let updated: File[] = isMultiple ? [...files.value] : [];\n\n      for (const f of incoming) {\n        if (!updated.includes(f)) updated.push(f);\n      }\n\n      if (maxFilesLimit.value > 0 && updated.length > maxFilesLimit.value) {\n        updated = updated.slice(0, maxFilesLimit.value);\n      }\n\n      files.value = updated;\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n    function removeFile(file: File, originalEvent?: Event): void {\n      files.value = files.value.filter((f) => f !== file);\n      emit('remove', { file, files: files.value, originalEvent, value: files.value });\n      emit('change', { files: files.value, originalEvent, value: files.value });\n    }\n\n    // ============================================\n    // Gallery Preview URLs\n    // ============================================\n    // Object URLs are created lazily (only while `gallery` is enabled) and revoked as soon\n    // as their file is no longer selected, plus unconditionally on disconnect — otherwise\n    // each preview leaks its backing blob for the life of the page.\n    const previewUrls = new Map<File, string>();\n\n    function getPreviewUrl(file: File): string {\n      let url = previewUrls.get(file);\n\n      if (!url) {\n        url = URL.createObjectURL(file);\n        previewUrls.set(file, url);\n      }\n\n      return url;\n    }\n\n    function revokeStalePreviewUrls(activeFiles: File[]): void {\n      const keep = new Set(activeFiles);\n\n      for (const [file, url] of previewUrls) {\n        if (!keep.has(file)) {\n          URL.revokeObjectURL(url);\n          previewUrls.delete(file);\n        }\n      }\n    }\n\n    watch(files, revokeStalePreviewUrls);\n\n    onCleanup(() => {\n      for (const url of previewUrls.values()) URL.revokeObjectURL(url);\n\n      previewUrls.clear();\n    });\n\n    // ============================================\n    // Mount\n    // ============================================\n    // ============================================\n    // Template\n    // ============================================\n    onElement(inputRef, (inp) => {\n      props.ref.value?.(inp);\n\n      const sub = watch(props.ref, (cb) => {\n        cb?.(inp);\n      });\n\n      return () => {\n        sub.dispose();\n        props.ref.value?.(null);\n      };\n    });\n\n    onMounted(() => {\n      const inp = inputRef.value!;\n      const dz = dropzoneRef.value!;\n      let skipNextClick = false;\n      const pressControl = createInteraction({\n        disabled: isDisabled,\n        onPress: () => {\n          inp.click();\n        },\n      });\n\n      // Native input → add files\n      onEvent(inp, 'change', (e: Event) => {\n        const input = e.target as HTMLInputElement;\n\n        if (input.files?.length) addFiles(Array.from(input.files), e);\n\n        input.value = ''; // reset so the same file triggers change again\n      });\n      // Click dropzone → open file picker\n      onEvent(dz, 'click', (e: MouseEvent) => {\n        if (e.target === inp) return;\n\n        if (skipNextClick) {\n          skipNextClick = false;\n\n          return;\n        }\n\n        if (!isDisabled.value) inp.click();\n      });\n      // Keyboard: Enter / Space → open picker\n      onEvent(dz, 'keydown', (e: KeyboardEvent) => {\n        skipNextClick = pressControl.handleKeydown(e) && e.key === 'Enter';\n      });\n\n      const dropZone = createDropZone({\n        disabled: isDisabled.value,\n        element: dz,\n        onDrop: (droppedFiles) => addFiles(droppedFiles),\n        onHoverChange: (hovered) => {\n          isDragging.value = hovered;\n        },\n      });\n\n      onCleanup(() => dropZone.dispose());\n    });\n\n    return html`\n      <div class=\"file-input-wrapper\" part=\"wrapper\">\n        <label class=\"label-outside\" id=\"${labelId}\" part=\"label\" ?hidden=${() => !props.label.value}\n          >${props.label}</label\n        >\n        <div\n          class=\"dropzone\"\n          part=\"dropzone\"\n          ref=${dropzoneRef}\n          role=\"button\"\n          :tabindex=\"${() => (isDisabled.value ? '-1' : '0')}\"\n          :aria-disabled=\"${() => String(isDisabled.value)}\"\n          :aria-label=\"${() => (!props.label.value ? 'File upload drop zone' : null)}\"\n          :aria-labelledby=\"${() => (props.label.value ? labelId : null)}\"\n          aria-describedby=\"${helperId}\">\n          <input\n            type=\"file\"\n            ref=${inputRef}\n            part=\"input\"\n            id=\"${fileInputId}\"\n            :accept=\"${props.accept}\"\n            ?multiple=\"${props.multiple}\"\n            ?required=\"${props.required}\"\n            ?disabled=\"${isDisabled}\"\n            :name=\"${props.name}\"\n            hidden\n            inert\n            tabindex=\"-1\" />\n          <div class=\"dropzone-content\">\n            <span class=\"dropzone-icon\" aria-hidden=\"true\">\n              <ore-icon name=\"upload\" size=\"36\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n            </span>\n            <span class=\"dropzone-title\">Drop files here or <u>click to browse</u></span>\n            <span class=\"dropzone-hint\" ?hidden=${() => !hintText.value}>${hintText}</span>\n          </div>\n        </div>\n        <ul\n          class=\"${() => (props.gallery.value ? 'file-grid' : 'file-list')}\"\n          part=\"${() => (props.gallery.value ? 'gallery' : null)}\"\n          role=\"list\"\n          aria-label=\"Selected files\"\n          ?hidden=${() => files.value.length === 0}>\n          ${() =>\n            files.value.map((file: File) =>\n              props.gallery.value\n                ? html`\n                    <li class=\"file-card\">\n                      ${\n                        // Decorative: the file name is already announced via the visible\n                        // `.file-card-name` caption below — repeating it as `alt` text would\n                        // duplicate it (and often trips redundant-alt checks, since real\n                        // filenames commonly contain words like \"photo\" or \"image\").\n                        isImageFile(file)\n                          ? // Object URLs use the `blob:` scheme, which ore's attribute-level\n                            // XSS guard blocks unconditionally on `src` (and other\n                            // URL-accepting attributes) — set it as a DOM property via `ref`\n                            // instead, bypassing that string-based check. Safe here: the value\n                            // comes from `URL.createObjectURL(file)` on a real `File` object we\n                            // control, never from untrusted text.\n                            html`<img\n                              class=\"file-thumb\"\n                              alt=\"\"\n                              ref=\"${(el: HTMLImageElement | null) => {\n                                if (el) el.src = getPreviewUrl(file);\n                              }}\" />`\n                          : html`<span class=\"file-thumb file-thumb-generic\" aria-hidden=\"true\">\n                              <ore-icon name=\"file\" size=\"28\" stroke-width=\"1.5\" aria-hidden=\"true\"></ore-icon>\n                            </span>`\n                      }\n                      <span class=\"file-card-name\" title=\"${file.name}\">${file.name}</span>\n                      <button\n                        class=\"file-card-remove\"\n                        type=\"button\"\n                        aria-label=\"${`Remove ${file.name}`}\"\n                        @click=${(e: Event) => removeFile(file, e)}>\n                        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                      </button>\n                    </li>\n                  `\n                : html`\n                    <li class=\"file-item\">\n                      <span class=\"file-icon\" aria-hidden=\"true\">\n                        <ore-icon name=\"file\" size=\"18\" stroke-width=\"1.75\" aria-hidden=\"true\"></ore-icon>\n                      </span>\n                      <span class=\"file-meta\">\n                        <span class=\"file-name\" title=\"${file.name}\">${file.name}</span>\n                        <span class=\"file-size\">${formatBytes(file.size)}</span>\n                      </span>\n                      <button\n                        class=\"file-remove\"\n                        type=\"button\"\n                        aria-label=\"${`Remove ${file.name}`}\"\n                        @click=${(e: Event) => removeFile(file, e)}>\n                        <ore-icon name=\"x\" size=\"12\" stroke-width=\"2.5\" aria-hidden=\"true\"></ore-icon>\n                      </button>\n                    </li>\n                  `,\n            )}\n        </ul>\n        <div class=\"helper-text\" id=\"${helperId}\" part=\"helper\" ?hidden=${() => isInvalid.value || !props.helper.value}>\n          ${props.helper}\n        </div>\n        <div\n          class=\"helper-text helper-text-error\"\n          id=\"${errorId}\"\n          role=\"alert\"\n          part=\"error\"\n          ?hidden=${() => !isInvalid.value}>\n          ${() => props.error.value ?? ''}\n        </div>\n      </div>\n    `;\n  },\n  shadow: { delegatesFocus: true },\n  styles: [\n    ...fieldMixins,\n    sizeVariantMixin(FILE_INPUT_SIZE_PRESET),\n    forcedColorsFocusMixin('.dropzone'),\n    componentStyles,\n  ],\n});\n"],"mappings":"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"}

package/dist/form.cjs

@@ -1,10 +1,10 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/form-context.cjs"),t=require("./inputs/form/form.css?inline.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-form`;(0,n.define)(i,{props:{disabled:n.prop.bool(!1),novalidate:n.prop.bool(!1),orientation:n.prop.oneOf([`horizontal`,`vertical`],`vertical`),size:n.prop.string(),validateOn:n.prop.oneOf([`submit`,`change`,`blur`,`input`],`submit`),variant:n.prop.string()},setup(t,{bind:i,el:a,emit:o,provide:s}){let c=a.shadowRoot;i({attr:{orientation:t.orientation}}),s(e.FORM_CTX,{disabled:(0,r.computed)(()=>!!t.disabled.value),size:t.size,validateOn:(0,r.computed)(()=>t.validateOn.value??`submit`),variant:t.variant});function l(e){let t=e,n=c?.querySelector(`form`);n&&(e.preventDefault(),o(`submit`,{formData:new FormData(n),originalEvent:t}))}function u(e){o(`reset`,{originalEvent:e})}return n.html`
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./inputs/shared/form-context.cjs"),t=require("./inputs/form/form.css.cjs");let n=require("@vielzeug/ore"),r=require("@vielzeug/ripple");var i=`ore-form`;(0,n.define)(i,{props:{disabled:n.prop.bool(!1),novalidate:n.prop.bool(!1),orientation:n.prop.oneOf([`horizontal`,`vertical`],`vertical`),size:n.prop.string(),validateOn:n.prop.oneOf([`submit`,`change`,`blur`,`input`],`submit`),variant:n.prop.string()},setup(t){let i=(0,n.getHost)(),a=(0,n.useEmit)(),o=i.shadowRoot;(0,n.bind)({attr:{orientation:t.orientation}}),(0,n.provide)(e.FORM_CTX,{disabled:(0,r.computed)(()=>!!t.disabled.value),size:t.size,validateOn:(0,r.computed)(()=>t.validateOn.value??`submit`),variant:t.variant});function s(e){let t=e,n=o?.querySelector(`form`);if(!n)return;e.preventDefault();let r=new FormData(n);a(`submit`,{formData:r,originalEvent:t})}function c(e){a(`reset`,{originalEvent:e})}return n.html`
       <form
         part="form"
         :novalidate="${t.novalidate}"
         :aria-disabled="${()=>t.disabled.value?`true`:null}"
-        @submit="${l}"
-        @reset="${u}">
+        @submit="${s}"
+        @reset="${c}">
         <slot></slot>
       </form>
     `},shadow:{delegatesFocus:!1},styles:[t.default]}),exports.FORM_TAG=i;

package/dist/form.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"form.cjs","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ValidationTrigger } from '../../headless';\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './form.css?inline';\n\n/** Form component properties */\nexport type OreFormProps = {\n  /** Disabled state */\n  disabled?: boolean;\n  /** No validate */\n  novalidate?: boolean;\n  /** Layout orientation for child fields */\n  orientation?: 'horizontal' | 'vertical';\n  /** Form size preset */\n  size?: ComponentSize;\n  /** Validate on: 'submit' | 'change' | 'blur' | 'input' */\n  validateOn?: ValidationTrigger;\n  /** Form visual variant — propagated to all child form fields via FormContext */\n  variant?: VisualVariant;\n};\n\n/** Events emitted by the form component */\nexport type OreFormEvents = {\n  /** Emitted when the form is reset */\n  reset: { originalEvent: Event };\n  /** Emitted when the form is submitted */\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\n/**\n * A wrapper for standard HTML form that provides context to child ore-* form fields.\n * Manages shared state like size, variant, and validation timing.\n *\n * @element ore-form\n *\n * @attr {boolean} disabled - Disable all child fields\n * @attr {boolean} novalidate - Disable native browser validation\n * @attr {string} validate-on - When to trigger validation: 'submit' | 'change' | 'blur' | 'input' (default: 'submit')\n *\n * @fires submit - detail: { formData, originalEvent }\n * @fires reset - detail: { originalEvent }\n *\n * @slot - Form controls and content rendered inside the form element.\n * @cssprop --form-gap - Gap between form control rows\n * @part form - Form root element.\n * @example\n * ```html\n * <ore-form @submit=${(e) => console.log(e.detail.formData)}>\n *   <ore-input name=\"username\" label=\"Username\" required></ore-input>\n *   <ore-select name=\"role\" label=\"Role\">\n *     <option value=\"user\">User</option>\n *     <option value=\"admin\">Admin</option>\n *   </ore-select>\n *   <ore-button type=\"submit\">Submit</ore-button>\n * </ore-form>\n * ```\n */\nexport const FORM_TAG = 'ore-form' as const;\ndefine<OreFormProps, OreFormEvents>(FORM_TAG, {\n  props: {\n    disabled: prop.bool(false),\n    novalidate: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    size: prop.string<ComponentSize>(),\n    validateOn: prop.oneOf(['submit', 'change', 'blur', 'input'] as const, 'submit'),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props, { bind, el, emit, provide }) {\n    const shadowRoot = el.shadowRoot;\n\n    // Reflect orientation to host so CSS and tests can read it\n    bind({ attr: { orientation: props.orientation } });\n    // Provide context to all child ore-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${props.novalidate}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n});\n"],"mappings":"mOA6DA,IAAa,EAAW,wBACY,EAAU,CAC5C,MAAO,CACL,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,UAAU,EACvE,KAAM,EAAA,KAAK,OAAsB,EACjC,WAAY,EAAA,KAAK,MAAM,CAAC,SAAU,SAAU,OAAQ,OAAO,EAAY,QAAQ,EAC/E,QAAS,EAAA,KAAK,OAAsB,CACtC,EACA,MAAM,EAAO,CAAE,OAAM,KAAI,OAAM,WAAW,CACxC,IAAM,EAAa,EAAG,WAGtB,EAAK,CAAE,KAAM,CAAE,YAAa,EAAM,WAAY,CAAE,CAAC,EAEjD,EAAQ,EAAA,SAAU,CAChB,UAAA,EAAA,EAAA,SAAA,KAAyB,EAAQ,EAAM,SAAS,KAAM,EACtD,KAAM,EAAM,KACZ,YAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,WAAW,OAAS,QAAQ,EAC7D,QAAS,EAAM,OACjB,CAAC,EAED,SAAS,EAAa,EAAU,CAC9B,IAAM,EAAc,EACd,EAAS,GAAY,cAAc,MAAM,EAE1C,IAEL,EAAE,eAAe,EAIjB,EAAK,SAAU,CAAE,SAAA,IAFI,SAAS,CAEb,EAAU,cAAe,CAAY,CAAC,EACzD,CAEA,SAAS,EAAY,EAAU,CAC7B,EAAK,QAAS,CAAE,cAAe,CAAE,CAAC,CACpC,CAEA,MAAO,GAAA,IAAI;;;uBAGQ,EAAM,WAAW;8BACP,EAAM,SAAS,MAAQ,OAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;KAI5B,EACA,OAAQ,CAAE,eAAgB,EAAM,EAChC,OAAQ,CAAC,EAAA,OAAe,CAC1B,CAAC"}
+{"version":3,"file":"form.cjs","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, provide, useEmit } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ValidationTrigger } from '../../headless';\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './form.css?inline';\n\n/** Form component properties */\nexport type OreFormProps = {\n  /** Disabled state */\n  disabled?: boolean;\n  /** No validate */\n  novalidate?: boolean;\n  /** Layout orientation for child fields */\n  orientation?: 'horizontal' | 'vertical';\n  /** Form size preset */\n  size?: ComponentSize;\n  /** Validate on: 'submit' | 'change' | 'blur' | 'input' */\n  validateOn?: ValidationTrigger;\n  /** Form visual variant — propagated to all child form fields via FormContext */\n  variant?: VisualVariant;\n};\n\n/** Events emitted by the form component */\nexport type OreFormEvents = {\n  /** Emitted when the form is reset */\n  reset: { originalEvent: Event };\n  /** Emitted when the form is submitted */\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\n/**\n * A wrapper for standard HTML form that provides context to child ore-* form fields.\n * Manages shared state like size, variant, and validation timing.\n *\n * @element ore-form\n *\n * @attr {boolean} disabled - Disable all child fields\n * @attr {boolean} novalidate - Disable native browser validation\n * @attr {string} validate-on - When to trigger validation: 'submit' | 'change' | 'blur' | 'input' (default: 'submit')\n *\n * @fires submit - detail: { formData, originalEvent }\n * @fires reset - detail: { originalEvent }\n *\n * @slot - Form controls and content rendered inside the form element.\n * @cssprop --form-gap - Gap between form control rows\n * @part form - Form root element.\n * @example\n * ```html\n * <ore-form @submit=${(e) => console.log(e.detail.formData)}>\n *   <ore-input name=\"username\" label=\"Username\" required></ore-input>\n *   <ore-select name=\"role\" label=\"Role\">\n *     <option value=\"user\">User</option>\n *     <option value=\"admin\">Admin</option>\n *   </ore-select>\n *   <ore-button type=\"submit\">Submit</ore-button>\n * </ore-form>\n * ```\n */\nexport const FORM_TAG = 'ore-form' as const;\ndefine<OreFormProps>(FORM_TAG, {\n  props: {\n    disabled: prop.bool(false),\n    novalidate: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    size: prop.string<ComponentSize>(),\n    validateOn: prop.oneOf(['submit', 'change', 'blur', 'input'] as const, 'submit'),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreFormEvents>();\n\n    const shadowRoot = el.shadowRoot;\n\n    // Reflect orientation to host so CSS and tests can read it\n    bind({ attr: { orientation: props.orientation } });\n    // Provide context to all child ore-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${props.novalidate}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n});\n"],"mappings":"4NA6DA,IAAa,EAAW,wBACH,EAAU,CAC7B,MAAO,CACL,SAAU,EAAA,KAAK,KAAK,EAAK,EACzB,WAAY,EAAA,KAAK,KAAK,EAAK,EAC3B,YAAa,EAAA,KAAK,MAAM,CAAC,aAAc,UAAU,EAAY,UAAU,EACvE,KAAM,EAAA,KAAK,OAAsB,EACjC,WAAY,EAAA,KAAK,MAAM,CAAC,SAAU,SAAU,OAAQ,OAAO,EAAY,QAAQ,EAC/E,QAAS,EAAA,KAAK,OAAsB,CACtC,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAA,EAAA,QAAA,CAAa,EACb,GAAA,EAAA,EAAA,QAAA,CAA8B,EAE9B,EAAa,EAAG,YAGtB,EAAA,EAAA,KAAA,CAAK,CAAE,KAAM,CAAE,YAAa,EAAM,WAAY,CAAE,CAAC,GAEjD,EAAA,EAAA,QAAA,CAAQ,EAAA,SAAU,CAChB,UAAA,EAAA,EAAA,SAAA,KAAyB,EAAQ,EAAM,SAAS,KAAM,EACtD,KAAM,EAAM,KACZ,YAAA,EAAA,EAAA,SAAA,KAA2B,EAAM,WAAW,OAAS,QAAQ,EAC7D,QAAS,EAAM,OACjB,CAAC,EAED,SAAS,EAAa,EAAU,CAC9B,IAAM,EAAc,EACd,EAAS,GAAY,cAAc,MAAM,EAE/C,GAAI,CAAC,EAAQ,OAEb,EAAE,eAAe,EAEjB,IAAM,EAAW,IAAI,SAAS,CAAM,EAEpC,EAAK,SAAU,CAAE,WAAU,cAAe,CAAY,CAAC,CACzD,CAEA,SAAS,EAAY,EAAU,CAC7B,EAAK,QAAS,CAAE,cAAe,CAAE,CAAC,CACpC,CAEA,MAAO,GAAA,IAAI;;;uBAGQ,EAAM,WAAW;8BACP,EAAM,SAAS,MAAQ,OAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;KAI5B,EACA,OAAQ,CAAE,eAAgB,EAAM,EAChC,OAAQ,CAAC,EAAA,OAAe,CAC1B,CAAC"}

package/dist/form.js

@@ -1,48 +1,51 @@
 import { FORM_CTX as e } from "./inputs/shared/form-context.js";
-import t from "./inputs/form/form.css?inline.js";
-import { define as n, html as r, prop as i } from "@vielzeug/ore";
-import { computed as a } from "@vielzeug/ripple";
+import t from "./inputs/form/form.css.js";
+import { bind as n, define as r, getHost as i, html as a, prop as o, provide as s, useEmit as c } from "@vielzeug/ore";
+import { computed as l } from "@vielzeug/ripple";
 //#region src/inputs/form/form.ts
-var o = "ore-form";
-n(o, {
+var u = "ore-form";
+r(u, {
 	props: {
-		disabled: i.bool(!1),
-		novalidate: i.bool(!1),
-		orientation: i.oneOf(["horizontal", "vertical"], "vertical"),
-		size: i.string(),
-		validateOn: i.oneOf([
+		disabled: o.bool(!1),
+		novalidate: o.bool(!1),
+		orientation: o.oneOf(["horizontal", "vertical"], "vertical"),
+		size: o.string(),
+		validateOn: o.oneOf([
 			"submit",
 			"change",
 			"blur",
 			"input"
 		], "submit"),
-		variant: i.string()
+		variant: o.string()
 	},
-	setup(t, { bind: n, el: i, emit: o, provide: s }) {
-		let c = i.shadowRoot;
+	setup(t) {
+		let r = i(), o = c(), u = r.shadowRoot;
 		n({ attr: { orientation: t.orientation } }), s(e, {
-			disabled: a(() => !!t.disabled.value),
+			disabled: l(() => !!t.disabled.value),
 			size: t.size,
-			validateOn: a(() => t.validateOn.value ?? "submit"),
+			validateOn: l(() => t.validateOn.value ?? "submit"),
 			variant: t.variant
 		});
-		function l(e) {
-			let t = e, n = c?.querySelector("form");
-			n && (e.preventDefault(), o("submit", {
-				formData: new FormData(n),
+		function d(e) {
+			let t = e, n = u?.querySelector("form");
+			if (!n) return;
+			e.preventDefault();
+			let r = new FormData(n);
+			o("submit", {
+				formData: r,
 				originalEvent: t
-			}));
+			});
 		}
-		function u(e) {
+		function f(e) {
 			o("reset", { originalEvent: e });
 		}
-		return r`
+		return a`
       <form
         part="form"
         :novalidate="${t.novalidate}"
         :aria-disabled="${() => t.disabled.value ? "true" : null}"
-        @submit="${l}"
-        @reset="${u}">
+        @submit="${d}"
+        @reset="${f}">
         <slot></slot>
       </form>
     `;
@@ -51,6 +54,6 @@ n(o, {
 	styles: [t]
 });
 //#endregion
-export { o as FORM_TAG };
+export { u as FORM_TAG };
 
 //# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ValidationTrigger } from '../../headless';\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './form.css?inline';\n\n/** Form component properties */\nexport type OreFormProps = {\n  /** Disabled state */\n  disabled?: boolean;\n  /** No validate */\n  novalidate?: boolean;\n  /** Layout orientation for child fields */\n  orientation?: 'horizontal' | 'vertical';\n  /** Form size preset */\n  size?: ComponentSize;\n  /** Validate on: 'submit' | 'change' | 'blur' | 'input' */\n  validateOn?: ValidationTrigger;\n  /** Form visual variant — propagated to all child form fields via FormContext */\n  variant?: VisualVariant;\n};\n\n/** Events emitted by the form component */\nexport type OreFormEvents = {\n  /** Emitted when the form is reset */\n  reset: { originalEvent: Event };\n  /** Emitted when the form is submitted */\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\n/**\n * A wrapper for standard HTML form that provides context to child ore-* form fields.\n * Manages shared state like size, variant, and validation timing.\n *\n * @element ore-form\n *\n * @attr {boolean} disabled - Disable all child fields\n * @attr {boolean} novalidate - Disable native browser validation\n * @attr {string} validate-on - When to trigger validation: 'submit' | 'change' | 'blur' | 'input' (default: 'submit')\n *\n * @fires submit - detail: { formData, originalEvent }\n * @fires reset - detail: { originalEvent }\n *\n * @slot - Form controls and content rendered inside the form element.\n * @cssprop --form-gap - Gap between form control rows\n * @part form - Form root element.\n * @example\n * ```html\n * <ore-form @submit=${(e) => console.log(e.detail.formData)}>\n *   <ore-input name=\"username\" label=\"Username\" required></ore-input>\n *   <ore-select name=\"role\" label=\"Role\">\n *     <option value=\"user\">User</option>\n *     <option value=\"admin\">Admin</option>\n *   </ore-select>\n *   <ore-button type=\"submit\">Submit</ore-button>\n * </ore-form>\n * ```\n */\nexport const FORM_TAG = 'ore-form' as const;\ndefine<OreFormProps, OreFormEvents>(FORM_TAG, {\n  props: {\n    disabled: prop.bool(false),\n    novalidate: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    size: prop.string<ComponentSize>(),\n    validateOn: prop.oneOf(['submit', 'change', 'blur', 'input'] as const, 'submit'),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props, { bind, el, emit, provide }) {\n    const shadowRoot = el.shadowRoot;\n\n    // Reflect orientation to host so CSS and tests can read it\n    bind({ attr: { orientation: props.orientation } });\n    // Provide context to all child ore-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${props.novalidate}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n});\n"],"mappings":";;;;;AA6DA,IAAa,IAAW;AACxB,EAAoC,GAAU;CAC5C,OAAO;EACL,UAAU,EAAK,KAAK,EAAK;EACzB,YAAY,EAAK,KAAK,EAAK;EAC3B,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,UAAU;EACvE,MAAM,EAAK,OAAsB;EACjC,YAAY,EAAK,MAAM;GAAC;GAAU;GAAU;GAAQ;EAAO,GAAY,QAAQ;EAC/E,SAAS,EAAK,OAAsB;CACtC;CACA,MAAM,GAAO,EAAE,SAAM,OAAI,SAAM,cAAW;EACxC,IAAM,IAAa,EAAG;EAKtB,AAFA,EAAK,EAAE,MAAM,EAAE,aAAa,EAAM,YAAY,EAAE,CAAC,GAEjD,EAAQ,GAAU;GAChB,UAAU,QAAe,EAAQ,EAAM,SAAS,KAAM;GACtD,MAAM,EAAM;GACZ,YAAY,QAAe,EAAM,WAAW,SAAS,QAAQ;GAC7D,SAAS,EAAM;EACjB,CAAC;EAED,SAAS,EAAa,GAAU;GAC9B,IAAM,IAAc,GACd,IAAS,GAAY,cAAc,MAAM;GAE1C,MAEL,EAAE,eAAe,GAIjB,EAAK,UAAU;IAAE,UAAA,IAFI,SAAS,CAEb;IAAU,eAAe;GAAY,CAAC;EACzD;EAEA,SAAS,EAAY,GAAU;GAC7B,EAAK,SAAS,EAAE,eAAe,EAAE,CAAC;EACpC;EAEA,OAAO,CAAI;;;uBAGQ,EAAM,WAAW;gCACP,EAAM,SAAS,QAAQ,SAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;;CAI5B;CACA,QAAQ,EAAE,gBAAgB,GAAM;CAChC,QAAQ,CAAC,CAAe;AAC1B,CAAC"}
+{"version":3,"file":"form.js","names":[],"sources":["../src/inputs/form/form.ts"],"sourcesContent":["import { define, html, prop, bind, getHost, provide, useEmit } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport type { ValidationTrigger } from '../../headless';\nimport type { ComponentSize, VisualVariant } from '../../types';\n\nimport { FORM_CTX } from '../shared/form-context';\nimport componentStyles from './form.css?inline';\n\n/** Form component properties */\nexport type OreFormProps = {\n  /** Disabled state */\n  disabled?: boolean;\n  /** No validate */\n  novalidate?: boolean;\n  /** Layout orientation for child fields */\n  orientation?: 'horizontal' | 'vertical';\n  /** Form size preset */\n  size?: ComponentSize;\n  /** Validate on: 'submit' | 'change' | 'blur' | 'input' */\n  validateOn?: ValidationTrigger;\n  /** Form visual variant — propagated to all child form fields via FormContext */\n  variant?: VisualVariant;\n};\n\n/** Events emitted by the form component */\nexport type OreFormEvents = {\n  /** Emitted when the form is reset */\n  reset: { originalEvent: Event };\n  /** Emitted when the form is submitted */\n  submit: { formData: FormData; originalEvent: SubmitEvent };\n};\n\n/**\n * A wrapper for standard HTML form that provides context to child ore-* form fields.\n * Manages shared state like size, variant, and validation timing.\n *\n * @element ore-form\n *\n * @attr {boolean} disabled - Disable all child fields\n * @attr {boolean} novalidate - Disable native browser validation\n * @attr {string} validate-on - When to trigger validation: 'submit' | 'change' | 'blur' | 'input' (default: 'submit')\n *\n * @fires submit - detail: { formData, originalEvent }\n * @fires reset - detail: { originalEvent }\n *\n * @slot - Form controls and content rendered inside the form element.\n * @cssprop --form-gap - Gap between form control rows\n * @part form - Form root element.\n * @example\n * ```html\n * <ore-form @submit=${(e) => console.log(e.detail.formData)}>\n *   <ore-input name=\"username\" label=\"Username\" required></ore-input>\n *   <ore-select name=\"role\" label=\"Role\">\n *     <option value=\"user\">User</option>\n *     <option value=\"admin\">Admin</option>\n *   </ore-select>\n *   <ore-button type=\"submit\">Submit</ore-button>\n * </ore-form>\n * ```\n */\nexport const FORM_TAG = 'ore-form' as const;\ndefine<OreFormProps>(FORM_TAG, {\n  props: {\n    disabled: prop.bool(false),\n    novalidate: prop.bool(false),\n    orientation: prop.oneOf(['horizontal', 'vertical'] as const, 'vertical'),\n    size: prop.string<ComponentSize>(),\n    validateOn: prop.oneOf(['submit', 'change', 'blur', 'input'] as const, 'submit'),\n    variant: prop.string<VisualVariant>(),\n  },\n  setup(props) {\n    const el = getHost();\n    const emit = useEmit<OreFormEvents>();\n\n    const shadowRoot = el.shadowRoot;\n\n    // Reflect orientation to host so CSS and tests can read it\n    bind({ attr: { orientation: props.orientation } });\n    // Provide context to all child ore-* form fields\n    provide(FORM_CTX, {\n      disabled: computed(() => Boolean(props.disabled.value)),\n      size: props.size,\n      validateOn: computed(() => props.validateOn.value ?? 'submit'),\n      variant: props.variant,\n    });\n\n    function handleSubmit(e: Event) {\n      const submitEvent = e as SubmitEvent;\n      const formEl = shadowRoot?.querySelector('form');\n\n      if (!formEl) return;\n\n      e.preventDefault();\n\n      const formData = new FormData(formEl);\n\n      emit('submit', { formData, originalEvent: submitEvent });\n    }\n\n    function handleReset(e: Event) {\n      emit('reset', { originalEvent: e });\n    }\n\n    return html`\n      <form\n        part=\"form\"\n        :novalidate=\"${props.novalidate}\"\n        :aria-disabled=\"${() => (props.disabled.value ? 'true' : null)}\"\n        @submit=\"${handleSubmit}\"\n        @reset=\"${handleReset}\">\n        <slot></slot>\n      </form>\n    `;\n  },\n  shadow: { delegatesFocus: false },\n  styles: [componentStyles],\n});\n"],"mappings":";;;;;AA6DA,IAAa,IAAW;AACxB,EAAqB,GAAU;CAC7B,OAAO;EACL,UAAU,EAAK,KAAK,EAAK;EACzB,YAAY,EAAK,KAAK,EAAK;EAC3B,aAAa,EAAK,MAAM,CAAC,cAAc,UAAU,GAAY,UAAU;EACvE,MAAM,EAAK,OAAsB;EACjC,YAAY,EAAK,MAAM;GAAC;GAAU;GAAU;GAAQ;EAAO,GAAY,QAAQ;EAC/E,SAAS,EAAK,OAAsB;CACtC;CACA,MAAM,GAAO;EACX,IAAM,IAAK,EAAQ,GACb,IAAO,EAAuB,GAE9B,IAAa,EAAG;EAKtB,AAFA,EAAK,EAAE,MAAM,EAAE,aAAa,EAAM,YAAY,EAAE,CAAC,GAEjD,EAAQ,GAAU;GAChB,UAAU,QAAe,EAAQ,EAAM,SAAS,KAAM;GACtD,MAAM,EAAM;GACZ,YAAY,QAAe,EAAM,WAAW,SAAS,QAAQ;GAC7D,SAAS,EAAM;EACjB,CAAC;EAED,SAAS,EAAa,GAAU;GAC9B,IAAM,IAAc,GACd,IAAS,GAAY,cAAc,MAAM;GAE/C,IAAI,CAAC,GAAQ;GAEb,EAAE,eAAe;GAEjB,IAAM,IAAW,IAAI,SAAS,CAAM;GAEpC,EAAK,UAAU;IAAE;IAAU,eAAe;GAAY,CAAC;EACzD;EAEA,SAAS,EAAY,GAAU;GAC7B,EAAK,SAAS,EAAE,eAAe,EAAE,CAAC;EACpC;EAEA,OAAO,CAAI;;;uBAGQ,EAAM,WAAW;gCACP,EAAM,SAAS,QAAQ,SAAS,KAAM;mBACpD,EAAa;kBACd,EAAY;;;;CAI5B;CACA,QAAQ,EAAE,gBAAgB,GAAM;CAChC,QAAQ,CAAC,CAAe;AAC1B,CAAC"}

package/dist/grid-item.cjs

@@ -1,2 +1,2 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./layout/grid-item/grid-item.css?inline.cjs");let t=require("@vielzeug/ore"),n=require("@vielzeug/ripple");var r=`ore-grid-item`;(0,t.define)(r,{props:{align:t.prop.string(),area:t.prop.string(),col:t.prop.string(),colSpan:t.prop.string(),justify:t.prop.string(),row:t.prop.string(),rowSpan:t.prop.string()},setup(e,{bind:r,el:i}){let a=(0,n.computed)(()=>{let t=e.col.value,n=e.colSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)}),o=(0,n.computed)(()=>{let t=e.row.value,n=e.rowSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)});return r({style:{gridArea:e.area,gridColumn:a,gridRow:o}}),t.html`<slot></slot>`},styles:[e.default]}),exports.GRID_ITEM_TAG=r;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./layout/grid-item/grid-item.css.cjs");let t=require("@vielzeug/ore"),n=require("@vielzeug/ripple");var r=`ore-grid-item`;(0,t.define)(r,{props:{align:t.prop.string(),area:t.prop.string(),col:t.prop.string(),colSpan:t.prop.string(),justify:t.prop.string(),row:t.prop.string(),rowSpan:t.prop.string()},setup(e){let r=(0,n.computed)(()=>{let t=e.col.value,n=e.colSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)}),i=(0,n.computed)(()=>{let t=e.row.value,n=e.rowSpan.value;return t||(n===`full`?`1 / -1`:n?`span ${n}`:``)});return(0,t.bind)({style:{gridArea:e.area,gridColumn:r,gridRow:i}}),t.html`<slot></slot>`},styles:[e.default]}),exports.GRID_ITEM_TAG=r;
 //# sourceMappingURL=grid-item.cjs.map