@marianmeres/stuic 3.153.0 → 3.155.0

package/dist/components/FieldsBuilder/index.css

@@ -0,0 +1,187 @@
+/* ============================================================================
+   FIELDS BUILDER COMPONENT TOKENS
+   Override globally: :root { --stuic-fields-builder-row-border: red; }
+   Override locally:  <FieldsBuilder style="--stuic-fields-builder-chip-bg: ..." />
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	--stuic-fields-builder-row-border: var(--stuic-color-border);
+	--stuic-fields-builder-row-toggle-bg-hover: var(--stuic-color-muted);
+	--stuic-fields-builder-key-text: var(--stuic-color-muted-foreground);
+	--stuic-fields-builder-chip-bg: var(--stuic-color-muted);
+	--stuic-fields-builder-chip-text: var(--stuic-color-muted-foreground);
+	--stuic-fields-builder-muted-text: var(--stuic-color-muted-foreground);
+	--stuic-fields-builder-warning-text: var(--stuic-color-surface-warning-foreground);
+	--stuic-fields-builder-error-text: var(--stuic-color-destructive);
+	--stuic-fields-builder-drop-indicator-color: var(--stuic-color-primary);
+	--stuic-fields-builder-drop-indicator-height: 2px;
+	--stuic-fields-builder-row-opacity-dragging: 0.4;
+	--stuic-fields-builder-row-opacity-deleted: 0.55;
+	--stuic-fields-builder-preview-border: var(--stuic-color-border);
+}
+
+@layer components {
+	/* =============================================================================
+	   ROWS
+	   ============================================================================= */
+
+	.stuic-fields-builder .fb-row-divider {
+		border-top: 1px solid var(--stuic-fields-builder-row-border);
+	}
+
+	.stuic-fields-builder .fb-row[data-dragging] {
+		opacity: var(--stuic-fields-builder-row-opacity-dragging);
+	}
+
+	.stuic-fields-builder .fb-row[data-drop-position="before"] {
+		box-shadow: inset 0 var(--stuic-fields-builder-drop-indicator-height) 0
+			var(--stuic-fields-builder-drop-indicator-color);
+	}
+
+	.stuic-fields-builder .fb-row[data-drop-position="after"] {
+		box-shadow: inset 0 calc(-1 * var(--stuic-fields-builder-drop-indicator-height)) 0
+			var(--stuic-fields-builder-drop-indicator-color);
+	}
+
+	.stuic-fields-builder .fb-row-deleted .fb-row-header {
+		opacity: var(--stuic-fields-builder-row-opacity-deleted);
+	}
+
+	.stuic-fields-builder .fb-row-deleted .fb-row-label {
+		text-decoration: line-through;
+	}
+
+	/* =============================================================================
+	   ROW HEADER
+	   ============================================================================= */
+
+	.stuic-fields-builder .fb-row-header {
+		padding-block: calc(var(--spacing) * 1);
+	}
+
+	.stuic-fields-builder .fb-row-toggle {
+		padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 1);
+		transition: background var(--stuic-transition);
+	}
+
+	.stuic-fields-builder .fb-row-toggle:hover:not(:disabled) {
+		background: var(--stuic-fields-builder-row-toggle-bg-hover);
+	}
+
+	.stuic-fields-builder .fb-row-toggle:disabled {
+		cursor: default;
+	}
+
+	.stuic-fields-builder .fb-row-label {
+		font-weight: 500;
+	}
+
+	.stuic-fields-builder .fb-row-required {
+		opacity: 0.5;
+	}
+
+	.stuic-fields-builder .fb-key {
+		font-family: var(--font-mono);
+		font-size: var(--text-xs);
+		color: var(--stuic-fields-builder-key-text);
+	}
+
+	.stuic-fields-builder .fb-chip {
+		background: var(--stuic-fields-builder-chip-bg);
+		color: var(--stuic-fields-builder-chip-text);
+		font-size: var(--text-xs);
+		padding: calc(var(--spacing) * 0.5) calc(var(--spacing) * 1.5);
+		border-radius: var(--stuic-fields-builder-chip-radius, var(--stuic-radius));
+		white-space: nowrap;
+	}
+
+	.stuic-fields-builder .fb-chip-warning {
+		color: var(--stuic-fields-builder-warning-text);
+	}
+
+	.stuic-fields-builder .fb-chevron {
+		opacity: 0.5;
+	}
+
+	.stuic-fields-builder .fb-handle {
+		cursor: grab;
+		opacity: 0.4;
+		touch-action: none;
+	}
+
+	.stuic-fields-builder .fb-handle:hover {
+		opacity: 1;
+	}
+
+	.stuic-fields-builder .fb-handle-spacer {
+		width: 16px;
+	}
+
+	/* =============================================================================
+	   ROW BODY (expanded editor)
+	   ============================================================================= */
+
+	.stuic-fields-builder .fb-row-body {
+		display: flex;
+		flex-direction: column;
+		gap: calc(var(--spacing) * 3);
+		padding: calc(var(--spacing) * 1) calc(var(--spacing) * 2) calc(var(--spacing) * 3)
+			calc(var(--spacing) * 2);
+	}
+
+	.stuic-fields-builder .fb-sub-label {
+		display: block;
+		font-size: var(--text-xs);
+		font-weight: 500;
+		color: var(--stuic-fields-builder-muted-text);
+		margin-bottom: calc(var(--spacing) * 0.5);
+	}
+
+	.stuic-fields-builder .fb-hint {
+		color: var(--stuic-fields-builder-muted-text);
+	}
+
+	.stuic-fields-builder .fb-error-text {
+		color: var(--stuic-fields-builder-error-text);
+	}
+
+	.stuic-fields-builder .fb-warning-text {
+		color: var(--stuic-fields-builder-warning-text);
+	}
+
+	.stuic-fields-builder .fb-advanced-toggle {
+		color: var(--stuic-fields-builder-muted-text);
+		transition: color var(--stuic-transition);
+	}
+
+	.stuic-fields-builder .fb-advanced-toggle:hover {
+		color: var(--stuic-color-foreground);
+	}
+
+	/* =============================================================================
+	   OPTIONS EDITOR
+	   ============================================================================= */
+
+	.stuic-fields-builder .fb-option-divider {
+		border-top: 1px dashed var(--stuic-fields-builder-row-border);
+	}
+
+	/* =============================================================================
+	   PREVIEW PANE
+	   ============================================================================= */
+
+	.stuic-fields-builder .fb-preview-side {
+		border-left: 1px solid var(--stuic-fields-builder-preview-border);
+	}
+
+	.stuic-fields-builder .fb-preview-below {
+		border-top: 1px solid var(--stuic-fields-builder-preview-border);
+	}
+
+	.stuic-fields-builder .fb-preview-title {
+		color: var(--stuic-fields-builder-muted-text);
+		text-transform: uppercase;
+		letter-spacing: 0.05em;
+	}
+}

