@marianmeres/stuic 3.180.0 → 3.181.0

package/dist/components/ColorPicker/index.css

@@ -0,0 +1,275 @@
+/* ============================================================================
+   COLOR PICKER COMPONENT TOKENS
+   Override globally: :root { --stuic-color-picker-swatch-size: 2rem; }
+   Override locally:  <ColorPicker style="--stuic-color-picker-gap: 0.5rem;">
+   ============================================================================ */
+
+/* prettier-ignore */
+:root {
+	/* Layout */
+	--stuic-color-picker-gap: 0.375rem;
+	--stuic-color-picker-custom-gap: 0.5rem;
+	--stuic-color-picker-swatch-size: 1.75rem;
+	/* Touch bump: the swatches are the whole hit target, so on a coarse pointer
+	   they must reach the ~44px recommendation on their own. */
+	--stuic-color-picker-swatch-size-touch: 2.75rem;
+
+	/* Swatch: a hairline keeps white / transparent / near-background swatches
+	   visible on any theme. */
+	--stuic-color-picker-swatch-border: color-mix(in oklab, var(--stuic-color-foreground) 20%, transparent);
+	--stuic-color-picker-swatch-scale-hover: 1.1;
+
+	/* Selected ring — drawn OUTSIDE the swatch (a gap of page background, then
+	   the ring) so it reads on any color without measuring its luminance. */
+	--stuic-color-picker-swatch-ring-width: 2px;
+	--stuic-color-picker-swatch-ring-gap: 2px;
+	--stuic-color-picker-swatch-ring-color: var(--stuic-color-foreground);
+	--stuic-color-picker-swatch-ring-gap-color: var(--stuic-color-background);
+
+	/* Focus ring */
+	--stuic-color-picker-ring-width: 2px;
+	--stuic-color-picker-ring-color: var(--stuic-color-ring);
+
+	/* The "no color" swatch (diagonal slash) */
+	--stuic-color-picker-clear-color: var(--stuic-color-destructive);
+	--stuic-color-picker-clear-bg: transparent;
+
+	/* Hex text field */
+	--stuic-color-picker-text-width: 10ch;
+	--stuic-color-picker-text-bg: var(--stuic-color-input);
+	--stuic-color-picker-text-border: var(--stuic-color-border);
+	--stuic-color-picker-text-color: var(--stuic-color-foreground);
+	--stuic-color-picker-text-placeholder: color-mix(in oklab, var(--stuic-color-muted-foreground) 75%, transparent);
+	--stuic-color-picker-text-font-family: var(--font-mono);
+	--stuic-color-picker-text-font-size: var(--text-sm);
+	/* See the "IOS ZOOM GUARD" section at the bottom of this file. */
+	--stuic-color-picker-text-font-size-touch-min: 16px;
+
+	/* Disabled */
+	--stuic-color-picker-opacity-disabled: 0.5;
+}
+
+@layer components {
+	/* ============================================================================
+	   BASE
+	   ============================================================================ */
+
+	.stuic-color-picker {
+		--_size: var(--stuic-color-picker-swatch-size);
+		display: flex;
+		flex-direction: column;
+		align-items: flex-start;
+		gap: var(--stuic-color-picker-custom-gap);
+	}
+
+	.stuic-color-picker[data-disabled] {
+		opacity: var(--stuic-color-picker-opacity-disabled);
+	}
+
+	/* ============================================================================
+	   SWATCHES (the radiogroup)
+	   ============================================================================ */
+
+	.stuic-color-picker-swatches {
+		display: flex;
+		flex-wrap: wrap;
+		gap: var(--stuic-color-picker-gap);
+	}
+
+	/* `columns` is a cap, not a grid: the row is exactly wide enough for N
+	   swatches, so it holds N — and on a screen too narrow for that it wraps to
+	   fewer instead of pushing the page sideways. (A real N-column grid would
+	   overflow: 8 x 44px + gaps does not fit a phone.) The keyboard follows the
+	   rendered rows, not this number — see `rowLength()`. */
+	.stuic-color-picker-swatches[data-columns] {
+		max-inline-size: calc(
+			var(--stuic-color-picker-columns, 6) * var(--_size) +
+				(var(--stuic-color-picker-columns, 6) - 1) * var(--stuic-color-picker-gap)
+		);
+	}
+
+	/* ============================================================================
+	   SWATCH
+	   ============================================================================ */
+
+	.stuic-color-picker-swatch {
+		box-sizing: border-box;
+		inline-size: var(--_size);
+		block-size: var(--_size);
+		margin: 0;
+		padding: 0;
+		appearance: none;
+		cursor: pointer;
+		-webkit-tap-highlight-color: transparent;
+		background-color: var(--stuic-color-picker-swatch-color, transparent);
+		/* the hairline must not be tinted by the swatch color underneath it */
+		background-clip: padding-box;
+		border: var(--stuic-color-picker-swatch-border-width, var(--stuic-border-width)) solid
+			var(--stuic-color-picker-swatch-border);
+		border-radius: var(--stuic-color-picker-swatch-radius, var(--stuic-radius));
+		transition:
+			transform var(--stuic-color-picker-transition, var(--stuic-transition)),
+			box-shadow var(--stuic-color-picker-transition, var(--stuic-transition));
+	}
+
+	@media (hover: hover) {
+		.stuic-color-picker-swatch:hover:not(:disabled) {
+			transform: scale(var(--stuic-color-picker-swatch-scale-hover));
+		}
+	}
+
+	.stuic-color-picker-swatch:disabled {
+		cursor: default;
+	}
+
+	/* The selected marker: a gap of background, then the ring. Two stacked
+	   shadows rather than an outline, so the focus outline stays available. */
+	.stuic-color-picker-swatch[data-selected] {
+		box-shadow:
+			0 0 0 var(--stuic-color-picker-swatch-ring-gap)
+				var(--stuic-color-picker-swatch-ring-gap-color),
+			0 0 0
+				calc(
+					var(--stuic-color-picker-swatch-ring-gap) +
+						var(--stuic-color-picker-swatch-ring-width)
+				)
+				var(--stuic-color-picker-swatch-ring-color);
+	}
+
+	.stuic-color-picker-swatch:focus-visible {
+		outline: var(--stuic-color-picker-ring-width) solid
+			var(--stuic-color-picker-ring-color);
+		outline-offset: calc(
+			var(--stuic-color-picker-swatch-ring-gap) +
+				var(--stuic-color-picker-swatch-ring-width)
+		);
+	}
+
+	/* The "no color" swatch: a diagonal slash across an empty chip */
+	.stuic-color-picker-swatch[data-clear] {
+		background-color: var(--stuic-color-picker-clear-bg);
+		background-image: linear-gradient(
+			to top right,
+			transparent calc(50% - 0.5px),
+			var(--stuic-color-picker-clear-color) calc(50% - 0.5px),
+			var(--stuic-color-picker-clear-color) calc(50% + 0.5px),
+			transparent calc(50% + 0.5px)
+		);
+	}
+
+	/* ============================================================================
+	   CUSTOM ROW (native picker + hex field)
+	   ============================================================================ */
+
+	.stuic-color-picker-custom {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: var(--stuic-color-picker-gap);
+	}
+
+	/* The native `<input type="color">`, shaped like one more swatch. */
+	.stuic-color-picker-native {
+		box-sizing: border-box;
+		inline-size: var(--_size);
+		block-size: var(--_size);
+		margin: 0;
+		padding: 0;
+		appearance: none;
+		-webkit-appearance: none;
+		background: none;
+		cursor: pointer;
+		border: var(--stuic-color-picker-swatch-border-width, var(--stuic-border-width)) solid
+			var(--stuic-color-picker-swatch-border);
+		border-radius: var(--stuic-color-picker-swatch-radius, var(--stuic-radius));
+	}
+
+	.stuic-color-picker-native:disabled {
+		cursor: default;
+	}
+
+	.stuic-color-picker-native::-webkit-color-swatch-wrapper {
+		padding: 0;
+	}
+
+	.stuic-color-picker-native::-webkit-color-swatch {
+		border: none;
+		border-radius: calc(
+			var(--stuic-color-picker-swatch-radius, var(--stuic-radius)) - 1px
+		);
+	}
+
+	.stuic-color-picker-native::-moz-color-swatch {
+		border: none;
+		border-radius: calc(
+			var(--stuic-color-picker-swatch-radius, var(--stuic-radius)) - 1px
+		);
+	}
+
+	.stuic-color-picker-native:focus-visible {
+		outline: var(--stuic-color-picker-ring-width) solid
+			var(--stuic-color-picker-ring-color);
+		outline-offset: 2px;
+	}
+
+	/* The hex field. Deliberately not `.stuic-input` — that is a whole field
+	   wrapper (label, description, error box); this is one bare control. */
+	.stuic-color-picker-text {
+		box-sizing: border-box;
+		inline-size: var(--stuic-color-picker-text-width);
+		min-inline-size: 0;
+		min-block-size: var(--_size);
+		padding-inline: 0.5rem;
+		padding-block: 0.25rem;
+		font-family: var(--stuic-color-picker-text-font-family);
+		font-size: var(--stuic-color-picker-text-font-size);
+		color: var(--stuic-color-picker-text-color);
+		background-color: var(--stuic-color-picker-text-bg);
+		border: var(--stuic-color-picker-text-border-width, var(--stuic-border-width)) solid
+			var(--stuic-color-picker-text-border);
+		border-radius: var(--stuic-color-picker-text-radius, var(--stuic-radius));
+	}
+
+	.stuic-color-picker-text::placeholder {
+		color: var(--stuic-color-picker-text-placeholder);
+	}
+
+	.stuic-color-picker-text:focus-visible {
+		outline: var(--stuic-color-picker-ring-width) solid
+			var(--stuic-color-picker-ring-color);
+		outline-offset: 1px;
+	}
+
+	/* ============================================================================
+	   TOUCH — the swatches are the entire hit target, so they carry the size
+	   ============================================================================ */
+
+	@media (pointer: coarse) {
+		.stuic-color-picker {
+			--_size: var(--stuic-color-picker-swatch-size-touch);
+		}
+	}
+}
+
+/* ============================================================================
+   IOS ZOOM GUARD
+
+   Mobile WebKit auto-zooms the viewport when a text control whose computed
+   font-size is below 16px receives focus, and the hex field defaults to 14px.
+   Same two conditions (and the same reasoning) as the guard in `Input/index.css`
+   — an Apple/WebKit engine AND a touch-capable device — and likewise unlayered,
+   so it also wins over a Tailwind text-size utility put on the field.
+
+   Opt out with `--stuic-color-picker-text-font-size-touch-min: 0px`.
+   ============================================================================ */
+
+@supports (font: -apple-system-body) or (-webkit-touch-callout: none) {
+	@media (any-pointer: coarse) {
+		.stuic-color-picker-text {
+			font-size: max(
+				var(--stuic-color-picker-text-font-size-touch-min),
+				var(--stuic-color-picker-text-font-size)
+			);
+		}
+	}
+}

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

