@ebrains/components 3.1.0 → 3.2.0

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.

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

@@ -1,19 +1,18 @@
 /**
- * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
- *
- * Key Features:
- * - Supports various logo styles and orientations.
- * - Emits a custom `matomoEvent` for tracking click interactions.
+ * `EdsLogo` renders the clickable EBRAINS brand mark (inline SVG).
  *
  * Props:
- * - `href` (string): The URL to navigate to when the logo is clicked (defaults to the root path `/`).
- * - `orientation` (string): The orientation of the logo (`horizontal` or `vertical`).
- * - `type` (string): The style of the logo (`color`, `black`, `color-white`, `white`).
+ * - `variant` (attribute `type`): `'positive'` (dark logo for light
+ *   backgrounds) or `'negative'` (light logo for dark backgrounds).
+ * - `href`: where the logo links to (defaults to `/`). The logo is the
+ *   click-to-home affordance in eds-header, eds-fullscreen-menu and the
+ *   eds-form brand hero.
  *
- * Events:
- * - `matomoEvent`: Emitted when the logo is clicked, carrying metadata for analytics tracking, including the event `category`, `tag`, `name`, and `action`.
+ * Clicks emit an analytics event (category/tag/name/action).
  *
- * This component is ideal for navigation and branding, with options for style customization and interaction tracking.
+ * NOTE: the SVG has a viewBox but no intrinsic width, so the host needs a
+ * sized block parent to render (e.g. eds-header wraps it in a fixed-width
+ * container).
  */
 export declare class EdsLogo {
     /**
@@ -22,34 +21,18 @@ export declare class EdsLogo {
      * Defaults to the root path ('/').
      */
     href: string;
-    /**
-     * The orientation of the logo to display.
-     * - `"horizontal"` displays the logo horizontally.
-     * - `"vertical"` displays the logo vertically.
-     * */
-    orientation: 'horizontal' | 'vertical';
     /**
      * The visual variant of the logo.
      * `'positive'` for dark logo on light backgrounds, `'negative'` for light logo on dark backgrounds.
      */
     variant: 'positive' | 'negative';
-    label: string;
     /**
      * Reference to the host element of this component.
      */
     el: HTMLElement;
     /**
-     * Handles the click event on the logo link.
-     * Emits a `matomoEvent` for analytics tracking with details about the interaction.
-     * - `category`: Component type (e.g., "ui-component").
-     * - `tag`: The HTML tag name of the component.
-     * - `name`: Event name, set as "logo".
-     * - `action`: The action, set as "click".
+     * Emits an analytics event when the logo link is clicked.
      */
     private handleClick;
-    /**
-     * Determines the appropriate SVG content based on the `orientation` and `type` props.
-     */
-    private getLogo;
     render(): any;
 }

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

@@ -1,7 +1,27 @@
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {};
+    argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        href: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        variant: string;
+        href: string;
+    };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    render: (args: any) => string;
+};
+/** Both variants side by side, on their intended surfaces. */
+export declare const Variants: {
+    render: () => string;
+};

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