package/dist/components/FieldsBuilder/index.d.ts

@@ -0,0 +1,5 @@
+export { default as FieldsBuilder, type Props as FieldsBuilderProps, } from "./FieldsBuilder.svelte";
+export type { FieldDef, FieldLock, FieldOptionDef, FieldTypeDef, FieldTypeExtraDef, LocalizedText, } from "./types.js";
+export { DEFAULT_FIELD_TYPES as FIELDS_BUILDER_DEFAULT_TYPES, DEFAULT_KEY_PATTERN as FIELDS_BUILDER_DEFAULT_KEY_PATTERN, getLocalizedText, slugifyKey, uniqueKey, validateFieldDefs, type FieldDefRowErrors, type FieldDefsValidationResult, type ValidateFieldDefsOptions, } from "./utils.js";
+export { createFieldsBuilderT, FIELDS_BUILDER_MESSAGES_EN, type FieldsBuilderMessageKey, type FieldsBuilderMessages, } from "./i18n.js";
+export { FIELDS_BUILDER_MESSAGES_SK, FIELDS_BUILDER_DEFAULT_TYPES_SK, } from "./i18n-sk.js";

package/dist/components/FieldsBuilder/index.js

@@ -0,0 +1,4 @@
+export { default as FieldsBuilder, } from "./FieldsBuilder.svelte";
+export { DEFAULT_FIELD_TYPES as FIELDS_BUILDER_DEFAULT_TYPES, DEFAULT_KEY_PATTERN as FIELDS_BUILDER_DEFAULT_KEY_PATTERN, getLocalizedText, slugifyKey, uniqueKey, validateFieldDefs, } from "./utils.js";
+export { createFieldsBuilderT, FIELDS_BUILDER_MESSAGES_EN, } from "./i18n.js";
+export { FIELDS_BUILDER_MESSAGES_SK, FIELDS_BUILDER_DEFAULT_TYPES_SK, } from "./i18n-sk.js";

