@nexxtmove/ui 2.2.0 → 2.4.0

package/dist/components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue.d.ts

@@ -57,10 +57,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorBackgroundS
     /** The selected background size, as the Tailwind class to apply. */
     modelValue: EditorBackgroundSizeValue;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: "bg-auto" | "bg-cover" | "bg-contain") => any;
+    "update:modelValue": (value: "bg-auto" | "bg-contain" | "bg-cover") => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorBackgroundSizeProps & {
     /** The selected background size, as the Tailwind class to apply. */
     modelValue: EditorBackgroundSizeValue;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "bg-auto" | "bg-cover" | "bg-contain") => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "bg-auto" | "bg-contain" | "bg-cover") => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/editor/molecules/EditorBlur/EditorBlur.vue.d.ts

@@ -83,7 +83,7 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorBlurProps &
      */
     enabled?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: "backdrop-blur-sm" | "backdrop-blur-md" | "backdrop-blur-lg" | "backdrop-blur-xs" | "backdrop-blur-xl" | undefined) => any;
+    "update:modelValue": (value: "backdrop-blur-lg" | "backdrop-blur-sm" | "backdrop-blur-md" | "backdrop-blur-xs" | "backdrop-blur-xl" | undefined) => any;
     "update:enabled": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorBlurProps & {
     /**
@@ -101,6 +101,6 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorBlurProps &
      */
     enabled?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "backdrop-blur-sm" | "backdrop-blur-md" | "backdrop-blur-lg" | "backdrop-blur-xs" | "backdrop-blur-xl" | undefined) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "backdrop-blur-lg" | "backdrop-blur-sm" | "backdrop-blur-md" | "backdrop-blur-xs" | "backdrop-blur-xl" | undefined) => any) | undefined;
     "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/editor/molecules/EditorColor/EditorColor.vue.d.ts

@@ -1,3 +1,12 @@
+import { EditorColorRole, EditorColorThemeRole } from './colorClass';
+import { EditorColorGradientValue } from './gradientClass';
+import { ColorPickerFillMode, ColorPickerGradientMessages } from '../../../organisms/ColorPicker/ColorPicker.vue';
+export type { EditorColorRole, EditorColorThemeRole } from './colorClass';
+export type { EditorColorGradientValue, EditorColorLinearGradientValue, EditorColorRadialGradientValue, } from './gradientClass';
+/** A fill the editor can offer: `'solid'` or `'gradient'`; see NexxtColorPicker. */
+export type EditorColorFillMode = ColorPickerFillMode;
+/** Copy of the gradient mode; see NexxtColorPicker. */
+export type EditorColorGradientMessages = ColorPickerGradientMessages;
 /**
  * The CSS property the chosen colour is written to. It is the prefix of the
  * Tailwind class the model carries, so it decides whether the colour becomes a
@@ -5,12 +14,6 @@
  * is colour plus width, and that pair gets a component of its own.
  */
 export type EditorColorProperty = 'bg' | 'text';
-declare const ROLES: readonly ["main", "accent", "background", "heading", "text"];
-/**
- * A role of the customer's theme. A colour bound to a role follows the theme,
- * where a literal colour stays what it was picked as.
- */
-export type EditorColorRole = (typeof ROLES)[number];
 /** A literal colour: a Tailwind arbitrary-value class such as `'bg-[#1777EA]'`. */
 export type EditorColorLiteralValue = `${EditorColorProperty}-[#${string}]`;
 /** A colour bound to a theme role: a token class such as `'bg-theme-main'`. */
