@marianmeres/stuic 3.168.0 → 3.170.0

package/dist/components/Input/_internal/FieldLikeChips.svelte

@@ -0,0 +1,286 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { ValidateOptions } from "../../../actions/validate.svelte.js";
+	import type { IntentColorKey } from "../../../utils/design-tokens.js";
+	import type { THC } from "../../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "../types.js";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	/** One rendered chip. `key` must be unique within the row. */
+	export interface FieldLikeChip {
+		key: string | number;
+		label: string;
+		/** Accessible name of the chip's remove (×) button, e.g. "Remove Foo" */
+		removeLabel: string;
+	}
+
+	/**
+	 * Internal: the `chips` trigger of `FieldOptions`. The FieldLikeButton counterpart for a
+	 * selection shown as inline, individually removable Pills — same InputWrap shell, same
+	 * hidden input + validate wiring, same imperative API.
+	 */
+	export interface Props extends InputWrapClassProps {
+		/** The hidden input carrying `value` + `name` (bindable) */
+		input?: HTMLInputElement;
+		value: string;
+		/** The chips to render (the parent derives them from `value`) */
+		chips: FieldLikeChip[];
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		tabindex?: number;
+		renderSize?: "sm" | "md" | "lg" | string;
+		name?: string;
+		required?: boolean;
+		disabled?: boolean;
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		labelAfter?: SnippetWithId | THC;
+		below?: SnippetWithId | THC;
+		labelLeft?: boolean;
+		labelLeftWidth?: "normal" | "wide";
+		labelLeftBreakpoint?: number;
+		style?: string;
+		/** Shown in the row while there are no chips */
+		placeholder?: string;
+		/** Accessible name (and tooltip) of the trailing "open" button */
+		openLabel: string;
+		/** Classes for each chip (Pill) */
+		classChip?: string;
+		/** Pill intent of the chips */
+		chipIntent?: IntentColorKey;
+		/** Open the picker (trailing button, or a click on the empty part of the row) */
+		onOpen: () => void;
+		/** A chip's × was pressed */
+		onRemove: (chip: FieldLikeChip, index: number) => void;
+	}
+</script>
+
+<script lang="ts">
+	import { tick } from "svelte";
+	import { iconSearch } from "../../../icons/index.js";
+	import {
+		validate as validateAction,
+		type ValidationResult,
+	} from "../../../actions/validate.svelte.js";
+	import { getId } from "../../../utils/get-id.js";
+	import Button from "../../Button/Button.svelte";
+	import Pill from "../../Pill/Pill.svelte";
+	import InputWrap from "./InputWrap.svelte";
+
+	let {
+		input = $bindable(),
+		value = $bindable(),
+		chips,
+		label = "",
+		id = getId(),
+		tabindex = 0,
+		description,
+		class: classProp,
+		renderSize = "md",
+		name,
+		//
+		required = false,
+		disabled = false,
+		//
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
+		//
+		labelAfter,
+		below,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classInputBoxWrapInvalid,
+		classDescBox,
+		classDescBoxToggle,
+		classBelowBox,
+		classValidationBox,
+		style = "",
+		//
+		placeholder,
+		openLabel,
+		classChip,
+		chipIntent,
+		onOpen,
+		onRemove,
+	}: Props = $props();
+
+	// chips sit one step smaller than the field they live in
+	const PILL_SIZE: Record<string, string> = { sm: "sm", md: "sm", lg: "md" };
+	let pillSize = $derived(PILL_SIZE[renderSize] ?? "sm");
+
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	let _doValidate: (() => void) | undefined = $state();
+	let rowEl: HTMLDivElement | undefined = $state();
+	let openBtnEl: HTMLElement | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		_doValidate?.();
+		return validation;
+	}
+
+	/** Clear the inline validation message and reset `setCustomValidity`. */
+	export function clearValidation(): void {
+		validation = undefined;
+		input?.setCustomValidity?.("");
+	}
+
+	/** Current validation state, or undefined if validator has never run. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/** Focus the trailing "open" button (the hidden input cannot be focused). */
+	export function focus(): void {
+		openBtnEl?.focus?.();
+	}
+
+	/** Scroll the field into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		rowEl?.scrollIntoView?.({
+			behavior: "smooth",
+			block: "center",
+			...opts,
+		});
+	}
+
+	// the empty part of the row is a pointer convenience: chips own their own clicks and
+	// the trailing button is the keyboard-reachable opener
+	function onRowClick(e: MouseEvent) {
+		if (disabled) return;
+		if ((e.target as Element | null)?.closest?.(".stuic-pill")) return;
+		onOpen();
+	}
+
+	// keep keyboard focus inside the field after a removal: the × now sitting at the same
+	// index, else the trailing button
+	function remove(chip: FieldLikeChip, index: number) {
+		onRemove(chip, index);
+		tick().then(() => {
+			const btns =
+				rowEl?.querySelectorAll<HTMLButtonElement>(".stuic-pill-dismiss") ?? [];
+			const next = btns[Math.min(index, btns.length - 1)];
+			(next ?? openBtnEl)?.focus?.();
+		});
+	}
+</script>
+
+<InputWrap
+	{description}
+	class={classProp}
+	size={renderSize}
+	{id}
+	{label}
+	{labelAfter}
+	{below}
+	{required}
+	{disabled}
+	{labelLeft}
+	{labelLeftWidth}
+	{labelLeftBreakpoint}
+	{classLabel}
+	{classLabelBox}
+	{classInputBox}
+	{classInputBoxWrap}
+	{classInputBoxWrapInvalid}
+	{classDescBox}
+	{classDescBoxToggle}
+	{classBelowBox}
+	{classValidationBox}
+	{validation}
+	{style}
+>
+	<!-- svelte-ignore a11y_no_static_element_interactions -->
+	<!-- svelte-ignore a11y_click_events_have_key_events -->
+	<div
+		bind:this={rowEl}
+		class="stuic-field-options-chips"
+		data-size={renderSize}
+		data-empty={chips.length ? undefined : "true"}
+		onclick={onRowClick}
+	>
+		{#each chips as chip, i (chip.key)}
+			<Pill
+				dismissible
+				size={pillSize}
+				intent={chipIntent}
+				class={classChip}
+				dismissLabel={chip.removeLabel}
+				ondismiss={() => remove(chip, i)}
+				{disabled}
+				title={chip.label}
+			>
+				<!-- own span so an over-long label truncates (the Pill body is a flex row) -->
+				<span class="stuic-field-options-chip-label">{chip.label}</span>
+			</Pill>
+		{/each}
+		{#if !chips.length && placeholder}
+			<span class="stuic-field-options-chips-placeholder">{placeholder}</span>
+		{/if}
+	</div>
+
+	{#snippet inputAfter()}
+		<div class="flex items-center pr-1">
+			<Button
+				bind:el={openBtnEl}
+				iconButton
+				variant="ghost"
+				roundedFull
+				type="button"
+				size={renderSize === "lg" ? "md" : "sm"}
+				aria-label={openLabel}
+				tooltip={openLabel}
+				{disabled}
+				{tabindex}
+				onclick={() => onOpen()}
+			>
+				{@html iconSearch({ size: 18 })}
+			</Button>
+		</div>
+	{/snippet}
+
+	<input
+		bind:value
+		bind:this={input}
+		type="hidden"
+		{id}
+		{name}
+		use:validateAction={() => ({
+			enabled: validateProp !== false,
+			...(typeof validateProp === "boolean"
+				? {
+						// Return actual messages (not reason names) because hidden inputs
+						// don't support el.validationMessage - the validate action preserves
+						// our return value and uses it directly as the error message.
+						customValidator(val, ctx, el) {
+							if (required && !val)
+								return "This field requires attention. Please review and try again.";
+
+							// also, by default, JSON validation is built in
+							try {
+								JSON.parse(val as string);
+								return "";
+							} catch (e) {
+								return "This field is invalid. Please review and try again.";
+							}
+						},
+					}
+				: validateProp),
+			setValidationResult,
+			setDoValidate: (fn) => (_doValidate = fn),
+		})}
+		{required}
+		{disabled}
+	/>
+</InputWrap>

package/dist/components/Input/_internal/FieldLikeChips.svelte.d.ts

@@ -0,0 +1,65 @@
+import type { Snippet } from "svelte";
+import type { ValidateOptions } from "../../../actions/validate.svelte.js";
+import type { IntentColorKey } from "../../../utils/design-tokens.js";
+import type { THC } from "../../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "../types.js";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+/** One rendered chip. `key` must be unique within the row. */
+export interface FieldLikeChip {
+    key: string | number;
+    label: string;
+    /** Accessible name of the chip's remove (×) button, e.g. "Remove Foo" */
+    removeLabel: string;
+}
+/**
+ * Internal: the `chips` trigger of `FieldOptions`. The FieldLikeButton counterpart for a
+ * selection shown as inline, individually removable Pills — same InputWrap shell, same
+ * hidden input + validate wiring, same imperative API.
+ */
+export interface Props extends InputWrapClassProps {
+    /** The hidden input carrying `value` + `name` (bindable) */
+    input?: HTMLInputElement;
+    value: string;
+    /** The chips to render (the parent derives them from `value`) */
+    chips: FieldLikeChip[];
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    tabindex?: number;
+    renderSize?: "sm" | "md" | "lg" | string;
+    name?: string;
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    style?: string;
+    /** Shown in the row while there are no chips */
+    placeholder?: string;
+    /** Accessible name (and tooltip) of the trailing "open" button */
+    openLabel: string;
+    /** Classes for each chip (Pill) */
+    classChip?: string;
+    /** Pill intent of the chips */
+    chipIntent?: IntentColorKey;
+    /** Open the picker (trailing button, or a click on the empty part of the row) */
+    onOpen: () => void;
+    /** A chip's × was pressed */
+    onRemove: (chip: FieldLikeChip, index: number) => void;
+}
+import { type ValidationResult } from "../../../actions/validate.svelte.js";
+declare const FieldLikeChips: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value" | "input">;
+type FieldLikeChips = ReturnType<typeof FieldLikeChips>;
+export default FieldLikeChips;

