@marianmeres/stuic 3.153.0 → 3.154.0

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

@@ -0,0 +1,102 @@
+import type { Snippet } from "svelte";
+import type { ValidateOptions, ValidationResult } from "../../actions/validate.svelte.js";
+import type { TranslateFn } from "../../types.js";
+import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "../Input/types.js";
+import type { FieldDef, FieldTypeDef } from "./types.js";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+export interface Props extends InputWrapClassProps, Record<string, any> {
+    /** Bindable. The ordered field-definition list. */
+    value: FieldDef[];
+    name: string;
+    /**
+     * The type palette. Required on purpose — the component has no built-in
+     * notion of field types (see `DEFAULT_FIELD_TYPES` for a starter set).
+     */
+    types: FieldTypeDef[];
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    /** When `true`, at least one (keyed) field is required. */
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    classRow?: string;
+    classRowHeader?: string;
+    classRowBody?: string;
+    classPreview?: string;
+    style?: string;
+    /**
+     * When set, label/description/option-label editing becomes multi-language
+     * and those values may become `Record<language, string>`. Absent → plain
+     * strings.
+     */
+    languages?: string[];
+    /** Defaults to `languages[0]`. Drives key derivation and display texts. */
+    defaultLanguage?: string;
+    languageLabels?: Record<string, string>;
+    /** Key policy. Default: lowercase snake_case starting with a letter. */
+    keyPattern?: RegExp;
+    keyMaxLength?: number;
+    reservedKeys?: string[] | ((key: string) => boolean);
+    /**
+     * Keys present in `value` when it is (re)loaded render read-only — data
+     * may already be stored under them. Keys created during the editing
+     * session stay editable. `lock.key` overrides per-field in both
+     * directions. Default `true`.
+     */
+    keysImmutable?: boolean;
+    /**
+     * Auto-derive the key from the label while the key is untouched (new
+     * fields only). Pass a function to customize the slugifier. Default `true`.
+     */
+    deriveKeyFromLabel?: boolean | ((label: string) => string);
+    maxFields?: number;
+    /**
+     * `"mark"` (default): deleting a pre-existing field marks it (struck
+     * through, undoable) and excludes it from `value`; the row stays visible
+     * until the value is re-loaded. Fields added in this session are removed
+     * outright in both modes (there is no stored data to protect).
+     */
+    deleteMode?: "mark" | "immediate";
+    /** Veto hook — return `false` (or throw) to cancel the delete. */
+    onBeforeDelete?: (field: FieldDef) => void | false | Promise<void | false>;
+    /**
+     * Veto hook for changing the type of a pre-existing field — return
+     * `false` (or throw) to cancel. Not called for fields added in this
+     * session.
+     */
+    onBeforeTypeChange?: (field: FieldDef, newType: string) => void | false | Promise<void | false>;
+    onChange?: (value: FieldDef[]) => void;
+    /** Renders the preview pane. Receives the current (visible) fields. */
+    preview?: Snippet<[{
+        fields: FieldDef[];
+    }]>;
+    /**
+     * Component width at which the preview pane renders side-by-side instead
+     * of below. `0` → always below. Default `768`.
+     */
+    previewBreakpoint?: number;
+    addLabel?: string;
+    emptyMessage?: string;
+    t?: TranslateFn;
+}
+declare const FieldsBuilder: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value">;
+type FieldsBuilder = ReturnType<typeof FieldsBuilder>;
+export default FieldsBuilder;

package/dist/components/FieldsBuilder/README.md

