@ebrains/components 2.4.1 → 3.1.0

package/dist/types/components/eds-dropdown/eds-dropdown.d.ts

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName } from '../../utils/icons';
 /**
  * `EdsDropdown` is a versatile dropdown component that provides a list of items
  * that appear upon clicking the dropdown button. It supports various customization options,
@@ -28,18 +29,12 @@ export declare class EdsDropdown {
      * @type {string}
      * @default 'chevron-down'
      */
-    icon: string;
+    icon?: IconName;
     /**
      * Label for the dropdown button.
      * @type {string}
      */
     label: string;
-    /**
-     * Whether the dropdown nav list placeholder has rounded (pill) styling.
-     * @type {boolean}
-     * @default false
-     */
-    rounded: boolean;
     /**
      * Accessible label for the dropdown button.
      * @type {string}
@@ -66,11 +61,11 @@ export declare class EdsDropdown {
     dropdownOffset: boolean;
     /**
      * Visual intent of the dropdown button.
-     * Options include: 'primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'.
-     * @type {'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'}
+     * Options include: 'primary', 'secondary'.
+     * @type {'primary' | 'secondary' }
      * @default 'tertiary'
      */
-    intent?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
+    intent?: 'primary' | 'secondary' | 'brand' | 'ghost' | 'neutral';
     /**
      * Auto-close dropdown prop - when true, any click inside the panel closes the dropdown
      */
@@ -101,6 +96,7 @@ export declare class EdsDropdown {
     }>;
     private panelEl?;
     private dropdownContent?;
