@ebrains/components 2.0.0 → 2.2.0

package/dist/types/shared-ui/eds-footer/eds-footer.d.ts

@@ -41,6 +41,10 @@ export declare class EdsFooter {
      * @type {string}
      */
     cookiesPreferences: string;
+    /**
+     * Controls the display of the "Cookies preferences" link.
+     * @type {string}
+     */
     enableCookiesSettings: boolean;
     /**
      * Controls the display of the "Back to Top" aria label text.
@@ -70,8 +74,6 @@ export declare class EdsFooter {
      * Renders the footer component with optional sections and elements,
      * including social network links, a Horizon Europe funding acknowledgment, and
      * legal links such as "Cookies Preferences" and copyright information.
-     *
-     * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render(): any;
 }

package/dist/types/shared-ui/eds-form/eds-form.d.ts

@@ -16,6 +16,14 @@ export declare class EdsForm {
      * The name of the form, used for grouping inputs and identifying the form.
      */
     name: string;
+    /**
+     * The title displayed above the form.
+     */
+    title?: string;
+    /**
+     * The description displayed below the title.
+     */
+    description?: string;
     /**
      * If `true`, includes the current form URL in the submission data.
      */
@@ -28,6 +36,10 @@ export declare class EdsForm {
      * If `true`, includes a submit button in the form.
      */
     formBtnLabel?: string;
+    /**
+     * Variant/style intent for the submit button (e.g., primary, secondary, tertiary, ghost).
+     */
+    buttonIntent?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
     /**
      * The message displayed when the form submission fails.
      */
@@ -53,6 +65,11 @@ export declare class EdsForm {
     initData: {
         [key: string]: any;
     };
+    /**
+     * Choose between default layout or an always-shadow style.
+     * When "shadow", the form gets the same effect-shadow + shadow-hover classes
+     */
+    formStyle: 'default' | 'shadow';
     values: {
         [key: string]: any;
     };
@@ -104,6 +121,7 @@ export declare class EdsForm {
     handleChange(e: Event, field: any): void;
     handleInput(e: Event, field: any): void;
     private handleRating;
+    private handleNPS;
     handleSubmit(): void;
     private get groupedFields();
     private renderField;

package/dist/types/shared-ui/eds-form/eds-form.stories.d.ts

@@ -7,6 +7,14 @@ declare const _default: {
             description: string;
             defaultValue: string;
         };
+        title: {
+            control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
         fields: {
             control: string;
             description: string;
@@ -29,6 +37,17 @@ declare const _default: {
             description: string;
             defaultValue: string;
         };
+        buttonIntent: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        formStyle: {
+            control: string;
+            options: string[];
+        };
     };
 };
 export default _default;

package/dist/types/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.d.ts

@@ -1,4 +1,14 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+type LinkItem = {
+    /** Link text shown in the menu. */
+    label: string;
+    /** Absolute or relative URL to navigate to. */
+    url: string;
+    /** Optional icon name for the link. */
+    icon?: string;
+    /** Opens link with external behavior (e.g., target="_blank"). */
+    external?: boolean;
+};
 /**
  * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
  * It provides a responsive, full-window overlay menu with navigation links and additional options.
@@ -13,29 +23,49 @@ import { EventEmitter } from '../../stencil-public-runtime';
  */
 export declare class EdsFullscreenMenu {
     /**
-     * JSON string representing the links for primary navigation.
-     * Each link should include `label`, `url`, and optionally an `icon`.
+     * Primary navigation links.
+     * Accepts a JSON string or array of objects `{ label, url, icon?, external? }`.
+     *
+     * @example
+     * links='[{"label":"Home","url":"/"},{"label":"Docs","url":"/docs","icon":"book"}]'
      */
-    links: string | {
-        label: string;
-        url: string;
-        icon?: string;
-        external?: boolean;
-    }[];
+    links: string | LinkItem[];
     /**
-     * JSON string representing the extra menu links a user wants for smaill screens navigation.
-     * Each link should include `label`, `url`.
+     * Secondary navigation links (extra menu items for small screens).
+     * Accepts a JSON string or array of objects `{ label, url }`.
+     *
+     * @example
+     * menu-links='[{"label":"Help","url":"/help"},{"label":"Contact","url":"/contact"}]'
+     * @attr menu-links
      */
     menuLinks: string;
+    /**
+     * URL for the logo link in the header.
+     * @default "/"
+     * @attr home-url
+     */
     homeUrl: string;
+    /**
+     * When true, uses an inverse (dark) header background.
+     * @default false
+     * @attr inverse-header
+     */
     inverseHeader: boolean;
     /** State for menu visibility */
     isMenuOpen: boolean;
-    /** Event to signal menu open/close actions */
+    /**
+     * Emitted when the menu is closed (via UI or resize).
+     * @event menuClose
+     */
     menuClose: EventEmitter<void>;
     /**
-     * Listens for the toggleMenu event to open or close the menu.
-     * This event is emitted by the eds-header component.
+     * Listens on `body` for `toggleheadermenu` to open/close the menu.
+     * The event detail should be a boolean (`true` = open, `false` = close).
+     *
+     * @example
+     * ```js
+     * document.body.dispatchEvent(new CustomEvent('toggleheadermenu', { detail: true }));
+     * ```
      */
     handleToggleMenu(event: CustomEvent<boolean>): void;
     /** Opens the menu */
@@ -61,3 +91,4 @@ export declare class EdsFullscreenMenu {
     get parsedMenuLinks(): any[];
     render(): any;
 }
+export {};

package/dist/types/shared-ui/eds-matomo-notice/eds-matomo-notice.d.ts

@@ -1,16 +1,24 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 export declare class EdsMatomoNotice {
     /**
-     * The title displayed in the notice.
+     * The title displayed in the notice accordion.
+     * @default "Analytics Consent"
      */
     heading: string;
     /**
-     * The description displayed in the notice.
+     * The description displayed when the user has not yet opted in to analytics.
+     * @default "We use anonymous analytics..."
      */
     description: string;
+    /**
+     * The description displayed when the user has already opted in to analytics.
+     * @default "You are already part of our community..."
+     */
     optOutMessage: string;
     /**
-     * When true, the notice is forced to show regardless of cookies/session.
+     * When true, the notice is forced to show regardless of cookies or session storage state.
+     * Useful for testing or forcing the consent UI.
+     * @default false
      */
     forceShow: boolean;
     /**

package/dist/types/shared-ui/eds-social-networks/eds-social-networks.d.ts

@@ -18,8 +18,6 @@ export declare class EdsSocialNetworks {
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
      * Each social network link uses the `eds-link` component with specific classes and styles.
-     *
-     * @returns {JSX.Element} The rendered JSX for the component.
      */
     render(): any;
 }

package/dist/types/shared-ui/eds-social-networks/eds-social-networks.stories.d.ts

@@ -5,9 +5,9 @@ declare const _default: {
         title: {
             control: string;
             defaultValue: string;
+            description: string;
         };
     };
 };
 export default _default;
 export declare const Default: any;
-export declare const CustomTitle: any;

package/dist/types/shared-ui/eds-steps/eds-steps.d.ts

@@ -5,51 +5,99 @@ export interface Step {
 }
 export declare class EdsSteps {
     /**
-     * JSON string containing an array of step objects.
-     * Example:
-     * '[
-     *   { "title": "Get Access...", "content": "To participate..." },
-     *   { "title": "Subscribe...", "content": "Technical Coordination..." },
-     *   { "title": "Confirm Your Subscription" }
-     * ]'
+     * Steps data as an **array** or **JSON string** of objects:
+     * `{ title: string; content?: string }`.
+     *
+     * In static mode, all steps and their content render.
+     * In linear mode, only the active step renders its content.
+     *
+     * @default []
      */
     steps: string | Step[];
     /**
-     * The type of stepper. Default is "static" (all steps visible, no buttons).
-     * If set to "linear", then only one step is visible at a time with navigation.
+     * Stepper mode.
+     * - `static`: all steps are visible (no navigation controls)
+     * - `linear`: one step at a time with Back/Next/Finish controls
+     *
+     * @default "static"
      */
     type: 'static' | 'linear';
     /**
-     * The index of the currently active step (used in linear mode).
+     * Label for the **Next** button (linear mode).
+     * @default "Next"
+     * @attr next-label
+     */
+    nextLabel: string;
+    /**
+     * Label for the **Back** button (linear mode).
+     * @default "Back"
+     * @attr back-label
+     */
+    backLabel: string;
+    /**
+     * Label for the **Finish** button on the **last step** (linear mode).
+     * @default "Finish"
+     * @attr finish-label
+     */
+    finishLabel: string;
+    /**
+     * If `true`, disables **Next/Finish** and prevents advancing.
+     * Useful for gating progression until validation passes.
+     *
+     * @default false
+     * @attr disable-next
+     */
+    disableNext: boolean | boolean[];
+    /**
+     * Semantic heading tag used for each step title.
+     * Accepted values: `"h3" | "h4" | "h5"`.
+     *
+     * @default "h4"
+     * @attr heading-level
+     */
+    headingLevel: 'h3' | 'h4' | 'h5';
+    /**
+     * Index of the currently active step (linear mode).
+     * Starts at `0`.
      */
     activeStep: number;
     /**
-     * Emits when a step is clicked, providing the step's index.
+     * Fired whenever the active step changes.
+     * Payload: the **current step index**.
+     *
+     * @event step
      */
     step: EventEmitter<number>;
     /**
-     * Reference to the host element.
+     * Fired when the user clicks **Finish** on the **last** step.
+     *
+     * @event finished
      */
-    el: HTMLElement;
+    finished: EventEmitter<void>;
     /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     * Fired when the user clicks **Next** (before advancing),
+     * with the **target** step index (current + 1).
+     *
+     * @event next
      */
-    componentDidLoad(): void;
-    activeStepChanged(newValue: number): void;
+    next: EventEmitter<number>;
     /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
+     * Fired when the user clicks **Back** (before going back),
+     * with the **target** step index (current - 1).
      *
-     * @param linkElement - The link element to which the event will be dispatched.
+     * @event back
      */
+    back: EventEmitter<number>;
+    /** Reference to the host element */
+    el: HTMLElement;
+    componentDidLoad(): void;
+    activeStepChanged(newValue: number): void;
     emitContext(linkElement: HTMLElement): void;
-    private handleStepClick;
-    /**
-     * Parse the JSON string into an array of steps.
-     */
     private get parsedSteps();
+    private isNextDisabledFor;
     private handleNext;
     private handleBack;
+    /** Render the semantic heading element */
+    private renderHeading;
     render(): any;
 }

package/dist/types/shared-ui/eds-steps/eds-steps.stories.d.ts

@@ -19,6 +19,30 @@ declare const _default: {
             };
             description: string;
         };
+        headingLevel: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        nextLabel: {
+            control: string;
+            description: string;
+        };
+        backLabel: {
+            control: string;
+            description: string;
+        };
+        finishLabel: {
+            control: string;
+            description: string;
+        };
+        disableNext: {
+            control: string;
+            description: string;
+        };
     };
     args: {
         type: string;
@@ -26,9 +50,43 @@ declare const _default: {
             title: string;
             content: string;
         }[];
+        headingLevel: string;
+        nextLabel: string;
+        backLabel: string;
+        finishLabel: string;
+        disableNext: boolean;
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: any) => string;
 };
+export declare const Linear: {
+    args: {
+        type: string;
+    };
+    render: (args: any) => string;
+};
+export declare const LinearBlocked: {
+    args: {
+        type: string;
+        disableNext: boolean;
+    };
+    render: (args: any) => string;
+};
+export declare const CustomLabels: {
+    args: {
+        type: string;
+        nextLabel: string;
+        backLabel: string;
+        finishLabel: string;
+    };
+    render: (args: any) => string;
+};
+export declare const HeadingLevels: {
+    args: {
+        type: string;
+        headingLevel: string;
+    };
+    render: (args: any) => string;
+};

package/dist/types/shared-ui/eds-steps-v2/eds-steps-v2.d.ts

@@ -6,54 +6,77 @@ export interface Step {
 export declare class EdsStepsV2 {
     /**
      * JSON string or an array of step objects.
-     * Example:
-     * '[
-     *   { "title": "Step One", "content": "Details for step one" },
-     *   { "title": "Step Two", "content": "Details for step two" }
-     * ]'
+     * Each object should have a `title` and optional `content` property.
      */
     steps: string | Step[];
     /**
-     * The type of stepper. Default is "static" (all steps visible, no navigation buttons).
-     * Use "linear" if only one step should be visible at a time.
+     * The type of stepper:
+     * - `"static"`: shows all steps with their content.
+     * - `"linear"`: shows only one step at a time with navigation controls.
+     * @default "static"
      */
     type: 'static' | 'linear';
-    /**
-     * Optional image source to display above the steps.
-     */
+    /** Optional image source to display above the steps. */
     imageSrc?: string;
-    /** Optional image width for the eds-img component. */
+    /** Optional image width for the `eds-img` component. */
     imageWidth?: number;
-    /**
-     * If true, apply a background class to the container.
-     */
+    /** If true, apply an inverse background to the container. */
     bg: boolean;
+    /** Optional message to display inside the placeholder if no image is provided. */
+    message?: string;
+    /** Label text for the "Next" button. */
+    nextLabel: string;
+    /** Label text for the "Back" button. */
+    backLabel: string;
+    /** Label text for the "Finish" button (last step in linear mode). */
+    finishLabel: string;
+    /** If true, disables the "Next" button to block progression. */
+    disableNext: boolean;
     /**
-     * Optional message to display inside the placeholder if no image is provided.
+     * Heading level to use for each step title.
+     * @default "h4"
      */
-    message?: string;
+    headingLevel: 'h3' | 'h4' | 'h5';
     /**
      * The index of the currently active step (used in linear mode).
      */
     activeStep: number;
     /**
-     * Emits when a step is clicked, providing the step's index.
+     * Emitted when the active step changes.
+     * @event step
+     * @payload {number} The index of the new active step.
      */
     step: EventEmitter<number>;
     /**
-     * Reference to the host element.
+     * Emitted when the "Finish" button is clicked (last step in linear mode).
+     * @event finished
+     */
+    finished: EventEmitter<void>;
+    /**
+     * Emitted when the "Next" button is clicked.
+     * @event next
+     * @payload {number} The target step index.
+     */
+    next: EventEmitter<number>;
+    /**
+     * Emitted when the "Back" button is clicked.
+     * @event back
+     * @payload {number} The target step index.
      */
+    back: EventEmitter<number>;
+    /** Reference to the host element. */
     el: HTMLElement;
     componentDidLoad(): void;
     activeStepChanged(newValue: number): void;
     emitContext(linkElement: HTMLElement): void;
     articleClasses(): string;
-    private handleStepClick;
     /**
      * Parses the steps property into an array of Step objects.
      */
     private get parsedSteps();
     private handleNext;
     private handleBack;
+    /** Render the semantic heading element */
+    private renderHeading;
     render(): any;
 }

package/dist/types/shared-ui/eds-steps-v2/eds-steps-v2.stories.d.ts

@@ -29,6 +29,31 @@ declare const _default: {
             control: string;
             description: string;
         };
+        headingLevel: {
+            name: string;
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+            defaultValue: string;
+        };
+        nextLabel: {
+            control: string;
+            description: string;
+        };
+        backLabel: {
+            control: string;
+            description: string;
+        };
+        finishLabel: {
+            control: string;
+            description: string;
+        };
+        disableNext: {
+            control: string;
+            description: string;
+        };
     };
     args: {
         steps: {
@@ -39,6 +64,11 @@ declare const _default: {
         imageSrc: string;
         bg: boolean;
         message: string;
+        headingLevel: string;
+        nextLabel: string;
+        backLabel: string;
+        finishLabel: string;
+        disableNext: boolean;
     };
 };
 export default _default;
@@ -46,3 +76,6 @@ export declare const Static: any;
 export declare const WithImage: any;
 export declare const WithMessage: any;
 export declare const Linear: any;
+export declare const LinearBlocked: any;
+export declare const CustomLabels: any;
+export declare const HeadingLevels: any;

package/dist/types/shared-ui/eds-tabs/eds-tabs.d.ts

@@ -36,25 +36,23 @@ export declare class EdsTabs {
         name?: string;
     }>;
     tabContainer: HTMLElement;
+    private tabRefs;
     componentWillLoad(): void;
     /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     * Parses the `tabs` prop into an array of tab objects.
+     * Returns an empty array if parsing fails or if `tabs` is not a valid JSON string or object.
      *
-     * @returns {any[]} Array of parsed link objects
-     */
-    /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
+     * @returns {any[]} Array of parsed tab objects
      */
     parseTabs(): void;
     componentDidLoad(): void;
+    componentDidUpdate(): void;
     private setActiveIndex;
     private scrollToActiveTab;
     private getTabOptions;
     private handleTabClick;
+    private onKeyDown;
+    private setTabRef;
     private tabCva;
     render(): any;
 }

package/dist/types/shared-ui/eds-user/eds-user.d.ts

@@ -5,6 +5,7 @@ interface User {
     family_name: string;
     preferred_username: string;
 }
+type Intent = 'primary' | 'secondary' | 'ghost' | 'tertiary';
 /**
  * `EdsUser` is a user component for managing and displaying
  * the user's auth information. Displays a user dropdown menu when authenticated.
@@ -16,13 +17,17 @@ export declare class EdsUser {
      * The user object containing user information, or a JSON string to be parsed.
      */
     user: string | User;
+    /** Visual intent of the trigger button */
+    intent: Intent;
     hostEl: HTMLElement;
+    expanded: boolean;
     /**
      * Helper getter to ensure we work with a User object.
      */
     private get parsedUser();
     componentWillLoad(): Promise<void>;
     private get initials();
+    private handleDropdown;
     render(): any;
 }
 export {};

package/dist/types/utils/eds-form/formValidators.d.ts

@@ -3,6 +3,7 @@
  */
 export declare function findFieldElement(formEl: HTMLFormElement, name: string): HTMLInputElement | null;
 export declare function findRatingElement(formEl: HTMLFormElement): HTMLEdsRatingElement;
+export declare function findNpsElement(formEl: HTMLFormElement): HTMLEdsNpsElement;
 /**
  * Validates all fields and returns an object containing the errors and a flag indicating any errors.
  */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "2.0.0",
+  "version": "2.2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/cjs/edit-5714c144.js

@@ -1,5 +0,0 @@
-'use strict';
-
-const edit = `<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="edit"> <g> <path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> <polygon fill="none" points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polygon> </g> </g> </g> </g></svg>`;
-
-exports.edit = edit;