@ebrains/components 0.2.0-alpha.0 → 0.4.0-alpha.0

package/dist/types/components.d.ts

@@ -5,6 +5,8 @@
  * 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";
+export { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 export namespace Components {
     interface ColorPrimaryPalette {
     }
@@ -202,11 +204,11 @@ export namespace Components {
         /**
           * The visual intent or style of the button. Options include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'.
          */
-        "intent"?: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
+        "intent": 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
         /**
           * The label text to be displayed inside the button.
          */
-        "label"?: string;
+        "label": string;
         /**
           * A boolean indicating whether the button is in a loading state.
          */
@@ -224,6 +226,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 +294,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 +360,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;
+        "cards": string | [];
         /**
           * 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 +470,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 +640,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 +649,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.
          */
@@ -684,7 +693,7 @@ export namespace Components {
      * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
      * It provides a responsive, full-window overlay menu with navigation links and additional options.
      * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
-     * ## Key Features:
+     * ## Key Features
      * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
      * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
      * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
@@ -696,7 +705,7 @@ export namespace Components {
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
-        "links": string;
+        "links": string | { label: string; url: string; icon?: string; external?: boolean }[];
         /**
           * JSON string representing the extra menu links a user wants for smaill screens navigation. Each link should include `label`, `url`.
          */
@@ -737,9 +746,9 @@ export namespace Components {
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
-        "links": string;
+        "links": string | { label: string; url: string; icon?: string; external?: boolean }[];
         /**
-          * Flag to enable or disable header menu toggle feature. When true, displays the toggle in the header.
+          * 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;
         /**
@@ -1088,15 +1097,50 @@ export namespace Components {
         "value"?: string;
     }
     interface EdsInputSelect {
+        /**
+          * If true, the select input will be disabled.
+         */
         "disabled": boolean;
+        /**
+          * If true, the select input is in an error state.
+         */
         "error": boolean;
+        /**
+          * If true, indicates that there is an associated message (help or error).
+         */
         "hasMessage": boolean;
+        /**
+          * Optional id for the input. If not provided, the component uses the `name` property.
+         */
         "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": string;
-        "options": { label: string; value: 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.    ]
+         */
+        "options": { [key: string]: any }[];
+        /**
+          * Placeholder text (not used in the native select, but can be used for custom implementations).
+         */
         "placeholder"?: string;
+        /**
+          * If true, the select input is marked as required.
+         */
         "required": boolean;
+        /**
+          * The 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.
@@ -1218,6 +1262,12 @@ export namespace Components {
          */
         "type": 'color' | 'black' | 'color-white' | 'white' | 'no-bg';
     }
+    interface EdsLogoVariations {
+        /**
+          * Active tab index to determine the content to display
+         */
+        "tabIndex": number;
+    }
     /**
      * A Stencil component for displaying a Matomo analytics consent notice.
      * Provides users with the option to opt in or opt out of anonymous analytics.
@@ -1251,6 +1301,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.
          */
@@ -1367,7 +1421,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.
@@ -1461,6 +1515,10 @@ export namespace Components {
      * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
      */
     interface EdsTable {
+        /**
+          * Optional property to control the column sizing mode. - 'default' uses containerWidth / visibleColumns. - 'medium' divides that result by 2. - 'large' divides that result by 4.
+         */
+        "columnSize"?: 'default' | 'medium' | 'large';
         /**
           * Config object to hide or format columns
          */
@@ -1479,6 +1537,7 @@ export namespace Components {
           * Endpoint to fetch data dynamically
          */
         "endpoint": string | null;
+        "hostWidth"?: string;
         /**
           * Enable or disable pagination explicitly
          */
@@ -1512,7 +1571,7 @@ export namespace Components {
         /**
           * JSON string for tabs data
          */
-        "tabs": string;
+        "tabs": string | { label: string; url: string; active: boolean; ariaLabel: string }[];
     }
     interface EdsTabsContent {
         /**
@@ -1544,9 +1603,9 @@ export namespace Components {
     }
     interface EdsTimeline {
         /**
-          * Accepts a JSON string of timeline events.
+          * Accepts a JSON string or object of timeline events.
          */
-        "events": string;
+        "events": string | any[];
     }
     interface EdsToast {
         /**
@@ -1578,7 +1637,10 @@ export namespace Components {
         "position": 'above' | 'below';
     }
     interface EdsTrl {
-        "applications": string;
+        /**
+          * Accepts a JSON string or an array of application objects.
+         */
+        "applications": string | any[];
     }
     /**
      * `EdsUser` is a user authentication component for managing and displaying
@@ -1626,11 +1688,6 @@ export namespace Components {
     interface LogoSpace {
     }
     interface LogoVariationsHorizontal {
-        "orientation": 'horizontal' | 'vertical';
-        /**
-          * The type of logo variation to display. Available options: "coloured", "mono", "dark".
-         */
-        "type": 'coloured' | 'black' | 'color-white';
     }
     interface LogoVariationsVertical {
         "orientation": 'horizontal' | 'vertical';
@@ -1835,6 +1892,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: {
@@ -1901,6 +1964,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: {
@@ -2014,7 +2082,7 @@ declare global {
      * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
      * It provides a responsive, full-window overlay menu with navigation links and additional options.
      * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
-     * ## Key Features:
+     * ## Key Features
      * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
      * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
      * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
@@ -2320,7 +2388,10 @@ 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,
@@ -2362,6 +2433,12 @@ declare global {
         prototype: HTMLEdsLogoElement;
         new (): HTMLEdsLogoElement;
     };
+    interface HTMLEdsLogoVariationsElement extends Components.EdsLogoVariations, HTMLStencilElement {
+    }
+    var HTMLEdsLogoVariationsElement: {
+        prototype: HTMLEdsLogoVariationsElement;
+        new (): HTMLEdsLogoVariationsElement;
+    };
     /**
      * A Stencil component for displaying a Matomo analytics consent notice.
      * Provides users with the option to opt in or opt out of anonymous analytics.
@@ -2495,7 +2572,11 @@ declare global {
         new (): HTMLEdsTableElement;
     };
     interface HTMLEdsTabsElementEventMap {
-        "tabChange": { tabId: string; index: number; name?: string };
+        "tabChange": {
+    tabId: string;
+    index: number;
+    name?: string;
+  };
     }
     /**
      * `EdsTabs` is a tabs component that renders a navigational tab bar.
@@ -2763,6 +2844,7 @@ declare global {
         "eds-link": HTMLEdsLinkElement;
         "eds-login": HTMLEdsLoginElement;
         "eds-logo": HTMLEdsLogoElement;
+        "eds-logo-variations": HTMLEdsLogoVariationsElement;
         "eds-matomo-notice": HTMLEdsMatomoNoticeElement;
         "eds-modal": HTMLEdsModalElement;
         "eds-navigator": HTMLEdsNavigatorElement;
@@ -3024,6 +3106,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'.
@@ -3086,9 +3174,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.
          */
@@ -3152,7 +3240,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;
+        "cards"?: string | [];
         /**
           * 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`.
          */
@@ -3262,9 +3350,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;
         /**
@@ -3427,7 +3520,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.
          */
@@ -3440,10 +3533,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.
          */
@@ -3488,7 +3577,7 @@ declare namespace LocalJSX {
      * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
      * It provides a responsive, full-window overlay menu with navigation links and additional options.
      * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
-     * ## Key Features:
+     * ## Key Features
      * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
      * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
      * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
@@ -3500,7 +3589,7 @@ declare namespace LocalJSX {
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
-        "links"?: string;
+        "links"?: string | { label: string; url: string; icon?: string; external?: boolean }[];
         /**
           * JSON string representing the extra menu links a user wants for smaill screens navigation. Each link should include `label`, `url`.
          */
@@ -3545,9 +3634,9 @@ declare namespace LocalJSX {
         /**
           * JSON string representing the links for primary navigation. Each link should include `label`, `url`, and optionally an `icon`.
          */
-        "links"?: string;
+        "links"?: string | { label: string; url: string; icon?: string; external?: boolean }[];
         /**
-          * Flag to enable or disable header menu toggle feature. When true, displays the toggle in the header.
+          * 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;
         /**
@@ -3899,16 +3988,55 @@ declare namespace LocalJSX {
         "value"?: string;
     }
     interface EdsInputSelect {
+        /**
+          * If true, the select input will be disabled.
+         */
         "disabled"?: boolean;
+        /**
+          * If true, the select input is in an error state.
+         */
         "error"?: boolean;
+        /**
+          * If true, indicates that there is an associated message (help or error).
+         */
         "hasMessage"?: boolean;
+        /**
+          * Optional id for the input. If not provided, the component uses the `name` property.
+         */
         "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": string;
+        /**
+          * Emitted when the value of the select input changes.
+          * @event changeEvent
+         */
         "onChangeEvent"?: (event: EdsInputSelectCustomEvent<string | number>) => void;
-        "options"?: { label: string; value: 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.    ]
+         */
+        "options"?: { [key: string]: any }[];
+        /**
+          * Placeholder text (not used in the native select, but can be used for custom implementations).
+         */
         "placeholder"?: string;
+        /**
+          * If true, the select input is marked as required.
+         */
         "required"?: boolean;
+        /**
+          * The 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.
@@ -4005,7 +4133,10 @@ declare namespace LocalJSX {
         /**
           * Event emitted when the authentication status changes. It emits a boolean value indicating the new authentication status.
          */
-        "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.
@@ -4034,6 +4165,12 @@ declare namespace LocalJSX {
          */
         "type"?: 'color' | 'black' | 'color-white' | 'white' | 'no-bg';
     }
+    interface EdsLogoVariations {
+        /**
+          * Active tab index to determine the content to display
+         */
+        "tabIndex"?: number;
+    }
     /**
      * A Stencil component for displaying a Matomo analytics consent notice.
      * Provides users with the option to opt in or opt out of anonymous analytics.
@@ -4059,6 +4196,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.
          */
@@ -4170,7 +4311,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.
@@ -4264,6 +4405,10 @@ declare namespace LocalJSX {
      * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
      */
     interface EdsTable {
+        /**
+          * Optional property to control the column sizing mode. - 'default' uses containerWidth / visibleColumns. - 'medium' divides that result by 2. - 'large' divides that result by 4.
+         */
+        "columnSize"?: 'default' | 'medium' | 'large';
         /**
           * Config object to hide or format columns
          */
@@ -4282,6 +4427,7 @@ declare namespace LocalJSX {
           * Endpoint to fetch data dynamically
          */
         "endpoint"?: string | null;
+        "hostWidth"?: string;
         /**
           * Enable or disable pagination explicitly
          */
@@ -4312,11 +4458,15 @@ declare namespace LocalJSX {
           * Aria label for the navigation
          */
         "navAriaLabel"?: string;
-        "onTabChange"?: (event: EdsTabsCustomEvent<{ tabId: string; index: number; name?: string }>) => void;
+        "onTabChange"?: (event: EdsTabsCustomEvent<{
+    tabId: string;
+    index: number;
+    name?: string;
+  }>) => void;
         /**
           * JSON string for tabs data
          */
-        "tabs"?: string;
+        "tabs"?: string | { label: string; url: string; active: boolean; ariaLabel: string }[];
     }
     interface EdsTabsContent {
         /**
@@ -4349,9 +4499,9 @@ declare namespace LocalJSX {
     }
     interface EdsTimeline {
         /**
-          * Accepts a JSON string of timeline events.
+          * Accepts a JSON string or object of timeline events.
          */
-        "events"?: string;
+        "events"?: string | any[];
     }
     interface EdsToast {
         /**
@@ -4383,7 +4533,10 @@ declare namespace LocalJSX {
         "position"?: 'above' | 'below';
     }
     interface EdsTrl {
-        "applications"?: string;
+        /**
+          * Accepts a JSON string or an array of application objects.
+         */
+        "applications"?: string | any[];
     }
     /**
      * `EdsUser` is a user authentication component for managing and displaying
@@ -4438,11 +4591,6 @@ declare namespace LocalJSX {
     interface LogoSpace {
     }
     interface LogoVariationsHorizontal {
-        "orientation"?: 'horizontal' | 'vertical';
-        /**
-          * The type of logo variation to display. Available options: "coloured", "mono", "dark".
-         */
-        "type"?: 'coloured' | 'black' | 'color-white';
     }
     interface LogoVariationsVertical {
         "orientation"?: 'horizontal' | 'vertical';
@@ -4529,6 +4677,7 @@ declare namespace LocalJSX {
         "eds-link": EdsLink;
         "eds-login": EdsLogin;
         "eds-logo": EdsLogo;
+        "eds-logo-variations": EdsLogoVariations;
         "eds-matomo-notice": EdsMatomoNotice;
         "eds-modal": EdsModal;
         "eds-navigator": EdsNavigator;
@@ -4645,6 +4794,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.
@@ -4671,6 +4826,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>;
@@ -4730,7 +4890,7 @@ declare module "@stencil/core" {
              * `eds-fullscreen-menu` is a fullscreen menu component designed for the EBRAINS platform.
              * It provides a responsive, full-window overlay menu with navigation links and additional options.
              * This component is suitable for mobile and small screens, where a fullscreen menu enhances user navigation.
-             * ## Key Features:
+             * ## Key Features
              * - **Links and Menu Links**: Allows configurable primary and secondary navigation links.
              * - **Event-Driven Open/Close**: Listens for a `toggleMenu` event to open or close the menu, emitted by the `eds-header` component.
              * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
@@ -4846,6 +5006,7 @@ declare module "@stencil/core" {
              * This component is ideal for navigation and branding, with options for style customization and interaction tracking.
              */
             "eds-logo": LocalJSX.EdsLogo & JSXBase.HTMLAttributes<HTMLEdsLogoElement>;
+            "eds-logo-variations": LocalJSX.EdsLogoVariations & JSXBase.HTMLAttributes<HTMLEdsLogoVariationsElement>;
             /**
              * A Stencil component for displaying a Matomo analytics consent notice.
              * Provides users with the option to opt in or opt out of anonymous analytics.

package/dist/types/eds-docs-ui/colors/use-of-colors/incorrect-use-of-colors.d.ts

@@ -1,7 +1,3 @@
-/**
- * `CorrectUseOfColors` is a component that combines the primary palette and support palette
- * to display the correct use of colors.
- */
 /**
  * @internal
  */