+    private buttonEl?;
     private focusableItems;
     close(): Promise<void>;
     /**

package/dist/types/components/eds-footer/eds-footer.d.ts

@@ -1,79 +1,115 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * `EdsFooter` is a footer component designed for the EBRAINS platform, featuring social links,
- * legal information, and an optional cookie preferences button. It includes a "Back to top"
- * button and displays an acknowledgment for Horizon Europe funding.
+ * Shape of a single column passed via the `columns` prop. Each link is
+ * either a navigable href, plain text (no href), or a built-in
+ * `action` that wires into the component's existing events. The
+ * `action: 'cookies'` value emits the `cookies` event the consumer
+ * page listens for (same plumbing as the legacy `enableCookiesSettings`
+ * affordance) — this lets the cookies link live in the Legal column
+ * exactly like the original eds-docs design without re-implementing
+ * the consent dispatcher.
+ */
+export interface EdsFooterLink {
+    label: string;
+    href?: string;
+    external?: boolean;
+    action?: 'cookies';
+}
+export interface EdsFooterColumn {
+    heading: string;
+    links: EdsFooterLink[];
+}
+/**
+ * `EdsFooter` is the EBRAINS-wide footer component.
+ *
+ * Renders a 4-column layout matching the eds-docs landing footer:
+ *   [ Brand (EU flag + funding text + copyright)  |  Resources  |  Community  |  Legal ]
  *
- * Key Features:
- * - Social Network Links: Optionally display a section for social media links.
- * - Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
- * - Cookie Preferences: Optionally display a "Cookies Preferences" button.
- * - Back to Top Button: Smoothly scrolls the page back to the top when clicked.
+ * Defaults are designed so a consumer that writes `<eds-footer></eds-footer>`
+ * with no props gets the full canonical EBRAINS footer rendered — same
+ * brand block, same link columns, same dark theme as the eds-docs
+ * landing page. The previous minimal-strip footer is replaced; consumers
+ * that need different link content pass the `columns` prop (array or
+ * JSON-stringified array for HTML attribute use).
  *
- * This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements
- * across the EBRAINS platform, with options for social links and a "Back to top" button.
+ * Configurability without breakage:
+ * - All previous props remain (`social`, `variant`, `fundedBy`,
+ *   `rightsReserved`, `enableScrollTop`, `enableCookiesSettings`,
+ *   `cookiesPreferences`, `backToTopAriaLabel`). Their meanings are
+ *   preserved.
+ * - New `columns` prop is optional — omit it for the defaults.
+ * - The `enableCookiesSettings` toggle now decides whether any column
+ *   link with `action: 'cookies'` is rendered (default false; pass
+ *   true to surface the Cookie Preferences entry in the Legal column).
  */
 export declare class EdsFooter {
-    /**
-     * Determines if the social network section should be displayed.
-     * Adds top padding when true.
-     * @type {boolean}
-     */
+    /** Show the eds-social-networks section above the main grid. */
     social: boolean;
     /**
-     * Controls the display of the "Back to Top" button.
-     * When true, the button appears in the footer.
-     * @type {boolean}
+     * Theme variant. Defaults to `inverse` (dark) because the canonical
+     * EBRAINS footer design uses a dark backdrop with light text. Pass
+     * `variant="default"` for the light-on-light treatment if an app's
+     * page palette demands it.
      */
+    variant: 'default' | 'inverse';
+    /** Float a "Back to top" button at the top-right of the footer. */
     enableScrollTop: boolean;
-    /**
-     * Controls the display of the "Founded By" text.
-     * @type {string}
-     */
+    /** "EBRAINS is funded by…" line shown next to the EU flag in the brand column. */
     fundedBy: string;
-    /**
-     * Controls the display of the "Rights Reserved" text.
-     * @type {string}
-     */
+    /** "© {year} EBRAINS. All rights reserved." line shown below the funding text. */
     rightsReserved: string;
-    /**
-     * Controls the display of the "Cookies preferences" text.
-     * @type {string}
-     */
+    /** Label used for any link with `action: 'cookies'` — overrides the column's `label`. */
     cookiesPreferences: string;
     /**
-     * Controls the display of the "Cookies preferences" link.
-     * @type {string}
+     * When false, any column link with `action: 'cookies'` is hidden.
+     * Default false so adding the footer to a page without a Matomo
+     * notice / cookie banner doesn't surface a non-functional link.
+     * Set true once you've also mounted `<eds-matomo-notice>` on the page.
      */
     enableCookiesSettings: boolean;
-    /**
-     * Controls the display of the "Back to Top" aria label text.
-     * @type {string}
-     */
+    /** ARIA label for the "Back to top" floating button. */
     backToTopAriaLabel: string;
     /**
-     * State to control whether the eds-matomo-notice popup is visible.
+     * Custom link columns. Accepts an array (Vue/React/JS bindings) OR
+     * a JSON-stringified array (HTML attribute use). When omitted, the
+     * canonical EBRAINS-wide columns above are used.
+     *
+     * Shape: see EdsFooterColumn / EdsFooterLink at the top of this file.
      */
-    showMatomoNotice: boolean;
-    cookies: EventEmitter;
+    columns?: EdsFooterColumn[] | string;
     /**
-     * Reference to the host element.
+     * Parsed columns derived from the `columns` prop. Re-computed whenever
+     * the prop changes (Watcher below) so dynamic updates from a parent
+     * framework work without forcing a full remount.
      */
+    resolvedColumns: EdsFooterColumn[];
+    cookies: EventEmitter;
     el: HTMLElement;
     private backBtn?;
-    componentDidLoad(): void;
-    handleScroll(): void;
+    componentWillLoad(): void;
+    onColumnsChange(value: EdsFooterColumn[] | string | undefined): void;
     /**
-     * Scrolls the page smoothly back to the top.
-     * Called when the "Back to top" button is clicked.
-     * @private
+     * Resolve the `columns` prop to a usable array.
+     *   - undefined / null   → defaults
+     *   - JSON-parseable str → parsed array
+     *   - already an array   → used as-is
+     *   - anything else (malformed JSON, wrong shape) → defaults + console warning
+     *
+     * Defensive parsing so a typo in a Hugo template's attribute doesn't
+     * render an empty footer in production. Failure logs a warning but
+     * keeps the footer working with sensible defaults.
      */
+    private parseColumns;
+    componentDidLoad(): void;
+    handleScroll(): void;
     private backToTop;
-    toggleCookiesConsent(): void;
+    private emitCookies;
     /**
-     * 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.
+     * Render one link inside a column.
+     *   - `action: 'cookies'` → button-like anchor that fires the cookies event
+     *   - `href` present      → real anchor (target=_blank when `external`)
+     *   - neither             → plain text span (e.g. "MIT License")
      */
+    private renderLink;
     render(): any;
 }

package/dist/types/components/eds-footer/eds-footer.stories.d.ts

