@ebrains/components 2.1.0 → 2.3.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;
     };
@@ -105,7 +122,7 @@ export declare class EdsForm {
     handleInput(e: Event, field: any): void;
     private handleRating;
     private handleNPS;
-    handleSubmit(): void;
+    handleSubmit(e?: Event): void;
     private get groupedFields();
     private renderField;
     getData(): Promise<FormData>;

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-global-search/eds-global-search.d.ts

@@ -0,0 +1,72 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+interface SearchResult {
+    id: string;
+    title: string;
+    url: string;
+    section: string;
+    tags: string[];
+    date: string | null;
+    source: string;
+    snippet: string;
+    score: number | null;
+}
+export declare class EdsGlobalSearch {
+    el: HTMLElement;
+    /**
+     * API endpoint for search
+     */
+    apiEndpoint: string;
+    /**
+     * Placeholder text for the input
+     */
+    placeholder: string;
+    /**
+     * Maximum number of results to fetch
+     */
+    limit: number;
+    /**
+     * Debounce delay in milliseconds
+     */
+    debounceDelay: number;
+    /**
+     * Emitted when a result is selected
+     */
+    resultSelected: EventEmitter<{
+        id: string;
+        title: string;
+        url: string;
+        section: string;
+        tags: string[];
+        date: string | null;
+        source: string;
+        snippet: string;
+        score: number | null;
+    }>;
+    /**
+     * Emitted when search is closed (for expandable mode)
+     */
+    searchClosed: EventEmitter<void>;
+    query: string;
+    results: SearchResult[];
+    loading: boolean;
+    error: string;
+    hasSearched: boolean;
+    showDropdown: boolean;
+    selectedIndex: number;
+    private debounceTimer?;
+    private dropdownRef?;
+    private inputRef?;
+    componentDidLoad(): void;
+    disconnectedCallback(): void;
+    handleDocumentClick(event: MouseEvent): void;
+    handleKeydown(event: KeyboardEvent): void;
+    private handleInput;
+    private runSearch;
+    private selectResult;
+    private scrollToSelected;
+    private stripHtml;
+    private get hasResults();
+    private get showEmpty();
+    render(): any;
+}
+export {};

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

@@ -0,0 +1,40 @@
+declare global {
+    interface Window {
+        __searchMocked?: boolean;
+        __searchLoadingMocked?: boolean;
+        __searchErrorMocked?: boolean;
+        __searchEmptyMocked?: boolean;
+        __searchKeyboardMocked?: boolean;
+    }
+}
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        apiEndpoint: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+            defaultValue: string;
+        };
+        limit: {
+            control: string;
+            description: string;
+            defaultValue: number;
+        };
+        debounceDelay: {
+            control: string;
+            description: string;
+            defaultValue: number;
+        };
+    };
+};
+export default _default;
+export declare const Default: any;
+export declare const WithMockedData: any;
+export declare const ErrorState: any;
+export declare const KeyboardNavigation: any;

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,100 @@ 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;
+    private handleTitleClick;
+    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 as a clickable control only in linear mode */
+    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,79 @@ 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;
+    private handleTitleClick;
     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;
+    private isNextDisabledForCurrent;
+    /** Render the semantic heading element */
+    private renderHeading;
     render(): any;
 }