@marianmeres/stuic 3.168.0 → 3.169.0

package/dist/README.md

@@ -43,7 +43,7 @@ npm install @marianmeres/stuic
 - **FieldRadios** - Radio button group
 - **FieldFile** - File upload input
 - **FieldAssets** - Multi-file upload with preview
-- **FieldOptions** - Modal-based multi-select picker
+- **FieldOptions** - Modal-based multi-select picker (optional inline `chips` display)
 - **FieldKeyValues** - Key-value pairs editor with JSON serialization
 - **FieldSwitch** - Toggle switch within a form
 - **Fieldset** - Group of form fields with legend

package/dist/components/Input/FieldOptions.svelte

@@ -20,6 +20,7 @@
 		type ValidationResult,
 	} from "../../actions/validate.svelte.js";
 	import type { TranslateFn } from "../../types.js";
+	import type { IntentColorKey } from "../../utils/design-tokens.js";
 	import { getId } from "../../utils/get-id.js";
 	import { isPlainObject } from "../../utils/is-plain-object.js";
 	import { maybeJsonParse } from "../../utils/maybe-json-parse.js";
@@ -36,6 +37,7 @@
 	import X from "../X/X.svelte";
 	import InputWrap from "./_internal/InputWrap.svelte";
 	import FieldLikeButton from "./FieldLikeButton.svelte";
+	import FieldLikeChips, { type FieldLikeChip } from "./_internal/FieldLikeChips.svelte";
 	import ListItemButton from "../ListItemButton/ListItemButton.svelte";
 	import type { InputWrapClassProps } from "./types.js";
 
@@ -90,6 +92,18 @@
 		 * serialized to `value` on submit. No-op for single-select. Default `false`.
 		 */
 		ordered?: boolean;
+		/**
+		 * Opt-in: render the current selection as inline, individually removable chips
+		 * (`Pill`s) instead of the comma-joined text button. Picking still happens in the
+		 * modal (opened by the trailing button, or by clicking the empty part of the row);
+		 * removing a chip writes `value` immediately, without the modal. `renderValue` is
+		 * ignored in this mode (labels come from `renderOptionLabel`). Default `false`.
+		 */
+		chips?: boolean;
+		/** Classes for each chip (`chips` mode only) */
+		classChip?: string;
+		/** Pill intent of the chips (`chips` mode only) */
+		chipIntent?: IntentColorKey;
 		showIconsCheckbox?: boolean;
 		showIconsRadio?: boolean;
 		searchPlaceholder?: string;
@@ -124,6 +138,10 @@
 			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}})",
@@ -214,6 +232,9 @@
 		renderOptionGroup = (s: string) => `${s}`.replaceAll("_", " "),
 		allowUnknown = false,
 		ordered = false,
+		chips = false,
+		classChip,
+		chipIntent,
 		showIconsCheckbox = true,
 		showIconsRadio = false,
 		searchPlaceholder,
@@ -229,8 +250,9 @@
 		modal = modalDialog;
 	});
 
-	// Imperative API delegates to the inner FieldLikeButton trigger.
-	let triggerRef: FieldLikeButton | undefined = $state();
+	// Imperative API delegates to the inner trigger (FieldLikeButton, or FieldLikeChips in
+	// `chips` mode) — both expose the same methods.
+	let triggerRef: FieldLikeButton | FieldLikeChips | undefined = $state();
 
 	/** Trigger validation now. Renders the inline message if invalid. */
 	export function validate(): ValidationResult | undefined {
@@ -604,6 +626,38 @@
 		});
 	}
 
