@marianmeres/stuic 3.187.0 → 3.188.0

package/API.md

@@ -467,6 +467,10 @@ File upload input.
 
 Form-wrapped switch toggle.
 
+#### `FieldColorPicker`
+
+Form-wrapped `ColorPicker`: visible label (names the swatch group via `aria-labelledby`), description, validation box, label-left layout.
+
 #### `FieldOptions`
 
 Multi-select options field.

package/README.md

@@ -175,11 +175,11 @@ AppShell, Accordion, Backdrop, Modal, ModalDialog, Drawer, Collapsible, Header,
 
 ### Forms & Inputs
 
-FieldInput, FieldMoney, FieldDate, FieldDateRange, Calendar, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldSingleAsset, FieldOptions, FieldKeyValues, FieldTable, FieldObject, FieldSwitch, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
+FieldInput, FieldMoney, FieldDate, FieldDateRange, Calendar, FieldTextarea, FieldSelect, FieldCheckbox, FieldRadios, FieldFile, FieldAssets, FieldSingleAsset, FieldOptions, FieldKeyValues, FieldTable, FieldObject, FieldSwitch, FieldColorPicker, FieldInputLocalized, FieldLikeButton, FieldPhoneNumber, FieldCountry, CronInput, Fieldset, LoginForm, LoginFormModal, RegisterForm, RegisterFormModal, LoginOrRegisterForm, LoginOrRegisterFormModal, EmailVerifyForm, OtpInput
 
 ### Buttons & Controls
 
-Button, ButtonGroupRadio, Switch, Slider, RangeSlider, TwCheck, ListItemButton, X
+Button, ButtonGroupRadio, Switch, ColorPicker, Slider, RangeSlider, TwCheck, ListItemButton, X
 
 ### Feedback & Notifications
 

package/dist/README.md

@@ -46,6 +46,7 @@ npm install @marianmeres/stuic
 - **FieldOptions** - Modal-based multi-select picker (optional inline `chips` display)
 - **FieldKeyValues** - Key-value pairs editor with JSON serialization
 - **FieldSwitch** - Toggle switch within a form
+- **FieldColorPicker** - Color picker (swatches + custom color) within a form
 - **Fieldset** - Group of form fields with legend
 
 ### Buttons & Controls

package/dist/components/ColorPicker/ColorPicker.svelte

@@ -49,6 +49,13 @@
 		disabled?: boolean;
 		/** Accessible name of the swatch group (default `t("color")`, "Color") */
 		label?: string;
+		/**
+		 * Id of an element that names the swatch group (`aria-labelledby`). When set,
+		 * it replaces the group's `aria-label` — what `FieldColorPicker` uses to let
+		 * its visible label name the swatches. `...rest` cannot do this: it lands on
+		 * the root, not on the radiogroup.
+		 */
+		labelledby?: string;
 		/** Form field name (hidden input) */
 		name?: string;
 		/** Require a non-empty value (enforced by the built-in validator) */
@@ -92,6 +99,7 @@
 		allowClear = true,
 		disabled = false,
 		label,
+		labelledby,
 		name,
 		required = false,
 		t = t_default,
@@ -323,6 +331,22 @@
 	export function getValidation(): ValidationResult | undefined {
 		return _validation;
 	}
+
+	/**
+	 * Focus the group's tab stop (the checked swatch, or the first one), or —
+	 * with no swatches rendered — the first custom-color control.
+	 */
+	export function focus(): void {
+		(
+			el?.querySelector<HTMLElement>(`[role="radiogroup"] [tabindex="0"]`) ??
+			el?.querySelector<HTMLElement>(`input:not([type="hidden"])`)
+		)?.focus();
+	}
+
+	/** Scroll the picker into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		el?.scrollIntoView?.({ behavior: "smooth", block: "center", ...opts });
+	}
 </script>
 
 <div
@@ -340,7 +364,8 @@
 		<div
 			class={unstyled ? undefined : "stuic-color-picker-swatches"}
 			role="radiogroup"
-			aria-label={label || t("color", null, "Color")}
+			aria-labelledby={labelledby || undefined}
+			aria-label={labelledby ? undefined : label || t("color", null, "Color")}
 			aria-required={required ? "true" : undefined}
 			aria-disabled={disabled ? "true" : undefined}
 			aria-invalid={_validation && !_validation.valid ? "true" : undefined}

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

@@ -40,6 +40,13 @@ export interface Props extends Omit<HTMLAttributes<HTMLDivElement>, "children" |
     disabled?: boolean;
     /** Accessible name of the swatch group (default `t("color")`, "Color") */
     label?: string;