package/dist/components/FieldsBuilder/types.d.ts

@@ -0,0 +1,76 @@
+import type { Snippet } from "svelte";
+/** A localized string: either one plain string, or a per-language map. */
+export type LocalizedText = string | Record<string, string>;
+/** A single option of a choice-like field type (one declaring `supportsOptions`). */
+export interface FieldOptionDef {
+    /** Machine value, unique within the field's options. */
+    value: string;
+    label: LocalizedText;
+}
+/** What the user may NOT change on a field. Absent flag = editable. */
+export interface FieldLock {
+    key?: boolean;
+    type?: boolean;
+    required?: boolean;
+    options?: boolean;
+    /** Cannot be removed from the list. */
+    delete?: boolean;
+    /** Cannot be dragged, and other fields cannot be moved past it. */
+    reorder?: boolean;
+}
+/**
+ * One field definition — the unit of the `FieldsBuilder` value. The component
+ * emits an ordered `FieldDef[]`; what the list is compiled into (a form, a
+ * schema, a template...) is entirely the consumer's business.
+ */
+export interface FieldDef {
+    /** Machine key. Unique within the list. */
+    key: string;
+    /** One of the `types` palette entries' `type`. */
+    type: string;
+    label: LocalizedText;
+    description?: LocalizedText;
+    required?: boolean;
+    /**
+     * Edited and validated only for palette entries declaring
+     * `supportsOptions`. NOTE: when a field's type is changed away from a
+     * choice type, existing `options` are deliberately RETAINED on the def
+     * (never silently drop data; switching back restores them) — consumers
+     * compiling the list should ignore `options` on non-choice types.
+     */
+    options?: FieldOptionDef[];
+    /**
+     * Per-type extra flags, driven by the palette entry's `extras`. An open bag
+     * on purpose — the component never interprets these, it only renders a
+     * control per declared extra and round-trips the value.
+     */
+    extras?: Record<string, unknown>;
+    /** What the user may NOT change. Absent = fully editable. */
+    lock?: FieldLock;
+}
+/** An extra per-field control declared by a palette entry (v1: booleans only). */
+export interface FieldTypeExtraDef {
+    /** Stored under `FieldDef.extras[key]`. */
+    key: string;
+    label: LocalizedText;
+    description?: LocalizedText;
+    /** v1: booleans only (rendered as a checkbox). */
+    type: "boolean";
+    default?: boolean;
+}
+/** One entry of the type palette (the `types` prop). */
+export interface FieldTypeDef {
+    /** Stored in `FieldDef.type`. */
+    type: string;
+    /** Shown in the type picker. */
+    label: LocalizedText;
+    description?: LocalizedText;
+    /** Icon html string (e.g. from `@marianmeres/icons-fns`) or a snippet. */
+    icon?: string | Snippet;
+    /** Renders the option editor and allows `FieldDef.options`. */
+    supportsOptions?: boolean;
+    /** Extra per-field controls, rendered into `FieldDef.extras[key]`. */
+    extras?: FieldTypeExtraDef[];
+    /** Optional live preview of a single field of this type. */
+    preview?: Snippet<[FieldDef]>;
+}