@@ -18,21 +21,10 @@ export type EditorColorRoleValue = `${EditorColorProperty}-theme-${EditorColorRo
 /**
  * The colour as the editor needs it: the class to apply, so the consumer can
  * put the model value straight on the element it styles. Either a literal
- * colour or a theme role.
+ * colour or a theme role, or with `modes` including `'gradient'` a gradient: a string of classes
+ * such as `'bg-linear-135 from-[#7f56d9] to-[#432e73]'`.
  */
-export type EditorColorValue = EditorColorLiteralValue | EditorColorRoleValue;
-export interface EditorColorThemeRole {
-    /** The role the class is written for: `'main'` becomes `bg-theme-main`. */
-    role: EditorColorRole;
-    /** Name of the role as the user reads it, in the swatch's tooltip and in the trigger. */
-    label: string;
-    /**
-     * The role's current colour as a 6- or 8-digit hex. Only used to paint the
-     * swatch: the library ships no CSS for the role classes, and the hex never
-     * reaches the model.
-     */
-    hex: string;
-}
+export type EditorColorValue = EditorColorLiteralValue | EditorColorRoleValue | EditorColorGradientValue;
 export interface EditorColorMessages {
     /** Text shown while no colour is set. Defaults to `'Kies kleur...'`. */
     placeholder?: string;
@@ -89,6 +81,38 @@ export interface NexxtEditorColorProps {
      * alpha and the model gets the opaque 6-digit hex.
      */
     showAlpha?: boolean;
+    /**
+     * The fills the picker offers. `['solid']` (the default) is the plain colour
+     * picker, unchanged. `['solid', 'gradient']`, in any order, adds an
+     * "Effen | Verloop" switch; `['gradient']` offers only the gradient, without a
+     * switch -- an empty value or a solid colour then opens on the gradient a
+     * switch would give, written only on the first change. A gradient only exists
+     * for `property` `'bg'`: with `'text'` this falls back to `['solid']`, also
+     * for `['gradient']`. A gradient is written as
+     * one string of classes in a fixed order -- type, from, from-position, via,
+     * via-position, to, to-position -- such as
+     * `'bg-linear-135 from-[#7f56d9] via-theme-main via-40% to-[#432e73cc]'` or
+     * `'bg-radial-[at_30%_70%] from-theme-accent to-[#ffffff00]'`. Hexes are in
+     * lower case without an opaque `ff`, and a position is only written when it
+     * differs from 0 %, 50 % or 100 %. In the gradient mode the opacity slider is
+     * always offered, whatever `showAlpha` says. To draw a stored gradient as an
+     * inline style, parse it with `parseGradientClass` and turn it into CSS with
+     * `gradientClassToCss`, which always interpolates in oklab, as the preview does.
+     * A radial gradient off centre renders in sRGB as a Tailwind class; draw it
+     * with `gradientClassToCss` for the oklab result the picker shows.
+     */
+    modes?: EditorColorFillMode[];
+    /**
+     * Copy of the gradient mode. Merged per key over the Dutch defaults, so
+     * overriding one key keeps the others.
+     */
+    gradientMessages?: EditorColorGradientMessages;
+    /**
+     * Id(s) of an element that describes the setting, such as a hint the
+     * consumer renders itself. Set as `aria-describedby` on the picker's trigger,
+     * and on the switch when `switchable`. Without it no attribute is set.
+     */
+    describedby?: string;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/components/editor/molecules/EditorColor/_ColorField.vue.d.ts

@@ -0,0 +1,66 @@
+import { ColorClass, EditorColorThemeRole } from './colorClass';
+import { EditorColorGradientValue } from './gradientClass';
+import { ColorPickerFillMode, ColorPickerGradientMessages } from '../../../organisms/ColorPicker/ColorPicker.vue';
+export interface ColorFieldProps<P extends string> {
+    /** The prefix of the class that is written, such as `'bg'` or `'from'`. */
+    property: P;
+    /**
+     * The prefixes that are read as a colour. Defaults to `property` alone.
+     * NexxtEditorColor reads both `bg` and `text`, so a value with the other
+     * prefix is shown, and rewritten once `property` changes.
+     */
+    accepts?: readonly P[];
+    /** Visible label above the trigger. Without it the placeholder names the trigger. */
+    label?: string;
+    /** Id(s) set as `aria-describedby` on the trigger. */
+    describedby?: string;
+    /** Text shown while no colour is set. */
+    placeholder: string;
+    /** Label shown above the suggestions. */
+    suggestionsLabel: string;
+    /** Label shown above the theme roles. */
+    themeLabel: string;
+    /** Label above the opacity slider, and its accessible name. */
+    alphaLabel: string;
+    /** Hex colours offered as one-click suggestions. */
+    suggestions?: string[];
+    /** Theme roles offered above the suggestions; an entry with an unreadable hex is left out. */
+    themeRoles?: EditorColorThemeRole[];
+    /** Offer an opacity slider, hidden while a theme role is selected. */
+    showAlpha?: boolean;
+    /**
+     * The fills offered: `['solid']` (the default), `['solid', 'gradient']` or
+     * `['gradient']`. A gradient only exists for `property` `'bg'`; for any other
+     * prefix only the solid colour is offered, also with `['gradient']`. The
+     * gradient is written as the class string of `gradientClass.ts`.
+     */
+    modes?: readonly ColorPickerFillMode[];
+    /** Copy of the gradient mode, merged per key over the picker's defaults. */
+    gradientMessages?: ColorPickerGradientMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: <P extends string>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import('vue').PublicProps & __VLS_PrettifyLocal<(ColorFieldProps<P> & {
+        /**
+         * The chosen colour, as the class to apply, or with `gradient` the gradient's
+         * class string. Unset or unreadable shows the placeholder.
+         */
+        modelValue?: ColorClass<P> | EditorColorGradientValue;
+    }) & {
+        "onUpdate:modelValue"?: ((value: EditorColorGradientValue | ColorClass<P> | undefined) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P_1;
+    } ? P_1 : {});
+    expose: (exposed: {}) => void;
+    attrs: any;
+    slots: {};
+    emit: (event: "update:modelValue", value: EditorColorGradientValue | ColorClass<P> | undefined) => void;
+}>) => import('vue').VNode & {
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
+};
+type __VLS_PrettifyLocal<T> = (T extends any ? {
+    [K in keyof T]: T[K];
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

package/dist/components/editor/molecules/EditorColor/colorClass.d.ts

@@ -0,0 +1,46 @@
+/**
+ * Parsing of the colour classes of the editor: NexxtEditorColor writes `bg-`/
+ * `text-` classes, and its gradient `from-`/`via-`/`to-` ones (see
+ * `gradientClass.ts`). The class is always a prefix, then either a hex between
+ * brackets or `theme-` and a role.
+ */
+export declare const COLOR_ROLES: readonly ["main", "accent", "background", "heading", "text"];
+/**
+ * A role of the customer's theme. A colour bound to a role follows the theme,
+ * where a literal colour stays what it was picked as.
+ */
+export type EditorColorRole = (typeof COLOR_ROLES)[number];
+export interface EditorColorThemeRole {
+    /** The role the class is written for: `'main'` becomes `bg-theme-main`. */
+    role: EditorColorRole;
+    /** Name of the role as the user reads it, in the swatch's tooltip and in the trigger. */
+    label: string;
+    /**
+     * The role's current colour as a 6- or 8-digit hex. Only used to paint the
+     * swatch: the library ships no CSS for the role classes, and the hex never
+     * reaches the model.
+     */
+    hex: string;
+}
+/** A colour class with the given prefix: a literal hex or a theme role. */
+export type ColorClass<P extends string> = `${P}-[#${string}]` | `${P}-theme-${EditorColorRole}`;
+/** What a colour class stands for, or `null` when it is not one. */
+export type ParsedColorClass = {
+    hex: `#${string}`;
+} | {
+    role: EditorColorRole;
+} | null;
+/** The picker throws on a colour it cannot read, so a role's hex is checked first. */
+export declare const ROLE_HEX_PATTERN: RegExp;
+/**
+ * The `#` is part of the model's type, so a plain `string` cannot be written
+ * into it. This narrows a regex capture or picker output without a cast.
+ */
+export declare const isHex: (value: string) => value is `#${string}`;
+/**
+ * Reads a class written with one of `prefixes`. A 6- or 8-digit hex is accepted
+ * whatever its case, so a stored `#1777EA80` survives a round trip. A tint such
+ * as `bg-theme-main/10`, a token class such as `bg-red-500` or a class with
+ * another prefix is read as `null`.
+ */
+export declare const parseColorClass: (value: string | undefined, prefixes: readonly string[]) => ParsedColorClass;

package/dist/components/editor/molecules/EditorColor/gradientClass.d.ts

@@ -0,0 +1,80 @@
+import { EditorColorRole } from './colorClass';
+/** A linear gradient: `bg-linear-<0–359>`, followed by its stops. */
+export type EditorColorLinearGradientValue = `bg-linear-${number} ${string}`;
+/**
+ * A radial gradient: `bg-radial` when its centre is the middle, or
+ * `bg-radial-[at_<x>%_<y>%]`, followed by its stops.
+ */
+export type EditorColorRadialGradientValue = `bg-radial ${string}` | `bg-radial-[at_${string}`;
+/** A gradient background as the class string of the contract above. */
+export type EditorColorGradientValue = EditorColorLinearGradientValue | EditorColorRadialGradientValue;
+/** The colour of a stop: a literal hex in normal form, or a theme role (always opaque). */
+export type GradientClassColor = {
+    hex: `#${string}`;
+} | {
+    role: EditorColorRole;
+};
+/** One stop of a parsed gradient class: its colour and its position. */
+export interface GradientClassStop {
+    color: GradientClassColor;
+    /** Whole percentage, 0–100. */
+    position: number;
+}
+/** The kind of gradient: `bg-linear-*` or `bg-radial`/`bg-radial-[at_…]`. */
+export type GradientClassType = 'linear' | 'radial';
+/**
+ * A gradient class string, parsed: its type with the angle or the centre, and
+ * two or three stops in order of position (from, optional via, to).
+ */
+export type GradientClass = {
+    type: 'linear';
+    /** Whole degrees, 0–359. */
+    angle: number;
+    stops: GradientClassStop[];
+} | {
+    type: 'radial';
+    /** Centre, in whole percentages from the left (0–100). */
+    x: number;
+    /** Centre, in whole percentages from the top (0–100). */
+    y: number;
+    stops: GradientClassStop[];
+};
+/**
+ * A hex in the one spelling the contract writes: lower case, and without an
+ * opaque `ff` pair (`#AABBCCFF` → `#aabbcc`).
+ */
+export declare const normalizeGradientHex: (hex: `#${string}`) => `#${string}`;
+/**
+ * Reads a gradient class string, or returns `null` when it does not follow the
+ * contract: no type, no `from` or `to`, an unknown role or token, a value out
+ * of range, a class given twice, or stops whose positions run backwards (the
+ * contract always writes them in order). The order of the classes themselves
+ * is not checked. The result is in normal form, so serializing it gives the
+ * contract's spelling back.
+ */
+export declare const parseGradientClass: (value: string | undefined) => GradientClass | null;
+/**
+ * Writes a gradient in the contract's form. The stops are written in the order
+ * given, which must be their order on position: the first is `from`, the last
+ * `to`, and a third in between is `via`. Positions are rounded and clamped to
+ * 0–100, the angle to a whole 0–359 and the centre to whole percentages.
+ */
+export declare const serializeGradientClass: (gradient: GradientClass) => EditorColorGradientValue;
+/**
+ * Whether a value reads as a gradient at all -- its first class is a gradient
+ * type -- even when the rest of it does not follow the contract. Such a value
+ * opens the picker in its gradient mode, with the placeholder in the trigger.
+ */
+export declare const looksLikeGradientClass: (value: string | undefined) => boolean;
+/**
+ * A parsed gradient class as a CSS `background-image`, for drawing it as an
+ * inline style: `linear-gradient(<angle>deg in oklab, …)`,
+ * `radial-gradient(at <x>% <y>% in oklab, …)`, or for a centred radial
+ * gradient `radial-gradient(in oklab, …)`. Always interpolated in oklab -- the
+ * same as the picker's preview -- and with every position written, 0, 50 and
+ * 100 included. Angle and positions are those of the Tailwind class, so a
+ * linear gradient renders exactly as `bg-linear-*` does. A hex stays a hex
+ * (eight digits with alpha); a role (`'main'`, `'accent'`, …) is resolved by
+ * `resolveRole`, for example to `var(--color-theme-main)`. Pure: no DOM, safe on the server.
+ */
+export declare const gradientClassToCss: (gradient: GradientClass, resolveRole: (role: EditorColorRole) => string) => string;

package/dist/components/editor/molecules/EditorGap/EditorGap.vue.d.ts

@@ -105,7 +105,7 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorGapProps &
      */
     auto?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: "gap-0" | "gap-1" | "gap-2" | "gap-3" | "gap-4" | "gap-5" | "gap-6" | "gap-7" | "gap-8" | "gap-9" | "gap-10" | "gap-11" | "gap-12" | "gap-14" | "gap-16") => any;
