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

package/dist/types/components.d.ts

@@ -6,7 +6,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";
 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 {
     }
@@ -177,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.
          */
@@ -360,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 | [];
+        "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`.
          */
@@ -731,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`.
          */
@@ -751,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 {
         /**
@@ -925,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.
          */
@@ -1214,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`
@@ -1231,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;
     }
@@ -1253,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.
          */
@@ -1411,7 +1393,7 @@ export namespace Components {
     }
     interface EdsRating {
         /**
-          * The label text for the input field.
+          * The label text for the rating component.
          */
         "label"?: string;
         /**
@@ -1485,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
@@ -1592,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'.
          */
@@ -1677,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 {
@@ -1744,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;
@@ -2388,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;
@@ -2544,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: {
@@ -2697,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: {
@@ -2854,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;
@@ -2867,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;
@@ -3057,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.
          */
@@ -3240,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 | [];
+        "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`.
          */
@@ -3619,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`.
          */
@@ -3643,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 {
         /**
@@ -3817,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;
         /**
@@ -4110,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`
@@ -4127,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.
@@ -4156,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.
          */
@@ -4297,7 +4333,7 @@ declare namespace LocalJSX {
     }
     interface EdsRating {
         /**
-          * The label text for the input field.
+          * The label text for the rating component.
          */
         "label"?: string;
         /**
@@ -4375,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
@@ -4488,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'.
          */
@@ -4580,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 {
@@ -4687,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;
@@ -4700,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;
@@ -4984,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.
@@ -5056,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.
@@ -5104,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>;

package/dist/types/shared-ui/eds-card-section/eds-card-section.d.ts

@@ -1,3 +1,30 @@
+export interface Tag {
+    label: string;
+    style: 'accent' | 'default' | 'weak' | 'strong';
+}
+export interface CardImage {
+    src: string;
+    alt: string;
+    srcset?: string;
+    sizes?: string;
+    width?: number;
+    height?: number;
+    lazyload?: boolean;
+}
+export interface Card {
+    title: string;
+    url?: string;
+    description?: string;
+    image?: CardImage | string;
+    avatar?: string;
+    shortAbbreviation?: string;
+    headingLevel?: string;
+    tags?: string | Tag[];
+    tiny?: boolean;
+    bg?: boolean;
+    withHover?: boolean;
+    hierarchy?: boolean;
+}
 /**
  * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout.
  * Each card within the section can display various properties such as title, description, avatar, and additional content.
@@ -18,7 +45,7 @@ export declare class EdsCardSection {
      * '[{"title": "Card Title", "description": "Description", "avatar": "/path/to/avatar.jpg", "url": "http://example.com"}]'
      * ```
      */
-    cards: 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.

package/dist/types/shared-ui/eds-header/eds-header.d.ts

@@ -33,32 +33,12 @@ export declare class EdsHeader {
      * When true, the header applies styles suitable for a dark background.
      */
     inverseHeader: boolean;
-    /**
-     * Flag to enable or disable user authentication features.
-     * When true, displays the authentication options in the header.
-     */
-    userFeature: boolean;
     /**
      * 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;
-    /**
-     * The URL of the Keycloak server.
-     * Required if `userFeature` is enabled.
-     */
-    keycloakUrl: string;
-    /**
-     * The Keycloak Realm for authentication.
-     * Required if `userFeature` is enabled.
-     */
-    keycloakRealm: string;
-    /**
-     * The Keycloak Client ID for the application.
-     * Required if `userFeature` is enabled.
-     */
-    keycloakClientId: string;
     /**
      * State indicating whether the main menu is open.
      * Controls the visibility of the fullscreen main menu.

package/dist/types/shared-ui/eds-login/eds-login.d.ts

@@ -1,16 +1,8 @@
 import { EventEmitter } from '../../stencil-public-runtime';
-/**
- * `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.
- */
 export declare class EdsLogin {
     /**
      * The URL of the Keycloak server.
-     * This is the base URL where your Keycloak instance is hosted,
+     * This is the base URL where your Keycloak instance is hosted.
      */
     keycloakUrl: string;
     /**
@@ -28,23 +20,34 @@ export declare class EdsLogin {
      */
     keycloakClientId: string;
     authenticated: boolean;
-    /**
-     * The user object containing user information.
-     * This is populated after a successful authentication.
-     */
     user: any;
     /**
      * Event emitted when the authentication status changes.
-     * It emits a boolean value indicating the new authentication status.
      */
     authStatusChanged: EventEmitter<{
         authenticated: boolean;
         user: any;
     }>;
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
     componentWillLoad(): Promise<void>;
-    checkAuthentication(): Promise<void>;
-    handleLogin(): Promise<void>;
-    handleLogout: () => void;
-    getBtnLabel(): string;
+    /**
+     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+     * Sets the `authenticated` state and `user` data if the user is authenticated.
+     * Emits `authStatusChanged` event with the authentication status.
+     */
+    initAuth(): Promise<void>;
+    /**
+     * Handles user login by invoking the Keycloak `login` function.
+     * Only triggers login if the user is not already authenticated.
+     */
+    handleLogin: () => Promise<void>;
+    /**
+     * Handles user logout by invoking the Keycloak `logout` function.
+     * Resets the `authenticated` state to `false` after logout.
+     */
+    handleLogout: () => Promise<void>;
     render(): any;
 }

package/dist/types/shared-ui/eds-user/eds-user.d.ts

@@ -37,15 +37,15 @@ export declare class EdsUser {
      * This is set to `true` if the user is successfully authenticated with Keycloak.
      */
     authenticated: boolean;
-    /**
-     * Indicates whether the Keycloak server is available.
-     */
-    serverAvailable: boolean;
     /**
      * The username of the authenticated user.
      * This is extracted from the `user` object after successful authentication.
      */
     username: string;
+    /**
+     * Indicates whether the Keycloak server is available.
+     */
+    serverAvailable: boolean;
     /**
      * Event emitted when the authentication status changes.
      * It emits an object {authenticated, user} indicating the new authentication status and the user's information.
@@ -75,6 +75,6 @@ export declare class EdsUser {
      * Handles user logout by invoking the Keycloak `logout` function.
      * Resets the `authenticated` state to `false` after logout.
      */
-    handleLogout: () => void;
+    handleLogout: () => Promise<void>;
     render(): any;
 }