@@ -0,0 +1,248 @@
+# FieldsBuilder
+
+A composite form control for **authoring an ordered list of field definitions** — the
+"what properties does a thing have?" editor. The end user adds a field, names it, picks
+its type, marks it required, reorders it, deletes it. The component's bindable `value`
+is a plain `FieldDef[]`.
+
+It is deliberately generic: the **type palette is a prop** (`types`), not a built-in
+union. A CMS defining a content type, an issue tracker defining custom ticket fields,
+and a form builder are all equally valid consumers. The component emits a field list —
+**not** JSON Schema or any other schema language; compiling the list into whatever the
+consumer's backend understands is the consumer's job.
+
+```svelte
+<script lang="ts">
+	import {
+		FieldsBuilder,
+		FIELDS_BUILDER_DEFAULT_TYPES,
+		type FieldDef,
+	} from "@marianmeres/stuic";
+
+	let value = $state<FieldDef[]>([]);
+</script>
+
+<FieldsBuilder
+	bind:value
+	name="fields"
+	label="Fields"
+	types={FIELDS_BUILDER_DEFAULT_TYPES}
+/>
+```
+
+## The value shape
+
+```ts
+type LocalizedText = string | Record<string, string>;
+
+interface FieldDef {
+	key: string; // machine key, unique within the list
+	type: string; // one of the `types` palette entries' `type`
+	label: LocalizedText;
+	description?: LocalizedText;
+	required?: boolean;
+	options?: { value: string; label: LocalizedText }[]; // edited for `supportsOptions` types
+	extras?: Record<string, unknown>; // per-type flags declared by the palette
+	lock?: FieldLock; // what the user may NOT change
+}
+```
+
+Order is positional — the array order **is** the order (no `order`/`weight` property).
+
+Value membership rules:
+
+- Defs loaded from `value` always stay in `value` (even while temporarily invalid) —
+  the component never silently drops a field.
+- A field added in the session joins `value` once it has a key, and then stays until
+  deleted: a transiently blank key mid-rename emits the def with `key: ""` (flagged by
+  validation) rather than emitting an effective field deletion.
+- When a field's type is changed away from a choice type, its `options` are
+  **retained** on the def (switching back restores them); consumers compiling the list
+  should ignore `options` on non-choice types.
+- Palette `extras` defaults are materialized into `def.extras` when a field is added
+  or its type changes; a def loaded _without_ an extra's key renders unchecked — the
+  checkbox always reflects what `value` actually contains, never a phantom default.
+
+## The palette
+
+```ts
+interface FieldTypeDef {
+	type: string; // stored in FieldDef.type
+	label: LocalizedText; // shown in the type picker
+	description?: LocalizedText;
+	icon?: string | Snippet; // html string or snippet, shown in the row's type chip
+	supportsOptions?: boolean; // renders the option editor
+	extras?: {
+		key: string;
+		label: LocalizedText;
+		description?: LocalizedText;
+		type: "boolean"; // v1: booleans only (a checkbox per extra)
+		default?: boolean;
+	}[];
+	preview?: Snippet<[FieldDef]>; // per-type preview of a single field
+}
+```
+
+`FIELDS_BUILDER_DEFAULT_TYPES` ships a small general-purpose palette
+(text / longtext / number / checkbox / select / date) for demos and unopinionated
+consumers — `types` is still a required prop, so nobody gets it by accident.
+
+## Keys
+
+The key is the machine identifier; once data exists under it, renaming orphans that
+data. The component treats keys accordingly:
+
+- **Derive-while-untouched** — typing the label "Vintage year" fills the key with
+  `vintage_year` live (diacritics transliterated: "Ročník" → `rocnik`; collisions and
+  `reservedKeys` auto-suffixed: `vintage_year_2`). The moment the user edits the key by
+  hand, derivation stops for that row and never resumes.
+- **`keysImmutable` (default `true`)** — keys present in `value` when it is (re)loaded
+  render read-only; keys created during the session stay editable. `lock.key` overrides
+  per-field in both directions. There is deliberately **no rename affordance**; a
+  consumer that wants renaming owns the migration and passes `keysImmutable: false`.
+- **Validation** — pattern (default `/^[a-z][a-z0-9_]{0,62}$/`), max length, uniqueness,
+  `reservedKeys`; inline per-row errors, not a submit-time surprise.
+- The key is visually secondary: shown small and monospaced in the row header, edited
+  behind the row's "Advanced" disclosure.
+
+## Deletion is destructive
+
+- **`deleteMode: "mark"` (default)** — deleting a _pre-existing_ field strikes the row
+  through, excludes it from `value`, and offers Undo; the row stays visible until the
+  consumer saves and reloads. A field added in the current session is removed outright
+  (there is no stored data to protect).
+- **`deleteMode: "immediate"`** — rows are removed outright.
+- **`onBeforeDelete`** veto — return `false` (or throw) to cancel. This is where a
+  consumer puts its own confirm ("43 items have a value here"). No confirm dialog is
+  built in.
+- Changing the **type** of a pre-existing field is guarded the same way:
+  `onBeforeTypeChange` veto plus a visible inline warning.
+
+## What the component validates — and what it does not
+
+Owns: key pattern / length / uniqueness / reserved, label non-empty, choice types have
+at least one option with unique non-empty values, `maxFields`, `required` (at least one
+field). `validate()` expands, scrolls to and focuses the first offender.
+
+**Does not own:** whether the resulting list is acceptable to the consumer's backend.
+The consumer persisting the list MUST re-validate server-side — this component is a
+convenience, not a security boundary.
+
+Corollary: a `FieldDef` whose `type` is not in `types` is rendered as a degraded
+read-only row with a visible warning, round-trips through `value` untouched, and does
+not block validation. It is never silently dropped.
+
+## Props
+
+| Prop                                                          | Type                                                 | Default        | Description                                            |
+| ------------------------------------------------------------- | ---------------------------------------------------- | -------------- | ------------------------------------------------------ |
+| `value`                                                       | `FieldDef[]`                                         | required       | Bindable ordered field list                            |
+| `name`                                                        | `string`                                             | required       | Hidden-input name (form participation)                 |
+| `types`                                                       | `FieldTypeDef[]`                                     | required       | The type palette                                       |
+| `label`                                                       | `Snippet \| THC`                                     | —              | Field label                                            |
+| `description`                                                 | `Snippet \| THC`                                     | —              | Help text below                                        |
+| `languages`                                                   | `string[]`                                           | —              | Enables multi-language label/description/option labels |
+| `defaultLanguage`                                             | `string`                                             | `languages[0]` | Drives key derivation and display texts                |
+| `languageLabels`                                              | `Record<string, string>`                             | —              | Display names for language codes                       |
+| `keyPattern`                                                  | `RegExp`                                             | snake_case     | Key validation pattern                                 |
+| `keyMaxLength`                                                | `number`                                             | `63`           | Key length limit                                       |
+| `reservedKeys`                                                | `string[] \| (key) => boolean`                       | —              | Keys the user may not use                              |
+| `keysImmutable`                                               | `boolean`                                            | `true`         | Freeze keys loaded from `value`                        |
+| `deriveKeyFromLabel`                                          | `boolean \| (label) => string`                       | `true`         | Live key derivation (custom slugifier allowed)         |
+| `maxFields`                                                   | `number`                                             | —              | Disables adding beyond the limit                       |
+| `deleteMode`                                                  | `"mark" \| "immediate"`                              | `"mark"`       | Delete UX (see above)                                  |
+| `onBeforeDelete`                                              | `(field) => void \| false \| Promise<void \| false>` | —              | Delete veto hook                                       |
+| `onBeforeTypeChange`                                          | `(field, newType) => void \| false \| Promise<...>`  | —              | Type-change veto hook (pre-existing fields)            |
+| `onChange`                                                    | `(value: FieldDef[]) => void`                        | —              | Fired after every change                               |
+| `preview`                                                     | `Snippet<[{ fields: FieldDef[] }]>`                  | —              | Preview pane content (see below)                       |
+| `previewBreakpoint`                                           | `number`                                             | `768`          | Component width for side-by-side preview; `0` = below  |
+| `required`                                                    | `boolean`                                            | `false`        | At least one field required                            |
+| `validate`                                                    | `boolean \| ValidateOptions`                         | `true`         | Validate-action options                                |
+| `renderSize`                                                  | `"sm" \| "md" \| "lg"`                               | `"sm"`         | InputWrap size                                         |
+| `addLabel`, `emptyMessage`                                    | `string`                                             | —              | Text overrides                                         |
+| `classRow`, `classRowHeader`, `classRowBody`, `classPreview`  | `string`                                             | —              | Class hooks                                            |
+| `t`                                                           | `TranslateFn`                                        | built-in (en)  | i18n override for all texts (see below)                |
+| `disabled`, `id`, `tabindex`, `style`, `labelLeft*`, `class*` |                                                      |                | Standard `Field*`/InputWrap pass-throughs              |
+
+Imperative API (via `bind:this`), same as every `Field*`:
+`validate()`, `clearValidation()`, `getValidation()`, `focus()`, `scrollIntoView()`.
+
+## Preview
+
+Pass a `preview` snippet to get a live pane the component keeps in sync (side-by-side
+when wide, stacked below when narrow). Alternatively, palette entries may carry a
+per-type `preview` snippet; rows without one fall back to a minimal label line. What a
+rendered field looks like is entirely the consumer's decision — there is deliberately
+no built-in mapping from palette types to stuic `Field*` components.
+
+```svelte
+<FieldsBuilder bind:value name="fields" {types}>
+	{#snippet preview({ fields })}
+		{#each fields as f}<MyFieldPreview def={f} />{/each}
+	{/snippet}
+</FieldsBuilder>
+```
+
+## Locks
+
+Per-field `lock` flags: `key`, `type`, `required`, `options`, `delete`, `reorder`.
+A `lock.reorder` field is position-pinned — it cannot be dragged and no other move may
+change its index. **Label and description are always editable**, even on fully locked
+fields: the consumer owns a system field's identity, the user owns what it is called.
+
+## i18n
+
+All UI texts go through the `t` prop. English is the built-in default; Slovak ships
+bundled and opt-in (importing it is what pulls it into your bundle — English-only
+consumers pay nothing).
+
+```svelte
+<script>
+	import {
+		FieldsBuilder,
+		createFieldsBuilderT,
+		FIELDS_BUILDER_MESSAGES_SK,
+		FIELDS_BUILDER_DEFAULT_TYPES_SK,
+	} from "@marianmeres/stuic";
+
+	const t = createFieldsBuilderT(FIELDS_BUILDER_MESSAGES_SK);
+</script>
+
+<FieldsBuilder bind:value name="fields" types={FIELDS_BUILDER_DEFAULT_TYPES_SK} {t} />
+```
+
+`createFieldsBuilderT(messages, fallbackMessages?)` falls back to
+`FIELDS_BUILDER_MESSAGES_EN` for any key the catalog does not define, so a partial
+catalog is fine and a raw key is never rendered — pass your own object to translate
+into a language that is not bundled, or to override individual bundled texts:
+
+```ts
+const t = createFieldsBuilderT({
+	...FIELDS_BUILDER_MESSAGES_SK,
+	label_label: "Otázka",
+});
+```
+
+Note the palette is separate: `types` is consumer-owned data, so translating the
+messages alone would leave the type select in English. `FIELDS_BUILDER_DEFAULT_TYPES_SK`
+is the Slovak twin of `FIELDS_BUILDER_DEFAULT_TYPES` (identical `type` values — the
+stored defs are unaffected by which one you pass). A palette entry's `label` /
+`description` also accept a per-language map (`{ en: "Text", sk: "Text" }`), resolved
+against `defaultLanguage`.
+
+## Accessibility
+
+- Reorder is never drag-only: every row has Move up / Move down buttons (focus follows
+  the moved row) alongside the drag handle; moves, deletes and restores are announced
+  via a polite `aria-live` region.
+- Rows are a `list`/`listitem` structure; the row header is a real button with
+  `aria-expanded`.
+
+## CSS Variables
+
+Prefix: `--stuic-fields-builder-*`
+
+`row-border`, `row-toggle-bg-hover`, `key-text`, `chip-bg`, `chip-text`, `chip-radius`,
+`muted-text`, `warning-text`, `error-text`, `drop-indicator-color`,
+`drop-indicator-height`, `row-opacity-dragging`, `row-opacity-deleted`,
+`preview-border`