package/dist/components/Input/field-options-i18n-sk.d.ts

@@ -0,0 +1,21 @@
+import type { FieldOptionsMessages } from "./field-options-i18n.js";
+/**
+ * Slovak message catalog for `FieldOptions`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually imported
+ * (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldOptions,
+ *     createFieldOptionsT,
+ *     FIELD_OPTIONS_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *   const t = createFieldOptionsT(FIELD_OPTIONS_MESSAGES_SK);
+ * </script>
+ *
+ * <FieldOptions name="tags" bind:value {getOptions} {t} />
+ * ```
+ */
+export declare const FIELD_OPTIONS_MESSAGES_SK: FieldOptionsMessages;

package/dist/components/Input/field-options-i18n-sk.js

@@ -0,0 +1,61 @@
+/**
+ * Slovak message catalog for `FieldOptions`. Opt-in — English stays the built-in
+ * default, and this module is only pulled into a bundle when it is actually imported
+ * (the component itself never references it).
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldOptions,
+ *     createFieldOptionsT,
+ *     FIELD_OPTIONS_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *   const t = createFieldOptionsT(FIELD_OPTIONS_MESSAGES_SK);
+ * </script>
+ *
+ * <FieldOptions name="tags" bind:value {getOptions} {t} />
+ * ```
+ */
+export const FIELD_OPTIONS_MESSAGES_SK = {
+    field_req_att: "Toto pole vyžaduje pozornosť. Skontrolujte ho a skúste to znova.",
+    cardinality_of: "z max.",
+    cardinality_selected: "vybraných",
+    submit: "Potvrdiť",
+    select_all: "Vybrať všetko",
+    clear_all: "Zrušiť výber",
+    clear: "Zrušiť výber",
+    search_placeholder: "Píšte pre vyhľadávanie...",
+    search_submit_placeholder: "Píšte pre vyhľadanie a potvrdenie...",
+    cardinality_full: "Dosiahnutý maximálny počet výberov",
+    select_from_list: "Vyberte, prosím, iba zo zoznamu",
+    x_close: "Vymazať vstup alebo zavrieť [esc]",
+    close: "Zavrieť [esc]",
+    unknown_allowed: "Vyberte alebo napíšte a potvrďte",
+    unknown_not_allowed: "Vyberte zo zoznamu",
+    no_results: "Nenašli sa žiadne výsledky.",
+    add_new: 'Pridať "{{value}}"...',
+    click_add_new: "Ak chcete pokračovať, musíte hodnotu pridať",
+    // chips display mode
+    chips_placeholder: "Nič nie je vybrané",
+    chips_open: "Vybrať...",
+    chips_remove: "Odstrániť {{value}}",
+    //
+    pick_tab: "Výber",
+    arrange_tab: "Poradie ({{value}})",
+    arrange_help: "Zmeňte poradie vybraných položiek. Na presun použite tlačidlá.",
+    sort_az: "Zoradiť A–Z",
+    reverse: "Obrátiť",
+    shuffle: "Zamiešať",
+    move_up: "Posunúť vyššie",
+    move_down: "Posunúť nižšie",
+    move_to_top: "Presunúť na začiatok",
+    move_to_bottom: "Presunúť na koniec",
+    remove_item: "Odstrániť",
+    moved_up: "Posunuté vyššie: {{value}}",
+    moved_down: "Posunuté nižšie: {{value}}",
+    removed_item: "Odstránené: {{value}}",
+    sorted_az: "Zoradené od A po Z",
+    reversed: "Poradie obrátené",
+    shuffled: "Poradie zamiešané",
+};

