@nexxtmove/ui 2.1.0 → 2.3.0

package/dist/components/editor/atoms/EditorSettingsBlock/EditorSettingsBlock.vue.d.ts

@@ -6,6 +6,12 @@ interface NexxtEditorSettingsBlockProps {
      * When `false` the content is always visible and the model is ignored.
      */
     switchable?: boolean;
+    /**
+     * Id(s) of an element that describes the setting, set as `aria-describedby`
+     * on the switch. Only has an effect when `switchable` is `true`; without it
+     * no attribute is rendered.
+     */
+    describedby?: string;
 }
 type __VLS_Props = NexxtEditorSettingsBlockProps;
 type __VLS_ModelProps = {

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

@@ -0,0 +1,106 @@
+/**
+ * The blur steps the editor offers, in the order they are shown. `token` is the
+ * class without its fixed `backdrop-blur-` prefix, so the class is
+ * `backdrop-blur-` plus the token -- the same shape as `EDITOR_SHADOW_OPTIONS`.
+ * "No blur" is not a step: it is the switch being off. The labels are not in
+ * here; they arrive through `messages`, keyed by token.
+ */
+export declare const EDITOR_BLUR_OPTIONS: readonly [{
+    readonly token: "xs";
+}, {
+    readonly token: "sm";
+}, {
+    readonly token: "md";
+}, {
+    readonly token: "lg";
+}, {
+    readonly token: "xl";
+}];
+/**
+ * The blur as the editor needs it: the Tailwind class itself, so the consumer
+ * can put the model value straight on the group it styles.
+ */
+export type EditorBlurValue = `backdrop-blur-${(typeof EDITOR_BLUR_OPTIONS)[number]['token']}`;
+/** Overridable copy of the step control. Every key is optional. */
+export interface EditorBlurMessages {
+    /**
+     * Accessible name of the group of steps. Visually hidden: the block label
+     * already says what the steps are. Defaults to the Dutch `'Sterkte'`.
+     */
+    strength?: string;
+    /** Name of the `backdrop-blur-xs` option. Defaults to `'XS'`. */
+    xs?: string;
+    /** Name of the `backdrop-blur-sm` option. Defaults to `'S'`. */
+    sm?: string;
+    /** Name of the `backdrop-blur-md` option. Defaults to `'M'`. */
+    md?: string;
+    /** Name of the `backdrop-blur-lg` option. Defaults to `'L'`. */
+    lg?: string;
+    /** Name of the `backdrop-blur-xl` option. Defaults to `'XL'`. */
+    xl?: string;
+}
+export interface NexxtEditorBlurProps {
+    /**
+     * Header text of the settings block. Defaults to the Dutch `'Vervagen'`; the
+     * library has no i18n layer, so a consumer in another language passes its own
+     * copy in.
+     */
+    label?: string;
+    /**
+     * Render a switch next to the label that collapses and expands the steps.
+     * Defaults to `true`: there is no "none" step, so the switch is the only way
+     * to turn the blur off. The switch state is the `enabled` model; switching
+     * off leaves the step alone.
+     */
+    switchable?: boolean;
+    /**
+     * Copy of the step control. Merged per key, so overriding one key keeps the
+     * defaults of the others. Copy is never translated inside the component.
+     */
+    messages?: EditorBlurMessages;
+    /**
+     * Id(s) of an element that describes the setting, such as a hint the
+     * consumer renders itself. Set as `aria-describedby` on the switch (when
+     * `switchable`) and on the group of steps. Without it no attribute is set.
+     */
+    describedby?: string;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorBlurProps & {
+    /**
+     * The selected blur, as the Tailwind class to apply (`backdrop-blur-md`).
+     * Optional: a consumer may have no class stored yet. Without a valid class the
+     * control shows `md` but writes nothing, so the consumer has to assume
+     * `backdrop-blur-md` itself. Only a switch from off to on (when `switchable`)
+     * writes `backdrop-blur-md` back; mounting never emits.
+     */
+    modelValue?: EditorBlurValue;
+    /**
+     * Open state of the block. Only has an effect when `switchable` is `true`; then
+     * off is the way to express "no blur". With `switchable` set to `false` the
+     * steps are always active, whatever this model says.
+     */
+    enabled?: boolean;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "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 & {
+    /**
+     * The selected blur, as the Tailwind class to apply (`backdrop-blur-md`).
+     * Optional: a consumer may have no class stored yet. Without a valid class the
+     * control shows `md` but writes nothing, so the consumer has to assume
+     * `backdrop-blur-md` itself. Only a switch from off to on (when `switchable`)
+     * writes `backdrop-blur-md` back; mounting never emits.
+     */
+    modelValue?: EditorBlurValue;
+    /**
+     * Open state of the block. Only has an effect when `switchable` is `true`; then
+     * off is the way to express "no blur". With `switchable` set to `false` the
+     * steps are always active, whatever this model says.
+     */
+    enabled?: boolean;
+}> & Readonly<{
+    "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;
@@ -40,6 +32,11 @@ export interface EditorColorMessages {
     suggestionsLabel?: string;
     /** Label shown above the theme roles. Defaults to `'Huisstijl'`. */
     themeLabel?: string;
+    /**
+     * Label above the opacity slider, and its accessible name. Defaults to
+     * `'Dekking'`. Only shown with `showAlpha`.
+     */
+    alphaLabel?: string;
 }
 export interface NexxtEditorColorProps {
     /**
@@ -84,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/molecules/ToggleGroup/ToggleGroup.vue.d.ts

@@ -17,6 +17,12 @@ interface NexxtToggleGroupProps {
     options: NexxtToggleGroupOption[];
     label?: string;
     equalWidth?: boolean;
+    /**
+     * Hide `label` visually while it stays the group's accessible name, for a
+     * group whose purpose is already clear from a heading around it. Defaults to
+     * `false`. Has no effect without a `label`.
+     */
+    labelHidden?: boolean;
 }
 type __VLS_Props = NexxtToggleGroupProps;
 type __VLS_Slots = {
@@ -44,6 +50,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     equalWidth: boolean;
+    labelHidden: boolean;
 }, {}, {}, {}, 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/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 {
@@ -19,25 +26,75 @@ export interface NexxtColorPickerProps {
     suggestions?: ColorSuggestions;
     /** Accessible and visible label for the suggestions. */
     suggestionsLabel?: string;
+    /** Visible label of the opacity slider, and the slider's accessible name. */
+    alphaLabel?: string;
     /**
      * Text shown in the trigger in place of the formatted colour, for a value that has a name of
      * 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;
@@ -46,6 +103,8 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     formats: ColorFormat[];
     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>;