+    "update:modelValue": (value: "gap-3" | "gap-4" | "gap-0" | "gap-1" | "gap-2" | "gap-5" | "gap-6" | "gap-7" | "gap-8" | "gap-9" | "gap-10" | "gap-11" | "gap-12" | "gap-14" | "gap-16") => any;
     "update:auto": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorGapProps & {
     /** The selected gap, as the Tailwind class to apply. */
@@ -118,6 +118,6 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorGapProps &
      */
     auto?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "gap-0" | "gap-1" | "gap-2" | "gap-3" | "gap-4" | "gap-5" | "gap-6" | "gap-7" | "gap-8" | "gap-9" | "gap-10" | "gap-11" | "gap-12" | "gap-14" | "gap-16") => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "gap-3" | "gap-4" | "gap-0" | "gap-1" | "gap-2" | "gap-5" | "gap-6" | "gap-7" | "gap-8" | "gap-9" | "gap-10" | "gap-11" | "gap-12" | "gap-14" | "gap-16") => any) | undefined;
     "onUpdate:auto"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue.d.ts

@@ -87,7 +87,7 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorMaxWidthPro
      */
     enabled?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: "max-w-sm" | "max-w-md" | "max-w-lg" | "max-w-xs" | "max-w-xl" | "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl" | "max-w-7xl") => any;
