@ebrains/components 0.9.3-beta → 1.0.0

package/dist/types/components.d.ts

@@ -7,11 +7,11 @@
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 import { Card } from "./shared-ui/eds-card-section/eds-card-section";
-import { Step } from "./components/eds-steps/eds-steps";
+import { Step } from "./shared-ui/eds-steps/eds-steps";
 import { Step as Step1 } from "./shared-ui/eds-steps-v2/eds-steps-v2";
 export { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 export { Card } from "./shared-ui/eds-card-section/eds-card-section";
-export { Step } from "./components/eds-steps/eds-steps";
+export { Step } from "./shared-ui/eds-steps/eds-steps";
 export { Step as Step1 } from "./shared-ui/eds-steps-v2/eds-steps-v2";
 export namespace Components {
     interface ColorPrimaryPalette {
@@ -118,20 +118,19 @@ export namespace Components {
     interface EdsAppRoot {
     }
     /**
-     * `EdsAvatar` is a versatile component for displaying user profile representations, including initials or profile pictures.
+     * `EdsAvatar` is a component for displaying user profile representations, including initials or profile pictures.
      * This component is customizable to adapt to various styles and use cases.
      * Key features include:
      * - Display user initials generated from `firstName` and `lastName` or use custom initials.
      * - Option to display a profile picture if a URL is provided.
      * - Customizable background color, including gradient options.
      * - Configurable shape (rounded or square) and font strength for initials.
-     * The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
      */
     interface EdsAvatar {
         /**
-          * Background color variant for the avatar, which can apply specific gradient or background colors.
+          * Background color: 'grey' for grey background, 'black' for black background with accent text.
          */
-        "color"?: string;
+        "color": 'grey' | 'black';
         /**
           * First name of the user for generating initials.
          */
@@ -151,16 +150,12 @@ export namespace Components {
     }
     /**
      * `EdsBlockBreak` is a divider component designed to render a horizontal line that separates content visually.
-     * This component includes customizable styling options to adapt to various layouts and design needs.
-     * Key features include:
-     * - Configurable additional classes for styling through the `extraClass` prop.
-     * - Suitable for dividing sections or breaking content blocks within a page.
      */
     interface EdsBlockBreak {
         /**
-          * Additional classes for styling the component.
+          * Whether to use the inverse break style
          */
-        "extraClass": string;
+        "inverse": boolean;
     }
     /**
      * `EdsBreadcrumb` is a navigational component that displays the user's current location within a hierarchy of pages.
@@ -245,10 +240,6 @@ export namespace Components {
         "triggerClick"?: () => void;
     }
     interface EdsCardDesc {
-        /**
-          * A custom CSS class to style the description text. Default is 'f-ui-03-light'.
-         */
-        "descClass": string;
         /**
           * The description text to be displayed inside the card.
          */
@@ -468,20 +459,6 @@ export namespace Components {
          */
         "withHover": boolean;
     }
-    interface EdsCardWrapper {
-        /**
-          * A boolean that determines whether the card should be displayed with a smaller height. If true, the card will use the 'tiny' height class.
-         */
-        "tiny": boolean;
-        /**
-          * A boolean that determines whether the card should have a background color. If true, the card will have a background, otherwise it will not.
-         */
-        "withBg": boolean;
-        /**
-          * A boolean that determines whether the card should display a hover effect. If true, the card will have a shadow effect and change its cursor on hover.
-         */
-        "withHover": boolean;
-    }
     /**
      * A component that displays a code block with syntax highlighting.
      * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
@@ -584,6 +561,10 @@ export namespace Components {
           * Number of stars in the rating system.
          */
         "description": string;
+        /**
+          * The HTML heading level to use for the label. Valid values: 'h1' - 'h5'.
+         */
+        "headingLevel": 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
         /**
           * Number of stars in the rating system.
          */
@@ -610,6 +591,16 @@ export namespace Components {
      * across the EBRAINS platform, with options for social links and a "Back to top" button.
      */
     interface EdsFooter {
+        /**
+          * Controls the display of the "Back to Top" aria label text.
+          * @type {string}
+         */
+        "backToTopAriaLabel": string;
+        /**
+          * Controls the display of the "Cookies preferences" text.
+          * @type {string}
+         */
+        "cookiesPreferences": string;
         "enableCookiesSettings": boolean;
         /**
           * Controls the display of the "Back to Top" button. When true, the button appears in the footer.
@@ -659,6 +650,7 @@ export namespace Components {
           * If `true`, includes a submit button in the form.
          */
         "formBtnLabel"?: string;
+        "getData": () => Promise<FormData>;
         /**
           * The init data the form will attempt to populate in the provided fields.
          */
@@ -724,6 +716,29 @@ export namespace Components {
          */
         "menuLinks": string;
     }
+    interface EdsGauge {
+        /**
+          * Diameter of the pie chart (pixels)
+         */
+        "size": number;
+        /**
+          * Thickness of inner mask as fraction of radius (0.1–0.2). Values outside this range will be clamped.
+         */
+        "thickness": number;
+        /**
+          * Current value
+         */
+        "value": number;
+        /**
+          * Maximum value (gauge end)
+         */
+        "valueMax": number;
+        /**
+          * Minimum value (gauge start)
+         */
+        "valueMin": number;
+        "variant": 'default' | 'dark' | 'strong' | 'black';
+    }
     /**
      * `EdsHeader` is a header component designed for the EBRAINS platform.
      * It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.
@@ -737,13 +752,13 @@ export namespace Components {
      */
     interface EdsHeader {
         /**
-          * URL for the home logo link. This is the default URL that the logo points to.
+          * Header style variant: determines text and background colors. - "default": text-default on bg-dark - "inverse": text-default on bg-inverse - "strong": text-inverse on bg-strongest
          */
-        "homeUrl": string;
+        "headerVariant": 'default' | 'inverse' | 'strong';
         /**
-          * Determines if the header is rendered in inverse style. When true, the header applies styles suitable for a dark background.
+          * URL for the home logo link. This is the default URL that the logo points to.
          */
-        "inverseHeader": boolean;
+        "homeUrl": string;
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
@@ -1084,6 +1099,10 @@ export namespace Components {
           * The error message displayed when validation fails.
          */
         "errorMessage"?: string;
+        /**
+          * Control whether the component emits value events (`oninput` / `onchange`). Defaults to `true`. Password fields are always suppressed for security.
+         */
+        "exposeValueEvents": boolean;
         /**
           * A short hint displayed alongside the input field.
          */
@@ -1242,49 +1261,41 @@ export namespace Components {
     }
     interface EdsInputSelect {
         /**
-          * If true, the select input will be disabled.
+          * Disable the select
          */
         "disabled": boolean;
         /**
-          * If true, the select input is in an error state.
+          * Mark field as invalid
          */
         "error": boolean;
         /**
-          * If true, indicates that there is an associated message (help or error).
+          * Show associated message (help or error)
          */
         "hasMessage": boolean;
         /**
-          * Optional id for the input. If not provided, the component uses the `name` property.
+          * Optional id for the select element; defaults to name
          */
         "inputId"?: string;
         /**
-          * For static options, this property defines the key used to retrieve the display label.
-         */
-        "labelKey": string;
-        /**
-          * The name attribute of the select input. Also used as the fallback id.
+          * Name attribute of the select
          */
         "name": string;
         /**
-          * Options can be provided in two formats:  1. Dynamic fetch configuration:    [      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }    ]  2. Static options:    [      { value: "react", label: "React" },      { value: "angular", label: "Angular" },      { value: "vue", label: "Vue.js" },      // etc.    ]
+          * List of static options: { value, label }
          */
-        "options": { [key: string]: any }[];
+        "options": Array<{ value: string | number; label: string }>;
         /**
-          * Placeholder text (not used in the native select, but can be used for custom implementations).
+          * Placeholder shown as a disabled hidden option
          */
         "placeholder"?: string;
         /**
-          * If true, the select input is marked as required.
+          * Mark field as required
          */
         "required": boolean;
         /**
-          * The currently selected value.
+          * Currently selected value
          */
         "value"?: string | number;
-        /**
-          * For static options, this property defines the key used to retrieve the option value.
-         */
-        "valueKey": string;
     }
     /**
      * `EdsLink` is a versatile link component offering different styles and behaviors.
@@ -1358,20 +1369,6 @@ export namespace Components {
          */
         "url"?: string;
     }
-    interface EdsLogin {
-        /**
-          * The Keycloak Client ID. The client ID represents the client application that Keycloak protects. It's configured in the Keycloak admin console and used to identify the app requesting authentication. Example: `my-client-app`
-         */
-        "keycloakClientId": string;
-        /**
-          * The Keycloak Realm. A realm in Keycloak is a space where you manage a set of users, roles, groups, and credentials.
-         */
-        "keycloakRealm": string;
-        /**
-          * The URL of the Keycloak server. This is the base URL where your Keycloak instance is hosted.
-         */
-        "keycloakUrl": string;
-    }
     /**
      * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
      * Key Features:
@@ -1503,7 +1500,37 @@ export namespace Components {
          */
         "url": string;
     }
+    interface EdsPie {
+        /**
+          * Color scheme: semantic, brand, or mono
+         */
+        "colorScheme": 'semantic' | 'mono';
+        /**
+          * Show raw value or percentage
+         */
+        "display": DisplayMode;
+        /**
+          * Show legend
+         */
+        "legend": boolean;
+        /**
+          * Diameter in pixels
+         */
+        "size": number;
+        /**
+          * Array or JSON string of slices
+         */
+        "slices": PieSlice[] | string;
+        /**
+          * Inner-radius fraction (always 0.5-1)
+         */
+        "thickness": number;
+    }
     interface EdsProgressBar {
+        /**
+          * Whether to render with rounded corners.
+         */
+        "rounded": boolean;
         /**
           * Method to update the progress value externally.
           * @param newValue The new progress value (0-100).
@@ -1524,14 +1551,6 @@ export namespace Components {
          */
         "ratingType": 'star' | 'thumbs-up' | 'thumbs-down';
     }
-    /**
-     * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
-     * Key Features:
-     * - Allows dynamic selection of HTML tag (`div` or `section`) for the wrapper.
-     * - Configurable section title and heading level for accessibility and hierarchy.
-     * - Passes section title to an internal heading component (`eds-section-heading`).
-     * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
-     */
     interface EdsSectionCore {
         /**
           * The heading level for the section title, such as 'h1', 'h2', etc. Default is 'h2'.
@@ -1758,9 +1777,9 @@ export namespace Components {
     }
     interface EdsToast {
         /**
-          * Determines the duration before the toast auto-dismisses (in milliseconds). Defaults to 5000ms (5 seconds).
+          * Determines the duration before the toast auto-dismisses (in milliseconds). If set, the toast will auto-dismiss and show a close button. If not set (or set to 0), it will persist without a close button.
          */
-        "duration": number;
+        "duration"?: number;
         /**
           * The visual intent or style of the toast, indicating the toast type.
          */
@@ -1780,10 +1799,6 @@ export namespace Components {
           * The content of the tooltip.
          */
         "content"?: string;
-        /**
-          * The preferred position of the tooltip (`above`, `below`, `left`, `right`).
-         */
-        "position": 'above' | 'below';
     }
     interface EdsTrl {
         /**
@@ -1885,10 +1900,6 @@ export interface EdsInputSelectCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsInputSelectElement;
 }
-export interface EdsLoginCustomEvent<T> extends CustomEvent<T> {
-    detail: T;
-    target: HTMLEdsLoginElement;
-}
 export interface EdsMatomoNoticeCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsMatomoNoticeElement;
@@ -2016,14 +2027,13 @@ declare global {
         new (): HTMLEdsAppRootElement;
     };
     /**
-     * `EdsAvatar` is a versatile component for displaying user profile representations, including initials or profile pictures.
+     * `EdsAvatar` is a component for displaying user profile representations, including initials or profile pictures.
      * This component is customizable to adapt to various styles and use cases.
      * Key features include:
      * - Display user initials generated from `firstName` and `lastName` or use custom initials.
      * - Option to display a profile picture if a URL is provided.
      * - Customizable background color, including gradient options.
      * - Configurable shape (rounded or square) and font strength for initials.
-     * The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
      */
     interface HTMLEdsAvatarElement extends Components.EdsAvatar, HTMLStencilElement {
     }
@@ -2033,10 +2043,6 @@ declare global {
     };
     /**
      * `EdsBlockBreak` is a divider component designed to render a horizontal line that separates content visually.
-     * This component includes customizable styling options to adapt to various layouts and design needs.
-     * Key features include:
-     * - Configurable additional classes for styling through the `extraClass` prop.
-     * - Suitable for dividing sections or breaking content blocks within a page.
      */
     interface HTMLEdsBlockBreakElement extends Components.EdsBlockBreak, HTMLStencilElement {
     }
@@ -2137,12 +2143,6 @@ declare global {
         prototype: HTMLEdsCardToolElement;
         new (): HTMLEdsCardToolElement;
     };
-    interface HTMLEdsCardWrapperElement extends Components.EdsCardWrapper, HTMLStencilElement {
-    }
-    var HTMLEdsCardWrapperElement: {
-        prototype: HTMLEdsCardWrapperElement;
-        new (): HTMLEdsCardWrapperElement;
-    };
     /**
      * A component that displays a code block with syntax highlighting.
      * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
@@ -2242,7 +2242,6 @@ declare global {
     value?: any;
     message?: string;
     success?: boolean;
-    data: any;
   };
     }
     /**
@@ -2302,6 +2301,12 @@ declare global {
         prototype: HTMLEdsFullscreenMenuElement;
         new (): HTMLEdsFullscreenMenuElement;
     };
+    interface HTMLEdsGaugeElement extends Components.EdsGauge, HTMLStencilElement {
+    }
+    var HTMLEdsGaugeElement: {
+        prototype: HTMLEdsGaugeElement;
+        new (): HTMLEdsGaugeElement;
+    };
     interface HTMLEdsHeaderElementEventMap {
         "toggleheadermenu": boolean;
     }
@@ -2654,7 +2659,7 @@ declare global {
         new (): HTMLEdsInputSearchElement;
     };
     interface HTMLEdsInputSelectElementEventMap {
-        "changeEvent": string | number;
+        "edsselect": string | number;
     }
     interface HTMLEdsInputSelectElement extends Components.EdsInputSelect, HTMLStencilElement {
         addEventListener<K extends keyof HTMLEdsInputSelectElementEventMap>(type: K, listener: (this: HTMLEdsInputSelectElement, ev: EdsInputSelectCustomEvent<HTMLEdsInputSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2685,27 +2690,6 @@ declare global {
         prototype: HTMLEdsLinkElement;
         new (): HTMLEdsLinkElement;
     };
-    interface HTMLEdsLoginElementEventMap {
-        "keycloak": { init: boolean };
-        "auth": {
-    authenticated: boolean;
-    user: any;
-  };
-    }
-    interface HTMLEdsLoginElement extends Components.EdsLogin, HTMLStencilElement {
-        addEventListener<K extends keyof HTMLEdsLoginElementEventMap>(type: K, listener: (this: HTMLEdsLoginElement, ev: EdsLoginCustomEvent<HTMLEdsLoginElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
-        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLEdsLoginElementEventMap>(type: K, listener: (this: HTMLEdsLoginElement, ev: EdsLoginCustomEvent<HTMLEdsLoginElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
-        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
-    }
-    var HTMLEdsLoginElement: {
-        prototype: HTMLEdsLoginElement;
-        new (): HTMLEdsLoginElement;
-    };
     /**
      * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
      * Key Features:
@@ -2770,6 +2754,12 @@ declare global {
         prototype: HTMLEdsPaginationElement;
         new (): HTMLEdsPaginationElement;
     };
+    interface HTMLEdsPieElement extends Components.EdsPie, HTMLStencilElement {
+    }
+    var HTMLEdsPieElement: {
+        prototype: HTMLEdsPieElement;
+        new (): HTMLEdsPieElement;
+    };
     interface HTMLEdsProgressBarElement extends Components.EdsProgressBar, HTMLStencilElement {
     }
     var HTMLEdsProgressBarElement: {
@@ -2793,14 +2783,6 @@ declare global {
         prototype: HTMLEdsRatingElement;
         new (): HTMLEdsRatingElement;
     };
-    /**
-     * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
-     * Key Features:
-     * - Allows dynamic selection of HTML tag (`div` or `section`) for the wrapper.
-     * - Configurable section title and heading level for accessibility and hierarchy.
-     * - Passes section title to an internal heading component (`eds-section-heading`).
-     * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
-     */
     interface HTMLEdsSectionCoreElement extends Components.EdsSectionCore, HTMLStencilElement {
     }
     var HTMLEdsSectionCoreElement: {
@@ -2881,7 +2863,7 @@ declare global {
         new (): HTMLEdsStepsV2Element;
     };
     interface HTMLEdsSwitchElementEventMap {
-        "toggle": boolean;
+        "uiswitch": boolean;
     }
     interface HTMLEdsSwitchElement extends Components.EdsSwitch, HTMLStencilElement {
         addEventListener<K extends keyof HTMLEdsSwitchElementEventMap>(type: K, listener: (this: HTMLEdsSwitchElement, ev: EdsSwitchCustomEvent<HTMLEdsSwitchElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -3113,7 +3095,6 @@ declare global {
         "eds-card-tags": HTMLEdsCardTagsElement;
         "eds-card-title": HTMLEdsCardTitleElement;
         "eds-card-tool": HTMLEdsCardToolElement;
-        "eds-card-wrapper": HTMLEdsCardWrapperElement;
         "eds-code-block": HTMLEdsCodeBlockElement;
         "eds-cookies-preference": HTMLEdsCookiesPreferenceElement;
         "eds-dropdown": HTMLEdsDropdownElement;
@@ -3122,6 +3103,7 @@ declare global {
         "eds-form": HTMLEdsFormElement;
         "eds-frame": HTMLEdsFrameElement;
         "eds-fullscreen-menu": HTMLEdsFullscreenMenuElement;
+        "eds-gauge": HTMLEdsGaugeElement;
         "eds-header": HTMLEdsHeaderElement;
         "eds-icon-arrow-diagonal": HTMLEdsIconArrowDiagonalElement;
         "eds-icon-arrow-right": HTMLEdsIconArrowRightElement;
@@ -3169,11 +3151,11 @@ declare global {
         "eds-input-search": HTMLEdsInputSearchElement;
         "eds-input-select": HTMLEdsInputSelectElement;
         "eds-link": HTMLEdsLinkElement;
-        "eds-login": HTMLEdsLoginElement;
         "eds-logo": HTMLEdsLogoElement;
         "eds-matomo-notice": HTMLEdsMatomoNoticeElement;
         "eds-modal": HTMLEdsModalElement;
         "eds-pagination": HTMLEdsPaginationElement;
+        "eds-pie": HTMLEdsPieElement;
         "eds-progress-bar": HTMLEdsProgressBarElement;
         "eds-rating": HTMLEdsRatingElement;
         "eds-section-core": HTMLEdsSectionCoreElement;
@@ -3320,20 +3302,19 @@ declare namespace LocalJSX {
     interface EdsAppRoot {
     }
     /**
-     * `EdsAvatar` is a versatile component for displaying user profile representations, including initials or profile pictures.
+     * `EdsAvatar` is a component for displaying user profile representations, including initials or profile pictures.
      * This component is customizable to adapt to various styles and use cases.
      * Key features include:
      * - Display user initials generated from `firstName` and `lastName` or use custom initials.
      * - Option to display a profile picture if a URL is provided.
      * - Customizable background color, including gradient options.
      * - Configurable shape (rounded or square) and font strength for initials.
-     * The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
      */
     interface EdsAvatar {
         /**
-          * Background color variant for the avatar, which can apply specific gradient or background colors.
+          * Background color: 'grey' for grey background, 'black' for black background with accent text.
          */
-        "color"?: string;
+        "color"?: 'grey' | 'black';
         /**
           * First name of the user for generating initials.
          */
@@ -3353,16 +3334,12 @@ declare namespace LocalJSX {
     }
     /**
      * `EdsBlockBreak` is a divider component designed to render a horizontal line that separates content visually.
-     * This component includes customizable styling options to adapt to various layouts and design needs.
-     * Key features include:
-     * - Configurable additional classes for styling through the `extraClass` prop.
-     * - Suitable for dividing sections or breaking content blocks within a page.
      */
     interface EdsBlockBreak {
         /**
-          * Additional classes for styling the component.
+          * Whether to use the inverse break style
          */
-        "extraClass"?: string;
+        "inverse"?: boolean;
     }
     /**
      * `EdsBreadcrumb` is a navigational component that displays the user's current location within a hierarchy of pages.
@@ -3447,10 +3424,6 @@ declare namespace LocalJSX {
         "triggerClick"?: () => void;
     }
     interface EdsCardDesc {
-        /**
-          * A custom CSS class to style the description text. Default is 'f-ui-03-light'.
-         */
-        "descClass"?: string;
         /**
           * The description text to be displayed inside the card.
          */
@@ -3670,20 +3643,6 @@ declare namespace LocalJSX {
          */
         "withHover"?: boolean;
     }
-    interface EdsCardWrapper {
-        /**
-          * A boolean that determines whether the card should be displayed with a smaller height. If true, the card will use the 'tiny' height class.
-         */
-        "tiny"?: boolean;
-        /**
-          * A boolean that determines whether the card should have a background color. If true, the card will have a background, otherwise it will not.
-         */
-        "withBg"?: boolean;
-        /**
-          * A boolean that determines whether the card should display a hover effect. If true, the card will have a shadow effect and change its cursor on hover.
-         */
-        "withHover"?: boolean;
-    }
     /**
      * A component that displays a code block with syntax highlighting.
      * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
@@ -3790,6 +3749,10 @@ declare namespace LocalJSX {
           * Number of stars in the rating system.
          */
         "description"?: string;
+        /**
+          * The HTML heading level to use for the label. Valid values: 'h1' - 'h5'.
+         */
+        "headingLevel"?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
         /**
           * Number of stars in the rating system.
          */
@@ -3820,6 +3783,16 @@ declare namespace LocalJSX {
      * across the EBRAINS platform, with options for social links and a "Back to top" button.
      */
     interface EdsFooter {
+        /**
+          * Controls the display of the "Back to Top" aria label text.
+          * @type {string}
+         */
+        "backToTopAriaLabel"?: string;
+        /**
+          * Controls the display of the "Cookies preferences" text.
+          * @type {string}
+         */
+        "cookiesPreferences"?: string;
         "enableCookiesSettings"?: boolean;
         /**
           * Controls the display of the "Back to Top" button. When true, the button appears in the footer.
@@ -3885,7 +3858,6 @@ declare namespace LocalJSX {
     value?: any;
     message?: string;
     success?: boolean;
-    data: any;
   }>) => void;
         /**
           * If `true`, includes the current form URL in the submission data.
@@ -3948,6 +3920,29 @@ declare namespace LocalJSX {
          */
         "onMenuClose"?: (event: EdsFullscreenMenuCustomEvent<void>) => void;
     }
+    interface EdsGauge {
+        /**
+          * Diameter of the pie chart (pixels)
+         */
+        "size"?: number;
+        /**
+          * Thickness of inner mask as fraction of radius (0.1–0.2). Values outside this range will be clamped.
+         */
+        "thickness"?: number;
+        /**
+          * Current value
+         */
+        "value"?: number;
+        /**
+          * Maximum value (gauge end)
+         */
+        "valueMax"?: number;
+        /**
+          * Minimum value (gauge start)
+         */
+        "valueMin"?: number;
+        "variant"?: 'default' | 'dark' | 'strong' | 'black';
+    }
     /**
      * `EdsHeader` is a header component designed for the EBRAINS platform.
      * It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.
@@ -3961,13 +3956,13 @@ declare namespace LocalJSX {
      */
     interface EdsHeader {
         /**
-          * URL for the home logo link. This is the default URL that the logo points to.
+          * Header style variant: determines text and background colors. - "default": text-default on bg-dark - "inverse": text-default on bg-inverse - "strong": text-inverse on bg-strongest
          */
-        "homeUrl"?: string;
+        "headerVariant"?: 'default' | 'inverse' | 'strong';
         /**
-          * Determines if the header is rendered in inverse style. When true, the header applies styles suitable for a dark background.
+          * URL for the home logo link. This is the default URL that the logo points to.
          */
-        "inverseHeader"?: boolean;
+        "homeUrl"?: string;
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
@@ -4312,6 +4307,10 @@ declare namespace LocalJSX {
           * The error message displayed when validation fails.
          */
         "errorMessage"?: string;
+        /**
+          * Control whether the component emits value events (`oninput` / `onchange`). Defaults to `true`. Password fields are always suppressed for security.
+         */
+        "exposeValueEvents"?: boolean;
         /**
           * A short hint displayed alongside the input field.
          */
@@ -4476,54 +4475,45 @@ declare namespace LocalJSX {
     }
     interface EdsInputSelect {
         /**
-          * If true, the select input will be disabled.
+          * Disable the select
          */
         "disabled"?: boolean;
         /**
-          * If true, the select input is in an error state.
+          * Mark field as invalid
          */
         "error"?: boolean;
         /**
-          * If true, indicates that there is an associated message (help or error).
+          * Show associated message (help or error)
          */
         "hasMessage"?: boolean;
         /**
-          * Optional id for the input. If not provided, the component uses the `name` property.
+          * Optional id for the select element; defaults to name
          */
         "inputId"?: string;
         /**
-          * For static options, this property defines the key used to retrieve the display label.
-         */
-        "labelKey"?: string;
-        /**
-          * The name attribute of the select input. Also used as the fallback id.
+          * Name attribute of the select
          */
         "name": string;
         /**
-          * Emitted when the value of the select input changes.
-          * @event changeEvent
+          * Emitted when selection changes
          */
-        "onChangeEvent"?: (event: EdsInputSelectCustomEvent<string | number>) => void;
+        "onEdsselect"?: (event: EdsInputSelectCustomEvent<string | number>) => void;
         /**
-          * Options can be provided in two formats:  1. Dynamic fetch configuration:    [      { endpoint: "http://localhost/api/applications", value: "_id", label: "title" }    ]  2. Static options:    [      { value: "react", label: "React" },      { value: "angular", label: "Angular" },      { value: "vue", label: "Vue.js" },      // etc.    ]
+          * List of static options: { value, label }
          */
-        "options"?: { [key: string]: any }[];
+        "options"?: Array<{ value: string | number; label: string }>;
         /**
-          * Placeholder text (not used in the native select, but can be used for custom implementations).
+          * Placeholder shown as a disabled hidden option
          */
         "placeholder"?: string;
         /**
-          * If true, the select input is marked as required.
+          * Mark field as required
          */
         "required"?: boolean;
         /**
-          * The currently selected value.
+          * Currently selected value
          */
         "value"?: string | number;
-        /**
-          * For static options, this property defines the key used to retrieve the option value.
-         */
-        "valueKey"?: string;
     }
     /**
      * `EdsLink` is a versatile link component offering different styles and behaviors.
@@ -4597,31 +4587,6 @@ declare namespace LocalJSX {
          */
         "url"?: string;
     }
-    interface EdsLogin {
-        /**
-          * The Keycloak Client ID. The client ID represents the client application that Keycloak protects. It's configured in the Keycloak admin console and used to identify the app requesting authentication. Example: `my-client-app`
-         */
-        "keycloakClientId"?: string;
-        /**
-          * The Keycloak Realm. A realm in Keycloak is a space where you manage a set of users, roles, groups, and credentials.
-         */
-        "keycloakRealm"?: string;
-        /**
-          * The URL of the Keycloak server. This is the base URL where your Keycloak instance is hosted.
-         */
-        "keycloakUrl"?: string;
-        /**
-          * Event emitted when the authentication status changes. It emits an object {authenticated, user} indicating the new authentication status and the user's information.
-         */
-        "onAuth"?: (event: EdsLoginCustomEvent<{
-    authenticated: boolean;
-    user: any;
-  }>) => void;
-        /**
-          * Event emitted when the initKeycloak status changes.
-         */
-        "onKeycloak"?: (event: EdsLoginCustomEvent<{ init: boolean }>) => void;
-    }
     /**
      * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
      * Key Features:
@@ -4745,7 +4710,37 @@ declare namespace LocalJSX {
          */
         "url"?: string;
     }
+    interface EdsPie {
+        /**
+          * Color scheme: semantic, brand, or mono
+         */
+        "colorScheme"?: 'semantic' | 'mono';
+        /**
+          * Show raw value or percentage
+         */
+        "display"?: DisplayMode;
+        /**
+          * Show legend
+         */
+        "legend"?: boolean;
+        /**
+          * Diameter in pixels
+         */
+        "size"?: number;
+        /**
+          * Array or JSON string of slices
+         */
+        "slices"?: PieSlice[] | string;
+        /**
+          * Inner-radius fraction (always 0.5-1)
+         */
+        "thickness"?: number;
+    }
     interface EdsProgressBar {
+        /**
+          * Whether to render with rounded corners.
+         */
+        "rounded"?: boolean;
         /**
           * The progress value (0-100).
          */
@@ -4765,14 +4760,6 @@ declare namespace LocalJSX {
          */
         "ratingType"?: 'star' | 'thumbs-up' | 'thumbs-down';
     }
-    /**
-     * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
-     * Key Features:
-     * - Allows dynamic selection of HTML tag (`div` or `section`) for the wrapper.
-     * - Configurable section title and heading level for accessibility and hierarchy.
-     * - Passes section title to an internal heading component (`eds-section-heading`).
-     * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
-     */
     interface EdsSectionCore {
         /**
           * The heading level for the section title, such as 'h1', 'h2', etc. Default is 'h2'.
@@ -4919,7 +4906,7 @@ declare namespace LocalJSX {
         /**
           * Emitted when the switch is toggled.
          */
-        "onToggle"?: (event: EdsSwitchCustomEvent<boolean>) => void;
+        "onUiswitch"?: (event: EdsSwitchCustomEvent<boolean>) => void;
     }
     /**
      * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
@@ -5020,7 +5007,7 @@ declare namespace LocalJSX {
     }
     interface EdsToast {
         /**
-          * Determines the duration before the toast auto-dismisses (in milliseconds). Defaults to 5000ms (5 seconds).
+          * Determines the duration before the toast auto-dismisses (in milliseconds). If set, the toast will auto-dismiss and show a close button. If not set (or set to 0), it will persist without a close button.
          */
         "duration"?: number;
         /**
@@ -5042,10 +5029,6 @@ declare namespace LocalJSX {
           * The content of the tooltip.
          */
         "content"?: string;
-        /**
-          * The preferred position of the tooltip (`above`, `below`, `left`, `right`).
-         */
-        "position"?: 'above' | 'below';
     }
     interface EdsTrl {
         /**
@@ -5128,7 +5111,6 @@ declare namespace LocalJSX {
         "eds-card-tags": EdsCardTags;
         "eds-card-title": EdsCardTitle;
         "eds-card-tool": EdsCardTool;
-        "eds-card-wrapper": EdsCardWrapper;
         "eds-code-block": EdsCodeBlock;
         "eds-cookies-preference": EdsCookiesPreference;
         "eds-dropdown": EdsDropdown;
@@ -5137,6 +5119,7 @@ declare namespace LocalJSX {
         "eds-form": EdsForm;
         "eds-frame": EdsFrame;
         "eds-fullscreen-menu": EdsFullscreenMenu;
+        "eds-gauge": EdsGauge;
         "eds-header": EdsHeader;
         "eds-icon-arrow-diagonal": EdsIconArrowDiagonal;
         "eds-icon-arrow-right": EdsIconArrowRight;
@@ -5184,11 +5167,11 @@ declare namespace LocalJSX {
         "eds-input-search": EdsInputSearch;
         "eds-input-select": EdsInputSelect;
         "eds-link": EdsLink;
-        "eds-login": EdsLogin;
         "eds-logo": EdsLogo;
         "eds-matomo-notice": EdsMatomoNotice;
         "eds-modal": EdsModal;
         "eds-pagination": EdsPagination;
+        "eds-pie": EdsPie;
         "eds-progress-bar": EdsProgressBar;
         "eds-rating": EdsRating;
         "eds-section-core": EdsSectionCore;
@@ -5267,22 +5250,17 @@ declare module "@stencil/core" {
             "eds-alert": LocalJSX.EdsAlert & JSXBase.HTMLAttributes<HTMLEdsAlertElement>;
             "eds-app-root": LocalJSX.EdsAppRoot & JSXBase.HTMLAttributes<HTMLEdsAppRootElement>;
             /**
-             * `EdsAvatar` is a versatile component for displaying user profile representations, including initials or profile pictures.
+             * `EdsAvatar` is a component for displaying user profile representations, including initials or profile pictures.
              * This component is customizable to adapt to various styles and use cases.
              * Key features include:
              * - Display user initials generated from `firstName` and `lastName` or use custom initials.
              * - Option to display a profile picture if a URL is provided.
              * - Customizable background color, including gradient options.
              * - Configurable shape (rounded or square) and font strength for initials.
-             * The avatar component offers flexibility for different user profile displays, supporting use cases from contact lists to detailed profile views.
              */
             "eds-avatar": LocalJSX.EdsAvatar & JSXBase.HTMLAttributes<HTMLEdsAvatarElement>;
             /**
              * `EdsBlockBreak` is a divider component designed to render a horizontal line that separates content visually.
-             * This component includes customizable styling options to adapt to various layouts and design needs.
-             * Key features include:
-             * - Configurable additional classes for styling through the `extraClass` prop.
-             * - Suitable for dividing sections or breaking content blocks within a page.
              */
             "eds-block-break": LocalJSX.EdsBlockBreak & JSXBase.HTMLAttributes<HTMLEdsBlockBreakElement>;
             /**
@@ -5333,7 +5311,6 @@ declare module "@stencil/core" {
             "eds-card-tags": LocalJSX.EdsCardTags & JSXBase.HTMLAttributes<HTMLEdsCardTagsElement>;
             "eds-card-title": LocalJSX.EdsCardTitle & JSXBase.HTMLAttributes<HTMLEdsCardTitleElement>;
             "eds-card-tool": LocalJSX.EdsCardTool & JSXBase.HTMLAttributes<HTMLEdsCardToolElement>;
-            "eds-card-wrapper": LocalJSX.EdsCardWrapper & JSXBase.HTMLAttributes<HTMLEdsCardWrapperElement>;
             /**
              * A component that displays a code block with syntax highlighting.
              * Uses Prism.js for syntax highlighting. Supports multiple languages such as JavaScript, HTML, CSS,
@@ -5390,6 +5367,7 @@ declare module "@stencil/core" {
              * - **Footer Integration**: Optionally displays social links and a customizable footer section within the fullscreen menu.
              */
             "eds-fullscreen-menu": LocalJSX.EdsFullscreenMenu & JSXBase.HTMLAttributes<HTMLEdsFullscreenMenuElement>;
+            "eds-gauge": LocalJSX.EdsGauge & JSXBase.HTMLAttributes<HTMLEdsGaugeElement>;
             /**
              * `EdsHeader` is a header component designed for the EBRAINS platform.
              * It provides a customizable and responsive navigation experience, tailored for both desktop and mobile views.
@@ -5491,7 +5469,6 @@ declare module "@stencil/core" {
              * This component is designed for flexible navigation and styling, making it suitable for a range of UI needs.
              */
             "eds-link": LocalJSX.EdsLink & JSXBase.HTMLAttributes<HTMLEdsLinkElement>;
-            "eds-login": LocalJSX.EdsLogin & JSXBase.HTMLAttributes<HTMLEdsLoginElement>;
             /**
              * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
              * Key Features:
@@ -5525,16 +5502,9 @@ declare module "@stencil/core" {
              * This component is designed for flexible and accessible pagination controls, suitable for various display needs.
              */
             "eds-pagination": LocalJSX.EdsPagination & JSXBase.HTMLAttributes<HTMLEdsPaginationElement>;
+            "eds-pie": LocalJSX.EdsPie & JSXBase.HTMLAttributes<HTMLEdsPieElement>;
             "eds-progress-bar": LocalJSX.EdsProgressBar & JSXBase.HTMLAttributes<HTMLEdsProgressBarElement>;
             "eds-rating": LocalJSX.EdsRating & JSXBase.HTMLAttributes<HTMLEdsRatingElement>;
-            /**
-             * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
-             * Key Features:
-             * - Allows dynamic selection of HTML tag (`div` or `section`) for the wrapper.
-             * - Configurable section title and heading level for accessibility and hierarchy.
-             * - Passes section title to an internal heading component (`eds-section-heading`).
-             * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
-             */
             "eds-section-core": LocalJSX.EdsSectionCore & JSXBase.HTMLAttributes<HTMLEdsSectionCoreElement>;
             "eds-section-heading": LocalJSX.EdsSectionHeading & JSXBase.HTMLAttributes<HTMLEdsSectionHeadingElement>;
             /**