@ebrains/components 2.1.0 → 2.2.0

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;
     };

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-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/package.json

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

package/dist/cjs/eds-tooltip.cjs.entry.js

@@ -1,38 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-const index = require('./index-0249a32e.js');
-const analytics = require('./analytics-28713bf7.js');
-
-const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";
-const EdsTooltipStyle0 = edsTooltipCss;
-
-const EdsTooltip = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.content = undefined;
-        this.position = 'top';
-    }
-    /** fire analytics on every hover */
-    handleHover() {
-        analytics.sendAnalytics({
-            category: 'ui-component',
-            tag: this.el.tagName.toLowerCase(),
-            name: this.content.toLowerCase(),
-            action: 'hover'
-        });
-    }
-    render() {
-        const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (index.h("div", { key: 'ee76b787881bdaef986b73fb2775c900a8c33d05', class: "relative w-full inline-block group" }, index.h("slot", { key: 'a5f9ade50e829efab02ef28ecff3edeedae9d469' }), index.h("div", { key: '31bdc63d6263090578f6600ae32027c2b050b2bf', class: `absolute ${positionClass}
-            rounded-xs bg-strongest text-inverse 
-            f-ui-03-light pointer-events-none 
-            z-10 p-4 opacity-0 transition-opacity duration-150 ease-in-out
-            group-hover:opacity-100 whitespace-normal break-words`, role: "tooltip" }, this.content)));
-    }
-    get el() { return index.getElement(this); }
-};
-EdsTooltip.style = EdsTooltipStyle0;
-
-exports.eds_tooltip = EdsTooltip;

package/dist/components/p-05654483.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-efbc374c.js";import{l as e}from"./p-2117611b.js";const a=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"9383784da3e52d22395288f8eba5b6f4ee826aa5",class:this.class,innerHTML:e})}};export{a as eds_icon_loader}

package/dist/components/p-09079c5c.entry.js

@@ -1 +0,0 @@
-import{r as t,h as e}from"./p-efbc374c.js";const l=class{constructor(e){t(this,e),this.tabIndex=void 0}renderContent(){switch(this.tabIndex){case 0:return e("div",null,e("h2",null,"Primary Palette"),e("color-primary-palette",null),e("h2",null,"Secondary Palette"),e("color-secondary-palette",null),e("h2",null,"Support Palette"),e("color-support-palette",null));case 1:return e("div",null,e("h2",null,"Primary Palette"),e("gradient-primary-palette",null),e("h2",null,"Secondary Palette"),e("gradient-secondary-palette",null),e("h2",null,"Support Palette"),e("gradient-support-palette",null));default:return e("p",null,"Content not available.")}}render(){return e("div",{key:"82b8de086298568ed7bbb4717da0f6f19ff9677c",class:"container"},this.renderContent())}};export{l as docs_palettes}

package/dist/components/p-10997947.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-efbc374c.js";import{p as c}from"./p-694fc085.js";const e=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"a342e11087242f9b37365bcbfec2036bd2009c85",class:this.class,innerHTML:c})}};export{e as eds_icon_private}

package/dist/components/p-1ab1ea29.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-efbc374c.js";import{p as e}from"./p-c1e4ef92.js";const c=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"f9b20e12497e199b7f596f4f457167080e81ccd1",class:this.class,innerHTML:e})}};export{c as eds_icon_portal}

package/dist/components/p-1bcf743d.entry.js

@@ -1 +0,0 @@
-import{r as s,h as r}from"./p-efbc374c.js";import{s as e}from"./p-e2d5a487.js";const c=class{constructor(r){s(this,r),this.class=""}render(){return r("span",{key:"4c4243f9e6c5c02a2d70eda34b28efe1ba7c696b",class:this.class,innerHTML:e})}};export{c as eds_icon_star}