+    /**
+     * Id of an element that names the swatch group (`aria-labelledby`). When set,
+     * it replaces the group's `aria-label` — what `FieldColorPicker` uses to let
+     * its visible label name the swatches. `...rest` cannot do this: it lands on
+     * the root, not on the radiogroup.
+     */
+    labelledby?: string;
     /** Form field name (hidden input) */
     name?: string;
     /** Require a non-empty value (enforced by the built-in validator) */
@@ -70,6 +77,8 @@ declare const ColorPicker: import("svelte").Component<Props, {
     validate: () => ValidationResult | undefined;
     clearValidation: () => void;
     getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
 }, "el" | "value" | "inputEl">;
 type ColorPicker = ReturnType<typeof ColorPicker>;
 export default ColorPicker;

package/dist/components/ColorPicker/README.md

@@ -16,8 +16,12 @@ own full-screen color UI, so there is no anchored popover to fight the on-screen
 keyboard. Swatches grow to a ~44px hit target on a coarse pointer, and the hex field
 carries the iOS zoom guard.
 
+In a form layout, use [`FieldColorPicker`](../Input/README.md#color-picker): this picker
+inside the standard field shell (visible label, description, validation box, label-left
+layout).
+
 Adjacent but different: `Rating` (the same input-with-hidden-input shape),
-`FieldSelect` (a labeled field wrapper), `ThemePreview` (theme token swatches).
+`ThemePreview` (theme token swatches).
 
 ## Props
 
@@ -29,7 +33,8 @@ Adjacent but different: `Rating` (the same input-with-hidden-input shape),
 | `custom`              | `"both" \| "native" \| "text" \| false` | `"both"`               | Which custom-color controls to render under the palette                                                          |
 | `allowClear`          | `boolean`                               | `true`                 | A crossed-out "no color" swatch, Delete / Backspace, and an emptied hex field all set `""`                       |
 | `disabled`            | `boolean`                               | `false`                | No interaction; the hidden input is disabled too (nothing submits)                                               |
-| `label`               | `string`                                | `"Color"`              | Accessible name of the swatch group (via `t("color")` by default)                                                |
+| `label`               | `string`                                | `"Color"`              | Accessible name of the swatch group (via `t("color")` by default). Not a visible label — see `FieldColorPicker`  |
+| `labelledby`          | `string`                                | —                      | Id of the element naming the swatch group (`aria-labelledby`); when set, replaces `label`'s `aria-label`         |
 | `name`                | `string`                                | —                      | Form field name of the hidden input                                                                              |
 | `required`            | `boolean`                               | `false`                | Require a non-empty value — enforced by the built-in validator (hidden inputs skip native constraint validation) |
 | `t`                   | `TranslateFn`                           | English                | i18n translate function (see below)                                                                              |
@@ -46,11 +51,13 @@ Other attributes (`id`, `style`, `data-*`, …) are passed to the root `div`.
 
 ### Imperative API (via `bind:this`)
 
-| Method              | Description                                                          |
-| ------------------- | -------------------------------------------------------------------- |
-| `validate()`        | Trigger validation now; returns the `ValidationResult`               |
-| `clearValidation()` | Clear the stored result and the hidden input's custom validity       |
-| `getValidation()`   | The last validation result (also reported via `setValidationResult`) |
+| Method              | Description                                                             |
+| ------------------- | ----------------------------------------------------------------------- |
+| `validate()`        | Trigger validation now; returns the `ValidationResult`                  |
+| `clearValidation()` | Clear the stored result and the hidden input's custom validity          |
+| `getValidation()`   | The last validation result (also reported via `setValidationResult`)    |
+| `focus()`           | Focus the checked swatch (the group's tab stop), else the first control |
+| `scrollIntoView()`  | Scroll the picker into view (defaults: `smooth` + `center`)             |
 
 ## Usage
 
@@ -114,6 +121,9 @@ resolve to near-identical greys.
 </form>
 ```
 
+A bare picker only reports the result (`setValidationResult`, `aria-invalid`); it renders no
+message. `FieldColorPicker` shows it in the field's validation box.
+
 ## Preview vs commit
 
 `value` updates **live** while the native picker is being dragged and while a valid
@@ -144,6 +154,8 @@ value when `allowClear` is on.
   Up / Down step by one **rendered** row (measured from the layout, so it stays right
   when a narrow screen wraps to fewer per row) and stop at the edges.
   `aria-required` / `aria-invalid` sit on the group.
+- The group is named by `label` (an `aria-label`, default "Color") or, when `labelledby`
+  is set, by that element instead — never both.
 - Every swatch is named: an entry's `label` (through `t`) or, without one, its color
   string. The clear swatch is "No color".
 - Selection is signalled by a ring drawn outside the swatch, not only by color.

package/dist/components/Input/FieldColorPicker.svelte

@@ -0,0 +1,201 @@
+<script lang="ts" module>
+	import type { Snippet } from "svelte";
+	import type { ValidateOptions } from "../../actions/validate.svelte.js";
+	import type { TranslateFn } from "../../types.js";
+	import type { ColorPickerCustom } from "../ColorPicker/ColorPicker.svelte";
+	import type { ColorPickerSwatch } from "../ColorPicker/palettes.js";
+	import type { THC } from "../Thc/Thc.svelte";
+	import type { InputWrapClassProps } from "./types.js";
+
+	type SnippetWithId = Snippet<[{ id: string }]>;
+
+	export interface Props extends InputWrapClassProps, Record<string, any> {
+		/** Current color (bindable). Any CSS color string; `""` = no color */
+		value?: string;
+		label?: SnippetWithId | THC;
+		description?: SnippetWithId | THC;
+		class?: string;
+		id?: string;
+		renderSize?: "sm" | "md" | "lg" | string;
+		required?: boolean;
+		disabled?: boolean;
+		validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+		labelAfter?: SnippetWithId | THC;
+		inputBefore?: SnippetWithId | THC;
+		inputAfter?: SnippetWithId | THC;
+		inputBelow?: SnippetWithId | THC;
+		below?: SnippetWithId | THC;
+		labelLeft?: boolean;
+		labelLeftWidth?: "normal" | "wide";
+		labelLeftBreakpoint?: number;
+		/** Classes for the underlying <ColorPicker> root */
+		classInput?: string;
+		style?: string;
+		//
+		// Below: forwarded as-is to the underlying <ColorPicker>.
+		//
+		/** The swatches: color strings or `{ value, label }` objects */
+		palette?: ColorPickerSwatch[];
+		/** Cap the palette at this many swatches per row */
+		columns?: number;
+		/** Which custom-color controls to show (default `"both"`) */
+		custom?: ColorPickerCustom;
+		/** Offer clearing (the "no color" swatch, Delete / Backspace) */
+		allowClear?: boolean;
+		/** Form field name (hidden input) */
+		name?: string;
+		/** i18n translate function (see `createColorPickerT`) */
+		t?: TranslateFn;
+		/** Fires when the user commits a color (not while dragging the native picker) */
+		onchange?: (value: string) => void;
+		/** Class for every swatch button */
+		classSwatch?: string;
+	}
+</script>
+
+<script lang="ts">
+	import type { ValidationResult } from "../../actions/validate.svelte.js";
+	import { getId } from "../../utils/get-id.js";
+	import { twMerge } from "../../utils/tw-merge.js";
+	import ColorPicker from "../ColorPicker/ColorPicker.svelte";
+	import InputWrap from "./_internal/InputWrap.svelte";
+
+	let {
+		value = $bindable(""),
+		label = "",
+		id = getId(),
+		description,
+		class: classProp,
+		renderSize = "md",
+		//
+		required = false,
+		disabled = false,
+		//
+		// Renamed local binding to avoid collision with `export function validate()` below.
+		validate: validateProp,
+		//
+		labelAfter,
+		inputBefore,
+		inputAfter,
+		inputBelow,
+		below,
+		//
+		labelLeft = false,
+		labelLeftWidth = "normal",
+		labelLeftBreakpoint = 480,
+		//
+		classInput,
+		//
+		palette,
+		columns,
+		custom,
+		allowClear,
+		name,
+		t,
+		onchange,
+		classSwatch,
+		//
+		classLabel,
+		classLabelBox,
+		classInputBox,
+		classInputBoxWrap,
+		classInputBoxWrapInvalid,
+		classDescBox,
+		classDescBoxToggle,
+		classBelowBox,
+		classValidationBox,
+		style = "",
+		//
+		...rest
+	}: Props = $props();
+
+	//
+	let validation: ValidationResult | undefined = $state();
+	const setValidationResult = (res: ValidationResult) => (validation = res);
+
+	// Delegate the imperative API to the inner ColorPicker.
+	let pickerRef: ColorPicker | undefined = $state();
+
+	/** Trigger validation now. Renders the inline message if invalid. */
+	export function validate(): ValidationResult | undefined {
+		pickerRef?.validate();
+		return validation;
+	}
+
+	/** Clear the inline validation message. */
+	export function clearValidation(): void {
+		pickerRef?.clearValidation?.();
+		validation = undefined;
+	}
+
+	/** Current validation state. */
+	export function getValidation(): ValidationResult | undefined {
+		return validation;
+	}
+
+	/** Focus the swatch group's tab stop (or the first custom-color control). */
+	export function focus(): void {
+		pickerRef?.focus?.();
+	}
+
+	/** Scroll the field into view. Defaults to smooth + center. */
+	export function scrollIntoView(opts?: ScrollIntoViewOptions): void {
+		pickerRef?.scrollIntoView?.(opts);
+	}
+</script>
+
+<InputWrap
+	{description}
+	class={classProp}
+	size={renderSize}
+	{id}
+	{label}
+	{labelAfter}
+	{inputBefore}
+	{inputAfter}
+	{inputBelow}
+	{below}
+	{required}
+	{disabled}
+	{labelLeft}
+	{labelLeftWidth}
+	{labelLeftBreakpoint}
+	{classLabel}
+	{classLabelBox}
+	{classInputBox}
+	{classInputBoxWrapInvalid}
+	{classDescBox}
+	{classDescBoxToggle}
+	{classBelowBox}
+	{classValidationBox}
+	{validation}
+	classInputBoxWrap={twMerge("input-wrap-transparent", classInputBoxWrap)}
+	{style}
+>
+	<!--
+		`labelledby` (not the InputWrap's `for={id}`) is what names the swatch group: a
+		radiogroup is a <div>, which a `for` cannot label. Matches InputWrap's own
+		`{id}-label`, and only when there is a label to point at — otherwise the picker
+		keeps its own `t("color")` name. The picker's string `label` prop is deliberately
+		not forwarded: here `label` is the visible one.
+	-->
+	<ColorPicker
+		bind:this={pickerRef}
+		bind:value
+		{palette}
+		{columns}
+		{custom}
+		{allowClear}
+		{name}
+		{t}
+		{onchange}
+		{classSwatch}
+		{required}
+		{disabled}
+		class={classInput}
+		labelledby={label ? `${id}-label` : undefined}
+		validate={validateProp}
+		{setValidationResult}
+		{...rest}
+	/>
+</InputWrap>

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

@@ -0,0 +1,59 @@
+import type { Snippet } from "svelte";
+import type { ValidateOptions } from "../../actions/validate.svelte.js";
+import type { TranslateFn } from "../../types.js";
+import type { ColorPickerCustom } from "../ColorPicker/ColorPicker.svelte";
+import type { ColorPickerSwatch } from "../ColorPicker/palettes.js";
+import type { THC } from "../Thc/Thc.svelte";
+import type { InputWrapClassProps } from "./types.js";
+type SnippetWithId = Snippet<[{
+    id: string;
+}]>;
+export interface Props extends InputWrapClassProps, Record<string, any> {
+    /** Current color (bindable). Any CSS color string; `""` = no color */
+    value?: string;
+    label?: SnippetWithId | THC;
+    description?: SnippetWithId | THC;
+    class?: string;
+    id?: string;
+    renderSize?: "sm" | "md" | "lg" | string;
+    required?: boolean;
+    disabled?: boolean;
+    validate?: boolean | Omit<ValidateOptions, "setValidationResult">;
+    labelAfter?: SnippetWithId | THC;
+    inputBefore?: SnippetWithId | THC;
+    inputAfter?: SnippetWithId | THC;
+    inputBelow?: SnippetWithId | THC;
+    below?: SnippetWithId | THC;
+    labelLeft?: boolean;
+    labelLeftWidth?: "normal" | "wide";
+    labelLeftBreakpoint?: number;
+    /** Classes for the underlying <ColorPicker> root */
+    classInput?: string;
+    style?: string;
+    /** The swatches: color strings or `{ value, label }` objects */
+    palette?: ColorPickerSwatch[];
+    /** Cap the palette at this many swatches per row */
+    columns?: number;
+    /** Which custom-color controls to show (default `"both"`) */
+    custom?: ColorPickerCustom;
+    /** Offer clearing (the "no color" swatch, Delete / Backspace) */
+    allowClear?: boolean;
+    /** Form field name (hidden input) */
+    name?: string;
+    /** i18n translate function (see `createColorPickerT`) */
+    t?: TranslateFn;
+    /** Fires when the user commits a color (not while dragging the native picker) */
+    onchange?: (value: string) => void;
+    /** Class for every swatch button */
+    classSwatch?: string;
+}
+import type { ValidationResult } from "../../actions/validate.svelte.js";
+declare const FieldColorPicker: import("svelte").Component<Props, {
+    validate: () => ValidationResult | undefined;
+    clearValidation: () => void;
+    getValidation: () => ValidationResult | undefined;
+    focus: () => void;
+    scrollIntoView: (opts?: ScrollIntoViewOptions) => void;
+}, "value">;
+type FieldColorPicker = ReturnType<typeof FieldColorPicker>;
+export default FieldColorPicker;

package/dist/components/Input/README.md

@@ -15,6 +15,7 @@ A comprehensive form input system with multiple field components, validation sup
 | `FieldCheckbox`    | Single checkbox with label                                     |
 | `FieldRadios`      | Radio button group                                             |
 | `FieldSwitch`      | Toggle switch field                                            |
+| `FieldColorPicker` | Color picker (swatches + custom color) field — see below       |
 | `FieldFile`        | File upload input                                              |
 | `FieldAssets`      | Asset/image upload with preview                                |
 | `FieldSingleAsset` | One asset (avatar, logo, cover, one document) — see below      |
@@ -184,6 +185,50 @@ The visible label names the control via `aria-labelledby` (the switch is announc
 `switch, on/off` with that name). Clicking the label text does not toggle — the switch's
 own root is a `<label>`, so an HTML `for` association is not possible; click the switch.
 
+### Color Picker
+
+`FieldColorPicker` wraps a [`ColorPicker`](../ColorPicker/README.md) in the standard field
+scaffolding — visible label, description, validation box, `labelLeft*`, every
+`InputWrapClassProps` member — the way `FieldSwitch` wraps `Switch`.
+
+```svelte
+<script lang="ts">
+	import { FieldColorPicker } from "stuic";
+
+	let accent = $state("");
+</script>
+
+<FieldColorPicker
+	label="Page colour"
+	description="Used for buttons and links on the public page."
+	name="accent"
+	required
+	bind:value={accent}
+/>
+```
+
+| Prop                                                                                      | Goes to                                                       |
+| ----------------------------------------------------------------------------------------- | ------------------------------------------------------------- |
+| `value` (bindable), `palette`, `columns`, `custom`, `allowClear`, `name`, `t`, `onchange` | the inner `<ColorPicker>` (same semantics, same defaults)     |
+| `classSwatch`                                                                             | every swatch button                                           |
+| `classInput`                                                                              | the inner `<ColorPicker>`'s root class                        |
+| `required`, `disabled`, `validate`                                                        | both: the shell (asterisk, dimming, message) and the picker   |
+| `renderSize`                                                                              | the surrounding field shell only — swatch size is a CSS token |
+| everything else unrecognized (`...rest`)                                                  | the inner `<ColorPicker>` root                                |
+
+- **Naming.** The visible label names the swatch radiogroup via `aria-labelledby` →
+  `{id}-label`, with no competing `aria-label`. Without a `label` the group keeps the
+  picker's own `t("color")` name. Clicking the label text focuses nothing (a radiogroup is
+  not labelable by `for`) — same as `FieldSwitch`. With `palette={[]}` and
+  `allowClear={false}` there is no radiogroup, so the label names nothing; the hex field
+  keeps its own "Hex value" name.
+- **Validation.** The picker's hidden input runs the `validate` action; the result renders
+  in the field's validation box. `validate()`, `clearValidation()`, `getValidation()`,
+  `focus()` (the checked swatch — the group's tab stop) and `scrollIntoView()` are
+  available via `bind:this`, so `validateAllFields` / `scrollToFirstInvalidField` work.
+- **Layout.** The input wrap is transparent (no border / focus ring — the picker draws its
+  own swatches and hex field). A disabled field dims once (the shell), not twice.
+
 ### Input with Addons
 
 ```svelte

package/dist/components/Input/index.css

@@ -144,12 +144,18 @@
 	/* ============================================================================
 	   BASE INPUT ELEMENT STYLES
 	   Replaces @tailwindcss/forms plugin for input elements
+
+	   `:where(:not(.stuic-color-picker *))` (here, in the size variants and in the
+	   iOS zoom guard) exempts a composite control that styles its own raw inputs:
+	   FieldColorPicker's hex field and native picker would otherwise lose their
+	   border, font and size to these rules. Inside `:where()`, so the specificity
+	   every existing override was written against is unchanged.
 	   ============================================================================ */
 
 	.stuic-input
 		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 			[type="file"]
-		),
+		):where(:not(.stuic-color-picker *)),
 	.stuic-input textarea,
 	.stuic-input select {
 		/* Reset browser defaults */
@@ -202,7 +208,7 @@
 	.stuic-input[data-size="sm"]
 		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 			[type="file"]
-		),
+		):where(:not(.stuic-color-picker *)),
 	.stuic-input[data-size="sm"] textarea,
 	.stuic-input[data-size="sm"] select {
 		padding: var(--stuic-input-padding-y-sm) var(--stuic-input-padding-x-sm);
@@ -217,13 +223,13 @@
 	.stuic-input[data-size="md"]
 		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 			[type="file"]
-		),
+		):where(:not(.stuic-color-picker *)),
 	.stuic-input[data-size="md"] textarea,
 	.stuic-input[data-size="md"] select,
 	.stuic-input:not([data-size])
 		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 			[type="file"]
