@vielzeug/refine 1.1.1

package/dist/file-input.js

@@ -0,0 +1,209 @@
+import { sizeVariantMixin as e } from "./styles/mixins/shape.css.js";
+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";
+//#region src/inputs/file-input/file-input.ts
+var b = (e) => {
+	if (e === 0) return "0 B";
+	let t = 1024, n = [
+		"B",
+		"KB",
+		"MB",
+		"GB",
+		"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, {
+	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()
+	},
+	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,
+			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
+		});
+		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 k = c("file-input"), A = `label-${k}`, j = `helper-${k}`, M = `error-${k}`, N = p(), P = p(), F = h(() => {
+			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;
+			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 L(e, t) {
+			S.value = S.value.filter((t) => t !== e), n("remove", {
+				file: e,
+				files: S.value,
+				originalEvent: t,
+				value: S.value
+			}), n("change", {
+				files: S.value,
+				originalEvent: t,
+				value: S.value
+			});
+		}
+		return s(P, (t) => {
+			e.ref.value?.(t);
+			let n = _(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,
+				onPress: () => {
+					e.click();
+				}
+			});
+			l(e, "change", (e) => {
+				let t = e.target;
+				t.files?.length && I(Array.from(t.files), e), t.value = "";
+			}), l(t, "click", (t) => {
+				if (t.target !== e) {
+					if (n) {
+						n = !1;
+						return;
+					}
+					T.value || e.click();
+				}
+			}), l(t, "keydown", (e) => {
+				n = a.handleKeydown(e) && e.key === "Enter";
+			});
+			let o = v({
+				disabled: T.value,
+				element: t,
+				onDrop: (e) => I(e),
+				onHoverChange: (e) => {
+					C.value = e;
+				}
+			});
+			r(() => o.dispose());
+		}), u`
+      <div class="file-input-wrapper" part="wrapper">
+        <label class="label-outside" id="${A}" part="label" ?hidden=${() => !e.label.value}
+          >${e.label}</label
+        >
+        <div
+          class="dropzone"
+          part="dropzone"
+          ref=${N}
+          role="button"
+          :tabindex="${() => T.value ? "-1" : "0"}"
+          :aria-disabled="${() => String(T.value)}"
+          :aria-label="${() => e.label.value ? null : "File upload drop zone"}"
+          :aria-labelledby="${() => e.label.value ? A : null}"
+          aria-describedby="${j}">
+          <input
+            type="file"
+            ref=${P}
+            part="input"
+            id="${k}"
+            :accept="${e.accept}"
+            ?multiple="${e.multiple}"
+            ?required="${e.required}"
+            ?disabled="${T}"
+            :name="${e.name}"
+            hidden
+            inert
+            tabindex="-1" />
+          <div class="dropzone-content">
+            <span class="dropzone-icon" aria-hidden="true">
+              <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>
+          </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>
+        <div class="helper-text" id="${j}" part="helper" ?hidden=${() => O.value || !e.helper.value}>
+          ${e.helper}
+        </div>
+        <div
+          class="helper-text helper-text-error"
+          id="${M}"
+          role="alert"
+          part="error"
+          ?hidden=${() => !O.value}>
+          ${() => e.error.value ?? ""}
+        </div>
+      </div>
+    `;
+	},
+	shadow: { delegatesFocus: !0 },
+	styles: [
+		...n,
+		e(r),
+		t(".dropzone"),
+		s
+	]
+});
+//#endregion
+export { S as FILE_INPUT_TAG };
+
+//# sourceMappingURL=file-input.js.map

package/dist/file-input.js.map

@@ -0,0 +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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"}

package/dist/form.cjs

@@ -0,0 +1,11 @@
+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`
+      <form
+        part="form"
+        :novalidate="${t.novalidate}"
+        :aria-disabled="${()=>t.disabled.value?`true`:null}"
+        @submit="${l}"
+        @reset="${u}">
+        <slot></slot>
+      </form>
+    `},shadow:{delegatesFocus:!1},styles:[t.default]}),exports.FORM_TAG=i;
+//# sourceMappingURL=form.cjs.map

package/dist/form.cjs.map

@@ -0,0 +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"}

package/dist/form.js

