@marianmeres/stuic 3.187.0 → 3.189.0

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

@@ -0,0 +1,2 @@
+export { default as Gantt, type Props as GanttProps, type GanttRow, type GanttBar, type GanttBarLabels, type GanttSelectDetail, } from "./Gantt.svelte";
+export { buildGanttAxis, placeRange, placePoint, dayToFraction, boundsOf, isoWeekNumber, GANTT_MAX_COLUMNS, type GanttAxis, type GanttAxisOptions, type GanttColumn, type GanttGroup, type GanttPlacement, type GanttDateInput, type GanttUnit, } from "./gantt-geometry.js";

package/dist/components/Gantt/index.js

@@ -0,0 +1,2 @@
+export { default as Gantt, } from "./Gantt.svelte";
+export { buildGanttAxis, placeRange, placePoint, dayToFraction, boundsOf, isoWeekNumber, GANTT_MAX_COLUMNS, } from "./gantt-geometry.js";

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/index.css

@@ -103,6 +103,7 @@ In practice:
 @import "./components/EmptyState/index.css";
 @import "./components/FieldsBuilder/index.css";
 @import "./components/Float/index.css";
+@import "./components/Gantt/index.css";
 @import "./components/H/index.css";
 @import "./components/Header/index.css";
 @import "./components/ImageCycler/index.css";

package/dist/index.d.ts

@@ -55,6 +55,7 @@ export * from "./components/EmailVerifyForm/index.js";
 export * from "./components/EmptyState/index.js";
 export * from "./components/FieldsBuilder/index.js";
 export * from "./components/Float/index.js";
+export * from "./components/Gantt/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";

package/dist/index.js

@@ -61,6 +61,7 @@ export * from "./components/EmailVerifyForm/index.js";
 export * from "./components/EmptyState/index.js";
 export * from "./components/FieldsBuilder/index.js";
 export * from "./components/Float/index.js";
+export * from "./components/Gantt/index.js";
 export * from "./components/H/index.js";
 export * from "./components/Header/index.js";
 export * from "./components/ImageCycler/index.js";

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                                                                             |
@@ -110,6 +111,7 @@
 | Stat                | KPI/stat card: label + value + delta with trend arrow and semantic coloring                          |
 | DescriptionList     | Term/value list (`<dl>`): stacked or two-column by container query, hairlines, truncation, totals    |
 | Timeline            | Vertical event list on a rail: dot/icon/custom markers, inline or opposite time, alternate layout    |
+| Gantt               | Horizontal schedule chart: day/week/month axis, bars, milestones, progress, today line               |
 | TrendChart          | Svelte wrapper for `@marianmeres/trend-chart` (subpath-only: `@marianmeres/stuic/trend-chart`)       |
 | Tree                | Hierarchical tree view with keyboard nav and drag-and-drop                                           |
 | X                   | Styled close/multiply SVG icon                                                                       |
@@ -159,7 +161,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 +172,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 +930,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
 
@@ -1352,6 +1356,62 @@ Prefix: `--stuic-stepper-*`
 
 ---
 
