@marianmeres/stuic 3.186.0 → 3.188.0

package/API.md

@@ -153,38 +153,38 @@ Navigation wrapper component.
 
 Responsive navigation header with leading slot, logo, nav items, locale switcher, action icon buttons, avatar, and configurable responsive collapse (`"hamburger"` fold or `"hide"` for app-like shells). Renders as `<header>`.
 
-| Prop                    | Type                                             | Default               | Description                                                                                                                                                                                                              |
-| ----------------------- | ------------------------------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
-| `leading`               | `Snippet<[{ isCollapsed }]>`                     | —                     | Leading (left-side) slot. Overrides `leadingHamburger`.                                                                                                                                                                  |
-| `leadingHamburger`      | `boolean \| "collapsed"`                         | `false`               | Built-in hamburger in the leading slot (`"collapsed"` = only below threshold). Ignored when `leading` is provided.                                                                                                       |
-| `onLeadingHamburger`    | `() => void`                                     | —                     | Click handler for the built-in leading hamburger (typically opens a drawer).                                                                                                                                             |
-| `leadingHamburgerIcon`  | `THC`                                            | menu icon             | Icon override for the built-in leading hamburger.                                                                                                                                                                        |
-| `leadingHamburgerLabel` | `string`                                         | `"Open menu"`         | Aria-label for the leading hamburger.                                                                                                                                                                                    |
-| `logo`                  | `Snippet`                                        | —                     | Logo/brand snippet.                                                                                                                                                                                                      |
-| `projectName`           | `string`                                         | —                     | Simple text logo alternative.                                                                                                                                                                                            |
-| `navVariant`            | `ButtonVariant`                                  | `"ghost"`             | Button variant for nav items and the locale switcher trigger.                                                                                                                                                            |
-| `items`                 | `HeaderNavItem[]`                                | `[]`                  | Navigation items — inline when expanded, dropdown when collapsed (hamburger mode).                                                                                                                                       |
-| `actions`               | `HeaderActionItem[]`                             | `[]`                  | Action icon buttons between the locale switcher and the avatar. Always visible — never fold into the dropdown.                                                                                                           |
-| `onActionSelect`        | `(action) => void`                               | —                     | Called after the per-item `onclick`.                                                                                                                                                                                     |
-| `avatar`                | `Snippet`                                        | —                     | Avatar snippet (far right).                                                                                                                                                                                              |
-| `avatarOnClick`         | `() => void`                                     | —                     | Makes the avatar interactive. In `"hamburger"` collapse mode it moves into the dropdown.                                                                                                                                 |
-| `avatarLabel`           | `THC`                                            | `"Account"`           | Label for the avatar entry inside the collapsed dropdown.                                                                                                                                                                |
-| `locales`               | `HeaderLocaleItem[]`                             | `[]`                  | Locale items. Switcher only renders when 2+.                                                                                                                                                                             |
-| `activeLocale`          | `string`                                         | —                     | Current locale id.                                                                                                                                                                                                       |
-| `onLocaleChange`        | `(localeId) => void`                             | —                     | Locale selection callback.                                                                                                                                                                                               |
-| `localeLabel`           | `THC`                                            | `"Language"`          | Section header inside the collapsed dropdown.                                                                                                                                                                            |
-| `contentMaxWidth`       | `string \| number`                               | —                     | Max-width of the inner content row (outer header stays 100%). Accepts any CSS length. Maps to `--stuic-header-content-max-width`.                                                                                        |
-| `collapseThreshold`     | `number`                                         | `768`                 | Width (px) to collapse; 0 disables.                                                                                                                                                                                      |
-| `collapseMode`          | `"hamburger" \| "hide"`                          | `"hamburger"`         | Collapse behavior. `"hide"` keeps avatar/actions visible and renders no trailing hamburger (app-shell pattern).                                                                                                          |
-| `keepLocaleOnCollapse`  | `boolean`                                        | `false`               | Keep the locale switcher visible in collapsed mode (only `collapseMode === "hide"`).                                                                                                                                     |
-| `fixed`                 | `boolean`                                        | `false`               | Fixed positioning at the top.                                                                                                                                                                                            |
-| `safeArea`              | `boolean`                                        | `false`               | PWA: when installed/standalone, offset the **top app bar** below the device safe-area insets (top + side notch). No-op in a browser tab. Set only on the top bar — not in-page/detail/drawer headers. See Header README. |
-| `isCollapsed`           | `boolean`                                        | —                     | Bindable: collapsed state.                                                                                                                                                                                               |
-| `isMenuOpen`            | `boolean`                                        | —                     | Bindable: hamburger menu open.                                                                                                                                                                                           |
-| `dropdownPosition`      | `DropdownMenuPosition`                           | `"bottom-span-right"` | Position of the collapsed dropdown.                                                                                                                                                                                      |
-| `iconSize`              | `number`                                         | `24`                  | Hamburger/X icon size in px.                                                                                                                                                                                             |
-| `onSelect`              | `(item) => void`                                 | —                     | Item selection callback (both modes).                                                                                                                                                                                    |
-| `children`              | `Snippet<[{ isCollapsed, items, offsetWidth }]>` | —                     | Escape hatch: override the entire inner layout.                                                                                                                                                                          |
+| Prop                    | Type                                             | Default               | Description                                                                                                                                                                                                                     |
+| ----------------------- | ------------------------------------------------ | --------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `leading`               | `Snippet<[{ isCollapsed }]>`                     | —                     | Leading (left-side) slot. Overrides `leadingHamburger`.                                                                                                                                                                         |
+| `leadingHamburger`      | `boolean \| "collapsed"`                         | `false`               | Built-in hamburger in the leading slot (`"collapsed"` = only below threshold). Ignored when `leading` is provided.                                                                                                              |
+| `onLeadingHamburger`    | `() => void`                                     | —                     | Click handler for the built-in leading hamburger (typically opens a drawer).                                                                                                                                                    |
+| `leadingHamburgerIcon`  | `THC`                                            | menu icon             | Icon override for the built-in leading hamburger.                                                                                                                                                                               |
+| `leadingHamburgerLabel` | `string`                                         | `"Open menu"`         | Aria-label for the leading hamburger.                                                                                                                                                                                           |
+| `logo`                  | `Snippet`                                        | —                     | Logo/brand snippet.                                                                                                                                                                                                             |
+| `projectName`           | `string`                                         | —                     | Simple text logo alternative.                                                                                                                                                                                                   |
+| `navVariant`            | `ButtonVariant`                                  | `"ghost"`             | Button variant for nav items and the locale switcher trigger.                                                                                                                                                                   |
+| `items`                 | `HeaderNavItem[]`                                | `[]`                  | Navigation items — inline when expanded, dropdown when collapsed (hamburger mode).                                                                                                                                              |
+| `actions`               | `HeaderActionItem[]`                             | `[]`                  | Action icon buttons between the locale switcher and the avatar. Always visible — never fold into the dropdown.                                                                                                                  |
+| `onActionSelect`        | `(action) => void`                               | —                     | Called after the per-item `onclick`.                                                                                                                                                                                            |
+| `avatar`                | `Snippet`                                        | —                     | Avatar snippet (far right).                                                                                                                                                                                                     |
+| `avatarOnClick`         | `() => void`                                     | —                     | Makes the avatar interactive. In `"hamburger"` collapse mode it moves into the dropdown.                                                                                                                                        |
+| `avatarLabel`           | `THC`                                            | `"Account"`           | Label for the avatar entry inside the collapsed dropdown.                                                                                                                                                                       |
+| `locales`               | `HeaderLocaleItem[]`                             | `[]`                  | Locale items. Switcher only renders when 2+.                                                                                                                                                                                    |
+| `activeLocale`          | `string`                                         | —                     | Current locale id.                                                                                                                                                                                                              |
+| `onLocaleChange`        | `(localeId) => void`                             | —                     | Locale selection callback.                                                                                                                                                                                                      |
+| `localeLabel`           | `THC`                                            | `"Language"`          | Section header inside the collapsed dropdown.                                                                                                                                                                                   |
+| `contentMaxWidth`       | `string \| number`                               | —                     | Max-width of the inner content row (outer header stays 100%). Accepts any CSS length. Maps to `--stuic-header-content-max-width`.                                                                                               |
+| `collapseThreshold`     | `number`                                         | `768`                 | Width (px) to collapse; 0 disables.                                                                                                                                                                                             |
+| `collapseMode`          | `"hamburger" \| "hide"`                          | `"hamburger"`         | Collapse behavior. `"hide"` keeps avatar/actions visible and renders no trailing hamburger (app-shell pattern).                                                                                                                 |
+| `keepLocaleOnCollapse`  | `boolean`                                        | `true`                | Keep the locale switcher inline (next to the hamburger) when collapsed — in **both** collapse modes, and without duplicating it inside the dropdown. `false` folds it into the dropdown (`"hamburger"`) or hides it (`"hide"`). |
+| `fixed`                 | `boolean`                                        | `false`               | Fixed positioning at the top.                                                                                                                                                                                                   |
+| `safeArea`              | `boolean`                                        | `false`               | PWA: when installed/standalone, offset the **top app bar** below the device safe-area insets (top + side notch). No-op in a browser tab. Set only on the top bar — not in-page/detail/drawer headers. See Header README.        |
+| `isCollapsed`           | `boolean`                                        | —                     | Bindable: collapsed state.                                                                                                                                                                                                      |
+| `isMenuOpen`            | `boolean`                                        | —                     | Bindable: hamburger menu open.                                                                                                                                                                                                  |
+| `dropdownPosition`      | `DropdownMenuPosition`                           | `"bottom-span-right"` | Position of the collapsed dropdown.                                                                                                                                                                                             |
+| `iconSize`              | `number`                                         | `24`                  | Hamburger/X icon size in px.                                                                                                                                                                                                    |
+| `onSelect`              | `(item) => void`                                 | —                     | Item selection callback (both modes).                                                                                                                                                                                           |
+| `children`              | `Snippet<[{ isCollapsed, items, offsetWidth }]>` | —                     | Escape hatch: override the entire inner layout.                                                                                                                                                                                 |
 
 Class slots: `class`, `classContent`, `classLeading`, `classLeadingHamburger`, `classLogo`, `classNav`, `classNavItem`, `classNavItemActive`, `classActions`, `classAction`, `classActionActive`, `classEnd`, `classAvatar`, `classLocale`, `classHamburger`, `classDropdown`.
 