@@ -0,0 +1,56 @@
+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";
+//#region src/inputs/form/form.ts
+var o = "ore-form";
+n(o, {
+	props: {
+		disabled: i.bool(!1),
+		novalidate: i.bool(!1),
+		orientation: i.oneOf(["horizontal", "vertical"], "vertical"),
+		size: i.string(),
+		validateOn: i.oneOf([
+			"submit",
+			"change",
+			"blur",
+			"input"
+		], "submit"),
+		variant: i.string()
+	},
+	setup(t, { bind: n, el: i, emit: o, provide: s }) {
+		let c = i.shadowRoot;
+		n({ attr: { orientation: t.orientation } }), s(e, {
+			disabled: a(() => !!t.disabled.value),
+			size: t.size,
+			validateOn: a(() => 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 r`
+      <form
+        part="form"
+        :novalidate="${t.novalidate}"
+        :aria-disabled="${() => t.disabled.value ? "true" : null}"
+        @submit="${l}"
+        @reset="${u}">
+        <slot></slot>
+      </form>
+    `;
+	},
+	shadow: { delegatesFocus: !1 },
+	styles: [t]
+});
+//#endregion
+export { o as FORM_TAG };
+
+//# sourceMappingURL=form.js.map

package/dist/form.js.map

@@ -0,0 +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"}

package/dist/grid-item.cjs

@@ -0,0 +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;
+//# sourceMappingURL=grid-item.cjs.map

package/dist/grid-item.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.cjs","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type OreGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Named grid area to place the item into. */\n  area?: string;\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * ore-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element ore-grid-item\n *\n * @attr {string} area - CSS grid-area value for named-area placement\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <ore-grid-item col-span=\"2\">Wide</ore-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <ore-grid-item col-span=\"full\">Banner</ore-grid-item>\n *\n * @example\n * <!-- Named area placement -->\n * <ore-grid-item area=\"sidebar\">Nav</ore-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <ore-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</ore-grid-item>\n */\nexport const GRID_ITEM_TAG = 'ore-grid-item' as const;\ndefine<OreGridItemProps>(GRID_ITEM_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    area: prop.string(),\n    col: prop.string(),\n    colSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    row: prop.string(),\n    rowSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | 'full'>(),\n  },\n  setup(props, { bind, el: _el }) {\n    const gridColumn = computed(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) return col;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    const gridRow = computed(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) return row;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    bind({\n      style: {\n        gridArea: props.area,\n        gridColumn,\n        gridRow,\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":"+LA0DA,IAAa,EAAgB,6BACJ,EAAe,CACtC,MAAO,CACL,MAAO,EAAA,KAAK,OAA+C,EAC3D,KAAM,EAAA,KAAK,OAAO,EAClB,IAAK,EAAA,KAAK,OAAO,EACjB,QAAS,EAAA,KAAK,OAA0F,EACxG,QAAS,EAAA,KAAK,OAA+C,EAC7D,IAAK,EAAA,KAAK,OAAO,EACjB,QAAS,EAAA,KAAK,OAAmD,CACnE,EACA,MAAM,EAAO,CAAE,OAAM,GAAI,GAAO,CAC9B,IAAM,GAAA,EAAA,EAAA,SAAA,KAA4B,CAChC,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAEK,GAAA,EAAA,EAAA,SAAA,KAAyB,CAC7B,IAAM,EAAM,EAAM,IAAI,MAChB,EAAO,EAAM,QAAQ,MAQ3B,OANI,IAEA,IAAS,OAAe,SAExB,EAAa,QAAQ,IAElB,GACT,CAAC,EAUD,OARA,EAAK,CACH,MAAO,CACL,SAAU,EAAM,KAChB,aACA,SACF,CACF,CAAC,EAEM,EAAA,IAAI,eACb,EACA,OAAQ,CAAC,EAAA,OAAM,CACjB,CAAC"}

package/dist/grid-item.js

@@ -0,0 +1,35 @@
+import e from "./layout/grid-item/grid-item.css?inline.js";
+import { define as t, html as n, prop as r } from "@vielzeug/ore";
+import { computed as i } from "@vielzeug/ripple";
+//#region src/layout/grid-item/grid-item.ts
+var a = "ore-grid-item";
+t(a, {
+	props: {
+		align: r.string(),
+		area: r.string(),
+		col: r.string(),
+		colSpan: r.string(),
+		justify: r.string(),
+		row: r.string(),
+		rowSpan: r.string()
+	},
+	setup(e, { bind: t, el: r }) {
+		let a = i(() => {
+			let t = e.col.value, n = e.colSpan.value;
+			return t || (n === "full" ? "1 / -1" : n ? `span ${n}` : "");
+		}), o = i(() => {
+			let t = e.row.value, n = e.rowSpan.value;
+			return t || (n === "full" ? "1 / -1" : n ? `span ${n}` : "");
+		});
+		return t({ style: {
+			gridArea: e.area,
+			gridColumn: a,
+			gridRow: o
+		} }), n`<slot></slot>`;
+	},
+	styles: [e]
+});
+//#endregion
+export { a as GRID_ITEM_TAG };
+
+//# sourceMappingURL=grid-item.js.map

package/dist/grid-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid-item.js","names":[],"sources":["../src/layout/grid-item/grid-item.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { computed } from '@vielzeug/ripple';\n\nimport styles from './grid-item.css?inline';\n\n/** Grid item component properties */\nexport type OreGridItemProps = {\n  /** Align self vertically within the grid cell */\n  align?: 'start' | 'center' | 'end' | 'stretch';\n  /** Named grid area to place the item into. */\n  area?: string;\n  /** Explicit grid-column value — overrides col-span (e.g. '2 / 5', 'span 3', '1 / -1'). */\n  col?: string;\n  /** Span N columns. Use 'full' to span all columns (1 / -1). */\n  colSpan?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full';\n  /** Justify self horizontally within the grid cell */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Explicit grid-row value — overrides row-span (e.g. '1 / 3', 'span 2'). */\n  row?: string;\n  /** Span N rows. Use 'full' to span all rows (1 / -1). */\n  rowSpan?: '1' | '2' | '3' | '4' | '5' | '6' | 'full';\n};\n\n/**\n * ore-grid-item — A grid cell with declarative placement and span control.\n *\n * Use `col-span` / `row-span` for the common case of spanning columns/rows.\n * Use `col` / `row` for full CSS grid-column / grid-row shorthand power\n * (e.g. explicit placement, mixed span + start, negative lines).\n *\n * @element ore-grid-item\n *\n * @attr {string} area - CSS grid-area value for named-area placement\n * @attr {string} col-span - Columns to span: '1'–'12' | 'full'\n * @attr {string} row-span - Rows to span: '1'–'6' | 'full'\n * @attr {string} col - CSS grid-column value (overrides col-span)\n * @attr {string} row - CSS grid-row value (overrides row-span)\n * @attr {string} align - align-self: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} justify - justify-self: 'start' | 'center' | 'end' | 'stretch'\n *\n * @slot - Grid item content\n *\n * @example\n * <!-- Span 2 columns -->\n * <ore-grid-item col-span=\"2\">Wide</ore-grid-item>\n *\n * @example\n * <!-- Full-width row -->\n * <ore-grid-item col-span=\"full\">Banner</ore-grid-item>\n *\n * @example\n * <!-- Named area placement -->\n * <ore-grid-item area=\"sidebar\">Nav</ore-grid-item>\n *\n * @example\n * <!-- Explicit placement -->\n * <ore-grid-item col=\"2 / 5\" row=\"1 / 3\">Placed</ore-grid-item>\n */\nexport const GRID_ITEM_TAG = 'ore-grid-item' as const;\ndefine<OreGridItemProps>(GRID_ITEM_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    area: prop.string(),\n    col: prop.string(),\n    colSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'full'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    row: prop.string(),\n    rowSpan: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | 'full'>(),\n  },\n  setup(props, { bind, el: _el }) {\n    const gridColumn = computed(() => {\n      const col = props.col.value;\n      const span = props.colSpan.value;\n\n      if (col) return col;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    const gridRow = computed(() => {\n      const row = props.row.value;\n      const span = props.rowSpan.value;\n\n      if (row) return row;\n\n      if (span === 'full') return '1 / -1';\n\n      if (span) return `span ${span}`;\n\n      return '';\n    });\n\n    bind({\n      style: {\n        gridArea: props.area,\n        gridColumn,\n        gridRow,\n      },\n    });\n\n    return html`<slot></slot>`;\n  },\n  styles: [styles],\n});\n"],"mappings":";;;;AA0DA,IAAa,IAAgB;AAC7B,EAAyB,GAAe;CACtC,OAAO;EACL,OAAO,EAAK,OAA+C;EAC3D,MAAM,EAAK,OAAO;EAClB,KAAK,EAAK,OAAO;EACjB,SAAS,EAAK,OAA0F;EACxG,SAAS,EAAK,OAA+C;EAC7D,KAAK,EAAK,OAAO;EACjB,SAAS,EAAK,OAAmD;CACnE;CACA,MAAM,GAAO,EAAE,SAAM,IAAI,KAAO;EAC9B,IAAM,IAAa,QAAe;GAChC,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;GAQ3B,OANI,MAEA,MAAS,SAAe,WAExB,IAAa,QAAQ,MAElB;EACT,CAAC,GAEK,IAAU,QAAe;GAC7B,IAAM,IAAM,EAAM,IAAI,OAChB,IAAO,EAAM,QAAQ;GAQ3B,OANI,MAEA,MAAS,SAAe,WAExB,IAAa,QAAQ,MAElB;EACT,CAAC;EAUD,OARA,EAAK,EACH,OAAO;GACL,UAAU,EAAM;GAChB;GACA;EACF,EACF,CAAC,GAEM,CAAI;CACb;CACA,QAAQ,CAAC,CAAM;AACjB,CAAC"}

package/dist/grid.cjs

@@ -0,0 +1,2 @@
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./ore/dist/observers/resize-observe.cjs");require("./ore/dist/observers.cjs");const t=require("./layout/grid/grid.css?inline.cjs");let n=require("@vielzeug/ore");var r=[[`cols2xl`,`--size-screen-2xl`],[`colsXl`,`--size-screen-xl`],[`colsLg`,`--size-screen-lg`],[`colsMd`,`--size-screen-md`],[`colsSm`,`--size-screen-sm`]],i=[[`areas2xl`,`--size-screen-2xl`],[`areasXl`,`--size-screen-xl`],[`areasLg`,`--size-screen-lg`],[`areasMd`,`--size-screen-md`],[`areasSm`,`--size-screen-sm`]],a=(e,t,n)=>{let r=getComputedStyle(e).getPropertyValue(t).trim(),i=Number.parseFloat(r);return Number.isFinite(i)?i:n},o={"--size-screen-2xl":1536,"--size-screen-lg":1024,"--size-screen-md":768,"--size-screen-sm":640,"--size-screen-xl":1280},s=`ore-grid`;(0,n.define)(s,{props:{align:n.prop.string(),areas:n.prop.string(),areas2xl:n.prop.string(),areasLg:n.prop.string(),areasMd:n.prop.string(),areasSm:n.prop.string(),areasXl:n.prop.string(),cols:n.prop.string(),cols2xl:n.prop.string(),colsLg:n.prop.string(),colsMd:n.prop.string(),colsSm:n.prop.string(),colsXl:n.prop.string(),flow:n.prop.string(),fullwidth:n.prop.bool(!1),gap:n.prop.string(),justify:n.prop.string(),minColWidth:n.prop.string(),responsive:n.prop.bool(!1),rows:n.prop.string()},setup(t,{el:s,onMounted:c,watch:l}){let u=(e,t,n)=>e===`auto`||!e&&t?`repeat(auto-fit, minmax(${n||`250px`}, 1fr))`:e?`repeat(${e}, 1fr)`:null,d=()=>{let e=s.offsetWidth,n=!!t.responsive.value,i=t.minColWidth.value??``,c;for(let[n,i]of r)if(e>=a(s,i,o[i])&&t[n].value){c=t[n].value;break}c||=t.cols.value||void 0;let l=u(c,n,i);l?s.style.setProperty(`--_cols`,l):s.style.removeProperty(`--_cols`)};l(()=>{t.cols.value,t.colsSm.value,t.colsMd.value,t.colsLg.value,t.colsXl.value,t.cols2xl.value,t.responsive.value,t.minColWidth.value,d()});let f=()=>{let e=s.offsetWidth,n=``;for(let[r,c]of i)if(e>=a(s,c,o[c])&&t[r].value){n=t[r].value;break}n||=t.areas.value||``,n?s.style.setProperty(`grid-template-areas`,n):s.style.removeProperty(`grid-template-areas`)};return l(()=>{let e=t.rows.value;e&&e!==`auto`?s.style.setProperty(`--_rows`,`repeat(${e}, 1fr)`):s.style.removeProperty(`--_rows`)}),l(()=>{t.areas.value,t.areasSm.value,t.areasMd.value,t.areasLg.value,t.areasXl.value,t.areas2xl.value,f()}),c(()=>{let t=e.resizeObserver(s);l(()=>{t.value,d(),f()})}),n.html`<slot></slot>`},styles:[t.default]}),exports.GRID_TAG=s;
+//# sourceMappingURL=grid.cjs.map

package/dist/grid.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.cjs","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { resizeObserver } from '@vielzeug/ore/observers';\n\nimport styles from './grid.css?inline';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type OreGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * ore-grid — Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element ore-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <ore-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </ore-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <ore-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </ore-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <ore-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </ore-grid>\n */\nexport const GRID_TAG = 'ore-grid' as const;\ndefine<OreGridProps>(GRID_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch' | 'baseline'>(),\n    areas: prop.string(),\n    areas2xl: prop.string(),\n    areasLg: prop.string(),\n    areasMd: prop.string(),\n    areasSm: prop.string(),\n    areasXl: prop.string(),\n    cols: prop.string<ColCount>(),\n    cols2xl: prop.string<ColCount>(),\n    colsLg: prop.string<ColCount>(),\n    colsMd: prop.string<ColCount>(),\n    colsSm: prop.string<ColCount>(),\n    colsXl: prop.string<ColCount>(),\n    flow: prop.string<'row' | 'column' | 'row-dense' | 'column-dense'>(),\n    fullwidth: prop.bool(false),\n    gap: prop.string<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    minColWidth: prop.string(),\n    responsive: prop.bool(false),\n    rows: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto'>(),\n  },\n\n  setup(props, { el, onMounted, watch }) {\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = el.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      if (colsValue) {\n        el.style.setProperty('--_cols', colsValue);\n      } else {\n        el.style.removeProperty('--_cols');\n      }\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    watch(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = el.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n\n      if (active) {\n        el.style.setProperty('grid-template-areas', active);\n      } else {\n        el.style.removeProperty('grid-template-areas');\n      }\n    };\n\n    // Rows\n    watch(() => {\n      const rows = props.rows.value;\n\n      if (rows && rows !== 'auto') {\n        el.style.setProperty('--_rows', `repeat(${rows}, 1fr)`);\n      } else {\n        el.style.removeProperty('--_rows');\n      }\n    });\n    // Grid template areas (responsive)\n    watch(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMounted(() => {\n      const size = resizeObserver(el);\n\n      watch(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n\n    return html`<slot></slot>`;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/grid.js

@@ -0,0 +1,90 @@
+import { resizeObserver as e } from "./ore/dist/observers/resize-observe.js";
+import "./ore/dist/observers.js";
+import t from "./layout/grid/grid.css?inline.js";
+import { define as n, html as r, prop as i } from "@vielzeug/ore";
+//#region src/layout/grid/grid.ts
+var a = [
+	["cols2xl", "--size-screen-2xl"],
+	["colsXl", "--size-screen-xl"],
+	["colsLg", "--size-screen-lg"],
+	["colsMd", "--size-screen-md"],
+	["colsSm", "--size-screen-sm"]
+], o = [
+	["areas2xl", "--size-screen-2xl"],
+	["areasXl", "--size-screen-xl"],
+	["areasLg", "--size-screen-lg"],
+	["areasMd", "--size-screen-md"],
+	["areasSm", "--size-screen-sm"]
+], s = (e, t, n) => {
+	let r = getComputedStyle(e).getPropertyValue(t).trim(), i = Number.parseFloat(r);
+	return Number.isFinite(i) ? i : n;
+}, c = {
+	"--size-screen-2xl": 1536,
+	"--size-screen-lg": 1024,
+	"--size-screen-md": 768,
+	"--size-screen-sm": 640,
+	"--size-screen-xl": 1280
+}, l = "ore-grid";
+n(l, {
+	props: {
+		align: i.string(),
+		areas: i.string(),
+		areas2xl: i.string(),
+		areasLg: i.string(),
+		areasMd: i.string(),
+		areasSm: i.string(),
+		areasXl: i.string(),
+		cols: i.string(),
+		cols2xl: i.string(),
+		colsLg: i.string(),
+		colsMd: i.string(),
+		colsSm: i.string(),
+		colsXl: i.string(),
+		flow: i.string(),
+		fullwidth: i.bool(!1),
+		gap: i.string(),
+		justify: i.string(),
+		minColWidth: i.string(),
+		responsive: i.bool(!1),
+		rows: i.string()
+	},
+	setup(t, { el: n, onMounted: i, watch: l }) {
+		let u = (e, t, n) => e === "auto" || !e && t ? `repeat(auto-fit, minmax(${n || "250px"}, 1fr))` : e ? `repeat(${e}, 1fr)` : null, d = () => {
+			let e = n.offsetWidth, r = !!t.responsive.value, i = t.minColWidth.value ?? "", o;
+			for (let [r, i] of a) if (e >= s(n, i, c[i]) && t[r].value) {
+				o = t[r].value;
+				break;
+			}
+			o ||= t.cols.value || void 0;
+			let l = u(o, r, i);
+			l ? n.style.setProperty("--_cols", l) : n.style.removeProperty("--_cols");
+		};
+		l(() => {
+			t.cols.value, t.colsSm.value, t.colsMd.value, t.colsLg.value, t.colsXl.value, t.cols2xl.value, t.responsive.value, t.minColWidth.value, d();
+		});
+		let f = () => {
+			let e = n.offsetWidth, r = "";
+			for (let [i, a] of o) if (e >= s(n, a, c[a]) && t[i].value) {
+				r = t[i].value;
+				break;
+			}
+			r ||= t.areas.value || "", r ? n.style.setProperty("grid-template-areas", r) : n.style.removeProperty("grid-template-areas");
+		};
+		return l(() => {
+			let e = t.rows.value;
+			e && e !== "auto" ? n.style.setProperty("--_rows", `repeat(${e}, 1fr)`) : n.style.removeProperty("--_rows");
+		}), l(() => {
+			t.areas.value, t.areasSm.value, t.areasMd.value, t.areasLg.value, t.areasXl.value, t.areas2xl.value, f();
+		}), i(() => {
+			let t = e(n);
+			l(() => {
+				t.value, d(), f();
+			});
+		}), r`<slot></slot>`;
+	},
+	styles: [t]
+});
+//#endregion
+export { l as GRID_TAG };
+
+//# sourceMappingURL=grid.js.map

package/dist/grid.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"grid.js","names":[],"sources":["../src/layout/grid/grid.ts"],"sourcesContent":["import { define, html, prop } from '@vielzeug/ore';\nimport { resizeObserver } from '@vielzeug/ore/observers';\n\nimport styles from './grid.css?inline';\n\nconst BREAKPOINTS: ['cols2xl' | 'colsXl' | 'colsLg' | 'colsMd' | 'colsSm', string][] = [\n  ['cols2xl', '--size-screen-2xl'],\n  ['colsXl', '--size-screen-xl'],\n  ['colsLg', '--size-screen-lg'],\n  ['colsMd', '--size-screen-md'],\n  ['colsSm', '--size-screen-sm'],\n];\n\nconst AREAS_BREAKPOINTS: ['areas2xl' | 'areasXl' | 'areasLg' | 'areasMd' | 'areasSm', string][] = [\n  ['areas2xl', '--size-screen-2xl'],\n  ['areasXl', '--size-screen-xl'],\n  ['areasLg', '--size-screen-lg'],\n  ['areasMd', '--size-screen-md'],\n  ['areasSm', '--size-screen-sm'],\n];\n\nconst resolveBp = (host: HTMLElement, varName: string, fallback: number): number => {\n  const raw = getComputedStyle(host).getPropertyValue(varName).trim();\n  const parsed = Number.parseFloat(raw);\n\n  return Number.isFinite(parsed) ? parsed : fallback;\n};\n\nconst BP_FALLBACKS: Record<string, number> = {\n  '--size-screen-2xl': 1536,\n  '--size-screen-lg': 1024,\n  '--size-screen-md': 768,\n  '--size-screen-sm': 640,\n  '--size-screen-xl': 1280,\n};\n\ntype ColCount = '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n\n/** Grid component properties */\nexport type OreGridProps = {\n  /** Align items vertically */\n  align?: 'start' | 'center' | 'end' | 'stretch' | 'baseline';\n  /** CSS grid-template-areas value */\n  areas?: string;\n  /** grid-template-areas at 2xl breakpoint (≥1536px) */\n  areas2xl?: string;\n  /** grid-template-areas at lg breakpoint (≥1024px) */\n  areasLg?: string;\n  /** grid-template-areas at md breakpoint (≥768px) */\n  areasMd?: string;\n  /** grid-template-areas at sm breakpoint (≥640px) */\n  areasSm?: string;\n  /** grid-template-areas at xl breakpoint (≥1280px) */\n  areasXl?: string;\n  /** Number of columns: '1'-'12' | 'auto' */\n  cols?: ColCount;\n  /** Columns at 2xl breakpoint (≥1536px) */\n  cols2xl?: ColCount;\n  /** Columns at lg breakpoint (≥1024px) */\n  colsLg?: ColCount;\n  /** Columns at md breakpoint (≥768px) */\n  colsMd?: ColCount;\n  /** Columns at sm breakpoint (≥640px) */\n  colsSm?: ColCount;\n  /** Columns at xl breakpoint (≥1280px) */\n  colsXl?: ColCount;\n  /** Grid auto flow direction */\n  flow?: 'row' | 'column' | 'row-dense' | 'column-dense';\n  /** Stretch the grid to fill its container's full width */\n  fullwidth?: boolean;\n  /** Gap between items */\n  gap?: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl';\n  /** Justify items horizontally */\n  justify?: 'start' | 'center' | 'end' | 'stretch';\n  /** Minimum column width for responsive mode (default: 250px) */\n  minColWidth?: string;\n  /** Use auto-fit responsive columns */\n  responsive?: boolean;\n  /** Number of rows: '1'-'12' | 'auto' */\n  rows?: '1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto';\n};\n\n/**\n * ore-grid — Flexible grid layout with responsive column control.\n *\n * Columns are computed in JS and applied as `--_cols` inline, so they respond\n * to the element's own width via ResizeObserver. CSS custom properties\n * `--grid-cols`, `--grid-rows`, `--grid-gap`, `--grid-row-gap`, `--grid-col-gap`\n * are honoured as fallbacks when no attribute is set.\n *\n * @element ore-grid\n *\n * @attr {string} cols - Column count: '1'–'12' | 'auto'\n * @attr {string} cols-sm - Columns when width ≥ 640px\n * @attr {string} cols-md - Columns when width ≥ 768px\n * @attr {string} cols-lg - Columns when width ≥ 1024px\n * @attr {string} cols-xl - Columns when width ≥ 1280px\n * @attr {string} cols-2xl - Columns when width ≥ 1536px\n * @attr {string} rows - Row count: '1'–'12' | 'auto'\n * @attr {string} gap - Gap token: 'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'\n * @attr {string} align - align-items: 'start' | 'center' | 'end' | 'stretch' | 'baseline'\n * @attr {string} justify - justify-items: 'start' | 'center' | 'end' | 'stretch'\n * @attr {string} flow - grid-auto-flow: 'row' | 'column' | 'row-dense' | 'column-dense'\n * @attr {boolean} responsive - Enables auto-fit columns without a fixed count\n * @attr {string} min-col-width - Min column width for responsive mode (default: 250px)\n * @attr {boolean} fullwidth - Stretch the grid to fill its container's full width\n * @attr {string} areas - CSS grid-template-areas value (e.g. \"'header header' 'nav main'\")\n * @attr {string} areas-sm - grid-template-areas when width ≥ 640px\n * @attr {string} areas-md - grid-template-areas when width ≥ 768px\n * @attr {string} areas-lg - grid-template-areas when width ≥ 1024px\n * @attr {string} areas-xl - grid-template-areas when width ≥ 1280px\n * @attr {string} areas-2xl - grid-template-areas when width ≥ 1536px\n *\n * @slot - Grid items\n *\n * @cssprop --grid-cols - Fallback column template (used when no cols attr is set)\n * @cssprop --grid-rows - Fallback row template\n * @cssprop --grid-gap - Fallback gap\n * @cssprop --grid-row-gap - Fallback row gap\n * @cssprop --grid-col-gap - Fallback column gap\n *\n * @example\n * <ore-grid cols=\"1\" cols-sm=\"2\" cols-lg=\"4\" gap=\"md\">\n *   <div>Item</div>\n * </ore-grid>\n *\n * @example\n * <!-- Responsive auto-fit -->\n * <ore-grid responsive min-col-width=\"200px\" gap=\"sm\">\n *   <div>Card</div>\n * </ore-grid>\n *\n * @example\n * <!-- Named grid areas -->\n * <ore-grid cols=\"2\" rows=\"2\" areas=\"'header header' 'nav main'\">\n *   <header style=\"grid-area: header\">Header</header>\n *   <nav style=\"grid-area: nav\">Nav</nav>\n *   <main style=\"grid-area: main\">Main</main>\n * </ore-grid>\n */\nexport const GRID_TAG = 'ore-grid' as const;\ndefine<OreGridProps>(GRID_TAG, {\n  props: {\n    align: prop.string<'start' | 'center' | 'end' | 'stretch' | 'baseline'>(),\n    areas: prop.string(),\n    areas2xl: prop.string(),\n    areasLg: prop.string(),\n    areasMd: prop.string(),\n    areasSm: prop.string(),\n    areasXl: prop.string(),\n    cols: prop.string<ColCount>(),\n    cols2xl: prop.string<ColCount>(),\n    colsLg: prop.string<ColCount>(),\n    colsMd: prop.string<ColCount>(),\n    colsSm: prop.string<ColCount>(),\n    colsXl: prop.string<ColCount>(),\n    flow: prop.string<'row' | 'column' | 'row-dense' | 'column-dense'>(),\n    fullwidth: prop.bool(false),\n    gap: prop.string<'none' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl'>(),\n    justify: prop.string<'start' | 'center' | 'end' | 'stretch'>(),\n    minColWidth: prop.string(),\n    responsive: prop.bool(false),\n    rows: prop.string<'1' | '2' | '3' | '4' | '5' | '6' | '7' | '8' | '9' | '10' | '11' | '12' | 'auto'>(),\n  },\n\n  setup(props, { el, onMounted, watch }) {\n    const computeCols = (activeCols: string | undefined, responsive: boolean, minW: string): string | null => {\n      if (activeCols === 'auto' || (!activeCols && responsive)) {\n        return `repeat(auto-fit, minmax(${minW || '250px'}, 1fr))`;\n      }\n\n      return activeCols ? `repeat(${activeCols}, 1fr)` : null;\n    };\n    const updateCols = () => {\n      const w = el.offsetWidth;\n      const responsive = Boolean(props.responsive.value);\n      const minW = props.minColWidth.value ?? '';\n      let activeCols: string | undefined;\n\n      for (const [key, cssVar] of BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          activeCols = props[key].value!;\n          break;\n        }\n      }\n      activeCols ||= props.cols.value || undefined;\n\n      const colsValue = computeCols(activeCols, responsive, minW);\n\n      if (colsValue) {\n        el.style.setProperty('--_cols', colsValue);\n      } else {\n        el.style.removeProperty('--_cols');\n      }\n    };\n\n    // Re-run cols whenever any responsive prop changes\n    watch(() => {\n      void [\n        props.cols.value,\n        props.colsSm.value,\n        props.colsMd.value,\n        props.colsLg.value,\n        props.colsXl.value,\n        props.cols2xl.value,\n        props.responsive.value,\n        props.minColWidth.value,\n      ];\n      updateCols();\n    });\n\n    const updateAreas = () => {\n      const w = el.offsetWidth;\n      let active = '';\n\n      for (const [key, cssVar] of AREAS_BREAKPOINTS) {\n        if (w >= resolveBp(el, cssVar, BP_FALLBACKS[cssVar]) && props[key].value) {\n          active = props[key].value!;\n          break;\n        }\n      }\n      active ||= props.areas.value || '';\n\n      if (active) {\n        el.style.setProperty('grid-template-areas', active);\n      } else {\n        el.style.removeProperty('grid-template-areas');\n      }\n    };\n\n    // Rows\n    watch(() => {\n      const rows = props.rows.value;\n\n      if (rows && rows !== 'auto') {\n        el.style.setProperty('--_rows', `repeat(${rows}, 1fr)`);\n      } else {\n        el.style.removeProperty('--_rows');\n      }\n    });\n    // Grid template areas (responsive)\n    watch(() => {\n      void [\n        props.areas.value,\n        props.areasSm.value,\n        props.areasMd.value,\n        props.areasLg.value,\n        props.areasXl.value,\n        props.areas2xl.value,\n      ];\n      updateAreas();\n    });\n\n    // Also, update on element resize (drives breakpoint switching)\n    onMounted(() => {\n      const size = resizeObserver(el);\n\n      watch(() => {\n        void size.value;\n        updateCols();\n        updateAreas();\n      });\n    });\n\n    return html`<slot></slot>`;\n  },\n\n  styles: [styles],\n});\n"],"mappings":"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"}

package/dist/headless/_internal.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Internal barrel — primitives used by refine components but not intended as
+ * public API. Not exported from `headless/index.ts`.
+ *
+ * Import via the full path, e.g.:
+ *   import { createInteraction } from '../../headless/_internal';
+ */
+export { createDropdownPositioner, type DropdownPositionerOptions } from './positioner';
+export { createInteraction, dispatchKeyboardAction, type Interaction, type InteractionOptions, type KeyboardDispatchOptions, type PressTrigger, } from './keyboard';
+export { createListControl, type ListControl, type ListKeyAction, type ListNavigationAction, type ListNavigationOptions, } from './nav';
+export { createOverlayControl, type OverlayControl, type OverlayControlOptions, type OverlayPositioner, } from './overlay';
+export { createTypeahead, type Typeahead, type TypeaheadOptions } from './typeahead';
+export { parseStringTriggers } from './parse';
+export { syncedSignal } from './signals';
+export { createSelectionControl, type SelectionControl, type SelectionControlOptions } from './selection-control';
+export { createSortControl, type SortControl, type SortControlOptions } from './sort-control';
+//# sourceMappingURL=_internal.d.ts.map

package/dist/headless/_internal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"_internal.d.ts","sourceRoot":"","sources":["../../src/headless/_internal.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,OAAO,EAAE,wBAAwB,EAAE,KAAK,yBAAyB,EAAE,MAAM,cAAc,CAAC;AACxF,OAAO,EACL,iBAAiB,EACjB,sBAAsB,EACtB,KAAK,WAAW,EAChB,KAAK,kBAAkB,EACvB,KAAK,uBAAuB,EAC5B,KAAK,YAAY,GAClB,MAAM,YAAY,CAAC;AACpB,OAAO,EACL,iBAAiB,EACjB,KAAK,WAAW,EAChB,KAAK,aAAa,EAClB,KAAK,oBAAoB,EACzB,KAAK,qBAAqB,GAC3B,MAAM,OAAO,CAAC;AACf,OAAO,EACL,oBAAoB,EACpB,KAAK,cAAc,EACnB,KAAK,qBAAqB,EAC1B,KAAK,iBAAiB,GACvB,MAAM,WAAW,CAAC;AACnB,OAAO,EAAE,eAAe,EAAE,KAAK,SAAS,EAAE,KAAK,gBAAgB,EAAE,MAAM,aAAa,CAAC;AACrF,OAAO,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AACzC,OAAO,EAAE,sBAAsB,EAAE,KAAK,gBAAgB,EAAE,KAAK,uBAAuB,EAAE,MAAM,qBAAqB,CAAC;AAClH,OAAO,EAAE,iBAAiB,EAAE,KAAK,WAAW,EAAE,KAAK,kBAAkB,EAAE,MAAM,gBAAgB,CAAC"}

package/dist/headless/announcer.cjs

@@ -0,0 +1,2 @@
+const e=require("../styles/mixins/accessibility.css.cjs");var t=new WeakMap,n=new WeakMap,r=(t,n)=>{let r=n.createElement(`div`);return r.setAttribute(`aria-live`,t),r.setAttribute(`aria-atomic`,`true`),r.setAttribute(`data-block-announcer`,t),r.style.cssText=e.SR_ONLY_INLINE_STYLE,n.body.appendChild(r),r},i=(e,n)=>{let i=t.get(n);return i?.[e]&&!n.body.contains(i[e])&&(i[e]=void 0),i?.[e]||(i||(i={},t.set(n,i)),i[e]=r(e,n)),i[e]??null},a=(e,t={})=>{if(typeof document>`u`)return;let r=i(t.politeness??`polite`,document);if(!r)return;r.textContent=``;let a=n.get(r);a!==void 0&&clearTimeout(a);let o=setTimeout(()=>{r.textContent=e,n.delete(r)},50);n.set(r,o)};exports.announce=a;
+//# sourceMappingURL=announcer.cjs.map