@ebrains/components 0.3.0-alpha.0 → 0.5.0-alpha.0

package/dist/types/components.d.ts

@@ -5,6 +5,12 @@
  * It contains typing information for all components that exist in this project.
  */
 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";
+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 namespace Components {
     interface ColorPrimaryPalette {
     }
@@ -175,9 +181,9 @@ export namespace Components {
      */
     interface EdsButton {
         /**
-          * The accessible aria-label for the button, used when there is no visible label.
+          * The accessible aria-label for the button, used when there is no visible label. Default is "Button" to ensure icon-only buttons are announced properly.
          */
-        "ariaLabel": string | null;
+        "ariaLabel": string;
         /**
           * A boolean indicating whether the button is disabled.
          */
@@ -224,6 +230,12 @@ export namespace Components {
          */
         "triggerClick"?: () => void;
     }
+    /**
+     * `eds-card-desc` is a simple component that renders a card description.
+     * It displays a block of text with optional truncation applied using a CSS line clamp.
+     * You can customize the description styling via the `descClass` property and control
+     * whether or not the text is truncated and to how many lines.
+     */
     interface EdsCardDesc {
         /**
           * A custom CSS class to style the description text. Default is 'f-ui-03-light'.
@@ -286,9 +298,9 @@ export namespace Components {
          */
         "shortAbbreviation"?: string;
         /**
-          * A comma-separated string of tags related to the card content.
+          * Tags related to the card content.
          */
-        "tags": any;
+        "tags": string | Tag[];
         /**
           * A boolean that determines whether the card should be displayed with a smaller height. If true, the card will use the 'tiny' height class.
          */
@@ -352,7 +364,7 @@ export namespace Components {
         /**
           * JSON string representing an array of card objects. Each card object can contain properties like `title`, `description`, `avatar`, `headingLevel`, `tags`, `url`, `bg`, `tiny`, and `image`.  Example: ```json '[{"title": "Card Title", "description": "Description", "avatar": "/path/to/avatar.jpg", "url": "http://example.com"}]' ```
          */
-        "cards": string | { title: string; description: string; tags: string; url: string }[];
+        "cards": string | Card[];
         /**
           * Number of columns to span for each card in the grid layout. This value sets the column span on medium (md) and larger screen sizes. Default is `4`.
          */
@@ -462,9 +474,14 @@ export namespace Components {
          */
         "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,
+     * Python, Bash/Shell, and YAML.
+     */
     interface EdsCodeBlock {
         /**
-          * The code content to display
+          * The code content to display.
          */
         "code": string;
         /**
@@ -627,7 +644,7 @@ export namespace Components {
         /**
           * A JSON string representing the fields in the form. Example: ```json [   { "name": "email", "label": "Email", "type": "text", "required": true },   { "name": "password", "label": "Password", "type": "password", "required": true } ] ```
          */
-        "fields": string;
+        "fields": string | any[];
         /**
           * The name of the form, used for grouping inputs and identifying the form.
          */
@@ -636,10 +653,6 @@ export namespace Components {
           * If `true`, includes the current form URL in the submission data.
          */
         "setFormUrl"?: boolean;
-        /**
-          * If `true`, displays a small alert for messages.
-         */
-        "smallAlert"?: boolean;
         /**
           * If `true`, includes a submit button in the form.
          */
@@ -722,18 +735,6 @@ export namespace Components {
           * Determines if the header is rendered in inverse style. When true, the header applies styles suitable for a dark background.
          */
         "inverseHeader": boolean;
-        /**
-          * The Keycloak Client ID for the application. Required if `userFeature` is enabled.
-         */
-        "keycloakClientId": string;
-        /**
-          * The Keycloak Realm for authentication. Required if `userFeature` is enabled.
-         */
-        "keycloakRealm": string;
-        /**
-          * The URL of the Keycloak server. Required if `userFeature` is enabled.
-         */
-        "keycloakUrl": string;
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
@@ -742,10 +743,6 @@ export namespace Components {
           * 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;
-        /**
-          * Flag to enable or disable user authentication features. When true, displays the authentication options in the header.
-         */
-        "userFeature": boolean;
     }
     interface EdsIconArrowDiagonal {
         /**
@@ -916,9 +913,9 @@ export namespace Components {
      */
     interface EdsImg {
         /**
-          * The alternative text for the image.
+          * The alternative text for the image. Defaults to an empty string so that decorative images are ignored by assistive technologies.
          */
-        "alt"?: string;
+        "alt": string;
         /**
           * Array of image formats for different sources (e.g., webp, jpeg). Expects objects with `type`, `srcset`, and optional `media` attributes.
          */
@@ -1087,22 +1084,6 @@ export namespace Components {
         "required": boolean;
         "value"?: string;
     }
-    /**
-     * A custom select input component that supports both static and dynamic options.
-     * 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.
-     *    ]
-     * The component will automatically fetch data if a dynamic configuration is provided.
-     */
     interface EdsInputSelect {
         /**
           * If true, the select input will be disabled.
@@ -1221,13 +1202,6 @@ export namespace Components {
          */
         "url"?: string;
     }
-    /**
-     * `EdsLogin` is a login component that integrates Keycloak authentication,
-     * allowing users to log in and out and manage authentication states.
-     * This component is used to handle user login, logout, and authentication status display.
-     * This component is ideal for applications that require Keycloak-based authentication,
-     * providing a simple login/logout interface and managing user session states.
-     */
     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`
@@ -1238,7 +1212,7 @@ export namespace Components {
          */
         "keycloakRealm": string;
         /**
-          * The URL of the Keycloak server. This is the base URL where your Keycloak instance is hosted,
+          * The URL of the Keycloak server. This is the base URL where your Keycloak instance is hosted.
          */
         "keycloakUrl": string;
     }
@@ -1260,6 +1234,7 @@ export namespace Components {
           * The URL that the logo should link to. When clicked, the user will be navigated to this URL. Defaults to the root path ('/').
          */
         "href": string;
+        "label": string;
         /**
           * The orientation of the logo to display. - `"horizontal"` displays the logo horizontally. - `"vertical"` displays the logo vertically.
          */
@@ -1308,6 +1283,10 @@ export namespace Components {
           * Opens the modal.
          */
         "open": () => Promise<void>;
+        /**
+          * Specifies the position of the modal.  Acceptable values are: - `"middle"` (default): The modal is centered both vertically and horizontally. - `"top"`: The modal is positioned near the top of the viewport. - `"bottom"`: The modal is positioned near the bottom of the viewport. - `"left"`: The modal is positioned on the left side of the viewport, centered vertically. - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
+         */
+        "position": 'middle' | 'top' | 'bottom' | 'left' | 'right';
         /**
           * The title of the modal.
          */
@@ -1414,7 +1393,7 @@ export namespace Components {
     }
     interface EdsRating {
         /**
-          * The label text for the input field.
+          * The label text for the rating component.
          */
         "label"?: string;
         /**
@@ -1424,7 +1403,7 @@ export namespace Components {
         /**
           * Mapping of text to star ratings.
          */
-        "textMapping": string | any;
+        "textMapping": string | string[];
     }
     /**
      * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
@@ -1488,8 +1467,36 @@ export namespace Components {
          */
         "title": string;
     }
+    interface EdsSteps {
+        /**
+          * JSON string containing an array of step objects. Example: '[   { "title": "Get Access...", "content": "To participate..." },   { "title": "Subscribe...", "content": "Technical Coordination..." },   { "title": "Confirm Your Subscription" } ]'
+         */
+        "steps": string | Step[];
+        /**
+          * The type of stepper. Default is "static" (all steps visible, no buttons). If set to "linear", then only one step is visible at a time with navigation.
+         */
+        "type": 'static' | 'linear';
+    }
     interface EdsSvgRepository {
     }
+    interface EdsSwitch {
+        /**
+          * Indicates whether the switch is checked.
+         */
+        "checked": boolean;
+        /**
+          * Disables the switch if true.
+         */
+        "disabled": boolean;
+        /**
+          * Label to display when the switch is OFF.
+         */
+        "labelOff": string;
+        /**
+          * Label to display when the switch is ON.
+         */
+        "labelOn": string;
+    }
     interface EdsTab {
         /**
           * Whether the tab is active
@@ -1595,6 +1602,10 @@ export namespace Components {
      * This component is useful for creating distinguishable tags or labels with consistent styling.
      */
     interface EdsTag {
+        /**
+          * Optional accessible label override. If not provided, the visible label is used as the accessible name.
+         */
+        "ariaLabel"?: string;
         /**
           * The visual style or intent of the tag. Options include: - 'default': The standard appearance. - 'strong': Strong emphasis with inverse text color. - 'accent': Accent color with a blue text and border. - 'weak': A softer look with lighter text and transparent border. - 'inverse': Inverse style with border and text inversion. - 'inverse-strong': Strong inverse with lighter text. Defaults to 'default'.
          */
@@ -1680,6 +1691,12 @@ export namespace Components {
          */
         "user": User | string;
     }
+    interface EdsVerticalStepper {
+        /**
+          * JSON string containing an array of steps. Example: '[   { "label": "Select campaign settings", "description": "For each ad campaign..." },   { "label": "Create an ad group", "description": "An ad group contains one or more ads..." },   { "label": "Create an ad", "description": "Try out different ad text..." } ]'
+         */
+        "steps": string;
+    }
     interface GradientPrimaryPalette {
     }
     interface GradientSecondaryPalette {
@@ -1747,6 +1764,14 @@ export interface EdsRatingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsRatingElement;
 }
+export interface EdsStepsCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsStepsElement;
+}
+export interface EdsSwitchCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsSwitchElement;
+}
 export interface EdsTabsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsTabsElement;
@@ -1895,6 +1920,12 @@ declare global {
         prototype: HTMLEdsButtonElement;
         new (): HTMLEdsButtonElement;
     };
+    /**
+     * `eds-card-desc` is a simple component that renders a card description.
+     * It displays a block of text with optional truncation applied using a CSS line clamp.
+     * You can customize the description styling via the `descClass` property and control
+     * whether or not the text is truncated and to how many lines.
+     */
     interface HTMLEdsCardDescElement extends Components.EdsCardDesc, HTMLStencilElement {
     }
     var HTMLEdsCardDescElement: {
@@ -1961,6 +1992,11 @@ declare global {
         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,
+     * Python, Bash/Shell, and YAML.
+     */
     interface HTMLEdsCodeBlockElement extends Components.EdsCodeBlock, HTMLStencilElement {
     }
     var HTMLEdsCodeBlockElement: {
@@ -2350,22 +2386,6 @@ declare global {
     interface HTMLEdsInputSelectElementEventMap {
         "changeEvent": string | number;
     }
-    /**
-     * A custom select input component that supports both static and dynamic options.
-     * 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.
-     *    ]
-     * The component will automatically fetch data if a dynamic configuration is provided.
-     */
     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;
         addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2396,18 +2416,8 @@ declare global {
         new (): HTMLEdsLinkElement;
     };
     interface HTMLEdsLoginElementEventMap {
-        "authStatusChanged": {
-    authenticated: boolean;
-    user: any;
-  };
+        "authStatusChanged": { authenticated: boolean; user: any };
     }
-    /**
-     * `EdsLogin` is a login component that integrates Keycloak authentication,
-     * allowing users to log in and out and manage authentication states.
-     * This component is used to handle user login, logout, and authentication status display.
-     * This component is ideal for applications that require Keycloak-based authentication,
-     * providing a simple login/logout interface and managing user session states.
-     */
     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;
@@ -2552,12 +2562,46 @@ declare global {
         prototype: HTMLEdsSocialNetworksElement;
         new (): HTMLEdsSocialNetworksElement;
     };
+    interface HTMLEdsStepsElementEventMap {
+        "stepClick": number;
+    }
+    interface HTMLEdsStepsElement extends Components.EdsSteps, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEdsStepsElementEventMap>(type: K, listener: (this: HTMLEdsStepsElement, ev: EdsStepsCustomEvent<HTMLEdsStepsElementEventMap[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 HTMLEdsStepsElementEventMap>(type: K, listener: (this: HTMLEdsStepsElement, ev: EdsStepsCustomEvent<HTMLEdsStepsElementEventMap[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 HTMLEdsStepsElement: {
+        prototype: HTMLEdsStepsElement;
+        new (): HTMLEdsStepsElement;
+    };
     interface HTMLEdsSvgRepositoryElement extends Components.EdsSvgRepository, HTMLStencilElement {
     }
     var HTMLEdsSvgRepositoryElement: {
         prototype: HTMLEdsSvgRepositoryElement;
         new (): HTMLEdsSvgRepositoryElement;
     };
+    interface HTMLEdsSwitchElementEventMap {
+        "change": 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;
+        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 HTMLEdsSwitchElementEventMap>(type: K, listener: (this: HTMLEdsSwitchElement, ev: EdsSwitchCustomEvent<HTMLEdsSwitchElementEventMap[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 HTMLEdsSwitchElement: {
+        prototype: HTMLEdsSwitchElement;
+        new (): HTMLEdsSwitchElement;
+    };
     interface HTMLEdsTabElement extends Components.EdsTab, HTMLStencilElement {
     }
     var HTMLEdsTabElement: {
@@ -2705,6 +2749,12 @@ declare global {
         prototype: HTMLEdsUserModalElement;
         new (): HTMLEdsUserModalElement;
     };
+    interface HTMLEdsVerticalStepperElement extends Components.EdsVerticalStepper, HTMLStencilElement {
+    }
+    var HTMLEdsVerticalStepperElement: {
+        prototype: HTMLEdsVerticalStepperElement;
+        new (): HTMLEdsVerticalStepperElement;
+    };
     interface HTMLGradientPrimaryPaletteElement extends Components.GradientPrimaryPalette, HTMLStencilElement {
     }
     var HTMLGradientPrimaryPaletteElement: {
@@ -2862,7 +2912,9 @@ declare global {
         "eds-section-core": HTMLEdsSectionCoreElement;
         "eds-section-heading": HTMLEdsSectionHeadingElement;
         "eds-social-networks": HTMLEdsSocialNetworksElement;
+        "eds-steps": HTMLEdsStepsElement;
         "eds-svg-repository": HTMLEdsSvgRepositoryElement;
+        "eds-switch": HTMLEdsSwitchElement;
         "eds-tab": HTMLEdsTabElement;
         "eds-table": HTMLEdsTableElement;
         "eds-tabs": HTMLEdsTabsElement;
@@ -2875,6 +2927,7 @@ declare global {
         "eds-trl": HTMLEdsTrlElement;
         "eds-user": HTMLEdsUserElement;
         "eds-user-modal": HTMLEdsUserModalElement;
+        "eds-vertical-stepper": HTMLEdsVerticalStepperElement;
         "gradient-primary-palette": HTMLGradientPrimaryPaletteElement;
         "gradient-secondary-palette": HTMLGradientSecondaryPaletteElement;
         "gradient-support-palette": HTMLGradientSupportPaletteElement;
@@ -3065,9 +3118,9 @@ declare namespace LocalJSX {
      */
     interface EdsButton {
         /**
-          * The accessible aria-label for the button, used when there is no visible label.
+          * The accessible aria-label for the button, used when there is no visible label. Default is "Button" to ensure icon-only buttons are announced properly.
          */
-        "ariaLabel"?: string | null;
+        "ariaLabel"?: string;
         /**
           * A boolean indicating whether the button is disabled.
          */
@@ -3114,6 +3167,12 @@ declare namespace LocalJSX {
          */
         "triggerClick"?: () => void;
     }
+    /**
+     * `eds-card-desc` is a simple component that renders a card description.
+     * It displays a block of text with optional truncation applied using a CSS line clamp.
+     * You can customize the description styling via the `descClass` property and control
+     * whether or not the text is truncated and to how many lines.
+     */
     interface EdsCardDesc {
         /**
           * A custom CSS class to style the description text. Default is 'f-ui-03-light'.
@@ -3176,9 +3235,9 @@ declare namespace LocalJSX {
          */
         "shortAbbreviation"?: string;
         /**
-          * A comma-separated string of tags related to the card content.
+          * Tags related to the card content.
          */
-        "tags"?: any;
+        "tags"?: string | Tag[];
         /**
           * A boolean that determines whether the card should be displayed with a smaller height. If true, the card will use the 'tiny' height class.
          */
@@ -3242,7 +3301,7 @@ declare namespace LocalJSX {
         /**
           * JSON string representing an array of card objects. Each card object can contain properties like `title`, `description`, `avatar`, `headingLevel`, `tags`, `url`, `bg`, `tiny`, and `image`.  Example: ```json '[{"title": "Card Title", "description": "Description", "avatar": "/path/to/avatar.jpg", "url": "http://example.com"}]' ```
          */
-        "cards"?: string | { title: string; description: string; tags: string; url: string }[];
+        "cards"?: string | Card[];
         /**
           * Number of columns to span for each card in the grid layout. This value sets the column span on medium (md) and larger screen sizes. Default is `4`.
          */
@@ -3352,9 +3411,14 @@ declare namespace LocalJSX {
          */
         "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,
+     * Python, Bash/Shell, and YAML.
+     */
     interface EdsCodeBlock {
         /**
-          * The code content to display
+          * The code content to display.
          */
         "code"?: string;
         /**
@@ -3517,7 +3581,7 @@ declare namespace LocalJSX {
         /**
           * A JSON string representing the fields in the form. Example: ```json [   { "name": "email", "label": "Email", "type": "text", "required": true },   { "name": "password", "label": "Password", "type": "password", "required": true } ] ```
          */
-        "fields"?: string;
+        "fields"?: string | any[];
         /**
           * The name of the form, used for grouping inputs and identifying the form.
          */
@@ -3530,10 +3594,6 @@ declare namespace LocalJSX {
           * If `true`, includes the current form URL in the submission data.
          */
         "setFormUrl"?: boolean;
-        /**
-          * If `true`, displays a small alert for messages.
-         */
-        "smallAlert"?: boolean;
         /**
           * If `true`, includes a submit button in the form.
          */
@@ -3620,18 +3680,6 @@ declare namespace LocalJSX {
           * Determines if the header is rendered in inverse style. When true, the header applies styles suitable for a dark background.
          */
         "inverseHeader"?: boolean;
-        /**
-          * The Keycloak Client ID for the application. Required if `userFeature` is enabled.
-         */
-        "keycloakClientId"?: string;
-        /**
-          * The Keycloak Realm for authentication. Required if `userFeature` is enabled.
-         */
-        "keycloakRealm"?: string;
-        /**
-          * The URL of the Keycloak server. Required if `userFeature` is enabled.
-         */
-        "keycloakUrl"?: string;
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
@@ -3644,10 +3692,6 @@ declare namespace LocalJSX {
           * Event to signal toggle menu action
          */
         "onToggleMenu"?: (event: EdsHeaderCustomEvent<boolean>) => void;
-        /**
-          * Flag to enable or disable user authentication features. When true, displays the authentication options in the header.
-         */
-        "userFeature"?: boolean;
     }
     interface EdsIconArrowDiagonal {
         /**
@@ -3818,7 +3862,7 @@ declare namespace LocalJSX {
      */
     interface EdsImg {
         /**
-          * The alternative text for the image.
+          * The alternative text for the image. Defaults to an empty string so that decorative images are ignored by assistive technologies.
          */
         "alt"?: string;
         /**
@@ -3988,22 +4032,6 @@ declare namespace LocalJSX {
         "required"?: boolean;
         "value"?: string;
     }
-    /**
-     * A custom select input component that supports both static and dynamic options.
-     * 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.
-     *    ]
-     * The component will automatically fetch data if a dynamic configuration is provided.
-     */
     interface EdsInputSelect {
         /**
           * If true, the select input will be disabled.
@@ -4127,13 +4155,6 @@ declare namespace LocalJSX {
          */
         "url"?: string;
     }
-    /**
-     * `EdsLogin` is a login component that integrates Keycloak authentication,
-     * allowing users to log in and out and manage authentication states.
-     * This component is used to handle user login, logout, and authentication status display.
-     * This component is ideal for applications that require Keycloak-based authentication,
-     * providing a simple login/logout interface and managing user session states.
-     */
     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`
@@ -4144,16 +4165,13 @@ declare namespace LocalJSX {
          */
         "keycloakRealm"?: string;
         /**
-          * The URL of the Keycloak server. This is the base URL where your Keycloak instance is hosted,
+          * 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 a boolean value indicating the new authentication status.
+          * Event emitted when the authentication status changes.
          */
-        "onAuthStatusChanged"?: (event: EdsLoginCustomEvent<{
-    authenticated: boolean;
-    user: any;
-  }>) => void;
+        "onAuthStatusChanged"?: (event: EdsLoginCustomEvent<{ authenticated: boolean; user: any }>) => void;
     }
     /**
      * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
@@ -4173,6 +4191,7 @@ declare namespace LocalJSX {
           * The URL that the logo should link to. When clicked, the user will be navigated to this URL. Defaults to the root path ('/').
          */
         "href"?: string;
+        "label"?: string;
         /**
           * The orientation of the logo to display. - `"horizontal"` displays the logo horizontally. - `"vertical"` displays the logo vertically.
          */
@@ -4213,6 +4232,10 @@ declare namespace LocalJSX {
      * This component is useful for displaying overlay content in a structured and accessible manner, with controls for dynamic visibility and content truncation.
      */
     interface EdsModal {
+        /**
+          * Specifies the position of the modal.  Acceptable values are: - `"middle"` (default): The modal is centered both vertically and horizontally. - `"top"`: The modal is positioned near the top of the viewport. - `"bottom"`: The modal is positioned near the bottom of the viewport. - `"left"`: The modal is positioned on the left side of the viewport, centered vertically. - `"right"`: The modal is positioned on the right side of the viewport, centered vertically.
+         */
+        "position"?: 'middle' | 'top' | 'bottom' | 'left' | 'right';
         /**
           * The title of the modal.
          */
@@ -4310,7 +4333,7 @@ declare namespace LocalJSX {
     }
     interface EdsRating {
         /**
-          * The label text for the input field.
+          * The label text for the rating component.
          */
         "label"?: string;
         /**
@@ -4324,7 +4347,7 @@ declare namespace LocalJSX {
         /**
           * Mapping of text to star ratings.
          */
-        "textMapping"?: string | any;
+        "textMapping"?: string | string[];
     }
     /**
      * `EdsSectionCore` is a flexible wrapper component for creating structured sections with customizable headings.
@@ -4388,8 +4411,44 @@ declare namespace LocalJSX {
          */
         "title"?: string;
     }
+    interface EdsSteps {
+        /**
+          * Emits when a step is clicked, providing the step's index.
+         */
+        "onStepClick"?: (event: EdsStepsCustomEvent<number>) => void;
+        /**
+          * JSON string containing an array of step objects. Example: '[   { "title": "Get Access...", "content": "To participate..." },   { "title": "Subscribe...", "content": "Technical Coordination..." },   { "title": "Confirm Your Subscription" } ]'
+         */
+        "steps"?: string | Step[];
+        /**
+          * The type of stepper. Default is "static" (all steps visible, no buttons). If set to "linear", then only one step is visible at a time with navigation.
+         */
+        "type"?: 'static' | 'linear';
+    }
     interface EdsSvgRepository {
     }
+    interface EdsSwitch {
+        /**
+          * Indicates whether the switch is checked.
+         */
+        "checked"?: boolean;
+        /**
+          * Disables the switch if true.
+         */
+        "disabled"?: boolean;
+        /**
+          * Label to display when the switch is OFF.
+         */
+        "labelOff"?: string;
+        /**
+          * Label to display when the switch is ON.
+         */
+        "labelOn"?: string;
+        /**
+          * Emitted when the switch is toggled.
+         */
+        "onChange"?: (event: EdsSwitchCustomEvent<boolean>) => void;
+    }
     interface EdsTab {
         /**
           * Whether the tab is active
@@ -4501,6 +4560,10 @@ declare namespace LocalJSX {
      * This component is useful for creating distinguishable tags or labels with consistent styling.
      */
     interface EdsTag {
+        /**
+          * Optional accessible label override. If not provided, the visible label is used as the accessible name.
+         */
+        "ariaLabel"?: string;
         /**
           * The visual style or intent of the tag. Options include: - 'default': The standard appearance. - 'strong': Strong emphasis with inverse text color. - 'accent': Accent color with a blue text and border. - 'weak': A softer look with lighter text and transparent border. - 'inverse': Inverse style with border and text inversion. - 'inverse-strong': Strong inverse with lighter text. Defaults to 'default'.
          */
@@ -4593,6 +4656,12 @@ declare namespace LocalJSX {
          */
         "user": User | string;
     }
+    interface EdsVerticalStepper {
+        /**
+          * JSON string containing an array of steps. Example: '[   { "label": "Select campaign settings", "description": "For each ad campaign..." },   { "label": "Create an ad group", "description": "An ad group contains one or more ads..." },   { "label": "Create an ad", "description": "Try out different ad text..." } ]'
+         */
+        "steps"?: string;
+    }
     interface GradientPrimaryPalette {
     }
     interface GradientSecondaryPalette {
@@ -4700,7 +4769,9 @@ declare namespace LocalJSX {
         "eds-section-core": EdsSectionCore;
         "eds-section-heading": EdsSectionHeading;
         "eds-social-networks": EdsSocialNetworks;
+        "eds-steps": EdsSteps;
         "eds-svg-repository": EdsSvgRepository;
+        "eds-switch": EdsSwitch;
         "eds-tab": EdsTab;
         "eds-table": EdsTable;
         "eds-tabs": EdsTabs;
@@ -4713,6 +4784,7 @@ declare namespace LocalJSX {
         "eds-trl": EdsTrl;
         "eds-user": EdsUser;
         "eds-user-modal": EdsUserModal;
+        "eds-vertical-stepper": EdsVerticalStepper;
         "gradient-primary-palette": GradientPrimaryPalette;
         "gradient-secondary-palette": GradientSecondaryPalette;
         "gradient-support-palette": GradientSupportPalette;
@@ -4807,6 +4879,12 @@ declare module "@stencil/core" {
              * This component is suitable for buttons, links, and other interactive elements within an interface.
              */
             "eds-button": LocalJSX.EdsButton & JSXBase.HTMLAttributes<HTMLEdsButtonElement>;
+            /**
+             * `eds-card-desc` is a simple component that renders a card description.
+             * It displays a block of text with optional truncation applied using a CSS line clamp.
+             * You can customize the description styling via the `descClass` property and control
+             * whether or not the text is truncated and to how many lines.
+             */
             "eds-card-desc": LocalJSX.EdsCardDesc & JSXBase.HTMLAttributes<HTMLEdsCardDescElement>;
             /**
              * `EdsCardGeneric` is a versatile card component designed to display rich content such as titles, descriptions, images, and tags.
@@ -4833,6 +4911,11 @@ declare module "@stencil/core" {
             "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,
+             * Python, Bash/Shell, and YAML.
+             */
             "eds-code-block": LocalJSX.EdsCodeBlock & JSXBase.HTMLAttributes<HTMLEdsCodeBlockElement>;
             "eds-components-section": LocalJSX.EdsComponentsSection & JSXBase.HTMLAttributes<HTMLEdsComponentsSectionElement>;
             "eds-docs-palettes": LocalJSX.EdsDocsPalettes & JSXBase.HTMLAttributes<HTMLEdsDocsPalettesElement>;
@@ -4975,22 +5058,6 @@ declare module "@stencil/core" {
             "eds-input-label": LocalJSX.EdsInputLabel & JSXBase.HTMLAttributes<HTMLEdsInputLabelElement>;
             "eds-input-range": LocalJSX.EdsInputRange & JSXBase.HTMLAttributes<HTMLEdsInputRangeElement>;
             "eds-input-search": LocalJSX.EdsInputSearch & JSXBase.HTMLAttributes<HTMLEdsInputSearchElement>;
-            /**
-             * A custom select input component that supports both static and dynamic options.
-             * 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.
-             *    ]
-             * The component will automatically fetch data if a dynamic configuration is provided.
-             */
             "eds-input-select": LocalJSX.EdsInputSelect & JSXBase.HTMLAttributes<HTMLEdsInputSelectElement>;
             /**
              * `EdsLink` is a versatile link component offering different styles and behaviors.
@@ -5002,13 +5069,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>;
-            /**
-             * `EdsLogin` is a login component that integrates Keycloak authentication,
-             * allowing users to log in and out and manage authentication states.
-             * This component is used to handle user login, logout, and authentication status display.
-             * This component is ideal for applications that require Keycloak-based authentication,
-             * providing a simple login/logout interface and managing user session states.
-             */
             "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.
@@ -5074,7 +5134,9 @@ declare module "@stencil/core" {
              * Each link directs users to EBRAINS' profiles on various social networks.
              */
             "eds-social-networks": LocalJSX.EdsSocialNetworks & JSXBase.HTMLAttributes<HTMLEdsSocialNetworksElement>;
+            "eds-steps": LocalJSX.EdsSteps & JSXBase.HTMLAttributes<HTMLEdsStepsElement>;
             "eds-svg-repository": LocalJSX.EdsSvgRepository & JSXBase.HTMLAttributes<HTMLEdsSvgRepositoryElement>;
+            "eds-switch": LocalJSX.EdsSwitch & JSXBase.HTMLAttributes<HTMLEdsSwitchElement>;
             "eds-tab": LocalJSX.EdsTab & JSXBase.HTMLAttributes<HTMLEdsTabElement>;
             /**
              * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
@@ -5122,6 +5184,7 @@ declare module "@stencil/core" {
              */
             "eds-user": LocalJSX.EdsUser & JSXBase.HTMLAttributes<HTMLEdsUserElement>;
             "eds-user-modal": LocalJSX.EdsUserModal & JSXBase.HTMLAttributes<HTMLEdsUserModalElement>;
+            "eds-vertical-stepper": LocalJSX.EdsVerticalStepper & JSXBase.HTMLAttributes<HTMLEdsVerticalStepperElement>;
             "gradient-primary-palette": LocalJSX.GradientPrimaryPalette & JSXBase.HTMLAttributes<HTMLGradientPrimaryPaletteElement>;
             "gradient-secondary-palette": LocalJSX.GradientSecondaryPalette & JSXBase.HTMLAttributes<HTMLGradientSecondaryPaletteElement>;
             "gradient-support-palette": LocalJSX.GradientSupportPalette & JSXBase.HTMLAttributes<HTMLGradientSupportPaletteElement>;