package/dist/components/Input/field-options-i18n.d.ts

@@ -0,0 +1,82 @@
+import type { TranslateFn } from "../../types.js";
+/**
+ * The built-in (English) message catalog of `FieldOptions`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are mustache-style (`{{value}}`).
+ */
+export declare const FIELD_OPTIONS_MESSAGES_EN: {
+    field_req_att: string;
+    cardinality_of: string;
+    cardinality_selected: string;
+    submit: string;
+    select_all: string;
+    clear_all: string;
+    clear: string;
+    search_placeholder: string;
+    search_submit_placeholder: string;
+    cardinality_full: string;
+    select_from_list: string;
+    x_close: string;
+    close: string;
+    unknown_allowed: string;
+    unknown_not_allowed: string;
+    no_results: string;
+    add_new: string;
+    click_add_new: string;
+    chips_placeholder: string;
+    chips_open: string;
+    chips_remove: string;
+    pick_tab: string;
+    arrange_tab: string;
+    arrange_help: string;
+    sort_az: string;
+    reverse: string;
+    shuffle: string;
+    move_up: string;
+    move_down: string;
+    move_to_top: string;
+    move_to_bottom: string;
+    remove_item: string;
+    moved_up: string;
+    moved_down: string;
+    removed_item: string;
+    sorted_az: string;
+    reversed: string;
+    shuffled: string;
+};
+/** Every message key `FieldOptions` may look up. */
+export type FieldOptionsMessageKey = keyof typeof FIELD_OPTIONS_MESSAGES_EN;
+/** A (possibly partial) catalog for one locale. */
+export type FieldOptionsMessages = Record<FieldOptionsMessageKey, string>;
+/**
+ * Builds the `t` prop of `FieldOptions` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * Handy with the `chips` display mode, where a few of the texts (`chips_placeholder`,
+ * `chips_open`, `chips_remove`) end up in the closed field, on the page, next to your own
+ * copy — reworded per field, without restating the whole catalog.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldOptions,
+ *     createFieldOptionsT,
+ *     FIELD_OPTIONS_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *
+ *   // full locale, plus a field specific tweak
+ *   const t = createFieldOptionsT({
+ *     ...FIELD_OPTIONS_MESSAGES_SK,
+ *     chips_placeholder: "Bez štítkov",
+ *   });
+ * </script>
+ *
+ * <FieldOptions chips name="tags" bind:value {getOptions} {t} />
+ * ```
+ */
+export declare function createFieldOptionsT(messages: Partial<FieldOptionsMessages> | Record<string, string>, fallbackMessages?: Partial<FieldOptionsMessages> | Record<string, string>): TranslateFn;
+/** The component's built-in English `t`. */
+export declare const t_default: TranslateFn;