+	// --- chips (inline display of the selection) ---
+
+	// straight from `value`, in value order — so with `ordered` the arranged order is what
+	// the user sees; labels go through the same renderer as the modal's options
+	let chipItems: FieldLikeChip[] = $derived.by(() => {
+		if (!chips) return [];
+		const parsed = maybeJsonParse(value || "[]");
+		if (!Array.isArray(parsed)) return [];
+		return parsed
+			.filter((item) => item != null)
+			.map((item: Item, i: number) => {
+				const label = _renderOptionLabel(item);
+				return {
+					// index-suffixed so a (malformed) duplicate id can't break the keyed each
+					key: `${item[itemIdPropName] ?? ""}__${i}`,
+					label,
+					removeLabel: t("chips_remove", { value: label }),
+				};
+			});
+	});
+
+	// removing a chip is an immediate, modal-less edit of `value` + the same change
+	// notification the modal submit does (so validation re-runs)
+	function removeChip(_chip: FieldLikeChip, index: number) {
+		const parsed = maybeJsonParse(value || "[]");
+		if (!Array.isArray(parsed)) return;
+		const items = parsed.filter((item) => item != null);
+		value = JSON.stringify(items.filter((_, i) => i !== index));
+		_dispatch_change_to_owner();
+		onChange?.(value);
+	}
+
 	// "outer" submit - will set the outer bound value (always string) and close modal...
 	// further process is left on the consumer
 	function submit() {
@@ -712,6 +766,42 @@
 <div>
 	{#if trigger}
 		{@render trigger({ value, modal: modalDialog })}
+	{:else if chips}
+		<FieldLikeChips
+			bind:this={triggerRef}
+			bind:value
+			bind:input={parentHiddenInputEl}
+			chips={chipItems}
+			{name}
+			class={classProp}
+			{label}
+			{description}
+			{labelLeft}
+			{labelAfter}
+			{below}
+			{labelLeftWidth}
+			{labelLeftBreakpoint}
+			{classLabel}
+			{classLabelBox}
+			{classInputBox}
+			{classInputBoxWrap}
+			{classInputBoxWrapInvalid}
+			{classDescBox}
+			{classDescBoxToggle}
+			{classBelowBox}
+			{classValidationBox}
+			{style}
+			validate={wrappedValidate}
+			{required}
+			{disabled}
+			{tabindex}
+			{classChip}
+			{chipIntent}
+			placeholder={t("chips_placeholder")}
+			openLabel={t("chips_open")}
+			onOpen={() => modalDialog?.open()}
+			onRemove={removeChip}
+		/>
 	{:else}
 		<FieldLikeButton
 			bind:this={triggerRef}

package/dist/components/Input/FieldOptions.svelte.d.ts

@@ -2,6 +2,7 @@ import { type Item } from "@marianmeres/item-collection";
 import { type Snippet } from "svelte";
 import { type ValidateOptions, type ValidationResult } from "../../actions/validate.svelte.js";
 import type { TranslateFn } from "../../types.js";
+import type { IntentColorKey } from "../../utils/design-tokens.js";
 import { ModalDialog } from "../ModalDialog/index.js";
 import { NotificationsStack } from "../Notifications/index.js";
 import type { THC } from "../Thc/Thc.svelte";
@@ -62,6 +63,18 @@ export interface Props extends InputWrapClassProps, Record<string, any> {
      * serialized to `value` on submit. No-op for single-select. Default `false`.
      */
     ordered?: boolean;
+    /**
+     * Opt-in: render the current selection as inline, individually removable chips
+     * (`Pill`s) instead of the comma-joined text button. Picking still happens in the
+     * modal (opened by the trailing button, or by clicking the empty part of the row);
+     * removing a chip writes `value` immediately, without the modal. `renderValue` is
+     * ignored in this mode (labels come from `renderOptionLabel`). Default `false`.
+     */
+    chips?: boolean;
+    /** Classes for each chip (`chips` mode only) */
+    classChip?: string;
+    /** Pill intent of the chips (`chips` mode only) */
+    chipIntent?: IntentColorKey;
     showIconsCheckbox?: boolean;
     showIconsRadio?: boolean;
     searchPlaceholder?: string;

package/dist/components/Input/README.md

@@ -408,48 +408,54 @@ Components use data attributes for CSS styling:
 
 ## FieldOptions
 
-A modal-based multi-select/single-select component with search functionality, typeahead support, and option grouping.
+A modal-based multi-select/single-select component with search functionality, typeahead support, and option grouping. The closed field can show the selection as inline removable chips (`chips`).
 
 ### Props
 
-| Prop                | Type                                                       | Default    | Description                                                                         |
-| ------------------- | ---------------------------------------------------------- | ---------- | ----------------------------------------------------------------------------------- |
-| `value`             | `string`                                                   | `"[]"`     | JSON array of selected items (bindable)                                             |
-| `name`              | `string`                                                   | -          | Form field name                                                                     |
-| `getOptions`        | `(q: string, current: Item[]) => Promise<{found: Item[]}>` | -          | Async function to fetch options                                                     |
-| `cardinality`       | `number`                                                   | `Infinity` | Max selections (-1 for unlimited)                                                   |
-| `allowUnknown`      | `boolean`                                                  | `false`    | Allow typing custom values                                                          |
-| `ordered`           | `boolean`                                                  | `false`    | Opt-in: add an "Arrange" screen to manually order the selection (multi-select only) |
-| `renderOptionLabel` | `(item: Item) => string`                                   | -          | Custom option label renderer                                                        |
-| `renderOptionGroup` | `(s: string) => string`                                    | -          | Custom optgroup label renderer                                                      |
-| `renderValue`       | `(stringifiedItems: string) => string`                     | -          | Custom value display renderer                                                       |
-| `showIconsCheckbox` | `boolean`                                                  | `true`     | Show checkbox icons in multi-select                                                 |
-| `showIconsRadio`    | `boolean`                                                  | `false`    | Show radio icons in single-select                                                   |
-| `searchPlaceholder` | `string`                                                   | -          | Custom search placeholder                                                           |
-| `itemIdPropName`    | `string`                                                   | `"id"`     | Property name for item ID                                                           |
-| `notifications`     | `NotificationsStack`                                       | -          | Notification handler for errors                                                     |
+| Prop                | Type                                                       | Default    | Description                                                                              |
+| ------------------- | ---------------------------------------------------------- | ---------- | ---------------------------------------------------------------------------------------- |
+| `value`             | `string`                                                   | `"[]"`     | JSON array of selected items (bindable)                                                  |
+| `name`              | `string`                                                   | -          | Form field name                                                                          |
+| `getOptions`        | `(q: string, current: Item[]) => Promise<{found: Item[]}>` | -          | Async function to fetch options                                                          |
+| `cardinality`       | `number`                                                   | `Infinity` | Max selections (-1 for unlimited)                                                        |
+| `allowUnknown`      | `boolean`                                                  | `false`    | Allow typing custom values                                                               |
+| `ordered`           | `boolean`                                                  | `false`    | Opt-in: add an "Arrange" screen to manually order the selection (multi-select only)      |
+| `chips`             | `boolean`                                                  | `false`    | Opt-in: show the selection as inline removable chips; picking still happens in the modal |
+| `classChip`         | `string`                                                   | -          | Classes for each chip (`chips` mode)                                                     |
+| `chipIntent`        | `IntentColorKey`                                           | -          | Pill intent of the chips (`chips` mode)                                                  |
+| `renderOptionLabel` | `(item: Item) => string`                                   | -          | Custom option label renderer                                                             |
+| `renderOptionGroup` | `(s: string) => string`                                    | -          | Custom optgroup label renderer                                                           |
+| `renderValue`       | `(stringifiedItems: string) => string`                     | -          | Custom value display renderer                                                            |
+| `showIconsCheckbox` | `boolean`                                                  | `true`     | Show checkbox icons in multi-select                                                      |
+| `showIconsRadio`    | `boolean`                                                  | `false`    | Show radio icons in single-select                                                        |
+| `searchPlaceholder` | `string`                                                   | -          | Custom search placeholder                                                                |
+| `itemIdPropName`    | `string`                                                   | `"id"`     | Property name for item ID                                                                |
+| `notifications`     | `NotificationsStack`                                       | -          | Notification handler for errors                                                          |
 
 ### Class Props
 
-| Prop                | Target                       |
-| ------------------- | ---------------------------- |
-| `classOption`       | Option item (ListItemButton) |
-| `classOptionActive` | Active/selected option       |
-| `classOptgroup`     | Option group label           |
-| `classModalField`   | Modal field wrapper          |
+| Prop                | Target                           |
+| ------------------- | -------------------------------- |
+| `classOption`       | Option item (ListItemButton)     |
+| `classOptionActive` | Active/selected option           |
+| `classOptgroup`     | Option group label               |
+| `classModalField`   | Modal field wrapper              |
+| `classChip`         | Each chip (Pill) in `chips` mode |
 
 ### CSS Variables
 
 #### Component Tokens
 
-| Variable                                   | Default                          | Description                     |
-| ------------------------------------------ | -------------------------------- | ------------------------------- |
-| `--stuic-field-options-divider`            | `--stuic-color-border`           | Divider/separator color         |
-| `--stuic-field-options-control-text`       | `--stuic-color-muted-foreground` | Control button text color       |
-| `--stuic-field-options-control-text-hover` | `--stuic-color-foreground`       | Control button hover text color |
-| `--stuic-field-options-control-ring`       | `--stuic-color-ring`             | Control button focus ring       |
-| `--stuic-field-options-muted-text`         | `--stuic-color-muted-foreground` | Muted/secondary text color      |
-| `--stuic-field-options-optgroup-text`      | `--stuic-color-muted-foreground` | Option group label color        |
+| Variable                                       | Default                          | Description                               |
+| ---------------------------------------------- | -------------------------------- | ----------------------------------------- |
+| `--stuic-field-options-divider`                | `--stuic-color-border`           | Divider/separator color                   |
+| `--stuic-field-options-control-text`           | `--stuic-color-muted-foreground` | Control button text color                 |
+| `--stuic-field-options-control-text-hover`     | `--stuic-color-foreground`       | Control button hover text color           |
+| `--stuic-field-options-control-ring`           | `--stuic-color-ring`             | Control button focus ring                 |
+| `--stuic-field-options-muted-text`             | `--stuic-color-muted-foreground` | Muted/secondary text color                |
+| `--stuic-field-options-optgroup-text`          | `--stuic-color-muted-foreground` | Option group label color                  |
+| `--stuic-field-options-chips-gap`              | `0.25rem`                        | Gap between chips (`chips` mode)          |
+| `--stuic-field-options-chips-placeholder-text` | `--stuic-input-placeholder`      | Placeholder color of an empty `chips` row |
 
 ### Usage
 
@@ -503,6 +509,35 @@ on submit (and round-trips on reopen). Single-select fields ignore the prop.
 > default contract, so the Arrange list can render selected items even when they aren't in
 > the current search results.
 
+### Chips display (`chips`)
+
+By default the closed field is a button showing the selection as comma-joined text. Opt in
+with `chips` to show it as inline, individually removable `Pill` chips instead — the tags form
+factor. Picking still happens in the same modal: open it with the trailing button, or by
+clicking the empty part of the row. Each chip's × removes that item immediately (writes
+`value`, fires `onChange`, re-runs validation) without opening the modal, and keyboard focus
+stays in the field. Chips render in `value` order, so with `ordered` they mirror the arranged
+order. `renderValue` is ignored in this mode; labels come from `renderOptionLabel`.
+
+```svelte
+<FieldOptions
+	label="Tags"
+	name="tags"
+	bind:value
+	{getOptions}
+	cardinality={-1}
+	allowUnknown
+	chips
+	chipIntent="primary"
+/>
+```
+
+Each chip's × is a full-height 24px square (the Pill's own touch-target floor,
+`--stuic-pill-dismiss-min-size`), so no extra hit-area padding is needed on touch devices.
+Typing directly into the field (an inline combobox) is deliberately not part of this mode — the
+modal remains the single place where options are searched and picked, which is what keeps the
+field usable under a soft keyboard.
+
 ### Customization Examples
 
 ```css

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/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/Pill/Pill.svelte

@@ -42,6 +42,8 @@
 		dismissible?: boolean;
 		/** Called when X is clicked. Stops propagation so parent onclick is unaffected. */
 		ondismiss?: (e: MouseEvent) => void;
+		/** Accessible name of the built-in X dismiss button */
+		dismissLabel?: string;
 		/** Status dot rendered before content (uses current intent color) */
 		dot?: boolean;
 		/** Content rendered before children */
@@ -76,6 +78,7 @@
 		disabled,
 		dismissible = false,
 		ondismiss,
+		dismissLabel = "Dismiss",
 		dot = false,
 		contentBefore,
 		contentAfter,
@@ -109,11 +112,14 @@
 	<button
 		type="button"
 		class="stuic-pill-dismiss"
-		aria-label="Dismiss"
+		aria-label={dismissLabel}
 		onclick={handleDismiss}
 		{disabled}
 	>
-		<X strokeWidth={2} />
+		<!-- The icon box is sized in CSS (tokens); the X itself just fills it. -->
+		<span class="stuic-pill-dismiss-icon" aria-hidden="true">
+			<X class="size-full" strokeWidth={2.5} />
+		</span>
 	</button>
 {/snippet}
 

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

@@ -35,6 +35,8 @@ export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     dismissible?: boolean;
     /** Called when X is clicked. Stops propagation so parent onclick is unaffected. */
     ondismiss?: (e: MouseEvent) => void;
+    /** Accessible name of the built-in X dismiss button */
+    dismissLabel?: string;
     /** Status dot rendered before content (uses current intent color) */
     dot?: boolean;
     /** Content rendered before children */

package/dist/components/Pill/README.md

@@ -4,27 +4,28 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 
 ## Props
 
-| Prop            | Type                                                               | Default  | Description                                                           |
-| --------------- | ------------------------------------------------------------------ | -------- | --------------------------------------------------------------------- |
-| `intent`        | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -        | Semantic color intent                                                 |
-| `variant`       | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"soft"` | Visual variant (how colors are applied)                               |
-| `size`          | `"sm" \| "md" \| "lg"`                                             | `"md"`   | Pill size                                                             |
-| `muted`         | `boolean`                                                          | `false`  | Reduce emphasis (lower opacity)                                       |
-| `active`        | `boolean`                                                          | `false`  | Selected/active state (filter-chip behavior)                          |
-| `roundedFull`   | `boolean`                                                          | `true`   | Fully rounded corners (9999px). Set `false` to use the element radius |
-| `block`         | `boolean`                                                          | `false`  | Render as block-level flex (full width). `inline-flex` by default     |
-| `unstyled`      | `boolean`                                                          | `false`  | Skip all default styling                                              |
-| `href`          | `string`                                                           | -        | Render as `<a>` with this URL                                         |
-| `target`        | `string`                                                           | -        | Link target (only when `href` is set)                                 |
-| `onclick`       | `(e: MouseEvent) => void`                                          | -        | Render as `<button>` with this handler (when no `href`)               |
-| `disabled`      | `boolean`                                                          | -        | Disabled state (interactive variants only)                            |
-| `dismissible`   | `boolean`                                                          | `false`  | Show built-in X dismiss button                                        |
-| `ondismiss`     | `(e: MouseEvent) => void`                                          | -        | Called when X is clicked. Stops propagation                           |
-| `dot`           | `boolean`                                                          | `false`  | Status dot rendered before content                                    |
-| `contentBefore` | `THC`                                                              | -        | Content rendered before children                                      |
-| `contentAfter`  | `THC`                                                              | -        | Content rendered after children                                       |
-| `el`            | `HTMLElement`                                                      | -        | Element reference (bindable)                                          |
-| `class`         | `string`                                                           | -        | Additional CSS classes                                                |
+| Prop            | Type                                                               | Default     | Description                                                           |
+| --------------- | ------------------------------------------------------------------ | ----------- | --------------------------------------------------------------------- |
+| `intent`        | `"primary" \| "accent" \| "destructive" \| "warning" \| "success"` | -           | Semantic color intent                                                 |
+| `variant`       | `"solid" \| "outline" \| "ghost" \| "soft" \| "link"`              | `"soft"`    | Visual variant (how colors are applied)                               |
+| `size`          | `"sm" \| "md" \| "lg"`                                             | `"md"`      | Pill size                                                             |
+| `muted`         | `boolean`                                                          | `false`     | Reduce emphasis (lower opacity)                                       |
+| `active`        | `boolean`                                                          | `false`     | Selected/active state (filter-chip behavior)                          |
+| `roundedFull`   | `boolean`                                                          | `true`      | Fully rounded corners (9999px). Set `false` to use the element radius |
+| `block`         | `boolean`                                                          | `false`     | Render as block-level flex (full width). `inline-flex` by default     |
+| `unstyled`      | `boolean`                                                          | `false`     | Skip all default styling                                              |
+| `href`          | `string`                                                           | -           | Render as `<a>` with this URL                                         |
+| `target`        | `string`                                                           | -           | Link target (only when `href` is set)                                 |
+| `onclick`       | `(e: MouseEvent) => void`                                          | -           | Render as `<button>` with this handler (when no `href`)               |
+| `disabled`      | `boolean`                                                          | -           | Disabled state (interactive variants only)                            |
+| `dismissible`   | `boolean`                                                          | `false`     | Show built-in X dismiss button                                        |
+| `ondismiss`     | `(e: MouseEvent) => void`                                          | -           | Called when X is clicked. Stops propagation                           |
+| `dismissLabel`  | `string`                                                           | `"Dismiss"` | Accessible name of the X dismiss button                               |
+| `dot`           | `boolean`                                                          | `false`     | Status dot rendered before content                                    |
+| `contentBefore` | `THC`                                                              | -           | Content rendered before children                                      |
+| `contentAfter`  | `THC`                                                              | -           | Content rendered after children                                       |
+| `el`            | `HTMLElement`                                                      | -           | Element reference (bindable)                                          |
+| `class`         | `string`                                                           | -           | Additional CSS classes                                                |
 
 ## Element Resolution
 
@@ -172,6 +173,15 @@ A small rounded inline element for tags, badges, status indicators, and filter c
 | `--stuic-pill-gap`          | `0.375rem`             | Gap between dot/before/children/after/dismiss           |
 | `--stuic-pill-dot-size`     | `0.5rem`               | Status dot diameter                                     |
 
+### Dismiss Button Tokens
+
+| Variable                         | Default                                             | Description                                                         |
+| -------------------------------- | --------------------------------------------------- | ------------------------------------------------------------------- |
+| `--stuic-pill-dismiss-min-size`  | `1.5rem`                                            | Touch-target floor for the X button (its square never gets smaller) |
+| `--stuic-pill-dismiss-icon-size` | `1.125em`                                           | Size of the X glyph box (relative to the pill font size)            |
+| `--stuic-pill-dismiss-bg-hover`  | `color-mix(in srgb, currentColor 12%, transparent)` | Hover background of the whole X square                              |
+| `--stuic-pill-dismiss-bg-active` | `color-mix(in srgb, currentColor 20%, transparent)` | Pressed background of the whole X square                            |
+
 ### Size Tokens
 
 Each size (sm, md, lg) has corresponding tokens:
@@ -181,7 +191,10 @@ Each size (sm, md, lg) has corresponding tokens:
 - `--stuic-pill-font-size-{size}`
 - `--stuic-pill-min-height-{size}`
 
-Dismissible pills override `padding-y` to `0` (the X button defines the height).
+Dismissible pills override `padding-y` and `padding-inline-end` to `0`: the X button is a
+full-height square (side = the pill's `min-height`, floored at `--stuic-pill-dismiss-min-size`)
+sitting flush with the pill's end edge, and the whole square is the hover/press surface — not just
+the glyph. Its corners inherit the pill radius, so on rounded pills the hover surface is the end cap.
 
 ### Intent Color Tokens
 

package/dist/components/Pill/index.css

@@ -21,6 +21,12 @@
 	/* Status dot */
 	--stuic-pill-dot-size: 0.5rem;
 
+	/* Dismiss (X) button: a full-height square flush with the pill's end edge */
+	--stuic-pill-dismiss-min-size: 1.5rem; /* touch target floor (24px), whatever the pill size */
+	--stuic-pill-dismiss-icon-size: 1.125em; /* the X glyph box, relative to the pill font size */
+	--stuic-pill-dismiss-bg-hover: color-mix(in srgb, currentColor 12%, transparent);
+	--stuic-pill-dismiss-bg-active: color-mix(in srgb, currentColor 20%, transparent);
+
 	/* Size: sm */
 	--stuic-pill-padding-x-sm: 0.5rem;
 	--stuic-pill-padding-y-sm: 0.125rem;
@@ -145,13 +151,36 @@
 		min-height: var(--stuic-pill-min-height-lg);
 	}
 
-	/* Dismissible pills: drop vertical padding — the X button already provides
-	   visual height, extra padding-y just makes them oversized. */
-	.stuic-pill[data-dismissible="true"][data-size="sm"],
-	.stuic-pill[data-dismissible="true"][data-size="md"],
-	.stuic-pill[data-dismissible="true"][data-size="lg"] {
+	/* Dismissible pills: drop vertical + end padding — the X button spans the full
+	   height and sits flush with the end edge (its hover surface IS the end cap),
+	   so any padding there would only make the pill oversized. */
+	.stuic-pill[data-dismissible="true"] {
 		padding-top: 0;
 		padding-bottom: 0;
+		padding-inline-end: 0;
+	}
+
+	/* The X button is a square whose side follows the pill's min-height, but never
+	   drops below the touch-target floor (so sm pills keep a 24px X). */
+	.stuic-pill[data-dismissible="true"][data-size="sm"] {
+		--_dismiss-size: max(
+			var(--stuic-pill-min-height-sm),
+			var(--stuic-pill-dismiss-min-size)
+		);
+	}
+
+	.stuic-pill[data-dismissible="true"][data-size="md"] {
+		--_dismiss-size: max(
+			var(--stuic-pill-min-height-md),
+			var(--stuic-pill-dismiss-min-size)
+		);
+	}
+
+	.stuic-pill[data-dismissible="true"][data-size="lg"] {
+		--_dismiss-size: max(
+			var(--stuic-pill-min-height-lg),
+			var(--stuic-pill-dismiss-min-size)
+		);
 	}
 
 	/* ============================================================================
@@ -448,31 +477,45 @@
 		cursor: not-allowed;
 	}
 
-	/* Dismiss X button */
+	/* Dismiss X button: a full-height square segment flush with the pill's end edge.
+	   The whole square (not just the glyph) is the hover/press surface — the same
+	   treatment as SplitButton's secondary trigger. Radius is inherited from the pill,
+	   so on rounded-full pills the hover surface coincides with the end cap. */
 	.stuic-pill-dismiss {
 		display: inline-flex;
 		align-items: center;
 		justify-content: center;
+		align-self: stretch;
+		min-width: var(--_dismiss-size, var(--stuic-pill-dismiss-min-size));
+		min-height: var(--_dismiss-size, var(--stuic-pill-dismiss-min-size));
 		appearance: none;
 		background: transparent;
 		border: 0;
+		border-radius: inherit;
 		padding: 0;
 		margin: 0;
 		color: inherit;
 		cursor: pointer;
 		opacity: 0.7;
-		transition: opacity var(--stuic-pill-transition, var(--stuic-transition));
+		transition:
+			opacity var(--stuic-pill-transition, var(--stuic-transition)),
+			background var(--stuic-pill-transition, var(--stuic-transition));
 		flex-shrink: 0;
 	}
 
 	.stuic-pill-dismiss:hover:not(:disabled) {
 		opacity: 1;
+		background: var(--stuic-pill-dismiss-bg-hover);
+	}
+
+	.stuic-pill-dismiss:active:not(:disabled) {
+		background: var(--stuic-pill-dismiss-bg-active);
 	}
 
+	/* Flush with the pill edge, so the ring goes inside the square */
 	.stuic-pill-dismiss:focus-visible {
 		outline: var(--stuic-pill-ring-width) solid var(--_ring, var(--stuic-pill-ring-color));
-		outline-offset: 1px;
-		border-radius: 9999px;
+		outline-offset: calc(-1 * var(--stuic-pill-ring-width));
 	}
 
 	.stuic-pill-dismiss:disabled {
@@ -480,14 +523,10 @@
 		cursor: not-allowed;
 	}
 
-	.stuic-pill-dismiss svg {
-		width: 1em;
-		height: 1em;
-	}
-
-	/* Tighten dismiss icon size per pill size */
-	.stuic-pill[data-size="sm"] .stuic-pill-dismiss svg {
-		width: 0.875em;
-		height: 0.875em;
+	/* The glyph box — deliberately smaller than the button, which keeps the target. */
+	.stuic-pill-dismiss-icon {
+		display: inline-flex;
+		width: var(--stuic-pill-dismiss-icon-size);
+		height: var(--stuic-pill-dismiss-icon-size);
 	}
 }

package/docs/maybe-todo.md

@@ -18,7 +18,8 @@ Checked first, to avoid false positives:
 - **Table pagination** — built into `DataTable` (`showpager`)
 - **Multi-select / tags input** — `FieldOptions` (async `getOptions` search, typeahead,
   `cardinality`, option groups, `allowUnknown` for ad-hoc values, `ordered` for manual
-  arrangement). See the note at the bottom on the inline-chip presentation variant.
+  arrangement, `chips` for the inline tag form factor). See the note at the bottom on
+  the inline-chip presentation.
 - **File dropzone** — `actions/file-dropzone` + `FieldFile` / `FieldAssets`
 
 ## Tier 1 — staples nearly every comparable library ships
@@ -82,16 +83,36 @@ Checked first, to avoid false positives:
 ## Note: inline-chip presentation of FieldOptions
 
 Initially listed as a Tier-1 "tags input" gap; retracted — `FieldOptions` covers the
-capability. What stuic lacks is at most the _inline chip form factor_: chips inside the
-field with per-chip remove ×, a text input riding alongside, suggestions in a popover
-without leaving the page. Faster for dense desktop/admin work; the existing modal flow
-is arguably better on mobile.
-
-If ever built, the design to argue for: a presentation mode of `FieldOptions` (the
-selection model — `ItemCollection`, `cardinality`, `allowUnknown` — is already there),
-not a new component. Inline combobox on pointer devices, delegating to the existing
-modal on touch/small screens (`breakpoint.svelte.ts` + `device-pointer.svelte.ts`
-enable the switch).
+capability. What stuic lacked was the _inline chip form factor_. That splits into two
+separable halves, and only the second one has a mobile problem:
+
+1. ~~**Chips as the field's display**~~ — ✅ shipped (`FieldOptions` `chips` prop, see
+   `Input/README.md`): the closed field shows the selection as removable `Pill` chips
+   (per-chip ×, focus kept in the field, `change` dispatched so validation re-runs) plus a
+   trailing button that opens the existing modal; the empty part of the row opens it too.
+   Internally a `FieldLikeButton` sibling (`Input/_internal/FieldLikeChips.svelte`) — the
+   chips carry their own buttons, so they cannot live inside the `<button>` trigger. Works
+   on every device; the one touch concern (× target size) is handled with a padded hit
+   area on `pointer: coarse`.
+2. **Inline adding** (type into the field, suggestions, Enter commits) — not built. This is
+   where every mobile hazard lives (see the reality check below). The design to argue for,
+   if ever built:
+   - a presentation mode of `FieldOptions`, not a new component — the selection model
+     (`ItemCollection`, `cardinality`, `allowUnknown`, `ordered`) is already there. But the
+     engine is currently bound to the modal lifecycle (hydrate on open, fetch while
+     visible, clear on submit) and would need extracting into a shared `.svelte.ts` class
+     rather than more branches in the 1250-line file; that is the real cost
+   - no floating listbox popover: reuse the existing `typeahead` action (ghost text, Tab
+     accepts, Enter commits, Backspace at position 0 removes the last chip via
+     `onDeleteRequest`). No anchored dropdown means the soft-keyboard hazard disappears by
+     construction; the modal stays the browse path via the trailing button. A real list
+     popover can be added later behind the same prop if ghost text proves insufficient
+   - gate it on the `md` breakpoint (`breakpoint.svelte.ts`), not on `DevicePointer` —
+     that util uses `any-pointer`, so a touchscreen laptop counts as coarse and an iPad
+     with a trackpad as fine; the breakpoint is deterministic and testable in the browser
+     suite. If pointer detection is wanted as well, it should be the primary
+     `pointer: coarse`
+   - below the breakpoint, delegate to the modal — i.e. exactly the shipped `chips` mode
 
 Mobile reality check for the inline variant, if it were ever made touch-capable
 instead of delegating:

package/docs/upgrading.md

@@ -99,6 +99,12 @@ interface InputWrapClassProps {
 
 Previously most fields only accepted 5–7 of these. You can now pass any of them to **FieldInput, FieldTextarea, FieldSelect, FieldSwitch, FieldFile, FieldLikeButton, FieldObject, FieldOptions, FieldAssets, FieldPhoneNumber, FieldInputLocalized, FieldKeyValues** uniformly. `FieldCheckbox` and `FieldRadios` use bespoke layouts and keep their own narrower class-prop surface.
 
+### FieldOptions
+
+`chips` prop (opt-in): the closed field shows the selection as inline, removable `Pill` chips plus a trailing button that opens the usual modal. Removing a chip writes `value` and fires `onChange` without the modal. Companion props `classChip` / `chipIntent`; `renderValue` is ignored in this mode. The default rendering is unchanged.
+
+`Pill` gained `dismissLabel` — the accessible name of its × button (default `"Dismiss"`).
+
 ### Checkout
 
 New util:

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@marianmeres/stuic",
-	"version": "3.168.0",
+	"version": "3.169.0",
 	"packageManager": "pnpm@11.5.0",
 	"scripts": {
 		"dev": "vite dev",