@nexxtmove/ui 1.40.1 → 1.42.0

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

@@ -0,0 +1,117 @@
+/**
+ * The steps the slider can land on, as the font-size class they are stored as and the pixels that
+ * class is: every `--text-*` size of the theme, `text-xs` to `text-9xl`, with the px taken from
+ * `tailwind/nexxtmove.tailwind.theme.css` at 16px a rem. The size is absolute: a step replaces
+ * the size the text had.
+ *
+ * The consumer stores these classes and lists them in an `@source inline` rule, so adding or
+ * renaming a token is a breaking change even though the component API stays the same.
+ */
+export declare const EDITOR_FONT_SIZE_STEPS: readonly [{
+    readonly token: "text-xs";
+    readonly px: 12;
+}, {
+    readonly token: "text-sm";
+    readonly px: 14;
+}, {
+    readonly token: "text-base";
+    readonly px: 16;
+}, {
+    readonly token: "text-lg";
+    readonly px: 18;
+}, {
+    readonly token: "text-xl";
+    readonly px: 20;
+}, {
+    readonly token: "text-2xl";
+    readonly px: 24;
+}, {
+    readonly token: "text-3xl";
+    readonly px: 30;
+}, {
+    readonly token: "text-4xl";
+    readonly px: 36;
+}, {
+    readonly token: "text-5xl";
+    readonly px: 48;
+}, {
+    readonly token: "text-6xl";
+    readonly px: 60;
+}, {
+    readonly token: "text-7xl";
+    readonly px: 72;
+}, {
+    readonly token: "text-8xl";
+    readonly px: 96;
+}, {
+    readonly token: "text-9xl";
+    readonly px: 128;
+}];
+/**
+ * The font size as the editor needs it: the Tailwind class itself, so the consumer can put the
+ * model value straight on the element it styles. "No size of its own" is `null` on the model, not
+ * a member of this type.
+ */
+export type EditorFontSizeValue = (typeof EDITOR_FONT_SIZE_STEPS)[number]['token'];
+/** Overridable copy of the readout and the reset button. Every key is optional. */
+export interface EditorFontSizeMessages {
+    /** Unit behind the pixel size. Defaults to `'px'`. */
+    unit?: string;
+    /** Accessible name and tooltip of the reset button. Defaults to the Dutch `'Terug naar standaard'`. */
+    reset?: string;
+}
+export interface NexxtEditorFontSizeProps {
+    /**
+     * The size the text has without a class of its own; the slider sits on its step while the
+     * model is `null`. Defaults to `text-sm`, the app's text base. Pass a token from
+     * `EDITOR_FONT_SIZE_STEPS`: one that is not on the list falls back to `text-sm`, and a
+     * development build warns once per value. The fallback is for existing or faulty data, not a
+     * feature to rely on.
+     */
+    defaultToken?: EditorFontSizeValue;
+    /**
+     * Header text of the settings block. Defaults to the Dutch `'Grootte'`; the library has no i18n
+     * layer, so a consumer in another language passes its own copy in.
+     */
+    label?: string;
+    /**
+     * Copy of the readout and the reset button. Merged per key, so overriding one key keeps the
+     * defaults of the others. Copy is never translated inside the component.
+     */
+    messages?: EditorFontSizeMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtEditorFontSizeProps & {
+    /**
+     * The chosen size, as the Tailwind class to apply. `null` -- also what an unset model is -- is no
+     * class of its own: the element keeps `defaultToken`. Moving the slider always writes a token,
+     * the default step included; only the reset button writes `null`.
+     *
+     * The app should only write tokens from `EDITOR_FONT_SIZE_STEPS`. A value that is not on the list
+     * (existing or faulty data, `text-[15px]` say) is shown on the default step, keeps the reset
+     * button visible so the user can get back to a clean `null`, and makes a development build warn
+     * once per value. It is never rewritten until the user picks a step.
+     */
+    modelValue?: EditorFontSizeValue | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    "update:modelValue": (value: "text-xs" | "text-4xl" | "text-3xl" | "text-2xl" | "text-xl" | "text-lg" | "text-base" | "text-sm" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl" | null) => any;
+    reset: () => any;
+    pointerup: (event: PointerEvent) => any;
+}, string, import('vue').PublicProps, Readonly<NexxtEditorFontSizeProps & {
+    /**
+     * The chosen size, as the Tailwind class to apply. `null` -- also what an unset model is -- is no
+     * class of its own: the element keeps `defaultToken`. Moving the slider always writes a token,
+     * the default step included; only the reset button writes `null`.
+     *
+     * The app should only write tokens from `EDITOR_FONT_SIZE_STEPS`. A value that is not on the list
+     * (existing or faulty data, `text-[15px]` say) is shown on the default step, keeps the reset
+     * button visible so the user can get back to a clean `null`, and makes a development build warn
+     * once per value. It is never rewritten until the user picks a step.
+     */
+    modelValue?: EditorFontSizeValue | null;
+}> & Readonly<{
+    "onUpdate:modelValue"?: ((value: "text-xs" | "text-4xl" | "text-3xl" | "text-2xl" | "text-xl" | "text-lg" | "text-base" | "text-sm" | "text-5xl" | "text-6xl" | "text-7xl" | "text-8xl" | "text-9xl" | null) => any) | undefined;
+    onReset?: (() => any) | undefined;
+    onPointerup?: ((event: PointerEvent) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

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

@@ -1,45 +1,46 @@
+import { EditorFontSizeValue } from '../EditorFontSize/EditorFontSize.vue';
 /**
- * The steps the slider can land on, as the class they are stored as and the
- * pixels that class is. Not a scale Tailwind has names for -- `tracking-wide`
- * is an em and moves with the font size, and the editor shows every size in
- * px -- so every step is an arbitrary-value class.
+ * The steps the slider can land on, as the class they are stored as and the em that class is.
+ * In em, so the spacing moves with the font size: a fixed 2px does nothing at 128px. Not a scale
+ * Tailwind has names for (`tracking-wide` is 0.025em, but there is no -0.01em), so every step is
+ * an arbitrary-value class.
  *
  * The middle step is no class at all: zero is what the text already does, and
  * storing nothing for it keeps the "no class means default" every other
  * setting has. The negative side is there on purpose: tightening a large
  * heading is a real need.
  *
- * The consumer stores these classes and lists them in an `@source inline` rule,
- * so adding or renaming a token is a breaking change even though the component
- * API stays the same.
+ * The consumer stores these classes and lists them in an `@source inline` rule (and the back end
+ * allows exactly these), so adding or renaming a token is a breaking change even though the
+ * component API stays the same.
  */
 export declare const EDITOR_LETTER_SPACING_STEPS: readonly [{
-    readonly token: "tracking-[-1px]";
-    readonly px: -1;
+    readonly token: "tracking-[-0.05em]";
+    readonly em: -0.05;
 }, {
-    readonly token: "tracking-[-0.5px]";
-    readonly px: -0.5;
+    readonly token: "tracking-[-0.025em]";
+    readonly em: -0.025;
 }, {
-    readonly token: "tracking-[-0.25px]";
-    readonly px: -0.25;
+    readonly token: "tracking-[-0.01em]";
+    readonly em: -0.01;
 }, {
     readonly token: null;
-    readonly px: 0;
+    readonly em: 0;
 }, {
-    readonly token: "tracking-[0.25px]";
-    readonly px: 0.25;
+    readonly token: "tracking-[0.01em]";
+    readonly em: 0.01;
 }, {
-    readonly token: "tracking-[0.5px]";
-    readonly px: 0.5;
+    readonly token: "tracking-[0.025em]";
+    readonly em: 0.025;
 }, {
-    readonly token: "tracking-[1px]";
-    readonly px: 1;
+    readonly token: "tracking-[0.05em]";
+    readonly em: 0.05;
 }, {
-    readonly token: "tracking-[1.5px]";
-    readonly px: 1.5;
+    readonly token: "tracking-[0.075em]";
+    readonly em: 0.075;
 }, {
-    readonly token: "tracking-[2px]";
-    readonly px: 2;
+    readonly token: "tracking-[0.1em]";
+    readonly em: 0.1;
 }];
 /**
  * The letter spacing as the editor needs it: the Tailwind class itself, so the
@@ -55,6 +56,13 @@ export interface EditorLetterSpacingMessages {
     decimalSeparator?: string;
 }
 export interface NexxtEditorLetterSpacingProps {
+    /**
+     * The `text-*` token the text renders at on the screen on show (for a heading, the token of
+     * its heading type): the base the readout turns the em into px with. Defaults to `text-sm`,
+     * the app's text base. A token that is not in `EDITOR_FONT_SIZE_STEPS` falls back to
+     * `text-sm`, and a development build warns once per value.
+     */
+    fontSize?: EditorFontSizeValue;
     /**
      * Header text of the settings block. Defaults to the Dutch
      * `'Letterafstand'`; the library has no i18n layer, so a consumer in another
@@ -73,6 +81,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorLetterSpaci
     /**
      * The selected letter spacing, as the Tailwind class to apply. `null` -- also
      * what an unset model is -- is the default step: no class at all, zero.
+     *
+     * A value that is not on the list (an old px class such as `tracking-[1px]`, say) is shown on
+     * the default step and makes a development build warn once per value; the first change writes a
+     * valid class back.
      */
     modelValue?: EditorLetterSpacingValue | null;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -82,6 +94,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorLetterSpaci
     /**
      * The selected letter spacing, as the Tailwind class to apply. `null` -- also
      * what an unset model is -- is the default step: no class at all, zero.
+     *
+     * A value that is not on the list (an old px class such as `tracking-[1px]`, say) is shown on
+     * the default step and makes a development build warn once per value; the first change writes a
+     * valid class back.
      */
     modelValue?: EditorLetterSpacingValue | null;
 }> & Readonly<{

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

@@ -1,57 +1,70 @@
+import { EditorFontSizeValue } from '../EditorFontSize/EditorFontSize.vue';
 /**
- * The steps the slider can land on, as the class they are stored as and the
- * pixels that class is. The `leading-*` classes are Tailwind's spacing scale
- * (calc of `--spacing`, 4px a step), so `leading-6` really is 24px -- and a
- * line height set here does not scale with the font size; that is the deal the
- * fixed steps make, and nothing here tries to compensate for it.
+ * The steps the slider can land on, as the class they are stored as and the factor of the font
+ * size that class is. Every class is a unitless arbitrary value (`leading-[1.5]`), so the line
+ * height scales with the text: at 128px a fixed `leading-9` (36px) would make the lines overlap.
  *
- * The first step is no class at all: the element keeps its own line height.
- * It has no px of its own, so the readout names it instead of measuring it.
+ * The factors run from 0.8 to 2. Below 1 the lines are tighter than the text is tall: meant for
+ * large display headings, where ascenders and descenders may touch or clip.
  *
- * The consumer stores these classes and lists them in an `@source inline` rule,
- * so adding or renaming a token is a breaking change even though the component
- * API stays the same.
+ * The first step is no class at all: the element keeps the line height of its `text-*` token,
+ * see `EDITOR_TEXT_LINE_HEIGHT_RATIOS`. Its `factor` is `null` because it depends on that token.
+ *
+ * The consumer stores these classes and lists them in an `@source inline` rule (and the back end
+ * allows exactly these), so adding or renaming a token is a breaking change even though the
+ * component API stays the same.
  */
 export declare const EDITOR_LINE_HEIGHT_STEPS: readonly [{
     readonly token: null;
-    readonly px: null;
+    readonly factor: null;
+}, {
+    readonly token: "leading-[0.8]";
+    readonly factor: 0.8;
 }, {
-    readonly token: "leading-3";
-    readonly px: 12;
+    readonly token: "leading-[0.85]";
+    readonly factor: 0.85;
 }, {
-    readonly token: "leading-4";
-    readonly px: 16;
+    readonly token: "leading-[0.9]";
+    readonly factor: 0.9;
 }, {
-    readonly token: "leading-5";
-    readonly px: 20;
+    readonly token: "leading-[0.95]";
+    readonly factor: 0.95;
 }, {
-    readonly token: "leading-6";
-    readonly px: 24;
+    readonly token: "leading-[1]";
+    readonly factor: 1;
 }, {
-    readonly token: "leading-7";
-    readonly px: 28;
+    readonly token: "leading-[1.1]";
+    readonly factor: 1.1;
 }, {
-    readonly token: "leading-8";
-    readonly px: 32;
+    readonly token: "leading-[1.2]";
+    readonly factor: 1.2;
 }, {
-    readonly token: "leading-9";
-    readonly px: 36;
+    readonly token: "leading-[1.3]";
+    readonly factor: 1.3;
 }, {
-    readonly token: "leading-10";
-    readonly px: 40;
+    readonly token: "leading-[1.4]";
+    readonly factor: 1.4;
 }, {
-    readonly token: "leading-11";
-    readonly px: 44;
+    readonly token: "leading-[1.5]";
+    readonly factor: 1.5;
 }, {
-    readonly token: "leading-12";
-    readonly px: 48;
+    readonly token: "leading-[1.6]";
+    readonly factor: 1.6;
 }, {
-    readonly token: "leading-14";
-    readonly px: 56;
+    readonly token: "leading-[1.75]";
+    readonly factor: 1.75;
 }, {
-    readonly token: "leading-16";
-    readonly px: 64;
+    readonly token: "leading-[2]";
+    readonly factor: 2;
 }];
+/**
+ * The line height each `text-*` token carries by itself, as a factor of its size: Tailwind v4's
+ * default `--text-*--line-height`, written as the same fractions. The theme of this library sets
+ * the sizes but not these, so the defaults are what renders. This is what the first step of
+ * `EDITOR_LINE_HEIGHT_STEPS`, no class, looks like; exported so a consumer that needs the
+ * default line height in px does not keep a copy of its own.
+ */
+export declare const EDITOR_TEXT_LINE_HEIGHT_RATIOS: Readonly<Record<EditorFontSizeValue, number>>;
 /**
  * The line height as the editor needs it: the Tailwind class itself, so the
  * consumer can put the model value straight on the element it styles. The
@@ -63,12 +76,19 @@ export interface EditorLineHeightMessages {
     /** Unit shown behind the value. Defaults to `'px'`. */
     unit?: string;
     /**
-     * Readout of the first step, no class, which has no px size. Defaults to
+     * Name of the first step, no class, shown before its px as `Standaard · 20 px`. Defaults to
      * the Dutch `'Standaard'`.
      */
     default?: string;
 }
 export interface NexxtEditorLineHeightProps {
+    /**
+     * The `text-*` token the text renders at on the screen on show (for a heading, the token of
+     * its heading type): the base the readout turns the factor into px with. Defaults to
+     * `text-sm`, the app's text base. A token that is not in `EDITOR_FONT_SIZE_STEPS` falls back
+     * to `text-sm`, and a development build warns once per value.
+     */
+    fontSize?: EditorFontSizeValue;
     /**
      * Header text of the settings block. Defaults to the Dutch
      * `'Regelafstand'`; the library has no i18n layer, so a consumer in another
@@ -87,6 +107,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorLineHeightP
     /**
      * The selected line height, as the Tailwind class to apply. `null` -- also
      * what an unset model is -- is the default step: no class at all.
+     *
+     * A value that is not on the list (an old px class such as `leading-6`, say) is shown on the
+     * default step and makes a development build warn once per value; the first change writes a
+     * valid class back.
      */
     modelValue?: EditorLineHeightValue | null;
 }, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
@@ -96,6 +120,10 @@ declare const __VLS_export: import('vue').DefineComponent<NexxtEditorLineHeightP
     /**
      * The selected line height, as the Tailwind class to apply. `null` -- also
      * what an unset model is -- is the default step: no class at all.
+     *
+     * A value that is not on the list (an old px class such as `leading-6`, say) is shown on the
+     * default step and makes a development build warn once per value; the first change writes a
+     * valid class back.
      */
     modelValue?: EditorLineHeightValue | null;
 }> & Readonly<{

package/dist/components/molecules/PickerList/PickerList.vue.d.ts

@@ -4,8 +4,8 @@ export interface NexxtPickerItemData {
     id: string;
     /** Visible label and accessible name of the option; searched and matched by type-ahead. */
     label: string;
-    /** Icon in front of the label, also passed to the `preview` slot. */
-    icon: NexxtIconName;
+    /** Icon in front of the label, also passed to the `preview` slot. Without it the row has no icon. */
+    icon?: NexxtIconName;
     /** Id of a group in `groups`. Missing, or not in `groups`: ungrouped, rendered at the top. */
     group?: string;
     /** Extra search terms (synonyms, old names). Matched, never shown. */
@@ -48,6 +48,12 @@ interface NexxtPickerListProps {
      * `(n) => \`${n} resultaten\``. Without it the region stays empty.
      */
     resultsAnnouncement?: (count: number) => string;
+    /**
+     * More items are on their way. Sets `aria-busy` on the listbox and holds back the empty state,
+     * so a search that finds nothing yet does not claim there is nothing. Pair it with placeholder
+     * rows in the `append` slot.
+     */
+    busy?: boolean;
 }
 type __VLS_Props = NexxtPickerListProps;
 type __VLS_Slots = {
@@ -61,6 +67,11 @@ type __VLS_Slots = {
         search: string;
         clear: () => void;
     }): unknown;
+    /**
+     * Inside the listbox, after the last group: placeholder rows while `busy`, say. Not an option and
+     * never reached by the keyboard, so mark it `aria-hidden`.
+     */
+    append?(): unknown;
 };
 type __VLS_ModelProps = {
     /**
@@ -96,6 +107,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     search: string;
     collapsible: boolean;
     groups: NexxtPickerGroupData[];
+    busy: 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/FontPicker/FontPicker.vue.d.ts

@@ -0,0 +1,125 @@
+/** One family in the catalogue the consumer hands in. */
+export interface NexxtFontPickerFont {
+    /** The family name: shown, searched, stored on the model and used as `font-family`. */
+    family: string;
+    /**
+     * Decides the group and with it the order: `web-safe` is "Standaard", listed first, `google` is
+     * "Google Fonts" after it; within a group `fonts` keeps its own order. Deliberately this narrow:
+     * this is a font picker, not a generic picker with free-form groups.
+     */
+    source: 'web-safe' | 'google';
+}
+/** The "Huisstijl" option at the top of the list. */
+export interface NexxtFontPickerInherit {
+    /** Text of the option, e.g. `'Huisstijl'`. */
+    label: string;
+    /**
+     * The family the option points at, shown behind the label in that font. Empty: the option
+     * renders in `font-sans` and shows no family name.
+     */
+    family?: string;
+}
+/** Overridable copy. Every key is optional and merged per key with the Dutch defaults. */
+export interface NexxtFontPickerMessages {
+    /** Placeholder of the search field. Defaults to `'Lettertype zoeken'`. */
+    searchPlaceholder?: string;
+    /** Accessible name of the search field. Defaults to `'Lettertype zoeken'`. */
+    searchLabel?: string;
+    /** Accessible name of the listbox. Defaults to `'Lettertypes'`. */
+    listLabel?: string;
+    /** Heading of the web-safe group. Defaults to `'Standaard'`. */
+    groupWebSafe?: string;
+    /** Heading of the Google group. Defaults to `'Google Fonts'`. */
+    groupGoogle?: string;
+    /** Description read out on the current choice. Defaults to `'Huidige keuze'`. */
+    current?: string;
+    /** Description read out on the inherit option. Defaults to `'Volgt de huisstijl, ook als die later verandert'`. */
+    inheritDescription?: string;
+    /** Heading of the empty search state. Defaults to `'Geen lettertypes gevonden'`. */
+    emptyTitle?: string;
+    /** Line under the empty heading; receives the trimmed search term. */
+    emptyDescription?: (search: string) => string;
+    /** Button in the empty state that clears the search. Defaults to `'Zoekopdracht wissen'`. */
+    clearSearch?: string;
+    /** Notice under the list when the catalogue could not be loaded. */
+    catalogueError?: string;
+    /** Button in that notice. Defaults to `'Opnieuw proberen'`. */
+    retry?: string;
+    /** Announced 500ms after the search changes; receives the number of results. */
+    results?: (count: number) => string;
+}
+export interface NexxtFontPickerProps {
+    /**
+     * The catalogue: web-safe and Google families together, in display order (web-safe in their
+     * own order, Google by popularity). The component fetches nothing itself.
+     */
+    fonts: NexxtFontPickerFont[];
+    /**
+     * State of fetching the Google catalogue. It only adds to the list: `loading` marks the listbox
+     * busy and, while `fonts` holds no Google family yet, shows skeleton rows under "Google Fonts";
+     * `error` shows a notice with a retry button. Whatever is in `fonts` is listed in every state,
+     * so a refresh or a failed retry never takes a catalogue away that is already there.
+     */
+    catalogueStatus?: 'loading' | 'ready' | 'error';
+    /**
+     * Loads the face for the preview. Called for rows that come within 150px of view (debounced
+     * 100ms after scrolling) and for the current value on mount. A family that loaded is never
+     * asked for again. After a failure (a rejection or a throw) the component asks again once the
+     * row has been out of view and comes back, or when the panel opens again; typing a search or a
+     * new loader function does not, so a loader that keeps failing is not called per keystroke.
+     * The loader needs no cache or retry of its own; meanwhile the row keeps its fallback font and
+     * stays choosable.
+     */
+    loadFont?: (family: string) => Promise<void> | void;
+    /** Show the inherit option at the top of the list; `null` on the model is then that option. */
+    inherit?: NexxtFontPickerInherit;
+    /**
+     * Visible label above the trigger, for a form. Give this or `ariaLabel`: without either the
+     * trigger has no name for the field, and a development build warns in the console.
+     */
+    label?: string;
+    /**
+     * Accessible name when there is no visible label, as in the editor, where the settings block
+     * around the picker is the label. The trigger reads it followed by its value. Give this or
+     * `label`: without either a development build warns in the console.
+     */
+    ariaLabel?: string;
+    /** Text in the trigger while nothing is chosen. Defaults to `'Kies een lettertype'`. */
+    placeholder?: string;
+    /** The trigger is dimmed and does not open. */
+    disabled?: boolean;
+    /**
+     * Copy of the panel. One object on purpose, following the editor components
+     * (`NexxtEditorLineHeight` and the like) rather than the separate copy props of
+     * `NexxtPickerPanel`. Merged per key with the Dutch defaults, so overriding one key keeps the
+     * others. Copy is never translated inside the component.
+     */
+    messages?: NexxtFontPickerMessages;
+}
+declare const _default: typeof __VLS_export;
+export default _default;
+declare const __VLS_export: import('vue').DefineComponent<NexxtFontPickerProps & {
+    /**
+     * The chosen family. `null` is the inherit option when `inherit` is given, and "nothing chosen"
+     * otherwise. `''` means the same, and is accepted only for existing stored values; the component
+     * itself always writes `null`. Only a choice writes the model; moving the highlight never does.
+     */
+    modelValue?: string | null;
+}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    close: () => any;
+    "update:modelValue": (value: string | null) => any;
+    open: () => any;
+    retry: () => any;
+}, string, import('vue').PublicProps, Readonly<NexxtFontPickerProps & {
+    /**
+     * The chosen family. `null` is the inherit option when `inherit` is given, and "nothing chosen"
+     * otherwise. `''` means the same, and is accepted only for existing stored values; the component
+     * itself always writes `null`. Only a choice writes the model; moving the highlight never does.
+     */
+    modelValue?: string | null;
+}> & Readonly<{
+    onClose?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: string | null) => any) | undefined;
+    onOpen?: (() => any) | undefined;
+    onRetry?: (() => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;

package/dist/components/organisms/FontPicker/useFontPreviewLoader.d.ts

@@ -0,0 +1,20 @@
+import { WatchSource } from 'vue';
+export interface FontPreviewLoaderOptions {
+    /** The consumer's loader; nothing is requested without one. */
+    loadFont: () => ((family: string) => Promise<void> | void) | undefined;
+    /** Element holding the listbox; `null` while the panel is closed. */
+    container: () => HTMLElement | null;
+    /** Anything whose change re-renders the rows, so they are observed afresh. */
+    rows: WatchSource[];
+    /** Family requested as soon as the component is mounted: the one the trigger shows. */
+    current: () => string | undefined;
+}
+/**
+ * Requests the face of every family that comes into view in the listbox. Rows mark their family
+ * with `data-font-family`. A request that succeeded (or is still on its way) is never repeated.
+ * One that failed is held back until its row has really been out of view, or until the panel
+ * opens again; re-observing the rows (a search, new items, a new loader) does not count, so a
+ * loader that keeps failing is not called on every keystroke. Meanwhile the row keeps its
+ * fallback font and stays choosable, so there is nothing to report.
+ */
+export declare const useFontPreviewLoader: ({ loadFont, container, rows, current, }: FontPreviewLoaderOptions) => void;

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

@@ -20,6 +20,11 @@ interface NexxtPickerPanelProps {
     height?: number | string;
     /** Below this height of the column row (the panel minus the header), in pixels, the preview column is left out and the list takes the full width. */
     hidePreviewBelow?: number;
+    /**
+     * Render the preview column. `false` leaves it out at any height, so the list always takes the
+     * full width: for a picker whose rows are their own preview.
+     */
+    preview?: boolean;
     /** Whether group headings fold their group. */
     collapsible?: boolean;
     /** Heading of the empty state, shown when the search has no results. */
@@ -32,6 +37,8 @@ interface NexxtPickerPanelProps {
     previewEmptyText?: string;
     /** Text announced 500ms after the search changes, e.g. `(n) => \`${n} resultaten\``. */
     resultsAnnouncement?: (count: number) => string;
+    /** More items are on their way: `aria-busy` on the listbox, and no empty state meanwhile. */
+    busy?: boolean;
 }
 type __VLS_Props = NexxtPickerPanelProps;
 type __VLS_Slots = {
@@ -53,6 +60,8 @@ type __VLS_Slots = {
         search: string;
         clear: () => void;
     }): unknown;
+    /** Inside the listbox, after the last group, e.g. placeholder rows while `busy`. */
+    append?(): unknown;
 };
 type __VLS_ModelProps = {
     /** Id of the highlighted item; the list keeps it on a visible item. Drives the preview. */
@@ -77,8 +86,10 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {
     "onUpdate:search"?: ((value: string) => any) | undefined;
 }>, {
     width: number | string;
+    preview: boolean;
     collapsible: boolean;
     groups: NexxtPickerGroupData[];
+    busy: boolean;
     height: number | string;
     searchable: boolean;
     hidePreviewBelow: number;

package/dist/index.d.ts

@@ -32,10 +32,13 @@ export { EDITOR_JUSTIFY_CONTENT_OPTIONS } from './components/editor/molecules/Ed
 export type { EditorJustifyContentMessages, EditorJustifyContentValue, } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue';
 export { EDITOR_MAX_WIDTH_STEPS } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue';
 export type { EditorMaxWidthMessages, EditorMaxWidthValue, } from './components/editor/molecules/EditorMaxWidth/EditorMaxWidth.vue';
-export { EDITOR_LINE_HEIGHT_STEPS } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue';
-export type { EditorLineHeightMessages, EditorLineHeightValue, } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue';
+export { EDITOR_LINE_HEIGHT_STEPS, EDITOR_TEXT_LINE_HEIGHT_RATIOS, } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue';
+export type { EditorLineHeightMessages, EditorLineHeightValue, NexxtEditorLineHeightProps, } from './components/editor/molecules/EditorLineHeight/EditorLineHeight.vue';
 export { EDITOR_LETTER_SPACING_STEPS } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue';
-export type { EditorLetterSpacingMessages, EditorLetterSpacingValue, } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue';
+export type { EditorLetterSpacingMessages, EditorLetterSpacingValue, NexxtEditorLetterSpacingProps, } from './components/editor/molecules/EditorLetterSpacing/EditorLetterSpacing.vue';
+export { EDITOR_FONT_SIZE_STEPS } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue';
+export type { EditorFontSizeMessages, EditorFontSizeValue, NexxtEditorFontSizeProps, } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue';
+export type { NexxtFontPickerFont, NexxtFontPickerInherit, NexxtFontPickerMessages, NexxtFontPickerProps, } from './components/organisms/FontPicker/FontPicker.vue';
 export { EDITOR_PADDING_STEPS } from './components/editor/molecules/EditorPadding/EditorPadding.vue';
 export type { EditorPaddingMessages, EditorPaddingStep, } from './components/editor/molecules/EditorPadding/EditorPadding.vue';
 export type { NexxtTemplateCardContentFeature, NexxtTemplateCardProps, NexxtTemplateCardSlots, } from './components/molecules/TemplateCard/TemplateCard.vue';
@@ -61,6 +64,7 @@ export { default as NexxtEditorBackgroundSize } from './components/editor/molecu
 export { default as NexxtEditorBorder } from './components/editor/molecules/EditorBorder/EditorBorder.vue';
 export { default as NexxtEditorColor } from './components/editor/molecules/EditorColor/EditorColor.vue';
 export { default as NexxtEditorFlexDirection } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue';
+export { default as NexxtEditorFontSize } from './components/editor/molecules/EditorFontSize/EditorFontSize.vue';
 export { default as NexxtEditorGap } from './components/editor/molecules/EditorGap/EditorGap.vue';
 export { default as NexxtEditorHeadingType } from './components/editor/molecules/EditorHeadingType/EditorHeadingType.vue';
 export { default as NexxtEditorJustifyContent } from './components/editor/molecules/EditorJustifyContent/EditorJustifyContent.vue';
@@ -73,6 +77,7 @@ export { default as NexxtEditorSettingsBlock } from './components/editor/atoms/E
 export { default as NexxtEditorTextAlign } from './components/editor/molecules/EditorTextAlign/EditorTextAlign.vue';
 export { default as NexxtEnergyLabel } from './components/atoms/EnergyLabel/EnergyLabel.vue';
 export { default as NexxtFloatingPanel } from './components/atoms/FloatingPanel/FloatingPanel.vue';
+export { default as NexxtFontPicker } from './components/organisms/FontPicker/FontPicker.vue';
 export { default as NexxtHeader } from './components/organisms/Header/Header.vue';
 export { default as NexxtIcon } from './components/atoms/Icon/Icon.vue';
 export { default as NexxtInfoBlock } from './components/molecules/InfoBlock/InfoBlock.vue';