package/dist/components/Input/field-options-i18n.js

@@ -0,0 +1,90 @@
+import { isPlainObject } from "../../utils/is-plain-object.js";
+import { replaceMap } from "../../utils/replace-map.js";
+/**
+ * The built-in (English) message catalog of `FieldOptions`. Also the fallback of every
+ * other bundled locale, so a locale missing a key still renders text.
+ *
+ * Placeholders are mustache-style (`{{value}}`).
+ */
+export const FIELD_OPTIONS_MESSAGES_EN = {
+    field_req_att: "This field requires attention. Please review and try again.",
+    cardinality_of: "of max",
+    cardinality_selected: "selected",
+    submit: "Submit",
+    select_all: "Select all",
+    clear_all: "Clear selected",
+    clear: "Clear",
+    search_placeholder: "Type to search...",
+    search_submit_placeholder: "Type to search and submit...",
+    cardinality_full: "Max selection reached",
+    select_from_list: "Please select from the list only",
+    x_close: "Clear input or close [esc]",
+    close: "Close [esc]",
+    unknown_allowed: "Select or type and submit",
+    unknown_not_allowed: "Select from the list",
+    no_results: "No results found.",
+    add_new: 'Add "{{value}}"...',
+    click_add_new: "You must add the value to continue",
+    // chips display mode
+    chips_placeholder: "Nothing selected",
+    chips_open: "Choose...",
+    chips_remove: "Remove {{value}}",
+    //
+    pick_tab: "Pick",
+    arrange_tab: "Arrange ({{value}})",
+    arrange_help: "Reorder the selected items. Use the buttons to move them.",
+    sort_az: "Sort A–Z",
+    reverse: "Reverse",
+    shuffle: "Shuffle",
+    move_up: "Move up",
+    move_down: "Move down",
+    move_to_top: "Move to top",
+    move_to_bottom: "Move to bottom",
+    remove_item: "Remove",
+    moved_up: "Moved {{value}} up",
+    moved_down: "Moved {{value}} down",
+    removed_item: "Removed {{value}}",
+    sorted_az: "Sorted A to Z",
+    reversed: "Order reversed",
+    shuffled: "Order shuffled",
+};
+/**
+ * Builds the `t` prop of `FieldOptions` from a message catalog. Unknown or untranslated
+ * keys fall back to `fallbackMessages` (English by default), so a catalog may safely be
+ * partial and never renders a raw key.
+ *
+ * Handy with the `chips` display mode, where a few of the texts (`chips_placeholder`,
+ * `chips_open`, `chips_remove`) end up in the closed field, on the page, next to your own
+ * copy — reworded per field, without restating the whole catalog.
+ *
+ * @example
+ * ```svelte
+ * <script>
+ *   import {
+ *     FieldOptions,
+ *     createFieldOptionsT,
+ *     FIELD_OPTIONS_MESSAGES_SK,
+ *   } from "@marianmeres/stuic";
+ *
+ *   // full locale, plus a field specific tweak
+ *   const t = createFieldOptionsT({
+ *     ...FIELD_OPTIONS_MESSAGES_SK,
+ *     chips_placeholder: "Bez štítkov",
+ *   });
+ * </script>
+ *
+ * <FieldOptions chips name="tags" bind:value {getOptions} {t} />
+ * ```
+ */
+export function createFieldOptionsT(messages, fallbackMessages = FIELD_OPTIONS_MESSAGES_EN) {
+    return (k, values = null, fallback = "") => {
+        const out = messages[k] ??
+            fallbackMessages[k] ??
+            (typeof fallback === "string" ? fallback : k);
+        return isPlainObject(values)
+            ? replaceMap(out, values)
+            : out;
+    };
+}
+/** The component's built-in English `t`. */
+export const t_default = createFieldOptionsT(FIELD_OPTIONS_MESSAGES_EN);