+    "update:modelValue": (value: "max-w-lg" | "max-w-sm" | "max-w-md" | "max-w-xs" | "max-w-xl" | "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl" | "max-w-7xl") => any;
     "update:enabled": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorMaxWidthProps & {
     /** The selected maximum width, as the Tailwind class to apply. */
@@ -100,6 +100,6 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorMaxWidthPro
      */
     enabled?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "max-w-sm" | "max-w-md" | "max-w-lg" | "max-w-xs" | "max-w-xl" | "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl" | "max-w-7xl") => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "max-w-lg" | "max-w-sm" | "max-w-md" | "max-w-xs" | "max-w-xl" | "max-w-2xl" | "max-w-3xl" | "max-w-4xl" | "max-w-5xl" | "max-w-6xl" | "max-w-7xl") => any) | undefined;
     "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/editor/molecules/EditorShadow/EditorShadow.vue.d.ts

@@ -59,7 +59,7 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorShadowProps
     /** Open state of the block. Only has an effect when `switchable` is `true`. */
     enabled?: boolean;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
-    "update:modelValue": (value: "shadow-sm" | "shadow-md" | "shadow-lg") => any;
+    "update:modelValue": (value: "shadow-lg" | "shadow-sm" | "shadow-md") => any;
     "update:enabled": (value: boolean) => any;
 }, string, import('vue').PublicProps, Readonly<NexxtEditorShadowProps & {
     /** The selected strength, as the Tailwind class to apply. */
@@ -67,6 +67,6 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorShadowProps
     /** Open state of the block. Only has an effect when `switchable` is `true`. */
     enabled?: boolean;
 }> & Readonly<{
-    "onUpdate:modelValue"?: ((value: "shadow-sm" | "shadow-md" | "shadow-lg") => any) | undefined;
+    "onUpdate:modelValue"?: ((value: "shadow-lg" | "shadow-sm" | "shadow-md") => any) | undefined;
     "onUpdate:enabled"?: ((value: boolean) => any) | undefined;
 }>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/organisms/ColorPicker/ColorPicker.vue.d.ts