@@ -37,6 +37,11 @@ export declare class EdsSteps {
     handleDisableNextChange(newValue: boolean | boolean[] | string): void;
     /** Index of the currently active step (linear mode). Starts at `0`. */
     activeStep: number;
+    /** Tracks small screens so nav buttons shrink and use compact icons. */
+    isMobile: boolean;
+    private onResize;
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    private get navBtnSize();
     step: EventEmitter<number>;
     finished: EventEmitter<void>;
     next: EventEmitter<number>;
@@ -44,6 +49,8 @@ export declare class EdsSteps {
     /** Reference to the host element */
     el: HTMLElement;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     activeStepChanged(newValue: number): void;
     emitContext(linkElement: HTMLElement): void;

package/dist/types/components/eds-steps-v2/eds-steps-v2.d.ts

@@ -26,6 +26,12 @@ export declare class EdsStepsV2 {
     finishLabel: string;
     /** Show or hide the finish button on the last step */
     showFinish: boolean;
+    /**
+     * Whether the stepper draws its own bordered card. Default true. Set to false
+     * when the host already provides the card chrome (e.g. a multi-step form whose
+     * form-style border lives on an outer wrapper) to avoid a double border.
+     */
+    card: boolean;
     /**
      * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
      * @attr disable-next
@@ -35,6 +41,11 @@ export declare class EdsStepsV2 {
     headingLevel: 'h3' | 'h4' | 'h5';
     /** Current step index (linear mode) */
     activeStep: number;
+    /** Tracks small screens so the nav buttons shrink (large is chunky on mobile). */
+    isMobile: boolean;
+    private onResize;
+    /** Nav button size: comfortable on desktop, compact on mobile. */
+    private get navBtnSize();
     /** Fired whenever the active step changes. Payload: current step index. */
     step: EventEmitter<number>;
     /** Fired when user clicks Finish on the last step. */
@@ -48,9 +59,11 @@ export declare class EdsStepsV2 {
     handleDisableNextChange(newValue: boolean | boolean[] | string): void;
     activeStepChanged(newValue: number): void;
     componentWillLoad(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     componentDidLoad(): void;
     emitContext(linkElement: HTMLElement): void;
-    articleClasses(): string;
+    articleClasses(): "border-softer relative rounded-lg border-2" | "relative";
     private get parsedSteps();
     private isStepDisabled;
     private isNextDisabledFor;

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

@@ -5,10 +5,6 @@ declare const _default: {
         steps: {
             control: string;
             description: string;
-            defaultValue: {
-                title: string;
-                content: string;
-            }[];
         };
         orientation: {
             control: {
@@ -21,16 +17,27 @@ declare const _default: {
             control: string;
             options: string[];
             description: string;
-            defaultValue: string;
+        };
+        theme: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        card: {
+            control: string;
+            description: string;
+        };
+        disableNext: {
+            control: string;
+            description: string;
         };
         imageSrc: {
             control: string;
             description: string;
         };
-        bg: {
+        imageWidth: {
             control: string;
             description: string;
-            defaultValue: boolean;
         };
         message: {
             control: string;
@@ -43,7 +50,6 @@ declare const _default: {
             };
             options: string[];
             description: string;
-            defaultValue: string;
         };
         nextLabel: {
             control: string;
@@ -69,8 +75,11 @@ declare const _default: {
         }[];
         orientation: string;
         type: string;
+        theme: string;
+        card: boolean;
+        disableNext: boolean;
         imageSrc: string;
-        bg: boolean;
+        imageWidth: any;
         message: string;
         headingLevel: string;
         nextLabel: string;
@@ -84,3 +93,25 @@ export declare const Static: any;
 export declare const WithMessage: any;
 export declare const Linear: any;
 export declare const LinearHorizontal: any;
+export declare const BrandTheme: {
+    ({ steps, disableNext }: {
+        steps: any;
+        disableNext: any;
+    }): import("lit-html").TemplateResult<1>;
+    storyName: string;
+    args: {
+        steps: {
+            title: string;
+            content: string;
+        }[];
+        disableNext: boolean;
+    };
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const DisabledNext: any;

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

@@ -17,9 +17,13 @@ export declare class EdsSwitch {
      */
     labelOff: string;
     /**
-     * Variant of the switch: 'toggle' (default) or 'segmented' (pill-style buttons)
+     * Variant of the switch:
+     * - 'toggle' (default): the classic on/off switch
+     * - 'segmented': pill-style buttons — light container, green active pill
+     * - 'segmented-dark': pill-style buttons — white container with a hairline
+     *   border and a dark (brand-black) active pill
      */
-    variant: 'toggle' | 'segmented';
+    variant: 'toggle' | 'segmented' | 'segmented-dark';
     /**
      * Emitted when the switch is toggled.
      */

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

@@ -72,6 +72,14 @@ export declare const SegmentedChecked: {
         labelOff: string;
     };
 };
+export declare const SegmentedDark: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+        checked: boolean;
+    };
+};
 export declare const SegmentedDisabled: {
     render: (args: any) => string;
     args: {

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

@@ -7,7 +7,32 @@ export declare class EdsToast {
     /**
      * The visual intent or style of the toast, indicating the toast type.
      */
-    intent: 'default' | 'success' | 'error' | 'warning' | 'brand' | 'brandInverse';
+    intent: 'default' | 'success' | 'error' | 'warning' | 'info' | 'neutral' | 'brand' | 'brandInverse';
+    /**
+     * Visual variant:
+     * - "toast": the classic compact pill (message + close). Default; used by the
+     *   global toast manager.
+     * - "banner": a richer inline banner — leading icon in a tinted square, a bold
+     *   heading over a mono message, a coloured left rail on a tinted surface, an
+     *   optional actions slot and an optional dismiss button. Use for persistent,
+     *   in-page status (form expiry, saved draft, etc.).
+     */
+    variant: 'toast' | 'banner';
+    /**
+     * Bold heading shown above the message. Banner variant only.
+     */
+    heading?: string;
+    /**
+     * Leading icon name (from the EBRAINS icon set). Banner variant only.
+     * Falls back to a sensible default per intent when omitted.
+     */
+    icon?: string;
+    /**
+     * Show a dismiss (×) button regardless of `duration`. The `toast` variant
+     * already shows one whenever `duration` is set; set this for a persistent
+     * banner the user can still close.
+     */
+    dismissible: boolean;
     /**
      * Determines the duration before the toast auto-dismisses (in milliseconds).
      * If set, the toast will auto-dismiss and show a close button.
@@ -18,12 +43,18 @@ export declare class EdsToast {
      * Internal state to control visibility of the toast.
      */
     visible: boolean;
+    /**
+     * Whether the banner has slotted actions. Detected from light DOM because a
+     * `<slot>` element always counts as a child, so `:empty` can't tell us.
+     */
+    hasActions: boolean;
     el: HTMLElement;
     toast: EventEmitter<{
         visible: boolean;
         label: 'dismissed' | 'shown';
     }>;
     private dismissTimeout;
+    componentWillLoad(): void;
     componentDidLoad(): void;
     /**
      * Emits a custom event called `parentContext` for a given button element.
@@ -38,5 +69,6 @@ export declare class EdsToast {
     dismissToast: () => void;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    private renderBanner;
     render(): any;
 }

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

@@ -2,23 +2,44 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
         message: {
             control: string;
             description: string;
         };
+        heading: {
+            control: string;
+            description: string;
+        };
         intent: {
             control: string;
             options: string[];
             description: string;
         };
+        icon: {
+            control: string;
+            description: string;
+        };
+        dismissible: {
+            control: string;
+            description: string;
+        };
         duration: {
             control: string;
             description: string;
         };
     };
     args: {
+        variant: string;
         message: string;
+        heading: string;
         intent: string;
+        icon: string;
+        dismissible: boolean;
         duration: number;
     };
 };
@@ -38,6 +59,33 @@ export declare const Brand: {
         duration: number;
     };
 };
-export declare const AllVariants: {
+export declare const AllToastIntents: {
+    render: () => string;
+};
+export declare const Banner: {
+    render: (args: any) => string;
+    args: {
+        variant: string;
+        intent: string;
+        heading: string;
+        message: string;
+        icon: string;
+        dismissible: boolean;
+    };
+};
+export declare const BannerClosed: {
+    name: string;
+    render: () => string;
+};
+export declare const BannerClosingSoon: {
+    name: string;
+    render: () => string;
+};
+export declare const BannerWithActions: {
+    name: string;
+    render: () => string;
+};
+export declare const AllBanners: {
+    name: string;
     render: () => string;
 };

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

@@ -22,13 +22,11 @@ export declare class EdsUser {
     dropdownLabel: string;
     hostEl: HTMLElement;
     expanded: boolean;
-    shortMode: boolean;
     private dropdownEl?;
     /**
      * Helper getter to ensure we work with a User object.
      */
     private get parsedUser();
-    componentWillLoad(): Promise<void>;
     private get initials();
     private handleDropdown;
     closeDropdown(): Promise<void>;

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

@@ -6,6 +6,10 @@ declare const _default: {
             control: string;
             description: string;
         };
+        dropdownLabel: {
+            control: string;
+            description: string;
+        };
     };
     args: {
         user: {
@@ -15,18 +19,10 @@ declare const _default: {
             name: string;
             email: string;
         };
+        dropdownLabel: string;
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: any) => HTMLDivElement;
-    args: {
-        user: {
-            given_name: string;
-            family_name: string;
-            preferred_username: string;
-            name: string;
-            email: string;
-        };
-    };
 };