package/dist/components/Input/index.css

@@ -81,6 +81,8 @@
 	--stuic-field-options-control-ring: var(--stuic-color-ring);
 	--stuic-field-options-muted-text: var(--stuic-color-muted-foreground);
 	--stuic-field-options-optgroup-text: var(--stuic-color-muted-foreground);
+	/* FieldOptions `chips` display mode */
+	--stuic-field-options-chips-gap: 0.25rem;
 }
 
 @layer components {
@@ -561,6 +563,62 @@
 		opacity: 1;
 	}
 
+	/* `chips` display mode: the selection as inline, removable Pills (FieldLikeChips) */
+	.stuic-field-options-chips {
+		display: flex;
+		flex: 1 1 0%;
+		min-width: 0;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--stuic-field-options-chips-gap);
+		cursor: pointer;
+	}
+
+	.stuic-input.disabled .stuic-field-options-chips {
+		cursor: not-allowed;
+	}
+
+	/* An over-long label must not push the chip out of the field: cap the chip at the row
+	   width and let the label span truncate (the × keeps its size) */
+	.stuic-field-options-chips .stuic-pill {
+		max-width: 100%;
+	}
+
+	.stuic-field-options-chip-label {
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	/* Row metrics follow the input size tokens so the field lines up with its siblings */
+	.stuic-field-options-chips[data-size="sm"] {
+		padding: calc(var(--stuic-input-padding-y-sm) / 2) var(--stuic-input-padding-x-sm);
+		font-size: var(--stuic-input-font-size-sm);
+		min-height: var(--stuic-input-min-height-sm);
+	}
+
+	.stuic-field-options-chips[data-size="md"],
+	.stuic-field-options-chips:not([data-size]) {
+		padding: calc(var(--stuic-input-padding-y-md) / 2) var(--stuic-input-padding-x-md);
+		font-size: var(--stuic-input-font-size-md);
+		min-height: var(--stuic-input-min-height-md);
+	}
+
+	.stuic-field-options-chips[data-size="lg"] {
+		padding: calc(var(--stuic-input-padding-y-lg) / 2) var(--stuic-input-padding-x-lg);
+		font-size: var(--stuic-input-font-size-lg);
+		min-height: var(--stuic-input-min-height-lg);
+	}
+
+	.stuic-field-options-chips-placeholder {
+		color: var(
+			--stuic-field-options-chips-placeholder-text,
+			var(--stuic-input-placeholder)
+		);
+		user-select: none;
+	}
+
 	/* ============================================================================
 	   FIELD INPUT LOCALIZED
 	   ============================================================================ */

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

@@ -8,6 +8,8 @@ export { default as FieldInput, type Props as FieldInputProps, } from "./FieldIn
 export { default as FieldMoney, type Props as FieldMoneyProps, } from "./FieldMoney.svelte";
 export { default as FieldLikeButton, type Props as FieldLikeButtonProps, } from "./FieldLikeButton.svelte";
 export { default as FieldOptions, type Props as FieldOptionsProps, type Option as FieldOption, } from "./FieldOptions.svelte";
+export { createFieldOptionsT, FIELD_OPTIONS_MESSAGES_EN, type FieldOptionsMessageKey, type FieldOptionsMessages, } from "./field-options-i18n.js";
+export { FIELD_OPTIONS_MESSAGES_SK } from "./field-options-i18n-sk.js";
 export { default as FieldRadios, type Props as FieldRadiosProps, } from "./FieldRadios.svelte";
 export { default as FieldSelect, type Props as FieldSelectProps, } from "./FieldSelect.svelte";
 export { default as Fieldset, type Props as FieldsetProps } from "./Fieldset.svelte";