+## Gantt
+
+Horizontal schedule chart — the classic project plan (task per row, progress, milestones) and the resource lane view (many bars per row) in one component. Whole-day, inclusive-at-both-ends ranges throughout (`YYYY-MM-DD`, or a `Date` read as its local calendar date), so no timezone can shift a bar by a day. Columns are days, weeks or months; `week`/`month` snap the window outwards to whole units, and bars are positioned _through_ the columns, so an equal-width February column still holds 28 days. Read-only by design: no drag-to-reschedule, no dependency arrows (use `Timeline` for a vertical event list).
+
+Layout is one scroll container holding a sticky two-tier header (groups over units), a sticky left label column and, for the body, a **single** absolutely-positioned grid layer (gridlines + weekend shading + today line) rather than a cell per row per column. The frame always fills its parent and `unitWidth` is a _minimum_: a narrow axis shares the spare width between its columns (no dead gutter, and the grid layer keeps matching the track because both grow by the same rule), a wide one scrolls. `unitWidth="fit"` drops the minimum so the chart never scrolls sideways. The track is `overflow: clip`, so a label positioned past its bar cannot put a scrollbar on a chart that fits.
+
+### Exports
+
+| Export              | Kind      | Description                                                                                                   |
+| ------------------- | --------- | ------------------------------------------------------------------------------------------------------------- |
+| `Gantt`             | component | Main component                                                                                                |
+| `GanttProps`        | type      | Props type                                                                                                    |
+| `GanttRow`          | type      | `{ id?, label?, description?, bars, href?, data? }`                                                           |
+| `GanttBar`          | type      | `{ from, to?, label?, intent?, progress?, milestone?, inset?, href?, title?, disabled?, id?, class?, data? }` |
+| `GanttBarLabels`    | type      | `"inside" \| "after" \| "none"`                                                                               |
+| `GanttSelectDetail` | type      | `{ bar, row, rowIndex, barIndex, placement, point }` — `onSelect` / `renderBar`                               |
+| `GanttUnit`         | type      | `"day" \| "week" \| "month"`                                                                                  |
+| `GanttAxis`         | type      | `{ unit, from, to, start, end, columns, groups, totalDays }`                                                  |
+| `GanttColumn`       | type      | `{ date, days, offset, index, label, subLabel?, groupIndex, isWeekend, isToday }`                             |
+| `GanttGroup`        | type      | `{ key, label, span, from }` — a header group cell                                                            |
+| `GanttPlacement`    | type      | `{ start, end, clippedStart, clippedEnd, days }` — 0..1 track fractions                                       |
+| `GanttDateInput`    | type      | `IsoDate \| Date`                                                                                             |
+| `GanttAxisOptions`  | type      | `{ unit?, weekStartsOn?, locale?, today? }`                                                                   |
+| `buildGanttAxis`    | function  | `(from, to, options) => GanttAxis` — throws on a bad or too-wide window                                       |
+| `placeRange`        | function  | `(from, to, axis) => GanttPlacement \| null` (`null` = misses the window)                                     |
+| `placePoint`        | function  | `(date, axis) => number \| null` — the middle of that day, 0..1                                               |
+| `dayToFraction`     | function  | `(dayOffset, axis) => number` — column-aware, so month widths stay equal                                      |
+| `boundsOf`          | function  | `(ranges) => { from, to } \| null` — the default window                                                       |
+| `isoWeekNumber`     | function  | `(iso) => number` — ISO-8601 week, used for the week header                                                   |
+| `GANTT_MAX_COLUMNS` | const     | `2000` — over this `buildGanttAxis` throws instead of building the nodes                                      |
+
+### Key Props
+
+| Prop          | Type                          | Default    | Description                                                 |
+| ------------- | ----------------------------- | ---------- | ----------------------------------------------------------- |
+| `rows`        | `GanttRow[]`                  | required   | The lanes, in display order                                 |
+| `from` / `to` | `IsoDate \| Date`             | bar extent | The window, inclusive at both ends                          |
+| `unit`        | `GanttUnit`                   | `"day"`    | Column granularity                                          |
+| `unitWidth`   | `number \| "fit"`             | token      | **Minimum** column px (the zoom); `"fit"` drops the minimum |
+| `today`       | `IsoDate \| Date \| null`     | today      | The marker line's day; `null` removes it                    |
+| `labels`      | `boolean`                     | auto       | Left label column — on when any row has a `label`           |
+| `barLabels`   | `GanttBarLabels`              | `"inside"` | Where a bar's own label is drawn                            |
+| `onSelect`    | `(GanttSelectDetail) => void` | —          | Bar click; also what turns bars into focusable `<button>`s  |
+
+Also `weekStartsOn`, `locale`, `formatColumn`, `formatGroup`, `formatBarAria`. Snippets: `renderBar`, `renderRowLabel`, `renderCorner`, `empty`. Class slots: `class`, `classHeader`, `classRow`, `classRowLabel`, `classTrack`, `classBar`.
+
+A bar entirely outside the window is dropped (a hairline at the edge reads as "starts today"); one that overhangs is clipped and flagged `data-clipped-start` / `data-clipped-end`. `data-*` attributes survive `unstyled` — they describe the data, not the styling.
+
+### CSS Tokens
+
+Prefix: `--stuic-gantt-*`
+
+`unit-width`, `label-width`, `row-height`, `max-height`, `bg`, `border-color`, `font-size`, `header-{bg,text,font-size,padding,sub-text}`, `grid-line-color`, `weekend-bg`, `today-color`, `today-width`, `row-bg-hover`, `label-{bg,padding,font-size,text}`, `description-{font-size,text}`, `bar-{height,height-inset,bg,text,font-size,padding-inline,progress-bg,opacity-disabled,radius}`, `milestone-{size,radius}`, `empty-padding`, `radius`, `border-width`, `transition`
+
+---
+
 ## Timeline
 
 Vertical event list with markers on a rail — activity feeds, audit logs, order tracking, history pages. A real `<ol>` (explicit `role="list"`); every item has a marker (small dot, icon bubble when `item.icon` is set, or anything via `renderMarker`), an optional time label, title, description and footer. Data-driven (`items`), static by design — no "current" step (use `Stepper` vertical for progress flows). The list is a CSS grid with `subgrid` items, so the rail and the optional time column align across items without fixed widths; the rail line runs behind the markers and a background-colored ring separates them.

package/package.json

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