@ebrains/components 2.4.0 → 3.0.0

package/dist/types/components/eds-cards/eds-card-stat/eds-card-stat.stories.d.ts

@@ -0,0 +1,47 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        number: {
+            control: string;
+            description: string;
+        };
+        label: {
+            control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
+        url: {
+            control: string;
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+    };
+    args: {
+        number: string;
+        label: string;
+        description: string;
+        variant: string;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const Inverse: {
+    render: (args: any) => string;
+    args: {
+        number: string;
+        label: string;
+        description: string;
+    };
+};
+export declare const Grid: {
+    render: () => string;
+};

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
      */

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

@@ -20,6 +20,13 @@ export declare class EdsFooter {
      * @type {boolean}
      */
     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'}
+     */
+    variant: 'default' | 'inverse';
     /**
      * Controls the display of the "Back to Top" button.
      * When true, the button appears in the footer.

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,6 +134,7 @@ export declare class EdsForm {
     private handleRating;
     private handleNPS;
     handleSubmit(e?: Event): void;
+    handleClear(e?: Event): void;
     private get groupedFields();
     private renderField;
     getData(): Promise<FormData>;

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

@@ -1,28 +1,6 @@
-/**
- * `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 {
-    /**
-     * The name of the icon to be displayed.
-     * Default is 'arrow-right'.
-     */
-    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;
+    name: IconName;
+    size: 16 | 20 | 24 | 32;
     render(): any;
 }

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;

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

@@ -1,4 +1,5 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName } from '../../utils/icons';
 export declare class EdsInputField {
     /** The `name` attribute of the input element. Required for form submission. */
     name: string;
@@ -15,7 +16,7 @@ export declare class EdsInputField {
     /** Optional hint displayed next to the label. */
     hint?: string;
     /** Optional icon name to display inside the input. */
-    icon?: string;
+    icon?: IconName;
     /** Optional link associated with the input (for help or docs). */
     link?: {
         url: string;
@@ -83,6 +84,7 @@ export declare class EdsInputField {
     private shouldEmitValue;
     private handleNativeInput;
     private handleNativeChange;
+    private handleFileChange;
     get parsedOptions(): any;
     render(): any;
 }

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

@@ -0,0 +1,43 @@
+import { EventEmitter } from '../../stencil-public-runtime';
+interface FileItem {
+    file: File;
+    id: string;
+}
+export declare class EdsInputFile {
+    /** 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;
+    /** Button label text. Defaults to "Choose Files" (or "Choose File" if not multiple). */
+    buttonLabel?: 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[];
+    private fileInputRef?;
+    private handleButtonClick;
+    private handleFileSelect;
+    private handleRemoveFile;
+    private emitFileChange;
+    private formatFileSize;
+    private getFileIcon;
+    render(): any;
+}
+export {};

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

@@ -1,3 +1,4 @@
+import { IconName } from '../../utils/icons';
 /**
  * `EdsLink` is a versatile link component offering different styles and behaviors.
  *
@@ -16,13 +17,13 @@ export declare class EdsLink {
     label?: string;
     /**
      * The visual style intent of the link.
-     * Options: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'.
+     * Options: 'primary', 'secondary', 'secondaryInverse', 'ghost', 'strong', 'weak', 'inverse', 'underline', 'underlineInverse', 'brand', 'brandInverse', 'cta', 'cta-brand'.
      */
-    intent?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline' | 'blueish';
+    intent?: 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline' | 'underlineInverse' | 'brand' | 'brandInverse' | 'cta' | 'cta-brand';
     /**
      * The icon name to be displayed alongside the label.
      */
-    icon?: string;
+    icon?: IconName;
     /**
      * The icon position to be displayed alongside the label - left or right.
      */
@@ -36,6 +37,11 @@ export declare class EdsLink {
      * The size of the link. Options are 'small' or 'large'.
      */
     size: 'small' | 'large';
+    /**
+     * A boolean to determine if the link should have a pill shape (rounded-full).
+     * Default is false.
+     */
+    pill: boolean;
     /**
      * Indicates whether the link points to an external URL.
      * Defaults to false.

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

@@ -29,10 +29,10 @@ export declare class EdsLogo {
      * */
     orientation: 'horizontal' | 'vertical';
     /**
-     * The type of the logo.
-     * `'color' | 'black' | 'color-white' | 'white'`
+     * The visual variant of the logo.
+     * `'positive'` for dark logo on light backgrounds, `'negative'` for light logo on dark backgrounds.
      */
-    type: 'color' | 'black' | 'color-white' | 'white' | 'no-bg';
+    variant: 'positive' | 'negative';
     label: string;
     /**
      * Reference to the host element of this component.

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

@@ -1,25 +1,7 @@
 declare const _default: {
     title: string;
     component: string;
-    argTypes: {
-        href: {
-            control: string;
-            defaultValue: string;
-            description: string;
-        };
-        orientation: {
-            control: string;
-            options: string[];
-            defaultValue: string;
-            description: string;
-        };
-        type: {
-            control: string;
-            options: string[];
-            defaultValue: string;
-            description: string;
-        };
-    };
+    argTypes: {};
 };
 export default _default;
 export declare const Default: any;

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

@@ -15,9 +15,9 @@ export declare class EdsModal {
     heading: string;
     /**
      * The number of lines to truncate the title to.
-     * Default is 3 lines.
+     * Set to 0 or undefined to disable truncation.
      */
-    truncate: 1 | 2 | 3 | 4;
+    truncate: 0 | 1 | 2 | 3 | 4;
     /**
      * Specifies the position of the modal.
      *
@@ -29,6 +29,13 @@ export declare class EdsModal {
      * - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
      */
     position: 'middle' | 'top' | 'bottom';
+    /**
+     * Size of the modal.
+     * - `"small"`: 500px max width
+     * - `"medium"` (default): 700px max width
+     * - `"large"`: 900px max width
+     */
+    size: 'small' | 'medium' | 'large';
     /**
      * Whether to use the inverse header style
      * (light text on strong background) instead of the default.
@@ -42,7 +49,9 @@ export declare class EdsModal {
      * Reference to the host element.
      */
     el: HTMLElement;
+    private previousActiveElement;
     private getTruncateClass;
+    private getSizeClass;
     /**
      * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
      *
@@ -50,6 +59,9 @@ export declare class EdsModal {
      * @returns {string} The concatenated CSS classes for modal positioning.
      */
     private getModalPositionClasses;
+    private trapFocus;
+    private lockBodyScroll;
+    private unlockBodyScroll;
     /**
      * Opens the modal.
      */
@@ -71,7 +83,7 @@ export declare class EdsModal {
      */
     handleGlobalClose(): void;
     /**
-     * Closes the modal when the Escape key is pressed.
+     * Closes the modal when the Escape key is pressed and handles focus trapping on Tab.
      */
     handleKeyDown(event: KeyboardEvent): void;
     render(): any;

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

@@ -6,14 +6,23 @@ export declare class EdsNps {
     leftLabel: string;
     /** Label displayed under the max value. */
     rightLabel: string;
-    /** Currently selected NPS value (null means none selected yet). */
+    /** Current selected NPS value (controlled from parent). */
     selectedValue: number;
-    /** Event emitted when the NPS value changes. */
+    /** Internal state to track the current NPS value. */
+    internalValue: number;
     nps: EventEmitter<number>;
     el: HTMLElement;
     private min;
     private max;
     private btnRefs;
+    /**
+     * Watch for changes to the selectedValue prop and sync internal state.
+     */
+    handleSelectedValueChange(newValue: number): void;
+    /**
+     * Initialize internal value from prop on component load.
+     */
+    componentWillLoad(): void;
     private onSelect;
     private handleKeyNav;
     /** Move visual highlight & roving tabindex; optionally commit selection */

package/dist/types/components/eds-progress-bar/eds-progress-bar.d.ts

@@ -1,8 +1,19 @@
 export declare class EdsProgressBar {
     /** The progress value (0-100). */
     value: number;
-    /** Whether to render with rounded corners. */
-    rounded: boolean;
+    showLabel: boolean;
+    /**
+     * Visual variant for the progress bar.
+     * - "default": Standard progress bar with border and centered text
+     * - "brand": EBRAINS branded progress bar with gradient, glow, and top text
+     */
+    variant: 'default' | 'brand';
+    /**
+     * Horizontal padding for the label container (CSS value).
+     * Examples: "3rem", "48px", "2rem"
+     * Default: "3rem"
+     */
+    labelPaddingX: string;
     /**
      * Method to update the progress value externally.
      * @param newValue The new progress value (0-100).

package/dist/types/components/eds-progress-bar/eds-progress-bar.stories.d.ts

@@ -10,12 +10,25 @@ declare const _default: {
             };
             description: string;
         };
-        rounded: {
+        variant: {
             control: string;
+            options: string[];
+            description: string;
+        };
+        showLabel: {
+            control: string;
+            description: string;
+        };
+        labelPaddingX: {
+            control: string;
+            description: string;
         };
     };
     args: {
         value: number;
+        variant: string;
+        showLabel: boolean;
+        labelPaddingX: string;
     };
 };
 export default _default;
@@ -25,3 +38,29 @@ export declare const Default: {
         value: number;
     };
 };
+export declare const DefaultEmpty: {
+    render: () => string;
+};
+export declare const DefaultComplete: {
+    render: () => string;
+};
+export declare const Brand: {
+    render: (args: any) => string;
+    args: {
+        value: number;
+        showLabel: boolean;
+    };
+};
+export declare const BrandWithLabel: {
+    render: (args: any) => string;
+    args: {
+        value: number;
+        labelPaddingX: string;
+    };
+};
+export declare const BrandComplete: {
+    render: () => string;
+};
+export declare const Comparison: {
+    render: () => string;
+};