@@ -0,0 +1,4 @@
+export { default as ColorPicker, type Props as ColorPickerProps, type ColorPickerCustom, } from "./ColorPicker.svelte";
+export { COLOR_PICKER_PALETTE, COLOR_PICKER_PALETTE_THEME, type ColorPickerSwatch, type ColorPickerSwatchObject, } from "./palettes.js";
+export { createColorPickerT, COLOR_PICKER_MESSAGES_EN, type ColorPickerMessageKey, type ColorPickerMessages, } from "./i18n.js";
+export { COLOR_PICKER_MESSAGES_SK } from "./i18n-sk.js";

package/dist/components/ColorPicker/index.js

@@ -0,0 +1,4 @@
+export { default as ColorPicker, } from "./ColorPicker.svelte";
+export { COLOR_PICKER_PALETTE, COLOR_PICKER_PALETTE_THEME, } from "./palettes.js";
+export { createColorPickerT, COLOR_PICKER_MESSAGES_EN, } from "./i18n.js";
+export { COLOR_PICKER_MESSAGES_SK } from "./i18n-sk.js";

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

@@ -0,0 +1,41 @@
+/** One palette entry: a bare CSS color string, or a color with a label. */
+export type ColorPickerSwatch = string | ColorPickerSwatchObject;
+/** The object form of a palette entry. */
+export interface ColorPickerSwatchObject {
+    /**
+     * Any CSS color string — `#3b82f6`, `oklch(62.8% 0.258 29.2)`, `rgb(0 0 0)`,
+     * `transparent`, or a custom property reference like
+     * `var(--stuic-color-primary)`. Rendered as-is; never parsed.
+     */
+    value: string;
+    /**
+     * Accessible name (and `title`) of the swatch. Passed through the component's
+     * `t` with itself as the fallback, so plain labels ("Brand blue") render
+     * verbatim while short keys ("red") get translated by a bundled catalog.
+     * Defaults to `value`.
+     */
+    label?: string;
+}
+/**
+ * The default `palette` of `ColorPicker`: 12 fixed hues plus white / grey / black.
+ *
+ * Deliberately literal hex, not theme tokens — a swatch palette must read the
+ * same on every theme (several of the bundled ones are monochrome). Use
+ * {@link COLOR_PICKER_PALETTE_THEME} when theme-following colors are what you want.
+ */
+export declare const COLOR_PICKER_PALETTE: ColorPickerSwatch[];
+/**
+ * An opt-in palette of design-token colors — pass it as `palette` when the picked
+ * color should follow the active theme:
+ *
+ * ```svelte
+ * <ColorPicker bind:value palette={COLOR_PICKER_PALETTE_THEME} />
+ * ```
+ *
+ * The stored value is the `var(--stuic-color-*)` reference itself, so it keeps
+ * following the theme wherever it is later applied. Two consequences worth
+ * knowing: the native color input cannot display such a value (it falls back to
+ * black until the user picks a hex), and on the monochrome themes several of
+ * these resolve to near-identical greys.
+ */
+export declare const COLOR_PICKER_PALETTE_THEME: ColorPickerSwatch[];