package/dist/components/FieldsBuilder/types.js

@@ -0,0 +1 @@
+export {};

package/dist/components/FieldsBuilder/utils.d.ts

@@ -0,0 +1,66 @@
+import type { FieldDef, FieldTypeDef, LocalizedText } from "./types.js";
+/** Default machine-key policy: lowercase snake_case, starts with a letter, max 63 chars. */
+export declare const DEFAULT_KEY_PATTERN: RegExp;
+export declare const DEFAULT_KEY_MAX_LENGTH = 63;
+/** Minimal translate signature the pure helpers below need. */
+export type FieldsBuilderTranslate = (key: string, values?: Record<string, string | number>) => string;
+/**
+ * Read the display text of a `LocalizedText`: the string itself, the preferred
+ * language's entry, or the first non-empty entry as a fallback.
+ */
+export declare function getLocalizedText(text: LocalizedText | null | undefined, preferredLanguage?: string): string;
+/**
+ * Derive a machine key from a human label: transliterates diacritics
+ * (`Ročník` → `rocnik`), lowercases, collapses everything else to `_`. A slug
+ * not starting with a letter is prefixed with `f_` (`2024` → `f_2024`) so the
+ * result always satisfies `DEFAULT_KEY_PATTERN`.
+ */
+export declare function slugifyKey(input: string, maxLength?: number): string;
+/**
+ * Make `base` unique against `isTaken` by suffixing `_2`, `_3`, ... The base is
+ * truncated when a suffixed candidate would exceed `maxLength`.
+ */
+export declare function uniqueKey(base: string, isTaken: (key: string) => boolean, maxLength?: number): string;
+export declare function isKeyReserved(key: string, reservedKeys?: string[] | ((key: string) => boolean)): boolean;
+export interface FieldDefRowErrors {
+    label?: string;
+    key?: string;
+    options?: string;
+}
+export interface FieldDefsValidationResult {
+    valid: boolean;
+    /** First error found — the component-level summary message. Empty when valid. */
+    message: string;
+    /** Index-aligned with the input defs. `null` = row has no errors. */
+    rowErrors: (FieldDefRowErrors | null)[];
+}
+export interface ValidateFieldDefsOptions {
+    /**
+     * The type palette. When provided, defs with a `type` not present here are
+     * treated as unknown: they are NOT validated (they round-trip untouched and
+     * must never block the rest of the list), but their keys still count toward
+     * uniqueness.
+     */
+    types?: Pick<FieldTypeDef, "type" | "supportsOptions">[];
+    keyPattern?: RegExp;
+    keyMaxLength?: number;
+    reservedKeys?: string[] | ((key: string) => boolean);
+    maxFields?: number;
+    defaultLanguage?: string;
+    /** Translator for the error messages; defaults to returning the message key. */
+    t?: FieldsBuilderTranslate;
+}
+/**
+ * Validate a list of field defs: label non-empty, key present/pattern/length/
+ * unique/not-reserved, choice types have at least one option with non-empty
+ * unique values, `maxFields` not exceeded.
+ *
+ * This is client-side convenience only — a consumer persisting the list MUST
+ * re-validate server-side; this function is not a security boundary.
+ */
+export declare function validateFieldDefs(defs: FieldDef[], opts?: ValidateFieldDefsOptions): FieldDefsValidationResult;
+/**
+ * A small general-purpose palette — handy for demos and for consumers with no
+ * opinion. `types` is a required prop, so nobody gets this by accident.
+ */
+export declare const DEFAULT_FIELD_TYPES: FieldTypeDef[];

package/dist/components/FieldsBuilder/utils.js