@@ -1,3 +1,10 @@
+import { ColorPickerGradient, ColorPickerGradientMessages, ColorPickerPreset } from './gradient';
+export type { ColorPickerGradient, ColorPickerGradientMessages, ColorPickerGradientStop, ColorPickerPreset, } from './gradient';
+/**
+ * A fill the picker can edit: `'solid'`, one colour, or `'gradient'`, a linear
+ * or radial gradient of two or three stops.
+ */
+export type ColorPickerFillMode = 'solid' | 'gradient';
 export type ColorFormat = 'hex' | 'hsl' | 'rgb';
 export type ColorSuggestions = Partial<Record<ColorFormat, string[]>>;
 export interface NexxtColorPickerProps {
@@ -26,20 +33,68 @@ export interface NexxtColorPickerProps {
      * its own, such as a theme role. Only shown while a colour is set.
      */
     valueLabel?: string;
+    /**
+     * Id(s) of an element that describes the field, set as `aria-describedby` on
+     * the trigger. Without it no attribute is rendered.
+     */
+    describedby?: string;
+    /**
+     * The fills the picker offers. `['solid']` (the default) is the plain colour
+     * picker, exactly as without this prop. `['solid', 'gradient']`, in any
+     * order, adds an "Effen | Verloop" switch at the top of the panel;
+     * `['gradient']` offers only the gradient, without a switch. The gradient is
+     * edited through the `gradientValue` model; `mode` tells which fill is in
+     * use, and stays on the one fill when only one is offered.
+     */
+    modes?: ColorPickerFillMode[];
+    /**
+     * The gradient the gradient mode shows while `gradientValue` is unset. It is
+     * not written until the first change. Defaults to a fade from `#00000000` to
+     * `#00000099`.
+     */
+    gradientStart?: ColorPickerGradient;
+    /** Copy of the gradient mode, merged per key over the Dutch defaults. */
+    gradientMessages?: ColorPickerGradientMessages;
 }
 type __VLS_Slots = {
-    /** Named colours a wrapper offers next to the free picker; rendered above the suggestions. */
-    presets?(): unknown;
+    /**
+     * Named colours a wrapper offers next to the free picker; rendered above the
+     * suggestions. In the gradient mode a preset is applied to the selected stop
+     * through `selectPreset`, and `preset` is the key of the selected stop's
+     * preset, if any.
+     */
+    presets?(props: {
+        preset: string | undefined;
+        selectPreset: (preset: ColorPickerPreset, hex: string) => void;
+    }): unknown;
 };
 type __VLS_Props = NexxtColorPickerProps;
 type __VLS_ModelProps = {
     modelValue?: string;
+    /** Which fill is edited. Only used when `modes` offers both; otherwise it is ignored. */
+    'mode'?: ColorPickerFillMode;
+    /**
+     * The gradient, with its stops in order of position. Unset while there is no
+     * readable gradient: the gradient mode then shows a default and writes nothing
+     * until the first change.
+     */
+    'gradientValue'?: ColorPickerGradient | undefined;
+    /** The selected stop, as its index in order of position. */
+    'selectedStop'?: number;
 };
 type __VLS_PublicProps = __VLS_Props & __VLS_ModelProps;
 declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
     "update:modelValue": (value: string) => any;
+    "update:mode": (value: ColorPickerFillMode) => any;
+    "update:gradientValue": (value: ColorPickerGradient | undefined) => any;
+    "update:selectedStop": (value: number) => any;
 }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onClose?: (() => any) | undefined;
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
+    "onUpdate:mode"?: ((value: ColorPickerFillMode) => any) | undefined;
+    "onUpdate:gradientValue"?: ((value: ColorPickerGradient | undefined) => any) | undefined;
+    "onUpdate:selectedStop"?: ((value: number) => any) | undefined;
 }>, {
     fullWidth: boolean;
     matchWidth: boolean;
@@ -49,6 +104,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     suggestions: ColorSuggestions;
     suggestionsLabel: string;
     alphaLabel: string;
+    modes: ColorPickerFillMode[];
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;

package/dist/components/organisms/ColorPicker/_GradientField.vue.d.ts

@@ -0,0 +1,23 @@
+export interface NexxtGradientFieldProps {
+    /** The applied value, shown while the field is not being edited. */
+    value: string;
+    /** Accessible name of the input. */
+    name: string;
+    /** Whether typed text can be applied; text that cannot is never committed. */
+    validate: (text: string) => boolean;
+    /** Ask for the numeric keypad. */
+    numeric?: boolean;
+    /** Show the value without editing it, such as a role name in place of a hex. */
+    readonly?: boolean;
+}
+declare const __VLS_export: import('vue').DefineComponent<NexxtGradientFieldProps, {
+    focus: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    invalid: (invalid: boolean) => any;
+    commit: (text: string) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtGradientFieldProps> & Readonly<{
+    onInvalid?: ((invalid: boolean) => any) | undefined;
+    onCommit?: ((text: string) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/components/organisms/ColorPicker/_GradientPreview.vue.d.ts

@@ -0,0 +1,11 @@
+import { GradientCopy } from './gradient';
+import { GradientEditor } from './useGradientEditor';
+export interface NexxtGradientPreviewProps {
+    /** The gradient state of the picker. */
+    editor: GradientEditor;
+    /** Copy, already merged over the defaults. */
+    copy: GradientCopy;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtGradientPreviewProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<NexxtGradientPreviewProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/organisms/ColorPicker/_GradientStopRow.vue.d.ts

@@ -0,0 +1,21 @@
+import { GradientCopy } from './gradient';
+import { GradientEditor, GradientEditorStop } from './useGradientEditor';
+export interface NexxtGradientStopRowProps {
+    /** The gradient state of the picker. */
+    editor: GradientEditor;
+    /** The stop this row edits. */
+    stop: GradientEditorStop;
+    /** Copy, already merged over the defaults. */
+    copy: GradientCopy;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtGradientStopRowProps, {
+    focusPosition: () => void | undefined;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: () => any;
+    target: (element: HTMLElement | null) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtGradientStopRowProps> & Readonly<{
+    onRemove?: (() => any) | undefined;
+    onTarget?: ((element: HTMLElement | null) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/organisms/ColorPicker/_GradientStops.vue.d.ts

@@ -0,0 +1,19 @@
+import { GradientCopy } from './gradient';
+import { GradientEditor } from './useGradientEditor';
+export interface NexxtGradientStopsProps {
+    /** The gradient state of the picker. */
+    editor: GradientEditor;
+    /** Copy, already merged over the defaults. */
+    copy: GradientCopy;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtGradientStopsProps, {
+    focusStop: (id: number) => Promise<void>;
+}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    remove: (id: number) => any;
+    add: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtGradientStopsProps> & Readonly<{
+    onRemove?: ((id: number) => any) | undefined;
+    onAdd?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;