package/dist/components/ColorPicker/palettes.js

@@ -0,0 +1,49 @@
+/**
+ * The default `palette` of `ColorPicker`: 12 fixed hues plus white / grey / black.
+ *
+ * Deliberately literal hex, not theme tokens — a swatch palette must read the
+ * same on every theme (several of the bundled ones are monochrome). Use
+ * {@link COLOR_PICKER_PALETTE_THEME} when theme-following colors are what you want.
+ */
+export const COLOR_PICKER_PALETTE = [
+    { value: "#ef4444", label: "red" },
+    { value: "#f97316", label: "orange" },
+    { value: "#f59e0b", label: "amber" },
+    { value: "#eab308", label: "yellow" },
+    { value: "#84cc16", label: "lime" },
+    { value: "#22c55e", label: "green" },
+    { value: "#14b8a6", label: "teal" },
+    { value: "#06b6d4", label: "cyan" },
+    { value: "#3b82f6", label: "blue" },
+    { value: "#6366f1", label: "indigo" },
+    { value: "#8b5cf6", label: "violet" },
+    { value: "#ec4899", label: "pink" },
+    { value: "#ffffff", label: "white" },
+    { value: "#6b7280", label: "gray" },
+    { value: "#000000", label: "black" },
+];
+/**
+ * An opt-in palette of design-token colors — pass it as `palette` when the picked
+ * color should follow the active theme:
+ *
+ * ```svelte
+ * <ColorPicker bind:value palette={COLOR_PICKER_PALETTE_THEME} />
+ * ```
+ *
+ * The stored value is the `var(--stuic-color-*)` reference itself, so it keeps
+ * following the theme wherever it is later applied. Two consequences worth
+ * knowing: the native color input cannot display such a value (it falls back to
+ * black until the user picks a hex), and on the monochrome themes several of
+ * these resolve to near-identical greys.
+ */
+export const COLOR_PICKER_PALETTE_THEME = [
+    { value: "var(--stuic-color-primary)", label: "primary" },
+    { value: "var(--stuic-color-accent)", label: "accent" },
+    { value: "var(--stuic-color-success)", label: "success" },
+    { value: "var(--stuic-color-warning)", label: "warning" },
+    { value: "var(--stuic-color-destructive)", label: "destructive" },
+    { value: "var(--stuic-color-foreground)", label: "foreground" },
+    { value: "var(--stuic-color-muted-foreground)", label: "muted_foreground" },
+    { value: "var(--stuic-color-muted)", label: "muted" },
+    { value: "var(--stuic-color-background)", label: "background" },
+];

