@nexxtmove/ui 2.0.0 → 2.2.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/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-sm" | "backdrop-blur-md" | "backdrop-blur-lg" | "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-sm" | "backdrop-blur-md" | "backdrop-blur-lg" | "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

@@ -40,6 +40,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 {
     /**
@@ -74,6 +79,16 @@ export interface NexxtEditorColorProps {
      * 8-digit hex is left out. Without roles the section is not rendered.
      */
     themeRoles?: EditorColorThemeRole[];
+    /**
+     * Offer an opacity slider in the picker. A colour picked below full opacity is
+     * written as an 8-digit hex (`bg-[#1777ea80]`); a fully opaque one keeps the
+     * 6-digit form. The slider is hidden while a theme role is selected: a role
+     * class carries no opacity. Off by default, in which case a stored 8-digit hex
+     * is shown opaque and only replaced once a new colour is picked. Turning it off
+     * while a translucent colour is set does write at once: the picker drops the
+     * alpha and the model gets the opaque 6-digit hex.
+     */
+    showAlpha?: boolean;
 }
 declare const _default: typeof __VLS_export;
 export default _default;

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

@@ -6,6 +6,11 @@ export interface NexxtColorPickerProps {
     error?: boolean;
     errorMessage?: string;
     required?: boolean;
+    /**
+     * Offer an opacity slider and accept colours below full opacity. Turning it
+     * off while the colour is translucent writes the opaque colour to the model
+     * at once.
+     */
     showAlpha?: boolean;
     formats?: ColorFormat[];
     fullWidth?: boolean;
@@ -14,6 +19,8 @@ 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.
@@ -41,6 +48,7 @@ declare const __VLS_base: import('vue').DefineComponent<__VLS_PublicProps, {}, {
     formats: ColorFormat[];
     suggestions: ColorSuggestions;
     suggestionsLabel: string;
+    alphaLabel: string;
 }, {}, {}, {}, 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/index.d.ts

@@ -22,6 +22,8 @@ export { EDITOR_ANCHOR_OPTIONS } from './components/editor/molecules/EditorAncho
 export type { EditorAnchorMessages, EditorAnchorValue, EditorAnchorX, EditorAnchorY, } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue';
 export { EDITOR_BACKGROUND_SIZE_OPTIONS } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue';
 export type { EditorBackgroundSizeMessages, EditorBackgroundSizeValue, } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue';
+export { EDITOR_BLUR_OPTIONS } from './components/editor/molecules/EditorBlur/EditorBlur.vue';
+export type { EditorBlurMessages, EditorBlurValue, NexxtEditorBlurProps, } from './components/editor/molecules/EditorBlur/EditorBlur.vue';
 export { EDITOR_FLEX_DIRECTION_OPTIONS } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue';
 export type { EditorFlexDirectionMessages, EditorFlexDirectionValue, } from './components/editor/molecules/EditorFlexDirection/EditorFlexDirection.vue';
 export { EDITOR_GAP_STEPS } from './components/editor/molecules/EditorGap/EditorGap.vue';
@@ -86,6 +88,7 @@ export { default as NexxtEditorAlignItems } from './components/editor/molecules/
 export { default as NexxtEditorAlignmentGrid } from './components/editor/molecules/EditorAlignmentGrid/EditorAlignmentGrid.vue';
 export { default as NexxtEditorAnchor } from './components/editor/molecules/EditorAnchor/EditorAnchor.vue';
 export { default as NexxtEditorBackgroundSize } from './components/editor/molecules/EditorBackgroundSize/EditorBackgroundSize.vue';
+export { default as NexxtEditorBlur } from './components/editor/molecules/EditorBlur/EditorBlur.vue';
 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 NexxtEditorDashPattern } from './components/editor/molecules/EditorDashPattern/EditorDashPattern.vue';