@@ -2,6 +2,11 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
         social: {
             control: string;
             description: string;
@@ -30,8 +35,13 @@ declare const _default: {
             control: string;
             description: string;
         };
+        columns: {
+            control: string;
+            description: string;
+        };
     };
     args: {
+        variant: string;
         social: boolean;
         fundedBy: string;
         rightsReserved: string;
@@ -39,10 +49,61 @@ declare const _default: {
         enableCookiesSettings: boolean;
         cookiesPreferences: string;
         backToTopAriaLabel: string;
+        columns: any;
     };
-    parameters: {};
 };
 export default _default;
+/**
+ * Default — what a consumer gets from `<eds-footer></eds-footer>`
+ * with no overrides. Dark theme, EBRAINS canonical link columns,
+ * EU funding ack + copyright.
+ *
+ * Leave `columns` null in the controls panel to see the canonical
+ * defaults baked into the component; set it to a JSON array (use the
+ * object editor) to live-preview an override.
+ */
 export declare const Default: {
     render: (args: any) => string;
 };
+/**
+ * Custom link columns — pre-fills the `columns` control with a
+ * sensible non-EBRAINS example so the Storybook JSON editor opens
+ * with something realistic to mutate. Edit headings, links, hrefs,
+ * `external`, and `action` directly in the Controls panel to see
+ * the footer re-render.
+ *
+ * Shape: `[{ heading, links: [{ label, href?, external?, action? }] }]`
+ *   - `href` present       → renders as an anchor (target=_blank if `external`)
+ *   - `href` absent        → renders as plain text (e.g. "MIT License")
+ *   - `action: 'cookies'`  → fires the `cookies` event (gated by
+ *                            enable-cookies-settings)
+ */
+export declare const CustomColumns: {
+    args: {
+        enableCookiesSettings: boolean;
+        columns: ({
+            heading: string;
+            links: ({
+                label: string;
+                href: string;
+                external?: undefined;
+            } | {
+                label: string;
+                href: string;
+                external: boolean;
+            })[];
+        } | {
+            heading: string;
+            links: ({
+                label: string;
+                href: string;
+                action?: undefined;
+            } | {
+                label: string;
+                action: string;
+                href?: undefined;
+            })[];
+        })[];
+    };
+    render: (args: any) => string;
+};

package/dist/types/components/eds-form/eds-form.d.ts