@@ -223,9 +223,9 @@ Class slots: `class`, `classContent`, `classLeading`, `classLeadingHamburger`, `
 
 **HeaderActionItem:** `{ id, icon?, label, onclick?, href?, target?, active?, disabled?, class?, render? }` — `render` is an optional `Snippet<[{ action, class, isCollapsed, onclick }]>` that replaces the default `<Button>` for that action (useful for wrapping in a popover/tooltip directive or adding a count badge while keeping default positioning).
 
-**HeaderLocaleItem:** `{ id, label }`
+**HeaderLocaleItem:** `{ id, label, shortLabel? }` — `shortLabel` replaces `label` on the inline trigger **in collapsed mode only** (keeps a long name like "Slovenčina" from crowding a narrow header); the dropdown list always shows the full `label`.
 
-CSS tokens: `--stuic-header-padding-x`, `--stuic-header-padding-y`, `--stuic-header-gap`, `--stuic-header-min-height`, `--stuic-header-nav-gap`, `--stuic-header-content-max-width`, `--stuic-header-bg`, `--stuic-header-text`, `--stuic-header-border-width`, `--stuic-header-border-color`, `--stuic-header-nav-item-bg-active`, `--stuic-header-nav-item-text-active`, `--stuic-header-z-index`.
+CSS tokens: `--stuic-header-padding-x`, `--stuic-header-padding-y`, `--stuic-header-gap`, `--stuic-header-end-gap-collapsed`, `--stuic-header-min-height`, `--stuic-header-nav-gap`, `--stuic-header-content-max-width`, `--stuic-header-bg`, `--stuic-header-text`, `--stuic-header-border-width`, `--stuic-header-border-color`, `--stuic-header-nav-item-bg-active`, `--stuic-header-nav-item-text-active`, `--stuic-header-z-index`.
 
 ---
 
@@ -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/Header/Header.svelte

@@ -35,6 +35,12 @@
 		id: string;
 		/** Display label — supports THC (string, html, component, snippet) */
 		label: THC;
+		/** Compact label for the inline trigger in COLLAPSED mode only.
+		 *  Falls back to `label`. Use it when the full label ("Slovenčina")
+		 *  would crowd the narrow header next to the hamburger — the dropdown
+		 *  list always shows the full `label`, so the long form stays
+		 *  available where there is room to read it. */
+		shortLabel?: THC;
 	}
 
 	export interface HeaderActionItem {
@@ -86,11 +92,13 @@
 	}
 
 	/** Collapse behavior when the header drops below `collapseThreshold`:
-	 *  - "hamburger": nav items fold into a trailing dropdown along with the
-	 *    locale switcher and an interactive avatar.
+	 *  - "hamburger": nav items fold into a trailing dropdown along with an
+	 *    interactive avatar.
 	 *  - "hide": nav items are hidden entirely. No trailing hamburger renders.
-	 *    Avatar stays visible. Locale visibility is controlled by
-	 *    `keepLocaleOnCollapse`. */
+	 *    Avatar stays visible.
+	 *
+	 *  In BOTH modes the locale switcher stays inline next to the hamburger
+	 *  by default — see `keepLocaleOnCollapse`. */
 	export type HeaderCollapseMode = "hamburger" | "hide";
 
 	/** Visibility for the built-in leading hamburger button:
@@ -152,9 +160,27 @@
 		collapseThreshold?: number;
 		/** Collapse behavior when below threshold (defaults to "hamburger") */
 		collapseMode?: HeaderCollapseMode;
-		/** When `collapseMode === "hide"`, keep the locale switcher visible in
-		 *  collapsed mode. No effect when `collapseMode === "hamburger"`
-		 *  (locale already folds into the trailing dropdown there). */
+		/** Keep the locale switcher visible — inline, next to the hamburger —
+		 *  when the header is collapsed. Applies to BOTH collapse modes.
+		 *  Defaults to `true`.
+		 *
+		 *  Why it defaults on: the person who most needs this control is the
+		 *  one who landed in a language they cannot read. For them a visible
+		 *  "EN ▾" trigger is the only self-describing widget in the bar, while
+		 *  a locale entry folded into the hamburger — listed last, under a
+		 *  "Language" heading they also cannot read, often below the fold of a
+		 *  long menu — is effectively invisible.
+		 *
+		 *  When `true` in `"hamburger"` mode the locale section is NOT also
+		 *  appended to the trailing dropdown, so it is never reachable twice.
+		 *
+		 *  Set `false` for the alternative: folds into the trailing dropdown
+		 *  in `"hamburger"` mode, hidden entirely in `"hide"` mode (this was
+		 *  the behavior before the prop applied to both modes). Worth doing
+		 *  when the end area is already crowded with actions, or when the
+		 *  app's own drawer owns the language switch. See also
+		 *  `HeaderLocaleItem.shortLabel` for keeping the inline trigger
+		 *  narrow. */
 		keepLocaleOnCollapse?: boolean;
 		/** Fixed positioning (top of viewport) */
 		fixed?: boolean;
@@ -263,7 +289,7 @@
 		contentMaxWidth,
 		collapseThreshold = 768,
 		collapseMode = "hamburger",
-		keepLocaleOnCollapse = false,
+		keepLocaleOnCollapse = true,
 		fixed = false,
 		safeArea = false,
 		isCollapsed = $bindable(false),
@@ -336,17 +362,28 @@
 	// Locale switcher: only render when 2+ locales
 	let _hasLocales = $derived(locales.length > 1);
 
-	// Visibility of the inline (expanded-form) locale switcher.
-	// In "hamburger" mode: visible only when not collapsed (it folds into the
-	// trailing dropdown when collapsed). In "hide" mode: visible when not
-	// collapsed, or when collapsed and `keepLocaleOnCollapse` is set.
+	// Visibility of the inline (expanded-form) locale switcher. Always visible
+	// when expanded; when collapsed it stays inline unless explicitly opted out
+	// — in BOTH collapse modes. Deliberately mode-agnostic: a user who cannot
+	// read the current language must be able to find the switcher without
+	// opening a menu whose trigger tells them nothing.
 	let _showLocaleSwitcher = $derived(
-		_hasLocales && (!_isCollapsed || (collapseMode === "hide" && keepLocaleOnCollapse))
+		_hasLocales && (!_isCollapsed || keepLocaleOnCollapse)
 	);
 
 	// Active locale object (for trigger label); fallback to first
 	let _activeLocale = $derived(locales.find((l) => l.id === activeLocale) ?? locales[0]);
 
+	// Inline trigger label. `shortLabel` (when provided) is used ONLY in
+	// collapsed mode, where horizontal space next to the hamburger is scarce;
+	// expanded mode and the dropdown list always show the full `label`.
+	let _localeTriggerLabel = $derived.by((): THC | undefined => {
+		if (!_activeLocale) return undefined;
+		return _isCollapsed
+			? (_activeLocale.shortLabel ?? _activeLocale.label)
+			: _activeLocale.label;
+	});
+
 	// Locale items for the expanded-mode DropdownMenu
 	let _localeDropdownItems = $derived.by((): DropdownMenuItem[] => {
 		return locales.map(
@@ -389,8 +426,10 @@
 				}) satisfies DropdownMenuActionItem
 		);
 
-		// Append locale section when locales are available
-		if (_hasLocales) {
+		// Append the locale section ONLY when the inline switcher is hidden.
+		// With the inline trigger visible this would be a second, worse route
+		// to the same setting — and the one nobody finds.
+		if (_hasLocales && !_showLocaleSwitcher) {
 			if (navItems.length > 0) {
 				navItems.push({ type: "divider" });
 			}
@@ -556,7 +595,9 @@
 
 			<!-- End area: locale + actions + avatar + trailing hamburger -->
 			<div class={_classEnd}>
-				<!-- Locale switcher (shown when expanded, or in "hide" mode with keepLocaleOnCollapse) -->
+				<!-- Locale switcher — inline when expanded and, unless
+				     `keepLocaleOnCollapse={false}`, still inline when collapsed
+				     (both collapse modes) rather than folded into the dropdown -->
 				{#if _showLocaleSwitcher}
 					<DropdownMenu
 						items={_localeDropdownItems}
@@ -573,8 +614,8 @@
 								aria-label="Change language"
 								{...triggerProps}
 							>
-								{#if _activeLocale}
-									<Thc thc={_activeLocale.label} />
+								{#if _localeTriggerLabel !== undefined}
+									<Thc thc={_localeTriggerLabel} />
 								{/if}
 								<span
 									class={twMerge(

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

@@ -28,6 +28,12 @@ export interface HeaderLocaleItem {
     id: string;
     /** Display label — supports THC (string, html, component, snippet) */
     label: THC;
+    /** Compact label for the inline trigger in COLLAPSED mode only.
+     *  Falls back to `label`. Use it when the full label ("Slovenčina")
+     *  would crowd the narrow header next to the hamburger — the dropdown
+     *  list always shows the full `label`, so the long form stays
+     *  available where there is room to read it. */
+    shortLabel?: THC;
 }
 export interface HeaderActionItem {
     /** Unique identifier */
@@ -75,11 +81,13 @@ export interface HeaderActionItem {
     ]>;
 }
 /** Collapse behavior when the header drops below `collapseThreshold`:
- *  - "hamburger": nav items fold into a trailing dropdown along with the
- *    locale switcher and an interactive avatar.
+ *  - "hamburger": nav items fold into a trailing dropdown along with an
+ *    interactive avatar.
  *  - "hide": nav items are hidden entirely. No trailing hamburger renders.
- *    Avatar stays visible. Locale visibility is controlled by
- *    `keepLocaleOnCollapse`. */
+ *    Avatar stays visible.
+ *
+ *  In BOTH modes the locale switcher stays inline next to the hamburger
+ *  by default — see `keepLocaleOnCollapse`. */
 export type HeaderCollapseMode = "hamburger" | "hide";
 /** Visibility for the built-in leading hamburger button:
  *  - false/undefined: not rendered
@@ -141,9 +149,27 @@ export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children"> {
     collapseThreshold?: number;
     /** Collapse behavior when below threshold (defaults to "hamburger") */
     collapseMode?: HeaderCollapseMode;
-    /** When `collapseMode === "hide"`, keep the locale switcher visible in
-     *  collapsed mode. No effect when `collapseMode === "hamburger"`
-     *  (locale already folds into the trailing dropdown there). */
+    /** Keep the locale switcher visible — inline, next to the hamburger —
+     *  when the header is collapsed. Applies to BOTH collapse modes.
+     *  Defaults to `true`.
+     *
+     *  Why it defaults on: the person who most needs this control is the
+     *  one who landed in a language they cannot read. For them a visible
+     *  "EN ▾" trigger is the only self-describing widget in the bar, while
+     *  a locale entry folded into the hamburger — listed last, under a
+     *  "Language" heading they also cannot read, often below the fold of a
+     *  long menu — is effectively invisible.
+     *
+     *  When `true` in `"hamburger"` mode the locale section is NOT also
+     *  appended to the trailing dropdown, so it is never reachable twice.
+     *
+     *  Set `false` for the alternative: folds into the trailing dropdown
+     *  in `"hamburger"` mode, hidden entirely in `"hide"` mode (this was
+     *  the behavior before the prop applied to both modes). Worth doing
+     *  when the end area is already crowded with actions, or when the
+     *  app's own drawer owns the language switch. See also
+     *  `HeaderLocaleItem.shortLabel` for keeping the inline trigger
+     *  narrow. */
     keepLocaleOnCollapse?: boolean;
     /** Fixed positioning (top of viewport) */
     fixed?: boolean;

package/dist/components/Header/README.md

@@ -4,17 +4,54 @@ Top-bar component with leading slot, project logo, nav items, locale switcher, o
 
 ## Examples
 
+### The locale switcher stays visible when collapsed
+
+When the header collapses, the locale switcher does **not** fold into the trailing hamburger. It stays inline, immediately before the actions / avatar / hamburger, in **both** collapse modes. Nothing to configure — it is the default.
+
+```svelte
+<Header
+	projectName="App"
+	items={navItems}
+	{locales}
+	{activeLocale}
+	onLocaleChange={(id) => (activeLocale = id)}
+/>
+<!-- collapsed:  [App]                              [EN ▾] [☰] -->
+```
+
+This is the one control `Header` deliberately treats differently from a nav item, and the reason is worth stating because it looks like an inconsistency:
+
+> The person who most needs the language switch is the person who landed in a language they cannot read. A visible `EN ▾` trigger is self-describing to them — it shows the current language and it is obviously a control. An entry inside the hamburger is not: the trigger is an unlabeled icon, the section heading says "Language" in a language they do not speak, and past a handful of nav items it sits below the fold of a menu they have to scroll with a finger. It is reliably never found.
+
+What follows from it:
+
+| Behavior                                                                                                                                  | Why                                                                                                                                                                |
+| ----------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
+| The trailing dropdown has **no** locale section while the inline trigger is visible.                                                      | Two routes to one setting, one of which nobody finds. `_dropdownItems` appends the locale section only when the inline switcher is hidden.                         |
+| A header whose only collapsible content was the locale switcher renders **no hamburger at all**.                                          | `_dropdownItems` comes back empty, and the trailing `DropdownMenu` is gated on it being non-empty.                                                                 |
+| The inline trigger shows `HeaderLocaleItem.shortLabel` (when set) **only** while collapsed.                                               | `"Slovenčina"` next to a hamburger on a 360px phone is what pushed the switcher into the menu in the first place. The dropdown list always shows the full `label`. |
+| `keepLocaleOnCollapse={false}` restores the alternative: folds into the dropdown in `"hamburger"` mode, hidden entirely in `"hide"` mode. | For an end area already crowded with actions, or an app whose own drawer owns the language switch.                                                                 |
+
+```ts
+// Long locale names on a narrow header: short form on the inline trigger,
+// full form in the dropdown list.
+const locales: HeaderLocaleItem[] = [
+	{ id: "en", label: "English", shortLabel: "EN" },
+	{ id: "sk", label: "Slovenčina", shortLabel: "SK" },
+];
+```
+
 ### App-like collapse: avatar + actions visible, everything else hidden
 
-Common "app shell" pattern: when the header collapses below `collapseThreshold`, the avatar and a few key actions (search, notifications, cart…) remain visible, the trailing hamburger is NOT shown, and the nav items + locale switcher are hidden entirely (the nav typically lives in a drawer triggered by the leading hamburger instead).
+Common "app shell" pattern: when the header collapses below `collapseThreshold`, the avatar, the locale switcher and a few key actions (search, notifications, cart…) remain visible, the trailing hamburger is NOT shown, and the nav items are hidden entirely (the nav typically lives in a drawer triggered by the leading hamburger instead).
 
-| Requirement                     | Where it's handled                                                                                                 | How                                                                                                                              |
-| ------------------------------- | ------------------------------------------------------------------------------------------------------------------ | -------------------------------------------------------------------------------------------------------------------------------- |
-| **Avatar stays visible**        | [Header.svelte:626](./Header.svelte#L626) — `{#if avatar && !(_isCollapsed && _avatarInDropdown)}`                 | `_avatarInDropdown` requires `collapseMode === "hamburger"`. In `"hide"` mode it's always `false`, so the avatar always renders. |
-| **Action buttons stay visible** | [Header.svelte:585](./Header.svelte#L585) — `<!-- Actions (icon buttons, always visible) -->`                      | The actions loop has no collapse gating — items render in both modes.                                                            |
-| **No trailing hamburger**       | [Header.svelte:642](./Header.svelte#L642) — `{#if _isCollapsed && _dropdownItems.length > 0}`                      | In `"hide"` mode, `_dropdownItems` short-circuits to `[]`, so the `{#if}` is false → no trailing hamburger.                      |
-| **Nav items hidden**            | [Header.svelte:516](./Header.svelte#L516) — `{#if !_isCollapsed && items.length > 0}`                              | Inline nav requires `!_isCollapsed`; combined with the empty `_dropdownItems` above, items don't reappear in a dropdown either.  |
-| **Locale hidden**               | [Header.svelte:335](./Header.svelte#L335) — `!_isCollapsed \|\| (collapseMode === "hide" && keepLocaleOnCollapse)` | Default `keepLocaleOnCollapse={false}` hides the locale switcher in collapsed mode.                                              |
+| Requirement                     | Where it's handled                                                                                 | How                                                                                                                                                      |
+| ------------------------------- | -------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| **Avatar stays visible**        | [Header.svelte:673](./Header.svelte#L673) — `{#if avatar && !(_isCollapsed && _avatarInDropdown)}` | `_avatarInDropdown` requires `collapseMode === "hamburger"`. In `"hide"` mode it's always `false`, so the avatar always renders.                         |
+| **Action buttons stay visible** | [Header.svelte:632](./Header.svelte#L632) — `<!-- Actions (icon buttons, always visible) -->`      | The actions loop has no collapse gating — items render in both modes.                                                                                    |
+| **No trailing hamburger**       | [Header.svelte:689](./Header.svelte#L689) — `{#if _isCollapsed && _dropdownItems.length > 0}`      | In `"hide"` mode, `_dropdownItems` short-circuits to `[]`, so the `{#if}` is false → no trailing hamburger.                                              |
+| **Nav items hidden**            | [Header.svelte:564](./Header.svelte#L564) — `{#if !_isCollapsed && items.length > 0}`              | Inline nav requires `!_isCollapsed`; combined with the empty `_dropdownItems` above, items don't reappear in a dropdown either.                          |
+| **Locale stays visible**        | [Header.svelte:369](./Header.svelte#L369) — `!_isCollapsed \|\| keepLocaleOnCollapse`              | `keepLocaleOnCollapse` defaults to `true` in both modes (see the section above). Pass `false` to hide it, e.g. when the drawer owns the language switch. |
 
 Minimal config:
 
@@ -26,7 +63,7 @@ Minimal config:
     collapseMode="hide"         <!-- no trailing hamburger; avatar stays -->
     leadingHamburger            <!-- optional: drives a drawer for the hidden nav -->
     onLeadingHamburger={() => (drawerOpen = true)}
-    {locales} {activeLocale}    <!-- hidden in collapsed (keepLocaleOnCollapse defaults to false) -->
+    {locales} {activeLocale}    <!-- stays visible in collapsed (keepLocaleOnCollapse defaults to true) -->
     onLocaleChange={(id) => (activeLocale = id)}
     avatarOnClick={() => alert("Profile")}  <!-- safe in "hide" mode — won't move into dropdown -->
 >

package/dist/components/Header/index.css

@@ -21,6 +21,14 @@
 	/* Actions (icon buttons in the end region) */
 	--stuic-header-actions-gap: 0.25rem;
 
+	/* Gap between the end-area regions (locale / actions / avatar / hamburger)
+	   while collapsed. Expanded uses --stuic-header-gap; collapsed is tighter
+	   because the locale switcher stays inline there instead of folding into
+	   the hamburger, and at 320px the full gap pushes a locale + 3 actions +
+	   hamburger row past the content edge. Set to var(--stuic-header-gap) to
+	   keep both states equal. */
+	--stuic-header-end-gap-collapsed: 0.5rem;
+
 	/* Hamburger offsets — outdent the built-in hamburger buttons on both
 	   inline sides so the *icon* (not the invisible iconButton hit area)
 	   sits flush with the header's content padding on one side and tightens
@@ -126,6 +134,14 @@
 		font-size: var(--stuic-header-project-name-font-size, var(--text-lg, 1.125rem));
 		font-weight: var(--stuic-header-project-name-font-weight);
 		white-space: nowrap;
+		/* Truncate instead of overflowing the row. `min-width: 0` lets this
+		   flex item shrink below its content width (auto minimum size would
+		   otherwise pin it), and `overflow: hidden` is what makes
+		   `text-overflow` apply. Matters most in collapsed mode, where the
+		   name shares the row with the locale trigger + hamburger. */
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
 	}
 
 	/* ============================================================================
@@ -193,6 +209,10 @@
 		flex-shrink: 0;
 	}
 
+	.stuic-header[data-collapsed] .stuic-header-end {
+		gap: var(--stuic-header-end-gap-collapsed);
+	}
+
 	.stuic-header-avatar {
 		display: flex;
 		align-items: center;

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
 
@@ -1515,6 +1518,18 @@ interface HeaderActionItem {
 }
 ```
 
+### HeaderLocaleItem
+
+```ts
+interface HeaderLocaleItem {
+	id: string;
+	label: THC;
+	/** Compact label for the inline trigger in COLLAPSED mode only
+	 *  (falls back to `label`); the dropdown list always shows `label`. */
+	shortLabel?: THC;
+}
+```
+
 ### Key Props
 
 | Prop                    | Type                         | Default               | Description                                                                                |
@@ -1540,7 +1555,7 @@ interface HeaderActionItem {
 | `contentMaxWidth`       | `string \| number`           | —                     | Inner content row max-width (outer header stays 100%).                                     |
 | `collapseThreshold`     | `number`                     | `768`                 | Width (px) to collapse; 0 disables.                                                        |
 | `collapseMode`          | `"hamburger" \| "hide"`      | `"hamburger"`         | Collapse behavior. See top of section.                                                     |
-| `keepLocaleOnCollapse`  | `boolean`                    | `false`               | Keep locale switcher visible when collapsed (only `collapseMode === "hide"`).              |
+| `keepLocaleOnCollapse`  | `boolean`                    | `true`                | Keep the locale switcher inline when collapsed (both modes). See below.                    |
 | `fixed`                 | `boolean`                    | `false`               | Fixed positioning at top.                                                                  |
 | `isCollapsed`           | `boolean`                    | —                     | Bindable: collapsed state.                                                                 |
 | `isMenuOpen`            | `boolean`                    | —                     | Bindable: hamburger menu open.                                                             |
@@ -1575,11 +1590,24 @@ Common pattern for app interfaces: the leading hamburger opens a side drawer for
 
 See [Header/README.md](../../src/lib/components/Header/README.md) for the breakdown of which markup branch handles each requirement of this pattern.
 
+### The locale switcher never folds into the hamburger
+
+By default (`keepLocaleOnCollapse`) the locale switcher stays **inline** when the header collapses, in both collapse modes — it sits just before the actions/avatar/hamburger instead of becoming the last section of the dropdown.
+
+This is the one control `Header` deliberately treats differently from nav items. The user who most needs the language switch is the one who landed in a language they cannot read, and for them a visible `EN ▾` trigger is self-describing while a hamburger entry is not: the trigger is an unlabeled icon, the section heading says "Language" in a language they do not speak, and with more than a few nav items it sits below the fold of a menu they must scroll.
+
+Consequences worth knowing:
+
+- The dropdown never carries a duplicate locale section while the inline trigger is visible.
+- If the locales were the only thing the trailing dropdown would have held, no hamburger renders at all.
+- `HeaderLocaleItem.shortLabel` keeps the inline trigger narrow on phones (`"Slovenčina"` → `"SK"`) without shortening the dropdown entries.
+- Set `keepLocaleOnCollapse={false}` when the end area is already crowded with actions, or when the app's own drawer owns the language switch.
+
 ### CSS Tokens
 
 Prefix: `--stuic-header-*`
 
-`padding-x`, `padding-y`, `gap`, `min-height`, `nav-gap`, `content-max-width`, `project-name-font-weight`, `z-index`, `bg`, `text`, `border-width`, `border-color`, `nav-item-bg-active`, `nav-item-text-active`
+`padding-x`, `padding-y`, `gap`, `end-gap-collapsed`, `min-height`, `nav-gap`, `content-max-width`, `project-name-font-weight`, `z-index`, `bg`, `text`, `border-width`, `border-color`, `nav-item-bg-active`, `nav-item-text-active`
 
 ---
 

package/package.json

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