package/dist/components/FieldsBuilder/_internal/LocalizedTextInput.svelte

@@ -0,0 +1,229 @@
+<!--
+	INTERNAL to FieldsBuilder — not exported from the package.
+
+	A compact `LocalizedText` editor (plain string | Record<language, string>).
+	UX mirrors FieldInputLocalized (default-language input + a toggle revealing
+	per-language rows) and reuses its `.stuic-input-localized` CSS, but differs
+	on purpose: it operates on the live LocalizedText value (no JSON string
+	round-trip), renders no InputWrap/label chrome (it lives inside a builder
+	row), and its inputs are nameless so a wrapping <form> never receives stray
+	entries for every row.
+
+	Value shape rule (same as FieldInputLocalized's serialization): content in
+	the default language only → plain string; content in more languages →
+	record with empty entries dropped. Languages absent/single → plain string,
+	except a record arriving with foreign-language content is preserved as a
+	record (never silently drop data).
+-->
+<script lang="ts">
+	import { autogrow } from "../../../actions/autogrow.svelte.js";
+	import { tooltip } from "../../../actions/index.js";
+	import { iconChevronUp, iconLanguages } from "../../../icons/index.js";
+	import { isPlainObject } from "../../../utils/is-plain-object.js";
+	import { twMerge } from "../../../utils/tw-merge.js";
+	import type { TranslateFn } from "../../../types.js";
+	import type { LocalizedText } from "../types.js";
+	import { getLocalizedText } from "../utils.js";
+
+	interface Props {
+		value?: LocalizedText;
+		languages?: string[];
+		defaultLanguage?: string;
+		languageLabels?: Record<string, string>;
+		multiline?: boolean;
+		placeholder?: string;
+		disabled?: boolean;
+		readonly?: boolean;
+		tabindex?: number;
+		/** Extra classes for the input elements. */
+		class?: string;
+		/** Id for the default-language input (label association). */
+		id?: string;
+		ariaLabel?: string;
+		/** Applied to the default-language input. */
+		ariaInvalid?: boolean;
+		/** Applied to the default-language input. */
+		ariaDescribedby?: string;
+		/** Fired after `value` has been updated by user input. */
+		onInput?: (value: LocalizedText) => void;
+		t?: TranslateFn;
+	}
+
+	let {
+		// no fallback on purpose — the parent binds possibly-undefined values
+		// (e.g. `FieldDef.description`), which Svelte forbids combining with one
+		value = $bindable(),
+		languages,
+		defaultLanguage,
+		languageLabels,
+		multiline = false,
+		placeholder,
+		disabled = false,
+		readonly = false,
+		tabindex = 0,
+		class: classProp,
+		id,
+		ariaLabel,
+		ariaInvalid,
+		ariaDescribedby,
+		onInput,
+		t = (k: string) => k,
+	}: Props = $props();
+
+	let expanded = $state(false);
+	let rootEl: HTMLElement | undefined = $state();
+
+	const _defaultLanguage = $derived(defaultLanguage || languages?.[0] || "");
+	const _hasMultiple = $derived((languages?.length ?? 0) > 1);
+	// default first (ALWAYS, even when not listed in `languages` — same as
+	// FieldInputLocalized), rest in original order
+	const sortedLanguages = $derived([
+		...(_defaultLanguage ? [_defaultLanguage] : []),
+		...(languages ?? []).filter((l) => l !== _defaultLanguage),
+	]);
+
+	// A record value may arrive while NO languages are configured (defs authored
+	// earlier WITH languages). The single input then edits the record's first
+	// filled entry instead of an "" language key.
+	function recordTarget(rec: Record<string, string>, lang: string): string {
+		return lang || Object.keys(rec).find((k) => rec[k]?.trim()) || "";
+	}
+
+	function readLang(lang: string): string {
+		if (value == null) return "";
+		if (typeof value === "string") return lang === _defaultLanguage ? value : "";
+		if (!lang) return getLocalizedText(value);
+		return value[lang] ?? "";
+	}
+
+	function writeLang(lang: string, text: string) {
+		if (isPlainObject(value)) {
+			const next: Record<string, string> = { ...(value as Record<string, string>) };
+			const target = recordTarget(next, lang);
+			if (!target) {
+				// record with no filled entries and no configured languages
+				value = text;
+			} else {
+				if (text) next[target] = text;
+				else delete next[target];
+				const filled = Object.keys(next).filter((k) => next[k]?.trim());
+				if (!filled.length) value = "";
+				else if (filled.length === 1 && filled[0] === (_defaultLanguage || target))
+					value = next[filled[0]];
+				else value = next;
+			}
+		} else if (lang === _defaultLanguage || !_hasMultiple) {
+			value = text;
+		} else if (text) {
+			const next: Record<string, string> = {};
+			const current = (value as string) ?? "";
+			if (current) next[_defaultLanguage] = current;
+			next[lang] = text;
+			value = next;
+		}
+		onInput?.(value ?? "");
+	}
+
+	/** Focus the default-language input (rendered first in both layouts). */
+	export function focus(): void {
+		rootEl
+			?.querySelector<HTMLInputElement | HTMLTextAreaElement>("input, textarea")
+			?.focus?.();
+	}
+
+	const INPUT_CLS = "w-full";
+
+	const TOGGLE_CLS = [
+		"toggle-btn",
+		"px-1.5 rounded block self-stretch",
+		"min-w-8",
+		"flex items-center justify-center",
+	].join(" ");
+</script>
+
+{#snippet langInput(lang: string, isDefault: boolean)}
+	{#if multiline}
+		<textarea
+			value={readLang(lang)}
+			oninput={(e) => writeLang(lang, e.currentTarget.value)}
+			class={twMerge(INPUT_CLS, "min-h-16", classProp)}
+			{disabled}
+			{readonly}
+			{tabindex}
+			placeholder={isDefault ? placeholder : undefined}
+			id={isDefault ? id : undefined}
+			aria-label={isDefault ? ariaLabel : languageLabels?.[lang] || lang}
+			aria-invalid={(isDefault && ariaInvalid) || undefined}
+			aria-describedby={isDefault ? ariaDescribedby : undefined}
+			use:autogrow={() => ({ enabled: true, value: readLang(lang) })}
+		></textarea>
+	{:else}
+		<input
+			type="text"
+			value={readLang(lang)}
+			oninput={(e) => writeLang(lang, e.currentTarget.value)}
+			class={twMerge(INPUT_CLS, classProp)}
+			{disabled}
+			{readonly}
+			{tabindex}
+			placeholder={isDefault ? placeholder : undefined}
+			id={isDefault ? id : undefined}
+			aria-label={isDefault ? ariaLabel : languageLabels?.[lang] || lang}
+			aria-invalid={(isDefault && ariaInvalid) || undefined}
+			aria-describedby={isDefault ? ariaDescribedby : undefined}
+		/>
+	{/if}
+{/snippet}
+
+<div class="stuic-input-localized w-full flex items-stretch" bind:this={rootEl}>
+	<div class="flex-1 min-w-0">
+		{#if !expanded || !_hasMultiple}
+			{@render langInput(_defaultLanguage, true)}
+		{:else}
+			<div class="expanded-wrap">
+				{#each sortedLanguages as lang, idx (lang)}
+					<div
+						class={twMerge(
+							"flex-1 flex gap-2 items-center pl-2",
+							idx > 0 && "entry-divider"
+						)}
+					>
+						<div
+							class={twMerge(
+								"lang-label",
+								"shrink-0 min-w-8 flex text-sm font-medium uppercase",
+								lang === _defaultLanguage &&
+									"lang-label-default after:content-['*'] after:pl-0.5"
+							)}
+						>
+							{languageLabels?.[lang] || lang}
+						</div>
+						<div class="flex-1 min-w-0">
+							{@render langInput(lang, lang === _defaultLanguage)}
+						</div>
+					</div>
+				{/each}
+			</div>
+		{/if}
+	</div>
+	{#if _hasMultiple}
+		<!-- deliberately never disabled: revealing translations is read access,
+		     which disabled/readonly modes must not take away -->
+		<button
+			type="button"
+			class={TOGGLE_CLS}
+			onclick={() => (expanded = !expanded)}
+			aria-label={String(t(expanded ? "hide_translations" : "show_translations"))}
+			use:tooltip={() => ({
+				enabled: true,
+				content: t(expanded ? "hide_translations" : "show_translations"),
+			})}
+		>
+			{#if expanded}
+				{@html iconChevronUp({ size: 16 })}
+			{:else}
+				{@html iconLanguages({ size: 16 })}
+			{/if}
+		</button>
+	{/if}
+</div>

package/dist/components/FieldsBuilder/_internal/LocalizedTextInput.svelte.d.ts

@@ -0,0 +1,30 @@
+import type { TranslateFn } from "../../../types.js";
+import type { LocalizedText } from "../types.js";
+interface Props {
+    value?: LocalizedText;
+    languages?: string[];
+    defaultLanguage?: string;
+    languageLabels?: Record<string, string>;
+    multiline?: boolean;
+    placeholder?: string;
+    disabled?: boolean;
+    readonly?: boolean;
+    tabindex?: number;
+    /** Extra classes for the input elements. */
+    class?: string;
+    /** Id for the default-language input (label association). */
+    id?: string;
+    ariaLabel?: string;
+    /** Applied to the default-language input. */
+    ariaInvalid?: boolean;
+    /** Applied to the default-language input. */
+    ariaDescribedby?: string;
+    /** Fired after `value` has been updated by user input. */
+    onInput?: (value: LocalizedText) => void;
+    t?: TranslateFn;
+}
+declare const LocalizedTextInput: import("svelte").Component<Props, {
+    focus: () => void;
+}, "value">;
+type LocalizedTextInput = ReturnType<typeof LocalizedTextInput>;
+export default LocalizedTextInput;