@ebrains/components 2.4.1 → 3.1.0

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

@@ -0,0 +1,36 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        label: {
+            control: string;
+            description: string;
+        };
+        placeholder: {
+            control: string;
+            description: string;
+        };
+        value: {
+            control: string;
+            description: string;
+        };
+        disabled: {
+            control: string;
+            description: string;
+        };
+        required: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        label: string;
+        placeholder: string;
+        disabled: boolean;
+        required: boolean;
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => 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-field/eds-input-field.stories.d.ts

@@ -2,103 +2,162 @@ declare const _default: {
     title: string;
     component: string;
     argTypes: {
-        name: {
+        type: {
             control: string;
+            options: string[];
             description: string;
+            table: {
+                category: string;
+            };
         };
-        inputId: {
+        name: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        placeholder: {
+        label: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        disabled: {
+        placeholder: {
             control: string;
             description: string;
-        };
-        type: {
-            control: string;
-            options: string[];
-            description: string;
+            table: {
+                category: string;
+            };
         };
         required: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        label: {
-            control: string;
-            description: string;
-        };
-        hint: {
+        disabled: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        icon: {
+        error: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        link: {
+        errorMessage: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        min: {
+        checked: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
+            if: {
+                arg: string;
+                eq: string;
+            };
         };
-        max: {
+        hint: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        step: {
+        message: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        message: {
-            control: string;
+        icon: {
+            control: {
+                type: string;
+            };
+            options: string[];
             description: string;
+            table: {
+                category: string;
+            };
         };
-        error: {
+        link: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        checked: {
+        maxLength: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        errorMessage: {
+        min: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        value: {
+        max: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
-        maxLength: {
+        step: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
         };
         options: {
             control: string;
             description: string;
+            table: {
+                category: string;
+            };
+        };
+    };
+    args: {
+        name: string;
+        placeholder: string;
+        type: string;
+        required: boolean;
+        label: string;
+        hint: string;
+        message: string;
+        icon: string;
+        link: {
+            url: string;
+            label: string;
         };
     };
 };
 export default _default;
-export declare const BasicTextInput: any;
-export declare const PasswordInputWithHint: any;
-export declare const TextInputWithError: any;
+export declare const Default: any;
 export declare const CheckboxGroup: any;
 export declare const RadioButtonGroup: any;
 export declare const SelectDropdown: any;
 export declare const FileUpload: any;
-export declare const InputWithIconAndLink: any;
-export declare const NumberInputWithMaxLength: any;
-export declare const DisabledInput: any;
-export declare const InputWithMessage: any;
-export declare const InputWithMaxLength: any;
-export declare const InputWithValue: any;
-export declare const CheckboxSingle: any;
-export declare const RadioButtonSingle: any;
-export declare const InputWithCustomIcon: any;
+export declare const Dropzone: any;
+export declare const NumberInput: any;
+export declare const RangeSlider: 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-link/eds-link.stories.d.ts

@@ -12,7 +12,10 @@ declare const _default: {
             description: string;
         };
         icon: {
-            control: string;
+            control: {
+                type: string;
+            };
+            options: string[];
             description: string;
         };
         iconSmall: {
@@ -24,6 +27,10 @@ declare const _default: {
             options: string[];
             description: string;
         };
+        pill: {
+            control: string;
+            description: string;
+        };
         external: {
             control: string;
             description: string;
@@ -40,10 +47,6 @@ declare const _default: {
             control: string;
             description: string;
         };
-        ariaLabel: {
-            control: string;
-            description: string;
-        };
         download: {
             control: string;
             description: string;
@@ -55,11 +58,11 @@ declare const _default: {
         size: string;
         icon: string;
         iconSmall: boolean;
+        pill: boolean;
         external: boolean;
         current: boolean;
         disabled: boolean;
         url: string;
-        ariaLabel: string;
         download: boolean;
     };
 };

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

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

@@ -1,17 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName } from '../../utils/icons';
 export declare class EdsRating {
     /**
      * The type of icon to display. Can be "stars" or "thumbs".
      */
-    ratingType: 'star' | 'thumbs-up' | 'thumbs-down';
+    ratingType: IconName;
     /**
      * Number of stars in the rating system.
      */
     ratingCount: number;
     /**
-     * Current selected rating value.
+     * Current selected rating value (controlled from parent).
      */
     selectedRating: number;
+    /**
+     * Internal state to track the current rating.
+     */
+    internalRating: number;
     /**
      * Event emitted when the rating is changed.
      */
@@ -21,6 +26,14 @@ export declare class EdsRating {
      */
     el: HTMLElement;
     private buttonRefs;
+    /**
+     * Watch for changes to the selectedRating prop and sync internal state.
+     */
+    handleSelectedRatingChange(newValue: number): void;
+    /**
+     * Initialize internal rating from prop on component load.
+     */
+    componentWillLoad(): void;
     /**
      * Lifecycle method that runs when the component has fully loaded.
      * It emits a custom event for each `eds-button` element contained within the breadcrumb.

package/dist/types/components/eds-social-networks/eds-social-networks.d.ts

@@ -7,6 +7,13 @@ export declare class EdsSocialNetworks {
      * Social Network custom title to display
      */
     heading: string;
+    /**
+     * Controls the visual variant of the social networks.
+     * - 'default': Light background with dark text
+     * - 'inverse': Dark/black background with white text
+     * @type {'default' | 'inverse'}
+     */
+    variant: 'default' | 'inverse';
     /**
      * Array of social network objects, each containing label, URL, and icon.
      * These are used to render the social network links.

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

@@ -10,10 +10,18 @@ export declare class EdsSteps {
     type: 'static' | 'linear';
     /** Orientation (applies to linear mode visuals). */
     orientation: 'vertical' | 'horizontal';
+    /**
+     * Visual theme for the steps component.
+     * - 'default': Grey step circles with white text
+     * - 'brand': Brand green step circles with black text (CTA style)
+     */
+    theme: 'default' | 'brand';
     /** Labels */
     nextLabel: string;
     backLabel: string;
     finishLabel: string;
+    /** Show or hide the finish button on the last step */
+    showFinish: boolean;
     /**
      * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
      * @attr disable-next