@ebrains/components 3.0.0 → 3.2.0

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

@@ -18,7 +18,10 @@ declare const _default: {
             description: string;
         };
         icon: {
-            control: string;
+            control: {
+                type: string;
+            };
+            options: string[];
             description: string;
         };
         expanded: {
@@ -65,13 +68,6 @@ export declare const WithIconInverse: {
         icon: string;
     };
 };
-export declare const Expanded: {
-    render: (args: any) => string;
-    args: {
-        title: string;
-        description: string;
-    };
-};
 export declare const WithSlotComponent: {
     render: (args: any) => string;
     args: {

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

@@ -21,7 +21,10 @@ declare const _default: {
             description: string;
         };
         icon: {
-            control: string;
+            control: {
+                type: string;
+            };
+            options: string[];
             description: string;
         };
         dismissible: {
@@ -41,6 +44,7 @@ declare const _default: {
         message: string;
         intent: string;
         direction: string;
+        icon: string;
         dismissible: boolean;
     };
 };
@@ -48,79 +52,9 @@ export default _default;
 export declare const Default: {
     render: (args: any) => string;
 };
-export declare const Warning: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        icon: string;
-    };
-};
-export declare const Error: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        icon: string;
-    };
-};
-export declare const Success: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        icon: string;
-    };
-};
-export declare const Brand: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        icon: string;
-    };
-};
-export declare const WithLink: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        intent: string;
-    };
-};
-export declare const WithButton: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        icon: string;
-    };
-};
-export declare const Dismissible: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        icon: string;
-    };
-};
-export declare const WithCustomIcon: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        intent: string;
-        icon: string;
-    };
-};
-export declare const NoIcon: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-    };
-};
-export declare const Vertical: {
-    render: (args: any) => string;
-    args: {
-        message: string;
-        icon: string;
-    };
-};
-export declare const SlotContent: {
+export declare const AllIntents: {
     render: () => string;
 };
-export declare const AllIntents: {
+export declare const SlotContent: {
     render: () => string;
 };

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

@@ -41,7 +41,7 @@ export declare class EdsButton {
      * - 'cta': CTA link style with monospace font (gray text that turns green on hover)
      * - 'cta-brand': CTA link style with monospace font (always green)
      */
-    intent: 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand';
+    intent: 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandLight' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand';
     /**
      * A boolean indicating whether the button is in a loading state.
      */

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

@@ -96,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,86 +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 visual variant of the footer.
-     * - 'default': Light background with dark text
-     * - 'inverse': Dark/black background with white text
-     * @type {'default' | 'inverse'}
+     * 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';
-    /**
-     * Controls the display of the "Back to Top" button.
-     * When true, the button appears in the footer.
-     * @type {boolean}
-     */
+    /** 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

@@ -24,6 +24,38 @@ export declare class EdsForm {
      * The description displayed below the title.
      */
     description?: string;
+    /**
+     * Small mono eyebrow shown above the title in the `brand` hero header
+     * (e.g. a programme or category label). Brand style only.
+     */
+    eyebrow?: string;
+    /**
+     * Optional "time to complete" hint shown as a meta chip in the `brand`
+     * hero header (e.g. "~6 minutes"). Brand style only.
+     */
+    estimatedTime?: string;
+    /**
+     * Completion percentage (0–100) shown as a "X% complete" chip in the `brand`
+     * hero — the single-page equivalent of the multi-step progress. Host-driven
+     * (e.g. filled required fields); omit/undefined to hide. Brand style only.
+     */
+    progress?: number;
+    /**
+     * Optional expiry label shown as a meta chip in the `brand` hero
+     * (e.g. "Closes Jun 28, 2026"). Brand style only.
+     */
+    expires?: string;
+    /**
+     * Optional submission-policy label shown as a meta chip in the `brand`
+     * hero (e.g. "You can submit this form only once."). Brand style only.
+     */
+    policy?: string;
+    /**
+     * Show the "GDPR compliant" meta chip in the `brand` hero header. Default OFF
+     * — it's an unverified compliance claim, so it must be opted into explicitly
+     * (per form) rather than advertised on every brand form.
+     */
+    gdpr?: boolean;
     /**
      * If `true`, includes the current form URL in the submission data.
      */
@@ -80,9 +112,31 @@ export declare class EdsForm {
      * - "brand": EBRAINS branded form with left border and shadow
      */
     formStyle: 'default' | 'shadow' | 'brand';
+    /**
+     * Lifecycle state for the brand style (drives the hero eyebrow, glow tint and
+     * expiry meta-chip colour). "closed" additionally disables every field,
+     * desaturates the body and replaces the submit with a dead "Submissions
+     * closed" footer. No effect outside form-style="brand".
+     * - "open": accepting submissions (default)
+     * - "expiring": accepting but closing soon (amber)
+     * - "closed": expired / not accepting (red, read-only)
+     */
+    status: 'open' | 'expiring' | 'closed';
+    /**
+     * Autosave state shown at the left of the brand footer (host-driven). The dot
+     * pulses grey while saving and settles green when saved.
+     */
+    saveStatus: 'idle' | 'saving' | 'saved' | 'error';
+    /**
+     * Autosave label next to the dot (e.g. "Saved 5:01 PM"). Empty hides the
+     * whole save-state cluster. Brand footer only.
+     */
+    saveLabel?: string;
     values: {
         [key: string]: any;
     };
+    /** Inline "clear everything you've typed?" confirm in the footer. */
+    showClearConfirm: boolean;
     /**
      * Indicates whether the form is currently submitting.
      */
@@ -106,6 +160,8 @@ export declare class EdsForm {
         value?: any;
         message?: string;
         success?: boolean;
+        /** True when this change came from the Clear button (host may skip autosave). */
+        cleared?: boolean;
     }>;
     /**
      * Reference to the host element.
@@ -138,5 +194,15 @@ export declare class EdsForm {
     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

@@ -10,6 +10,10 @@ declare const _default: {
             control: string;
             description: string;
         };
+        eyebrow: {
+            control: string;
+            description: string;
+        };
         fields: {
             control: string;
             description: string;
@@ -39,9 +43,52 @@ declare const _default: {
             options: string[];
             description: string;
         };
+        clearBtn: {
+            control: string;
+            description: string;
+        };
+        clearBtnLabel: {
+            control: string;
+            description: string;
+        };
         formStyle: {
             control: string;
             options: string[];
+            description: string;
+        };
+        status: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        expires: {
+            control: string;
+            description: string;
+        };
+        policy: {
+            control: string;
+            description: string;
+        };
+        estimatedTime: {
+            control: string;
+            description: string;
+        };
+        progress: {
+            control: string;
+            description: string;
+        };
+        gdpr: {
+            control: string;
+            description: string;
+        };
+        saveStatus: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        saveLabel: {
+            control: string;
+            description: string;
         };
     };
 };
@@ -49,3 +96,19 @@ export default _default;
 export declare const Default: any;
 export declare const WithGroups: any;
 export declare const WithInitData: any;
+/**
+ * The full brand experience: dark hero (eyebrow · title · description) with the
+ * meta strip — progress, expiry, policy, estimated time, GDPR badge — a light
+ * sectioned body, and the footer with autosave state, required-fields note,
+ * Clear text-link (inline confirm) and the pill submit.
+ */
+export declare const Brand: any;
+/** Expiring lifecycle: amber glow, "· Closing soon" eyebrow suffix, warn-toned expiry chip. */
+export declare const BrandExpiring: any;
+/** Closed lifecycle: red glow, "· Closed" eyebrow, danger expiry chip, read-only
+ *  body and the locked footer ("Submissions closed" + disabled submit). */
+export declare const BrandClosed: any;
+/** Autosave footer states — flip `saveStatus` (saving/saved/error) in the controls. */
+export declare const BrandAutosave: any;
+/** Non-brand styles show `estimatedTime` too — as a quiet mono chip above the title. */
+export declare const EstimatedTimeChip: any;

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

@@ -2,5 +2,13 @@ import { IconName } from '../../utils/icons';
 export declare class EdsIconWrapper {
     name: IconName;
     size: 16 | 20 | 24 | 32;
+    /**
+     * 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.
+     */
+    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;
-    };
 };