@@ -0,0 +1,153 @@
+/** Default machine-key policy: lowercase snake_case, starts with a letter, max 63 chars. */
+export const DEFAULT_KEY_PATTERN = /^[a-z][a-z0-9_]{0,62}$/;
+export const DEFAULT_KEY_MAX_LENGTH = 63;
+/**
+ * Read the display text of a `LocalizedText`: the string itself, the preferred
+ * language's entry, or the first non-empty entry as a fallback.
+ */
+export function getLocalizedText(text, preferredLanguage) {
+    if (text == null)
+        return "";
+    if (typeof text === "string")
+        return text;
+    if (preferredLanguage && text[preferredLanguage])
+        return text[preferredLanguage];
+    for (const v of Object.values(text))
+        if (v)
+            return v;
+    return "";
+}
+/**
+ * Derive a machine key from a human label: transliterates diacritics
+ * (`Ročník` → `rocnik`), lowercases, collapses everything else to `_`. A slug
+ * not starting with a letter is prefixed with `f_` (`2024` → `f_2024`) so the
+ * result always satisfies `DEFAULT_KEY_PATTERN`.
+ */
+export function slugifyKey(input, maxLength = DEFAULT_KEY_MAX_LENGTH) {
+    let s = (input ?? "")
+        .normalize("NFKD")
+        .replace(/[\u0300-\u036f]/g, "")
+        .toLowerCase()
+        .replace(/[^a-z0-9]+/g, "_")
+        .replace(/^_+|_+$/g, "");
+    if (s && !/^[a-z]/.test(s))
+        s = `f_${s}`;
+    if (maxLength > 0 && s.length > maxLength) {
+        s = s.slice(0, maxLength).replace(/_+$/, "");
+    }
+    return s;
+}
+/**
+ * Make `base` unique against `isTaken` by suffixing `_2`, `_3`, ... The base is
+ * truncated when a suffixed candidate would exceed `maxLength`.
+ */
+export function uniqueKey(base, isTaken, maxLength = DEFAULT_KEY_MAX_LENGTH) {
+    if (!base || !isTaken(base))
+        return base;
+    for (let i = 2; i < 1_000; i++) {
+        const suffix = `_${i}`;
+        let candidate = base + suffix;
+        if (maxLength > 0 && candidate.length > maxLength) {
+            candidate = base.slice(0, maxLength - suffix.length).replace(/_+$/, "") + suffix;
+        }
+        if (!isTaken(candidate))
+            return candidate;
+    }
+    return base;
+}
+export function isKeyReserved(key, reservedKeys) {
+    if (!reservedKeys)
+        return false;
+    return typeof reservedKeys === "function"
+        ? !!reservedKeys(key)
+        : reservedKeys.includes(key);
+}
+/**
+ * Validate a list of field defs: label non-empty, key present/pattern/length/
+ * unique/not-reserved, choice types have at least one option with non-empty
+ * unique values, `maxFields` not exceeded.
+ *
+ * This is client-side convenience only — a consumer persisting the list MUST
+ * re-validate server-side; this function is not a security boundary.
+ */
+export function validateFieldDefs(defs, opts = {}) {
+    const t = opts.t ?? ((k) => k);
+    const keyPattern = opts.keyPattern ?? DEFAULT_KEY_PATTERN;
+    const keyMaxLength = opts.keyMaxLength ?? DEFAULT_KEY_MAX_LENGTH;
+    const typeMap = opts.types ? new Map(opts.types.map((td) => [td.type, td])) : null;
+    const rowErrors = defs.map(() => null);
+    const put = (i, field, msg) => {
+        rowErrors[i] ??= {};
+        rowErrors[i][field] ??= msg;
+    };
+    // keys of ALL defs (incl. unknown types) occupy the key space
+    const keyCounts = new Map();
+    for (const d of defs) {
+        const k = (d.key ?? "").trim();
+        if (k)
+            keyCounts.set(k, (keyCounts.get(k) ?? 0) + 1);
+    }
+    defs.forEach((d, i) => {
+        // unknown type: keep as-is, do not block (see the doc comment above)
+        if (typeMap && !typeMap.has(d.type))
+            return;
+        if (!getLocalizedText(d.label, opts.defaultLanguage).trim()) {
+            put(i, "label", t("err_label_required"));
+        }
+        // presence is checked trimmed, but pattern/length run on the RAW key —
+        // a whitespace-padded key must fail here, not at the consumer's gate
+        const k = d.key ?? "";
+        if (!k.trim()) {
+            put(i, "key", t("err_key_required"));
+        }
+        else {
+            if (k.length > keyMaxLength) {
+                put(i, "key", t("err_key_maxlength", { max: keyMaxLength }));
+            }
+            else if (!keyPattern.test(k)) {
+                put(i, "key", t("err_key_pattern"));
+            }
+            if ((keyCounts.get(k.trim()) ?? 0) > 1)
+                put(i, "key", t("err_key_duplicate"));
+            if (isKeyReserved(k, opts.reservedKeys))
+                put(i, "key", t("err_key_reserved"));
+        }
+        if (typeMap?.get(d.type)?.supportsOptions) {
+            const options = d.options ?? [];
+            const values = options.map((o) => (o.value ?? "").trim());
+            if (!options.length) {
+                put(i, "options", t("err_options_required"));
+            }
+            else if (values.some((v) => !v)) {
+                put(i, "options", t("err_option_value_required"));
+            }
+            else if (new Set(values).size !== values.length) {
+                put(i, "options", t("err_option_value_duplicate"));
+            }
+        }
+    });
+    let message = rowErrors.find(Boolean)
+        ? Object.values(rowErrors.find(Boolean))[0]
+        : "";
+    if (!message && opts.maxFields && defs.length > opts.maxFields) {
+        message = t("err_max_fields", { max: opts.maxFields });
+    }
+    return { valid: !message, message, rowErrors };
+}
+/**
+ * A small general-purpose palette — handy for demos and for consumers with no
+ * opinion. `types` is a required prop, so nobody gets this by accident.
+ */
+export const DEFAULT_FIELD_TYPES = [
+    { type: "text", label: "Text", description: "A single line of text" },
+    { type: "longtext", label: "Long text", description: "Multiple lines of text" },
+    { type: "number", label: "Number", description: "A numeric value" },
+    { type: "checkbox", label: "Yes / no", description: "A single on/off checkbox" },
+    {
+        type: "select",
+        label: "Choice",
+        description: "Pick one from a list of choices",
+        supportsOptions: true,
+    },
+    { type: "date", label: "Date", description: "A calendar date" },
+];