-		),
+		):where(:not(.stuic-color-picker *)),
 	.stuic-input:not([data-size]) textarea,
 	.stuic-input:not([data-size]) select {
 		padding: var(--stuic-input-padding-y-md) var(--stuic-input-padding-x-md);
@@ -239,7 +245,7 @@
 	.stuic-input[data-size="lg"]
 		input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 			[type="file"]
-		),
+		):where(:not(.stuic-color-picker *)),
 	.stuic-input[data-size="lg"] textarea,
 	.stuic-input[data-size="lg"] select {
 		padding: var(--stuic-input-padding-y-lg) var(--stuic-input-padding-x-lg);
@@ -329,6 +335,12 @@
 		box-shadow: none;
 	}
 
+	/* FieldColorPicker: a disabled shell already dims the wrap — dimming the picker
+	   again would compound to 0.25 */
+	.stuic-input.disabled .stuic-color-picker[data-disabled] {
+		opacity: 1;
+	}
+
 	/* Size-specific input-wrap padding */
 	.stuic-input[data-size="lg"] .input-wrap {
 		padding: calc(var(--spacing) * 1);
@@ -841,7 +853,7 @@
 		.stuic-input[data-size="sm"]
 			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 				[type="file"]
-			),
+			):where(:not(.stuic-color-picker *)),
 		.stuic-input[data-size="sm"] textarea,
 		.stuic-input[data-size="sm"] select {
 			font-size: max(
@@ -853,13 +865,13 @@
 		.stuic-input[data-size="md"]
 			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 				[type="file"]
-			),
+			):where(:not(.stuic-color-picker *)),
 		.stuic-input[data-size="md"] textarea,
 		.stuic-input[data-size="md"] select,
 		.stuic-input:not([data-size])
 			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 				[type="file"]