package/dist/components/FieldsBuilder/README.md

@@ -314,7 +314,9 @@ Slovak chrome (`t`), and still edits the canonical English label first:
 ```
 
 `getLocalizedText(text, preferred)` — exported — accepts the same fallback chain as an
-array: `getLocalizedText(label, ["sk", "en"])`.
+array: `getLocalizedText(label, ["sk", "en"])`. It is the library-wide `tr()` under this
+component's name (`LocalizedText` is an alias of `MaybeLocalized`), so a label resolved in
+your own `preview` snippet and one resolved by `Nav` or `TabbedMenu` degrade identically.
 
 ## Accessibility
 

package/dist/components/FieldsBuilder/types.d.ts

@@ -1,6 +1,11 @@
 import type { Snippet } from "svelte";
-/** A localized string: either one plain string, or a per-language map. */
-export type LocalizedText = string | Record<string, string>;
+import type { MaybeLocalized } from "../../utils/tr.js";
+/**
+ * A localized string: either one plain string, or a per-language map. The
+ * same shape as the library-wide `MaybeLocalized` (resolved by `tr()`); the
+ * alias is kept for this component's vocabulary.
+ */
+export type LocalizedText = MaybeLocalized;
 /** A single option of a choice-like field type (one declaring `supportsOptions`). */
 export interface FieldOptionDef {
     /** Machine value, unique within the field's options. */

package/dist/components/FieldsBuilder/utils.d.ts

@@ -8,7 +8,8 @@ export type FieldsBuilderTranslate = (key: string, values?: Record<string, strin
  * Read the display text of a `LocalizedText`: the string itself, the entry of
  * the first preferred language (a single one, or a fallback chain in order of
  * preference) that is non-empty, or the first non-empty entry as a last
- * resort.
+ * resort. This is the library-wide `tr()` under this component's name — same
+ * resolution, same fallbacks (a JSON-encoded record is accepted too).
  */
 export declare function getLocalizedText(text: LocalizedText | null | undefined, preferredLanguage?: string | string[]): string;
 /**

package/dist/components/FieldsBuilder/utils.js

@@ -1,3 +1,4 @@
+import { tr } from "../../utils/tr.js";
 /** Default machine-key policy: lowercase snake_case, starts with a letter, max 63 chars. */
 export const DEFAULT_KEY_PATTERN = /^[a-z][a-z0-9_]{0,62}$/;
 export const DEFAULT_KEY_MAX_LENGTH = 63;
@@ -5,23 +6,11 @@ export const DEFAULT_KEY_MAX_LENGTH = 63;
  * Read the display text of a `LocalizedText`: the string itself, the entry of
  * the first preferred language (a single one, or a fallback chain in order of
  * preference) that is non-empty, or the first non-empty entry as a last
- * resort.
+ * resort. This is the library-wide `tr()` under this component's name — same
+ * resolution, same fallbacks (a JSON-encoded record is accepted too).
  */
 export function getLocalizedText(text, preferredLanguage) {
-    if (text == null)
-        return "";
-    if (typeof text === "string")
-        return text;
-    const preferred = typeof preferredLanguage === "string"
-        ? [preferredLanguage]
-        : (preferredLanguage ?? []);
-    for (const lang of preferred)
-        if (lang && text[lang])
-            return text[lang];
-    for (const v of Object.values(text))
-        if (v)
-            return v;
-    return "";
+    return tr(text, preferredLanguage);
 }
 /**
  * Derive a machine key from a human label: transliterates diacritics

package/dist/components/Nav/Nav.svelte

@@ -55,8 +55,13 @@
 		/** Optional section title rendered above the groups (uppercase, non-interactive) */
 		title?: MaybeLocalized;
 
-		/** Current locale for MaybeLocalized resolution */
-		locale?: string;
+		/**
+		 * Locale for `MaybeLocalized` label resolution — one locale, or a chain
+		 * in order of preference (e.g. `[user.locale, "en"]`). A missing
+		 * translation falls back along the chain, then to the label's first
+		 * non-empty entry.
+		 */
+		locale?: string | string[];
 
 		/** Whether the sidebar is in collapsed mode (icon-only) */
 		isCollapsed?: boolean;

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

@@ -49,8 +49,13 @@ export interface Props extends Omit<HTMLAttributes<HTMLElement>, "children" | "t
     groups: NavGroup[];
     /** Optional section title rendered above the groups (uppercase, non-interactive) */
     title?: MaybeLocalized;
-    /** Current locale for MaybeLocalized resolution */
-    locale?: string;
+    /**
+     * Locale for `MaybeLocalized` label resolution — one locale, or a chain
+     * in order of preference (e.g. `[user.locale, "en"]`). A missing
+     * translation falls back along the chain, then to the label's first
+     * non-empty entry.
+     */
+    locale?: string | string[];
     /** Whether the sidebar is in collapsed mode (icon-only) */
     isCollapsed?: boolean;
     /** Whether the sidebar is expanding (transitioning from collapsed to expanded) */

package/dist/components/Nav/README.md

@@ -8,7 +8,7 @@ A navigation component for sidebars with support for groups, nested items, expan
 | ---------------------- | --------------------------------------------------- | ------------- | --------------------------------------------------------- |
 | `groups`               | `NavGroup[]`                                        | -             | Navigation groups to render                               |
 | `title`                | `MaybeLocalized`                                    | -             | Section title above groups (uppercase, non-interactive)   |
-| `locale`               | `string`                                            | -             | Current locale for localized labels                       |
+| `locale`               | `string \| string[]`                                | -             | Locale (or preference chain) for localized labels         |
 | `isCollapsed`          | `boolean`                                           | `false`       | Collapsed mode (icon-only)                                |
 | `isExpanding`          | `boolean`                                           | `false`       | Transitioning from collapsed to expanded                  |
 | `activeId`             | `string`                                            | -             | Active item ID for highlighting                           |
@@ -329,7 +329,7 @@ Note: in icon-only sidebar mode (`isCollapsed`), the section title is visually h
 - **localStorage Persistence**: Expand/collapse state persists across page reloads
 - **Collapsed Mode**: Icon-only sidebar with tooltips
 - **Active State**: Highlight current item via `activeId` or custom callback
-- **Localization**: Labels support `MaybeLocalized` type
+- **Localization**: Labels support `MaybeLocalized`, resolved via `tr()` against `locale` (a single locale or a preference chain); a missing translation falls back to the label's first non-empty entry, never to `[object Object]`
 - **Touch-Friendly**: Auto-detect or manually enable larger touch targets
 - **ARIA Compliant**: Proper roles and aria-expanded attributes
 - **Reduced Motion**: Respects user's reduced motion preference

package/dist/components/TabbedMenu/README.md

@@ -22,19 +22,20 @@ A horizontal tab navigation component built on semantic `ul/li` markup with ARIA
 
 ## Props
 
-| Prop                  | Type                             | Default     | Description                        |
-| --------------------- | -------------------------------- | ----------- | ---------------------------------- |
-| `items`               | `TabbedMenuItem[]`               | required    | Array of tab items                 |
-| `value`               | `string \| number`               | `undefined` | Active tab id (bindable)           |
-| `disabled`            | `boolean`                        | `false`     | Disable all tabs                   |
-| `onSelect`            | `(item: TabbedMenuItem) => void` | `undefined` | Callback when tab is selected      |
-| `class`               | `string`                         | `undefined` | Class for the `ul` wrapper         |
-| `classItem`           | `string`                         | `undefined` | Class for each `li` element        |
-| `classButton`         | `string`                         | `undefined` | Class for tab buttons              |
-| `classButtonActive`   | `string`                         | `undefined` | Additional class for active tab    |
-| `classButtonDisabled` | `string`                         | `undefined` | Additional class for disabled tabs |
-| `unstyled`            | `boolean`                        | `false`     | Skip default styling               |
-| `el`                  | `HTMLUListElement`               | `undefined` | Element reference (bindable)       |
+| Prop                  | Type                             | Default     | Description                                   |
+| --------------------- | -------------------------------- | ----------- | --------------------------------------------- |
+| `items`               | `TabbedMenuItem[]`               | required    | Array of tab items                            |
+| `value`               | `string \| number`               | `undefined` | Active tab id (bindable)                      |
+| `disabled`            | `boolean`                        | `false`     | Disable all tabs                              |
+| `onSelect`            | `(item: TabbedMenuItem) => void` | `undefined` | Callback when tab is selected                 |
+| `locale`              | `string \| string[]`             | `undefined` | Locale (or chain) for `MaybeLocalized` labels |
+| `class`               | `string`                         | `undefined` | Class for the `ul` wrapper                    |
+| `classItem`           | `string`                         | `undefined` | Class for each `li` element                   |
+| `classButton`         | `string`                         | `undefined` | Class for tab buttons                         |
+| `classButtonActive`   | `string`                         | `undefined` | Additional class for active tab               |
+| `classButtonDisabled` | `string`                         | `undefined` | Additional class for disabled tabs            |
+| `unstyled`            | `boolean`                        | `false`     | Skip default styling                          |
+| `el`                  | `HTMLUListElement`               | `undefined` | Element reference (bindable)                  |
 
 ## TabbedMenuItem Interface
 

package/dist/components/TabbedMenu/TabbedMenu.svelte

@@ -21,8 +21,13 @@
 		disabled?: boolean;
 		onSelect?: (item: TabbedMenuItem) => void;
 		orientation?: "horizontal" | "vertical";
-		/** Current locale for MaybeLocalized resolution */
-		locale?: string;
+		/**
+		 * Locale for `MaybeLocalized` label resolution — one locale, or a chain
+		 * in order of preference (e.g. `[user.locale, "en"]`). A missing
+		 * translation falls back along the chain, then to the label's first
+		 * non-empty entry.
+		 */
+		locale?: string | string[];
 		//
 		class?: string;
 		classItem?: string;

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

@@ -16,8 +16,13 @@ export interface Props extends Omit<HTMLAttributes<HTMLUListElement>, "children"
     disabled?: boolean;
     onSelect?: (item: TabbedMenuItem) => void;
     orientation?: "horizontal" | "vertical";
-    /** Current locale for MaybeLocalized resolution */
-    locale?: string;
+    /**
+     * Locale for `MaybeLocalized` label resolution — one locale, or a chain
+     * in order of preference (e.g. `[user.locale, "en"]`). A missing
+     * translation falls back along the chain, then to the label's first
+     * non-empty entry.
+     */
+    locale?: string | string[];
     class?: string;
     classItem?: string;
     classButton?: string;

package/dist/index.css

@@ -86,6 +86,7 @@ In practice:
 @import "./components/RegisterForm/index.css";
 @import "./components/LoginOrRegisterForm/index.css";
 @import "./components/Checkout/index.css";
+@import "./components/ColorPicker/index.css";
 @import "./components/CommandMenu/index.css";
 /* NOTE: CommentInput/index.css is deliberately NOT imported here — same reason as
    MarkdownEditor's. It is a subpath-export component and imports its own CSS

package/dist/index.d.ts

@@ -39,6 +39,7 @@ export * from "./components/Carousel/index.js";
 export * from "./components/Checkout/index.js";
 export * from "./components/Circle/index.js";
 export * from "./components/Collapsible/index.js";
+export * from "./components/ColorPicker/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
 export * from "./components/ContactUsForm/index.js";

package/dist/index.js

@@ -40,6 +40,7 @@ export * from "./components/Carousel/index.js";
 export * from "./components/Checkout/index.js";
 export * from "./components/Circle/index.js";
 export * from "./components/Collapsible/index.js";
+export * from "./components/ColorPicker/index.js";
 export * from "./components/ColorScheme/index.js";
 export * from "./components/CommandMenu/index.js";
 // NOTE: CommentInput is deliberately NOT exported here. It embeds MarkdownEditor,