package/dist/components/Input/README.md

@@ -291,6 +291,27 @@ Each size (sm, md, lg) has corresponding tokens:
 | `--stuic-input-font-size-{size}`  | `--text-sm`             | `--text-base`           | `--text-lg`           |
 | `--stuic-input-min-height-{size}` | `2.5rem`                | `2.75rem`               | `3rem`                |
 
+#### iOS zoom guard
+
+iOS/iPadOS Safari zooms the whole page when a text control with a computed
+font-size below 16px receives focus — which the `sm` size (14px) triggers. On
+touch-capable Apple devices only, inputs, textareas and selects are therefore
+raised to at least:
+
+| Variable                            | Default | Description                                        |
+| ----------------------------------- | ------- | -------------------------------------------------- |
+| `--stuic-input-font-size-touch-min` | `16px`  | Minimum font-size on touch WebKit (iOS zoom guard) |
+
+Desktop (including macOS Safari) and Android keep the original, smaller size —
+neither zooms on focus. The guard never shrinks a control, so `md`/`lg` are
+unaffected at their default sizes. Opt out with:
+
+```css
+:root {
+	--stuic-input-font-size-touch-min: 0px;
+}
+```
+
 ### Checkbox/Radio Tokens
 
 | Variable                          | Default                | Description            |

package/dist/components/Input/index.css

@@ -42,6 +42,10 @@
 	--stuic-input-font-size-lg: var(--text-lg);
 	--stuic-input-min-height-lg: 3rem;
 
+	/* Smallest font-size a text control may compute to on touch WebKit.
+	   See the "IOS ZOOM GUARD" section at the bottom of this file. */
+	--stuic-input-font-size-touch-min: 16px;
+
 	/* Range input */
 	--stuic-input-range-thumb-size: 18px;
 	--stuic-input-range-track-height: 4px;