-			),
+			):where(:not(.stuic-color-picker *)),
 		.stuic-input:not([data-size]) textarea,
 		.stuic-input:not([data-size]) select {
 			font-size: max(
@@ -871,7 +883,7 @@
 		.stuic-input[data-size="lg"]
 			input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
 				[type="file"]
-			),
+			):where(:not(.stuic-color-picker *)),
 		.stuic-input[data-size="lg"] textarea,
 		.stuic-input[data-size="lg"] select {
 			font-size: max(

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

@@ -4,6 +4,7 @@ export { default as FieldSingleAsset, type Props as FieldSingleAssetProps, type
 export { createFieldSingleAssetT, FIELD_SINGLE_ASSET_MESSAGES_EN, type FieldSingleAssetMessageKey, type FieldSingleAssetMessages, } from "./field-single-asset-i18n.js";
 export { FIELD_SINGLE_ASSET_MESSAGES_SK } from "./field-single-asset-i18n-sk.js";
 export { default as FieldCheckbox, type Props as FieldCheckboxProps, } from "./FieldCheckbox.svelte";
+export { default as FieldColorPicker, type Props as FieldColorPickerProps, } from "./FieldColorPicker.svelte";
 export { default as Honeypot, type Props as HoneypotProps } from "./Honeypot.svelte";
 export { default as TimeTrap, type Props as TimeTrapProps, type TimeTrapSnapshot, } from "./TimeTrap.svelte";
 export { default as FieldFile, type Props as FieldFileProps } from "./FieldFile.svelte";

package/dist/components/Input/index.js

@@ -4,6 +4,7 @@ export { default as FieldSingleAsset, } from "./FieldSingleAsset.svelte";
 export { createFieldSingleAssetT, FIELD_SINGLE_ASSET_MESSAGES_EN, } from "./field-single-asset-i18n.js";
 export { FIELD_SINGLE_ASSET_MESSAGES_SK } from "./field-single-asset-i18n-sk.js";
 export { default as FieldCheckbox, } from "./FieldCheckbox.svelte";
+export { default as FieldColorPicker, } from "./FieldColorPicker.svelte";
 export { default as Honeypot } from "./Honeypot.svelte";
 export { default as TimeTrap, } from "./TimeTrap.svelte";
 export { default as FieldFile } from "./FieldFile.svelte";

package/dist/utils/validate-fields.d.ts

@@ -7,7 +7,7 @@ import type { ValidationResult } from "../actions/validate.svelte.js";
  * Every STUIC `Field*` component (FieldInput, FieldPhoneNumber, FieldCountry,
  * FieldSelect, FieldCheckbox, FieldTextarea, FieldFile, FieldObject,
  * FieldAssets, FieldInputLocalized, FieldKeyValues, FieldLikeButton,
- * FieldRadios, FieldSwitch) satisfies this interface via `export function`.
+ * FieldRadios, FieldSwitch, FieldColorPicker) satisfies this interface via `export function`.
  */
 export interface ValidatableField {
     /** Run the validator now. Renders the inline error if invalid. */

package/docs/domains/components.md

@@ -73,6 +73,7 @@
 | CronInput                                     | Cron expression editor with presets and validation                                                |
 | Fieldset                                      | Field grouping with legend                                                                        |
 | FieldKeyValues                                | Key-value pair editor                                                                             |
+| FieldColorPicker                              | ColorPicker in the field shell: visible label names the swatch group, description, validation box |
 | FieldTable                                    | Rows × typed columns editor (text/number/select/checkbox/date/url cells, container layout)        |
 | FieldsBuilder                                 | Field-definition list editor ("what properties does a thing have?")                               |
 | FieldAssets                                   | File/asset management                                                                             |
@@ -159,7 +160,7 @@ Use `validate={false}` to bypass stuic's validation entirely.
 
 > **Why default-on?** Hidden-input field components (`FieldPhoneNumber`,
 > `FieldCountry`, `FieldObject`, `FieldAssets`, `FieldSingleAsset`, `FieldInputLocalized`,
-> `FieldKeyValues`, `FieldTable`, `FieldLikeButton`, `FieldDate`, `FieldDateRange`, `Rating`) _must_ be default-on because hidden
+> `FieldKeyValues`, `FieldTable`, `FieldLikeButton`, `FieldDate`, `FieldDateRange`, `ColorPicker`, `FieldColorPicker`, `Rating`) _must_ be default-on because hidden
 > inputs are excluded from native browser constraint validation — without the
 > stuic action enforcing `required` in a `customValidator`, the attribute is a
 > silent no-op. Plain-input field components were harmonized to the same
@@ -170,8 +171,8 @@ Use `validate={false}` to bypass stuic's validation entirely.
 Available on `FieldInput`, `FieldMoney`, `FieldTextarea`, `FieldCheckbox`,
 `FieldSelect`, `FieldFile`, `FieldObject`, `FieldAssets`, `FieldSingleAsset`, `FieldInputLocalized`,
 `FieldKeyValues`, `FieldTable`, `FieldPhoneNumber`, `FieldCountry`, `FieldLikeButton`,
-`FieldRadios`, `FieldSwitch`, `FieldOptions`, `FieldDate`, `FieldDateRange`, and
-`Switch`:
+`FieldRadios`, `FieldSwitch`, `FieldColorPicker`, `FieldOptions`, `FieldDate`, `FieldDateRange`,
+`Switch`, and `ColorPicker`:
 
 | Method                  | Returns                         | Purpose                                                       |
 | ----------------------- | ------------------------------- | ------------------------------------------------------------- |
@@ -928,7 +929,9 @@ Swatch values are **never parsed** — they go to CSS as `--stuic-color-picker-s
 | `onchange`                                            | `(value: string) => void`               | —                      | User **commits** only (see below)                                                                                                              |
 | `t`                                                   | `TranslateFn`                           | English                | Group label, swatch names, "no color", custom-color labels, required message                                                                   |
 
-Class slots: `class`, `classSwatch`.
+Class slots: `class`, `classSwatch`. `labelledby` (an element id) names the swatch group via `aria-labelledby` instead of `label`'s `aria-label`.
+
+**In a form layout** use `FieldColorPicker` (exported from `Input`): the same `InputWrap` shell as every `Field*` (visible label, description, validation box, `labelLeft*`, `InputWrapClassProps`), with the picker props forwarded. The visible label names the radiogroup via `labelledby`; `focus()` / `scrollIntoView()` join the imperative API so `scrollToFirstInvalidField` works. The Input stylesheet exempts inputs inside `.stuic-color-picker` from its field-input rules (`:where(:not(.stuic-color-picker *))`, zero specificity) — otherwise the hex field and native picker would lose their border, font and size inside the shell.
 
 ### Preview vs commit
 

package/package.json

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