@ebrains/components 2.3.0 → 2.4.0

package/dist/types/components.d.ts

@@ -6,16 +6,18 @@
  */
 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 { Card } from "./components/eds-cards/eds-card-section/eds-card-section";
 import { Event, VNode } from "./stencil-public-runtime";
-import { Step } from "./shared-ui/eds-steps/eds-steps";
-import { Step as Step1 } from "./shared-ui/eds-steps-v2/eds-steps-v2";
+import { SidebarItem } from "./components/eds-sidebar/eds-sidebar";
+import { Step } from "./components/eds-steps/eds-steps";
+import { Step as Step1 } from "./components/eds-steps-v2/eds-steps-v2";
 import { TableAction } from "./components/eds-table/eds-table";
 export { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
-export { Card } from "./shared-ui/eds-card-section/eds-card-section";
+export { Card } from "./components/eds-cards/eds-card-section/eds-card-section";
 export { Event, VNode } from "./stencil-public-runtime";
-export { Step } from "./shared-ui/eds-steps/eds-steps";
-export { Step as Step1 } from "./shared-ui/eds-steps-v2/eds-steps-v2";
+export { SidebarItem } from "./components/eds-sidebar/eds-sidebar";
+export { Step } from "./components/eds-steps/eds-steps";
+export { Step as Step1 } from "./components/eds-steps-v2/eds-steps-v2";
 export { TableAction } from "./components/eds-table/eds-table";
 export namespace Components {
     interface ColorPrimaryPalette {
@@ -210,7 +212,6 @@ export namespace Components {
           * The HTML element type for the button (e.g., 'button', 'a'). Default is 'button'.
          */
         "elementType": 'button' | 'a';
-        "extraClass"?: string;
         /**
           * The icon name to be displayed inside the button. Assumes a string for the icon name.
          */
@@ -756,6 +757,7 @@ export namespace Components {
      * - **Footer Integration**: Optionally displays social links and a customizable footer section within the fullscreen menu.
      */
     interface EdsFullscreenMenu {
+        "close": () => Promise<void>;
         /**
           * URL for the logo link in the header.
           * @default "/"
@@ -779,6 +781,7 @@ export namespace Components {
           * @attr menu-links
          */
         "menuLinks": string;
+        "open": () => Promise<void>;
     }
     interface EdsGauge {
         /**
@@ -1475,7 +1478,6 @@ export namespace Components {
           * Indicates whether the link points to an external URL. Defaults to false.
          */
         "external": boolean;
-        "extraClass"?: string;
         /**
           * If true, the label will be hidden on smaller screens.
          */
@@ -1762,6 +1764,28 @@ export namespace Components {
          */
         "withContainer": boolean;
     }
+    interface EdsSidebar {
+        /**
+          * Current active URL for routing
+         */
+        "activeUrl": string;
+        /**
+          * Enable/disable routing behavior
+         */
+        "enableRouting": boolean;
+        /**
+          * Sidebar items data structure Can be passed as JSON string in HTML or as object via JavaScript
+         */
+        "items": SidebarItem[] | string;
+        /**
+          * Maximum nesting level to display
+         */
+        "maxLevel": number;
+        /**
+          * Theme variant: 'default' or 'minimal'
+         */
+        "theme": 'default' | 'minimal' | 'ebrains';
+    }
     /**
      * Component representing a list of social network links for EBRAINS.
      * Each link directs users to EBRAINS' profiles on various social networks.
@@ -1805,92 +1829,70 @@ export namespace Components {
         "inverse": boolean;
     }
     interface EdsSteps {
-        /**
-          * Label for the **Back** button (linear mode).
-          * @default "Back"
-          * @attr back-label
-         */
         "backLabel": string;
         /**
-          * If `true`, disables **Next/Finish** and prevents advancing. Useful for gating progression until validation passes.
-          * @default false
-          * @attr disable-next
+          * Allow collapsing the active title (accordion-like) in **non-linear** vertical mode. Ignored in linear mode to prevent content hiding.
          */
-        "disableNext": boolean | boolean[];
+        "collapsibleTitles": boolean;
         /**
-          * Label for the **Finish** button on the **last step** (linear mode).
-          * @default "Finish"
-          * @attr finish-label
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext": boolean | boolean[] | string;
         "finishLabel": string;
         /**
-          * Semantic heading tag used for each step title. Accepted values: `"h3" | "h4" | "h5"`.
-          * @default "h4"
-          * @attr heading-level
+          * Heading level for step titles.
          */
         "headingLevel": 'h3' | 'h4' | 'h5';
         /**
-          * Label for the **Next** button (linear mode).
-          * @default "Next"
-          * @attr next-label
+          * Labels
          */
         "nextLabel": string;
         /**
-          * Steps data as an **array** or **JSON string** of objects: `{ title: string; content?: string }`.  In static mode, all steps and their content render. In linear mode, only the active step renders its content.
-          * @default []
+          * Orientation (applies to linear mode visuals).
+         */
+        "orientation": 'vertical' | 'horizontal';
+        /**
+          * Steps data as array or JSON string.
          */
         "steps": string | Step[];
         /**
-          * Stepper mode. - `static`: all steps are visible (no navigation controls) - `linear`: one step at a time with Back/Next/Finish controls
-          * @default "static"
+          * Stepper mode.
          */
         "type": 'static' | 'linear';
     }
     interface EdsStepsV2 {
-        /**
-          * Label text for the "Back" button.
-         */
         "backLabel": string;
         /**
-          * If true, apply an inverse background to the container.
-         */
-        "bg": boolean;
-        /**
-          * If true, disables the "Next" button to block progression.
-         */
-        "disableNext": boolean;
-        /**
-          * Label text for the "Finish" button (last step in linear mode).
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext": boolean | boolean[] | string;
         "finishLabel": string;
         /**
-          * Heading level to use for each step title.
-          * @default "h4"
+          * Heading level for titles
          */
         "headingLevel": 'h3' | 'h4' | 'h5';
         /**
-          * Optional image source to display above the steps.
+          * Optional illustration
          */
         "imageSrc"?: string;
-        /**
-          * Optional image width for the `eds-img` component.
-         */
         "imageWidth"?: number;
-        /**
-          * Optional message to display inside the placeholder if no image is provided.
-         */
         "message"?: string;
         /**
-          * Label text for the "Next" button.
+          * Labels
          */
         "nextLabel": string;
         /**
-          * JSON string or an array of step objects. Each object should have a `title` and optional `content` property.
+          * Orientation (applies to linear visuals)
+         */
+        "orientation": 'vertical' | 'horizontal';
+        /**
+          * JSON string or array of steps: { title, content? }
          */
         "steps": string | Step1[];
         /**
-          * The type of stepper: - `"static"`: shows all steps with their content. - `"linear"`: shows only one step at a time with navigation controls.
-          * @default "static"
+          * Stepper mode
          */
         "type": 'static' | 'linear';
     }
@@ -1960,6 +1962,14 @@ export namespace Components {
           * Enable or disable search input for filtering
          */
         "searchEnabled": boolean;
+        /**
+          * Enable or disable column sorting
+         */
+        "sortingEnabled": boolean;
+        /**
+          * Theme for table styling - 'default' or 'color' for alternating row colors
+         */
+        "theme": 'default' | 'color';
     }
     /**
      * `EdsTabs` is a tabs component that renders a navigational tab bar.
@@ -2163,6 +2173,10 @@ export interface EdsRatingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsRatingElement;
 }
+export interface EdsSidebarCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsSidebarElement;
+}
 export interface EdsSplashScreenCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsSplashScreenElement;
@@ -3169,6 +3183,23 @@ declare global {
         prototype: HTMLEdsSectionHeadingElement;
         new (): HTMLEdsSectionHeadingElement;
     };
+    interface HTMLEdsSidebarElementEventMap {
+        "sidebar": string;
+    }
+    interface HTMLEdsSidebarElement extends Components.EdsSidebar, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEdsSidebarElementEventMap>(type: K, listener: (this: HTMLEdsSidebarElement, ev: EdsSidebarCustomEvent<HTMLEdsSidebarElementEventMap[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 HTMLEdsSidebarElementEventMap>(type: K, listener: (this: HTMLEdsSidebarElement, ev: EdsSidebarCustomEvent<HTMLEdsSidebarElementEventMap[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 HTMLEdsSidebarElement: {
+        prototype: HTMLEdsSidebarElement;
+        new (): HTMLEdsSidebarElement;
+    };
     /**
      * Component representing a list of social network links for EBRAINS.
      * Each link directs users to EBRAINS' profiles on various social networks.
@@ -3570,6 +3601,7 @@ declare global {
         "eds-rating": HTMLEdsRatingElement;
         "eds-section-core": HTMLEdsSectionCoreElement;
         "eds-section-heading": HTMLEdsSectionHeadingElement;
+        "eds-sidebar": HTMLEdsSidebarElement;
         "eds-social-networks": HTMLEdsSocialNetworksElement;
         "eds-spinner": HTMLEdsSpinnerElement;
         "eds-splash-screen": HTMLEdsSplashScreenElement;
@@ -3804,7 +3836,6 @@ declare namespace LocalJSX {
           * The HTML element type for the button (e.g., 'button', 'a'). Default is 'button'.
          */
         "elementType"?: 'button' | 'a';
-        "extraClass"?: string;
         /**
           * The icon name to be displayed inside the button. Assumes a string for the icon name.
          */
@@ -5128,7 +5159,6 @@ declare namespace LocalJSX {
           * Indicates whether the link points to an external URL. Defaults to false.
          */
         "external"?: boolean;
-        "extraClass"?: string;
         /**
           * If true, the label will be hidden on smaller screens.
          */
@@ -5410,6 +5440,32 @@ declare namespace LocalJSX {
          */
         "withContainer"?: boolean;
     }
+    interface EdsSidebar {
+        /**
+          * Current active URL for routing
+         */
+        "activeUrl"?: string;
+        /**
+          * Enable/disable routing behavior
+         */
+        "enableRouting"?: boolean;
+        /**
+          * Sidebar items data structure Can be passed as JSON string in HTML or as object via JavaScript
+         */
+        "items"?: SidebarItem[] | string;
+        /**
+          * Maximum nesting level to display
+         */
+        "maxLevel"?: number;
+        /**
+          * Event emitted when the routing is changed.
+         */
+        "onSidebar"?: (event: EdsSidebarCustomEvent<string>) => void;
+        /**
+          * Theme variant: 'default' or 'minimal'
+         */
+        "theme"?: 'default' | 'minimal' | 'ebrains';
+    }
     /**
      * Component representing a list of social network links for EBRAINS.
      * Each link directs users to EBRAINS' profiles on various social networks.
@@ -5457,135 +5513,90 @@ declare namespace LocalJSX {
         "onSplash"?: (event: EdsSplashScreenCustomEvent<{ type: 'hidden'; message: string } | { type: 'error'; message: string }>) => void;
     }
     interface EdsSteps {
-        /**
-          * Label for the **Back** button (linear mode).
-          * @default "Back"
-          * @attr back-label
-         */
         "backLabel"?: string;
         /**
-          * If `true`, disables **Next/Finish** and prevents advancing. Useful for gating progression until validation passes.
-          * @default false
-          * @attr disable-next
+          * Allow collapsing the active title (accordion-like) in **non-linear** vertical mode. Ignored in linear mode to prevent content hiding.
          */
-        "disableNext"?: boolean | boolean[];
+        "collapsibleTitles"?: boolean;
         /**
-          * Label for the **Finish** button on the **last step** (linear mode).
-          * @default "Finish"
-          * @attr finish-label
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext"?: boolean | boolean[] | string;
         "finishLabel"?: string;
         /**
-          * Semantic heading tag used for each step title. Accepted values: `"h3" | "h4" | "h5"`.
-          * @default "h4"
-          * @attr heading-level
+          * Heading level for step titles.
          */
         "headingLevel"?: 'h3' | 'h4' | 'h5';
         /**
-          * Label for the **Next** button (linear mode).
-          * @default "Next"
-          * @attr next-label
+          * Labels
          */
         "nextLabel"?: string;
-        /**
-          * Fired when the user clicks **Back** (before going back), with the **target** step index (current - 1).
-          * @event back
-         */
         "onBack"?: (event: EdsStepsCustomEvent<number>) => void;
-        /**
-          * Fired when the user clicks **Finish** on the **last** step.
-          * @event finished
-         */
         "onFinished"?: (event: EdsStepsCustomEvent<void>) => void;
-        /**
-          * Fired when the user clicks **Next** (before advancing), with the **target** step index (current + 1).
-          * @event next
-         */
         "onNext"?: (event: EdsStepsCustomEvent<number>) => void;
+        "onStep"?: (event: EdsStepsCustomEvent<number>) => void;
         /**
-          * Fired whenever the active step changes. Payload: the **current step index**.
-          * @event step
+          * Orientation (applies to linear mode visuals).
          */
-        "onStep"?: (event: EdsStepsCustomEvent<number>) => void;
+        "orientation"?: 'vertical' | 'horizontal';
         /**
-          * Steps data as an **array** or **JSON string** of objects: `{ title: string; content?: string }`.  In static mode, all steps and their content render. In linear mode, only the active step renders its content.
-          * @default []
+          * Steps data as array or JSON string.
          */
         "steps"?: string | Step[];
         /**
-          * Stepper mode. - `static`: all steps are visible (no navigation controls) - `linear`: one step at a time with Back/Next/Finish controls
-          * @default "static"
+          * Stepper mode.
          */
         "type"?: 'static' | 'linear';
     }
     interface EdsStepsV2 {
-        /**
-          * Label text for the "Back" button.
-         */
         "backLabel"?: string;
         /**
-          * If true, apply an inverse background to the container.
-         */
-        "bg"?: boolean;
-        /**
-          * If true, disables the "Next" button to block progression.
-         */
-        "disableNext"?: boolean;
-        /**
-          * Label text for the "Finish" button (last step in linear mode).
+          * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
+          * @attr disable-next
          */
+        "disableNext"?: boolean | boolean[] | string;
         "finishLabel"?: string;
         /**
-          * Heading level to use for each step title.
-          * @default "h4"
+          * Heading level for titles
          */
         "headingLevel"?: 'h3' | 'h4' | 'h5';
         /**
-          * Optional image source to display above the steps.
+          * Optional illustration
          */
         "imageSrc"?: string;
-        /**
-          * Optional image width for the `eds-img` component.
-         */
         "imageWidth"?: number;
-        /**
-          * Optional message to display inside the placeholder if no image is provided.
-         */
         "message"?: string;
         /**
-          * Label text for the "Next" button.
+          * Labels
          */
         "nextLabel"?: string;
         /**
-          * Emitted when the "Back" button is clicked.
-          * @event back
-          * @payload {number} The target step index.
+          * Fired before going back, with the target step index.
          */
         "onBack"?: (event: EdsStepsV2CustomEvent<number>) => void;
         /**
-          * Emitted when the "Finish" button is clicked (last step in linear mode).
-          * @event finished
+          * Fired when user clicks Finish on the last step.
          */
         "onFinished"?: (event: EdsStepsV2CustomEvent<void>) => void;
         /**
-          * Emitted when the "Next" button is clicked.
-          * @event next
-          * @payload {number} The target step index.
+          * Fired before advancing, with the target step index.
          */
         "onNext"?: (event: EdsStepsV2CustomEvent<number>) => void;
         /**
-          * Emitted when the active step changes.
-          * @event step
-          * @payload {number} The index of the new active step.
+          * Fired whenever the active step changes. Payload: current step index.
          */
         "onStep"?: (event: EdsStepsV2CustomEvent<number>) => void;
         /**
-          * JSON string or an array of step objects. Each object should have a `title` and optional `content` property.
+          * Orientation (applies to linear visuals)
+         */
+        "orientation"?: 'vertical' | 'horizontal';
+        /**
+          * JSON string or array of steps: { title, content? }
          */
         "steps"?: string | Step1[];
         /**
-          * The type of stepper: - `"static"`: shows all steps with their content. - `"linear"`: shows only one step at a time with navigation controls.
-          * @default "static"
+          * Stepper mode
          */
         "type"?: 'static' | 'linear';
     }
@@ -5663,6 +5674,14 @@ declare namespace LocalJSX {
           * Enable or disable search input for filtering
          */
         "searchEnabled"?: boolean;
+        /**
+          * Enable or disable column sorting
+         */
+        "sortingEnabled"?: boolean;
+        /**
+          * Theme for table styling - 'default' or 'color' for alternating row colors
+         */
+        "theme"?: 'default' | 'color';
     }
     /**
      * `EdsTabs` is a tabs component that renders a navigational tab bar.
@@ -5902,6 +5921,7 @@ declare namespace LocalJSX {
         "eds-rating": EdsRating;
         "eds-section-core": EdsSectionCore;
         "eds-section-heading": EdsSectionHeading;
+        "eds-sidebar": EdsSidebar;
         "eds-social-networks": EdsSocialNetworks;
         "eds-spinner": EdsSpinner;
         "eds-splash-screen": EdsSplashScreen;
@@ -6243,6 +6263,7 @@ declare module "@stencil/core" {
             "eds-rating": LocalJSX.EdsRating & JSXBase.HTMLAttributes<HTMLEdsRatingElement>;
             "eds-section-core": LocalJSX.EdsSectionCore & JSXBase.HTMLAttributes<HTMLEdsSectionCoreElement>;
             "eds-section-heading": LocalJSX.EdsSectionHeading & JSXBase.HTMLAttributes<HTMLEdsSectionHeadingElement>;
+            "eds-sidebar": LocalJSX.EdsSidebar & JSXBase.HTMLAttributes<HTMLEdsSidebarElement>;
             /**
              * Component representing a list of social network links for EBRAINS.
              * Each link directs users to EBRAINS' profiles on various social networks.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebrains/components",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.js",
   "es2015": "./dist/esm/index.mjs",

package/dist/collection/shared-ui/eds-steps/eds-steps.css

@@ -1,139 +0,0 @@
-.steps {
-  position: sticky;
-  margin-left: 16px;
-  margin-bottom: 12px;
-  border-left: 1px solid var(--soft-color, #ddd);
-  /* replace var() with your color if needed */
-  padding-left: 23px;
-  counter-reset: step;
-}
-
-/* Style for h3 headings inside the steps */
-.steps h3 {
-  counter-increment: step;
-  font-size: var(--f-heading-05-fontSize);
-  font-weight: var(--f-heading-05-fontWeight);
-  line-height: var(--f-heading-05-lineHeight);
-  position: relative;
-}
-
-.steps h3::before {
-  content: counter(step);
-  position: absolute;
-  left: -40px;
-  top: -2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  font-size: 1rem;
-  border: 1px solid #ccc;
-  /* adjust border style as needed */
-  background: var(--grey-900);
-  /* adjust background color as needed */
-  color: #fff;
-  /* adjust text color as needed */
-  border-radius: 50%;
-}
-
-/* Style for h4 headings inside the steps */
-.steps h4,
-.steps h5 {
-  counter-increment: step;
-  font-size: var(--f-heading-06-fontSize);
-  font-weight: var(--f-heading-06-fontWeight);
-  line-height: var(--f-heading-06-lineHeight);
-  position: relative;
-}
-
-.steps h4::before,
-.steps h5::before {
-  content: counter(step);
-  position: absolute;
-  left: -40px;
-  top: -2px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 30px;
-  height: 30px;
-  font-size: 0.875rem;
-  border: 1px solid #ccc;
-  background: #333;
-  color: #fff;
-  border-radius: 50%;
-}
-
-/* Style for blockquotes inside the steps */
-.steps blockquote {
-  margin-top: 16px;
-  margin-bottom: 16px;
-  font-style: italic;
-  color: #aaa;
-  padding-left: 6px;
-}
-
-.f-body-02 {
-  font-family: var(--f-body-02-fontFamily);
-  font-weight: var(--f-body-02-fontWeight);
-  font-size: var(--f-body-02-fontSize);
-  line-height: var(--f-body-02-lineHeight);
-  letter-spacing: var(--f-body-02-letterSpacing);
-}
-
-.text-light {
-  color: var(--grey-700);
-}
-
-.text-lighter {
-  color: var(--grey-600);
-}
-
-.my-16 {
-  margin-top: 1rem;
-  margin-bottom: 1rem;
-}
-
-.mt-16 {
-  margin-top: 1rem;
-}
-
-.mb-28 {
-  margin-bottom: 1.75rem;
-}
-
-.ml-8 {
-  margin-left: 0.5rem;
-}
-
-.gap-y-16 {
-  row-gap: 1rem;
-}
-
-.gap-x-16 {
-  -moz-column-gap: 1rem;
-  column-gap: 1rem;
-}
-
-.flex {
-  display: flex;
-}
-
-.grid {
-  display: grid;
-}
-
-.hidden {
-  display: none;
-}
-
-.block {
-  display: block;
-}
-
-.cursor-pointer {
-  cursor: pointer;
-}
-
-.eds-steps__title { cursor: pointer; }