@@ -674,3 +678,77 @@
 		padding-bottom: 0;
 	}
 }
+
+/* ============================================================================
+   IOS ZOOM GUARD
+
+   Mobile WebKit (iOS/iPadOS) auto-zooms the viewport when a text control whose
+   computed font-size is below 16px receives focus. The `sm` size (14px) trips
+   it, so tapping into e.g. a FieldsBuilder input jumps the whole page.
+
+   Raise the font-size to at least `--stuic-input-font-size-touch-min`, but only
+   where the zoom actually happens. Two conditions, both required:
+     - `@supports (font: -apple-system-body) or (-webkit-touch-callout: none)`
+       → an Apple/WebKit engine (verified: true in WebKit, false in Blink and
+       Gecko). Two signals OR-ed because `-webkit-touch-callout` is iOS-only
+       while `-apple-system-body` covers Apple platforms generally.
+     - `@media (any-pointer: coarse)` → ...on a touch-capable device, which on
+       Apple means iOS/iPadOS. This is what excludes desktop Safari.
+
+   Desktop (incl. Safari) and Android/Blink — neither of which zooms on focus —
+   keep the original, smaller size.
+
+   `max()` respects consumer overrides of the size tokens and never shrinks a
+   control. Opt out with `--stuic-input-font-size-touch-min: 0px`.
+
+   Deliberately NOT in `@layer components`: unlayered rules beat layered ones,
+   so this also wins over the Tailwind `text-sm` utilities some components put
+   on their own raw inputs (FieldsBuilder's mono key/value inputs, ...), which
+   would otherwise stay at 14px regardless of the size tokens.
+   ============================================================================ */
+
+@supports (font: -apple-system-body) or (-webkit-touch-callout: none) {
+	@media (any-pointer: coarse) {
+		.stuic-input[data-size="sm"]
+			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+				[type="file"]
+			),
+		.stuic-input[data-size="sm"] textarea,
+		.stuic-input[data-size="sm"] select {
+			font-size: max(
+				var(--stuic-input-font-size-touch-min),
+				var(--stuic-input-font-size-sm)
+			);
+		}
+
+		.stuic-input[data-size="md"]
+			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+				[type="file"]
+			),
+		.stuic-input[data-size="md"] textarea,
+		.stuic-input[data-size="md"] select,
+		.stuic-input:not([data-size])
+			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+				[type="file"]
+			),
+		.stuic-input:not([data-size]) textarea,
+		.stuic-input:not([data-size]) select {
+			font-size: max(
+				var(--stuic-input-font-size-touch-min),
+				var(--stuic-input-font-size-md)
+			);
+		}
+
+		.stuic-input[data-size="lg"]
+			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
+				[type="file"]
+			),
+		.stuic-input[data-size="lg"] textarea,
+		.stuic-input[data-size="lg"] select {
+			font-size: max(
+				var(--stuic-input-font-size-touch-min),
+				var(--stuic-input-font-size-lg)
+			);
+		}
+	}
+}

package/dist/index.css

@@ -80,6 +80,7 @@ In practice:
 @import "./components/DismissibleMessage/index.css";
 @import "./components/DropdownMenu/index.css";
 @import "./components/EmailVerifyForm/index.css";
+@import "./components/FieldsBuilder/index.css";
 @import "./components/Float/index.css";
 @import "./components/H/index.css";
 @import "./components/Header/index.css";

package/dist/index.d.ts

@@ -45,6 +45,7 @@ export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
 export * from "./components/EmailVerifyForm/index.js";
+export * from "./components/FieldsBuilder/index.js";
 export * from "./components/Float/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";

package/dist/index.js

@@ -51,6 +51,7 @@ export * from "./components/DismissibleMessage/index.js";
 export * from "./components/Drawer/index.js";
 export * from "./components/DropdownMenu/index.js";
 export * from "./components/EmailVerifyForm/index.js";
+export * from "./components/FieldsBuilder/index.js";
 export * from "./components/Float/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";