@@ -37,9 +37,17 @@ export declare class EdsForm {
      */
     formBtnLabel?: string;
     /**
-     * Variant/style intent for the submit button (e.g., primary, secondary, tertiary, ghost).
+     * Variant/style intent for the submit button (e.g., primary, secondary).
      */
-    buttonIntent?: 'primary' | 'secondary' | 'tertiary' | 'ghost';
+    buttonIntent?: 'primary' | 'secondary';
+    /**
+     * If `true`, includes a clear/reset button in the form.
+     */
+    clearBtn?: boolean;
+    /**
+     * Label for the clear button
+     */
+    clearBtnLabel?: string;
     /**
      * The message displayed when the form submission fails.
      */
@@ -66,10 +74,12 @@ export declare class EdsForm {
         [key: string]: any;
     };
     /**
-     * Choose between default layout or an always-shadow style.
-     * When "shadow", the form gets the same effect-shadow + shadow-hover classes
+     * Choose between default layout, shadow style, or brand style.
+     * - "default": Standard form layout
+     * - "shadow": Form with shadow effect
+     * - "brand": EBRAINS branded form with left border and shadow
      */
-    formStyle: 'default' | 'shadow';
+    formStyle: 'default' | 'shadow' | 'brand';
     values: {
         [key: string]: any;
     };
@@ -124,8 +134,19 @@ export declare class EdsForm {
     private handleRating;
     private handleNPS;
     handleSubmit(e?: Event): void;
+    handleClear(e?: Event): void;
     private get groupedFields();
     private renderField;
     getData(): Promise<FormData>;
+    /**
+     * Render the form/step description with a small, safe subset of inline
+     * formatting so authors can add links and emphasis:
+     *   **bold**            → <strong>
+     *   [label](url)        → <a> (only http/https/mailto; others render as text)
+     *   blank line / \n     → paragraph / line break
+     * HTML is escaped FIRST, so author text can never inject markup — only the
+     * whitelisted patterns above produce tags.
+     */
+    private formatDescription;
     render(): any;
 }

package/dist/types/components/eds-form/eds-form.stories.d.ts

@@ -2,11 +2,6 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        name: {
-            control: string;
-            description: string;
-            defaultValue: string;
-        };
         title: {
             control: string;
             description: string;

package/dist/types/components/eds-frame/eds-frame.d.ts

@@ -39,7 +39,7 @@ export declare class EdsFrame {
     /**
      * The intent for styling the link (e.g., primary, secondary, tertiary, etc.).
      */
-    intent: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'underline';
+    intent: 'primary' | 'secondary' | 'ghost' | 'underline' | 'cta';
     /**
      * The size of the frame controlling its height.
      * Options: 'auto', 'sm', 'md', 'lg', 'xl'

package/dist/types/components/eds-fullscreen-menu/eds-fullscreen-menu.d.ts

@@ -21,6 +21,9 @@ type LinkItem = {
  * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
  * - **Footer Integration**: Optionally displays social links and a customizable footer section within the fullscreen menu.
  */
+/**
+ * @internal
+ */
 export declare class EdsFullscreenMenu {
     /**
      * Primary navigation links.

package/dist/types/components/eds-header/eds-header.d.ts

@@ -17,7 +17,7 @@ export declare class EdsHeader {
      * URL for the home logo link.
      * This is the default URL that the logo points to.
      */
-    homeUrl: string;
+    url: string;
     /**
      * JSON string representing the links for primary navigation.
      * Each link should include `label`, `url`, and optionally an `icon`.
@@ -34,13 +34,13 @@ export declare class EdsHeader {
      * - "inverse": text-default on bg-inverse
      * - "strong": text-inverse on bg-strongest
      */
-    headerVariant: 'default' | 'inverse' | 'strong';
+    variant: 'default' | 'inverse' | 'strong';
     /**
      * Flag to enable or disable header menu toggle feature.
      * When true, displays the toggle in the header.
      * Requires the <eds-fullscreen-menu> to properly work.
      */
-    menuEnabled: boolean;
+    menu: boolean;
     /**
      * State indicating whether the main menu is open.
      * Controls the visibility of the fullscreen main menu.

package/dist/types/components/eds-header/eds-header.stories.d.ts

@@ -2,7 +2,7 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        homeUrl: {
+        url: {
             control: string;
             description: string;
         };
@@ -10,11 +10,11 @@ declare const _default: {
             control: string;
             description: string;
         };
-        menuEnabled: {
+        menu: {
             control: string;
             description: string;
         };
-        headerVariant: {
+        variant: {
             control: {
                 type: string;
             };
@@ -23,13 +23,13 @@ declare const _default: {
         };
     };
     args: {
-        homeUrl: string;
+        url: string;
         links: {
             label: string;
             url: string;
         }[];
-        menuEnabled: boolean;
-        headerVariant: string;
+        menu: boolean;
+        variant: string;
     };
 };
 export default _default;

package/dist/types/components/eds-icon-wrapper/eds-icon-wrapper.d.ts

@@ -1,28 +1,14 @@
-/**
- * `EdsIconWrapper` is a wrapper component for displaying icons with dynamic loading capabilities.
- * It allows specifying the icon name, which is dynamically imported and rendered within the component.
- *
- * Key Features:
- * - Dynamically loads the icon component based on the `icon` prop.
- * - Allows additional CSS classes through the `class` prop for custom styling.
- * - Observes changes to the `icon` prop and reloads the icon component accordingly.
- *
- * Ideal for scenarios where icons need to be dynamically selected and styled consistently across an application.
- */
+import { IconName } from '../../utils/icons';
 export declare class EdsIconWrapper {
+    name: IconName;
+    size: 16 | 20 | 24 | 32;
     /**
-     * The name of the icon to be displayed.
-     * Default is 'arrow-right'.
+     * Accessible label for the icon. Set this when the icon conveys meaning on its
+     * own (e.g. a standalone status/action icon) — it is exposed as `role="img"` +
+     * `aria-label`. When omitted, the icon is treated as decorative and hidden from
+     * assistive technology (`aria-hidden`), which is correct when it sits next to a
+     * text label that already describes it.
      */
-    icon: string;
-    /**
-     * Additional CSS classes to be applied to the icon for styling.
-     */
-    class: string;
-    IconComponent: any;
-    TagName: any;
-    componentWillLoad(): void;
-    iconChanged(newValue: string): void;
-    private loadIconComponent;
+    label?: string;
     render(): any;
 }

package/dist/types/components/eds-img/eds-img.stories.d.ts

@@ -46,31 +46,17 @@ declare const _default: {
         height: number;
         srcset: string;
         sizes: string;
-        formats: {
-            type: string;
-            srcset: string;
-            media: string;
-        }[];
+        formats: any[];
         lazyload: boolean;
         withBg: boolean;
     };
-    parameters: {};
 };
 export default _default;
+/**
+ * Default — a single image driven entirely by `src`. `formats` is empty, so
+ * whatever you type into the `src` control is exactly what renders. Paste any
+ * direct image URL (e.g. a .jpg/.png/.webp) to try it.
+ */
 export declare const Default: {
     render: (args: any) => HTMLEdsImgElement;
-    args: {
-        src: string;
-        alt: string;
-        width: number;
-        height: number;
-        sizes: string;
-        formats: {
-            type: string;
-            srcset: string;
-            media: string;
-        }[];
-        lazyload: boolean;
-        withBg: boolean;
-    };
 };

package/dist/types/components/eds-input-dropzone/eds-input-dropzone.d.ts

@@ -0,0 +1,51 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+interface FileItem {
+    file: File;
+    id: string;
+}
+export declare class EdsInputDropzone {
+    /** The `name` attribute of the input element. Required for form submission. */
+    name: string;
+    /** The `id` attribute of the internal input element. Defaults to `name` if not set. */
+    inputId?: string;
+    /** If `true`, the input is disabled. */
+    disabled: boolean;
+    /** If `true`, the input is required. */
+    required: boolean;
+    /** If `true`, allows multiple file selection. */
+    multiple: boolean;
+    /** Accepted file types (e.g., ".pdf,.png,.jpg" or "image/*"). */
+    accept?: string;
+    /** Maximum file size in bytes. If not set, no size limit is enforced client-side. */
+    maxFileSize?: number;
+    /** Primary text shown in dropzone. */
+    primaryText?: string;
+    /** Secondary text shown in dropzone. */
+    secondaryText?: string;
+    /**
+     * Emits when files are selected or removed.
+     * Use `event.detail.files` to access the FileList.
+     */
+    edsfile: EventEmitter<{
+        files: File[];
+    }>;
+    /** Reference to the host element. */
+    hostEl: HTMLElement;
+    /** Internal state: list of selected files */
+    selectedFiles: FileItem[];
+    /** Internal state: whether user is dragging over the dropzone */
+    isDragging: boolean;
+    private fileInputRef?;
+    private handleDropzoneClick;
+    private handleFileSelect;
+    private handleDragOver;
+    private handleDragLeave;
+    private handleDrop;
+    private addFiles;
+    private handleRemoveFile;
+    private emitFileChange;
+    private formatFileSize;
+    private getFileIcon;
+    render(): any;
+}
+export {};

package/dist/types/components/eds-input-dropzone/eds-input-dropzone.stories.d.ts

@@ -0,0 +1,54 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        name: {
+            control: string;
+            description: string;
+        };
+        inputId: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+        multiple: {
+            control: string;
+            description: string;
+        };
+        accept: {
+            control: string;
+            description: string;
+        };
+        maxFileSize: {
+            control: string;
+            description: string;
+        };
+        primaryText: {
+            control: string;
+            description: string;
+        };
+        secondaryText: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        name: string;
+        disabled: boolean;
+        required: boolean;
+        multiple: boolean;
+        primaryText: string;
+        secondaryText: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};

package/dist/types/components/eds-input-elements/eds-input/eds-input.d.ts

@@ -1,3 +1,4 @@
+import { IconName } from '../../../utils/icons';
 /**
  * @internal
  */
@@ -12,7 +13,7 @@ export declare class EdsInput {
     type: string;
     required: boolean;
     value?: string | number;
-    icon?: string;
+    icon?: IconName;
     maxLength?: number;
     options?: {
         label: string;
@@ -22,6 +23,13 @@ export declare class EdsInput {
     min?: number;
     max?: number;
     step?: number;
+    /**
+     * Explicit tabindex for the native input. Radio/checkbox groups
+     * inside the `eds-input-field` shadow root (delegatesFocus) get
+     * skipped by sequential keyboard navigation unless each input is
+     * explicitly in the tab order.
+     */
+    inputTabIndex?: number;
     innerVal: string | number;
     maxLengthReached: boolean;
     /**