@ebrains/components 2.4.1 → 3.1.0

package/dist/types/components/eds-steps/eds-steps.stories.d.ts

@@ -46,7 +46,7 @@ declare const _default: {
             control: string;
             description: string;
         };
-        disableNext: {
+        showFinish: {
             control: string;
             description: string;
         };
@@ -62,7 +62,7 @@ declare const _default: {
         nextLabel: string;
         backLabel: string;
         finishLabel: string;
-        disableNext: boolean;
+        showFinish: boolean;
     };
 };
 export default _default;
@@ -83,28 +83,3 @@ export declare const LinearHorizontal: {
     };
     render: (args: any) => string;
 };
-export declare const LinearBlocked: {
-    args: {
-        type: string;
-        orientation: string;
-        disableNext: boolean;
-    };
-    render: (args: any) => string;
-};
-export declare const CustomLabels: {
-    args: {
-        type: string;
-        orientation: string;
-        nextLabel: string;
-        backLabel: string;
-        finishLabel: string;
-    };
-    render: (args: any) => string;
-};
-export declare const HeadingLevels: {
-    args: {
-        type: string;
-        headingLevel: string;
-    };
-    render: (args: any) => string;
-};

package/dist/types/components/eds-steps-v2/eds-steps-v2.d.ts

@@ -10,6 +10,12 @@ export declare class EdsStepsV2 {
     type: 'static' | 'linear';
     /** Orientation (applies to linear visuals) */
     orientation: 'vertical' | 'horizontal';
+    /**
+     * Visual theme for the steps component.
+     * - 'default': Grey step circles with white text
+     * - 'brand': Brand green step circles with black text (CTA style)
+     */
+    theme: 'default' | 'brand';
     /** Optional illustration */
     imageSrc?: string;
     imageWidth?: number;
@@ -18,6 +24,8 @@ export declare class EdsStepsV2 {
     nextLabel: string;
     backLabel: string;
     finishLabel: string;
+    /** Show or hide the finish button on the last step */
+    showFinish: boolean;
     /**
      * Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string.
      * @attr disable-next

package/dist/types/components/eds-steps-v2/eds-steps-v2.stories.d.ts

@@ -57,7 +57,7 @@ declare const _default: {
             control: string;
             description: string;
         };
-        disableNext: {
+        showFinish: {
             control: string;
             description: string;
         };
@@ -76,14 +76,11 @@ declare const _default: {
         nextLabel: string;
         backLabel: string;
         finishLabel: string;
-        disableNext: boolean;
+        showFinish: boolean;
     };
 };
 export default _default;
 export declare const Static: any;
-export declare const WithImage: any;
 export declare const WithMessage: any;
 export declare const Linear: any;
-export declare const LinearBlocked: any;
-export declare const CustomLabels: any;
-export declare const HeadingLevels: any;
+export declare const LinearHorizontal: any;

package/dist/types/components/eds-switch/eds-switch.d.ts

@@ -16,6 +16,10 @@ export declare class EdsSwitch {
      * Label to display when the switch is OFF.
      */
     labelOff: string;
+    /**
+     * Variant of the switch: 'toggle' (default) or 'segmented' (pill-style buttons)
+     */
+    variant: 'toggle' | 'segmented';
     /**
      * Emitted when the switch is toggled.
      */
@@ -26,4 +30,6 @@ export declare class EdsSwitch {
     private toggleSwitch;
     private handleKeyDown;
     render(): any;
+    private renderToggle;
+    private renderSegmented;
 }

package/dist/types/components/eds-switch/eds-switch.stories.d.ts

@@ -18,15 +18,64 @@ declare const _default: {
             control: string;
             description: string;
         };
+        variant: {
+            control: string;
+            options: string[];
+            description: string;
+        };
     };
     args: {
         checked: boolean;
         disabled: boolean;
         labelOn: string;
         labelOff: string;
+        variant: string;
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: any) => string;
 };
+export declare const WithLabels: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+    };
+};
+export declare const Checked: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+    };
+};
+export declare const Disabled: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+    };
+};
+export declare const Segmented: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+        checked: boolean;
+    };
+};
+export declare const SegmentedChecked: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+    };
+};
+export declare const SegmentedDisabled: {
+    render: (args: any) => string;
+    args: {
+        labelOn: string;
+        labelOff: string;
+    };
+};

package/dist/types/components/eds-table/eds-table.d.ts

@@ -1,14 +1,15 @@
 /**
  * <eds-table
       table-data='[
-        { "Property": "username", "Type": "string", "Required": "Yes" },
-        { "Property": "password", "Type": "string", "Required": "Yes" },
-        { "Property": "email", "Type": "string", "Required": "No" }
+        { "Property": "username", "Type": "string", "Required": "Yes", "Docs": "<a href=\"/docs\">View Docs</a>" },
+        { "Property": "password", "Type": "string", "Required": "Yes", "Docs": "<a href=\"/docs\">View Docs</a>" },
+        { "Property": "email", "Type": "string", "Required": "No", "Docs": "<a href=\"/docs\">View Docs</a>" }
       ]'
       config='{
         "Type": { "format": "uppercase" },
         "Property": { "format": "code" },
-        "Required": { "hidden": true }
+        "Required": { "hidden": true },
+        "Docs": { "format": "html" }
       }'
       actions='[
         { "name": "view",  "label": "View"  },
@@ -40,15 +41,25 @@ export interface TableAction {
     icon?: string;
     /** if true, always render the label on the button (no tooltip) */
     showLabel?: boolean;
+    pos?: 'left' | 'right';
+    /** optional: button intent */
+    intent?: 'brand' | 'primary' | 'secondary' | 'neutral' | 'ghost' | 'brandInverse' | 'secondaryInverse' | 'ghostInverse';
 }
 /**
  * `EdsTable` is a customizable data table component with support for dynamic data fetching, column configuration, pagination, and search functionality.
  *
  * Key Features:
- * - Configurable columns with options to hide or apply text formatting (uppercase, bold, or code).
+ * - Configurable columns with options to hide or apply text formatting (uppercase, bold, code, or html).
  * - Pagination support with adjustable rows per page.
  * - Searchable content for easier data filtering.
  *
+ * Column Format Options:
+ * - 'uppercase': Converts text to uppercase
+ * - 'bold': Wraps text in <strong> tag
+ * - 'code': Wraps text in <code> tag
+ * - 'html': Renders raw HTML content (use for web components, links, etc.)
+ * - 'svg': (deprecated, use 'html') Renders raw HTML content
+ *
  * This component is versatile for displaying data with flexible configuration, and integrates with pagination and search functionalities.
  */
 export declare class EdsTable {
@@ -60,7 +71,7 @@ export declare class EdsTable {
     config: string | {
         [key: string]: {
             hidden?: boolean;
-            format?: 'uppercase' | 'bold' | 'code';
+            format?: 'uppercase' | 'bold' | 'code' | 'html' | 'svg';
         };
     };
     /** Number of rows per page */
@@ -70,13 +81,6 @@ export declare class EdsTable {
     /** Enable or disable search input for filtering */
     searchEnabled: boolean;
     hostWidth?: string;
-    /**
-     * 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';
     /**
      * Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.
      *
@@ -87,12 +91,13 @@ export declare class EdsTable {
      *  - `icon`       (string; optional)  — name of the icon to display in icon-only mode.
      *  - `field`      (string; optional)  — for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).
      *  - `showLabel`  (boolean; optional) — if `true`, render the full `label` instead of an icon + tooltip.
+     *  - `intent`     ("brand" | "primary" | "secondary" | "neutral" | "ghost" | "brandInverse" | "secondaryInverse" | "ghostInverse"; optional) — button intent/style.
      *
      * When you pass JSON, make sure field names match exactly:
      * ```html
      * actions='[
-     *   { "name":"view",  "label":"View",  "icon":"eye" },
-     *   { "name":"edit",  "label":"Edit",  "icon":"pencil", "showLabel":true },
+     *   { "name":"view",  "label":"View",  "icon":"eye", "intent":"brand" },
+     *   { "name":"edit",  "label":"Edit",  "icon":"pencil", "showLabel":true, "intent":"primary" },
      *   { "name":"del",   "label":"Delete","type":"checkbox", "field":"selected" }
      * ]'
      * ```
@@ -105,8 +110,26 @@ export declare class EdsTable {
     actionTemplate?: (row: any) => VNode;
     /** Enable or disable column sorting */
     sortingEnabled: boolean;
-    /** Theme for table styling - 'default' or 'color' for alternating row colors */
-    theme: 'default' | 'color';
+    /**
+     * Theme for table styling.
+     *
+     * The 'default' (no background) and 'color' (alternating rows) themes are
+     * DISABLED — the table now always renders the EBRAINS 'brand' theme (modern
+     * styling, hover, green accents). The prop is kept for API compatibility but
+     * is coerced to 'brand' in componentWillLoad(), so any value a consumer
+     * passes is ignored.
+     */
+    theme: 'brand';
+    /**
+     * View mode for displaying data:
+     * - 'table': Traditional table layout (default)
+     * - 'card': Card grid layout
+     */
+    view: 'table' | 'card';
+    /**
+     * Show view toggle control (segmented switch for Table/Card views)
+     */
+    showViewToggle: boolean;
     /** Parsed actions as array */
     parsedActions: TableAction[];
     /** Just the original data keys (no action columns) */
@@ -120,7 +143,7 @@ export declare class EdsTable {
     parsedConfig: {
         [key: string]: {
             hidden?: boolean;
-            format?: 'uppercase' | 'bold' | 'code' | 'svg';
+            format?: 'uppercase' | 'bold' | 'code' | 'html' | 'svg';
         };
     };
     totalRows: number;
@@ -135,6 +158,10 @@ export declare class EdsTable {
         row: any;
         checked: boolean;
     }>;
+    /** Emitted when view mode changes */
+    viewchange: EventEmitter<{
+        view: 'table' | 'card';
+    }>;
     handleDataChange(): void;
     handleConfigChange(): void;
     handleActionsChange(): void;
@@ -160,11 +187,12 @@ export declare class EdsTable {
     private emitAction;
     private shouldEnablePagination;
     private updateColumns;
-    private getVisibleColumnsCount;
-    private divisionFactor;
     private capitalize;
     private onActionKeyDown;
     private handleSort;
     private getSortedRows;
+    private handleViewChange;
+    private renderCardView;
+    private renderTableView;
     render(): any;
 }

package/dist/types/components/eds-table/eds-table.stories.d.ts

@@ -28,9 +28,22 @@ declare const _default: {
             };
             description: string;
         };
-        columnSize: {
+        sortingEnabled: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
+        view: {
             control: string;
             options: string[];
+            description: string;
+        };
+        showViewToggle: {
+            control: {
+                type: string;
+            };
+            description: string;
         };
         actions: {
             control: string;
@@ -57,7 +70,9 @@ declare const _default: {
         rowsPerPage: number;
         paginationEnabled: boolean;
         searchEnabled: boolean;
-        columnSize: string;
+        sortingEnabled: boolean;
+        view: string;
+        showViewToggle: boolean;
         actions: {
             name: string;
             label: string;
@@ -84,37 +99,14 @@ export declare const Default: {
         rowsPerPage: number;
         paginationEnabled: boolean;
         searchEnabled: boolean;
-        columnSize: string;
-    };
-};
-export declare const WithActions: {
-    render: (args: any) => import("lit-html").TemplateResult<1>;
-    args: {
-        actions: ({
-            name: string;
-            label: string;
-            icon: string;
-        } | {
+        sortingEnabled: boolean;
+        view: string;
+        showViewToggle: boolean;
+        actions: {
             name: string;
             label: string;
-            icon?: undefined;
-        })[];
-        data: {
-            name: string;
-            age: number;
-            occupation: string;
+            showLabel: boolean;
+            intent: string;
         }[];
-        config: {
-            name: {
-                format: string;
-            };
-            occupation: {
-                format: string;
-            };
-        };
-        rowsPerPage: number;
-        paginationEnabled: boolean;
-        searchEnabled: boolean;
-        columnSize: string;
     };
 };

package/dist/types/components/eds-tabs/eds-tabs.d.ts

@@ -1,12 +1,15 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
- * `EdsTabs` is a tabs component that renders a navigational tab bar.
- * Each tab can be configured with various properties such as label, URL, active state, and more.
- * It includes interactive features like handling tab clicks, scrolling to the active tab,
- * and emitting events for tab changes and analytics tracking.
+ * `EdsTabs` is a modern tabs component with a pill-shaped container design.
+ * Features a clean, minimal interface with smooth transitions and two variant styles.
  *
- * This component is ideal for building a customizable tab navigation system with accessibility features
- * and is designed to fit seamlessly into any layout.
+ * Key features:
+ * - Default variant (dark background) and inverse variant (light background)
+ * - Pill-shaped container with rounded tabs
+ * - Smooth hover and active state transitions
+ * - Keyboard navigation support (Arrow keys, Home, End)
+ * - Analytics tracking integration
+ * - Accessible with proper ARIA attributes
  */
 export declare class EdsTabs {
     el: HTMLElement;
@@ -17,17 +20,20 @@ export declare class EdsTabs {
     /** JSON string for tabs data */
     tabs: string | {
         label: string;
-        url: string;
+        url?: string;
         active: boolean;
         ariaLabel?: string;
     }[];
+    /**
+     * Visual variant: 'default' for dark backgrounds, 'inverse' for light backgrounds
+     */
+    variant: 'default' | 'inverse';
     /** State to store parsed tabs */
     parsedTabs: Array<{
         label: string;
-        url: string;
+        url?: string;
         active: boolean;
         ariaLabel?: string;
-        onClick?: () => void;
     }>;
     activeIndex: number;
     tab: EventEmitter<{
@@ -35,24 +41,26 @@ export declare class EdsTabs {
         index: number;
         name?: string;
     }>;
-    tabContainer: HTMLElement;
     private tabRefs;
     componentWillLoad(): void;
     /**
      * Parses the `tabs` prop into an array of tab objects.
-     * Returns an empty array if parsing fails or if `tabs` is not a valid JSON string or object.
      *
-     * @returns {any[]} Array of parsed tab objects
+     * Note: we deliberately do NOT clear `tabRefs` here. Consumers
+     * often re-pass `tabs` with an updated `active` flag every time
+     * the user switches tabs (Vue/React re-render on event). Wiping
+     * the refs leaves a window in which a queued focus() call sees
+     * `tabRefs[index] === undefined` and silently no-ops — focus
+     * gets stuck on the previous tab even though `aria-selected` and
+     * the background already moved. Stencil re-binds refs on render,
+     * so the array stays in sync without us emptying it; we only
+     * truncate when the new list is shorter to drop stale entries.
      */
     parseTabs(): void;
-    componentDidLoad(): void;
     componentDidUpdate(): void;
     private setActiveIndex;
-    private scrollToActiveTab;
-    private getTabOptions;
     private handleTabClick;
     private onKeyDown;
     private setTabRef;
-    private tabCva;
     render(): any;
 }

package/dist/types/components/eds-tabs/eds-tabs.stories.d.ts

@@ -4,13 +4,64 @@ declare const _default: {
     argTypes: {
         tabs: {
             control: string;
-            defaultValue: {
-                label: string;
-                url: string;
-                active: boolean;
-            }[];
+            description: string;
         };
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
+            description: string;
+        };
+        id: {
+            control: string;
+            description: string;
+        };
+        navAriaLabel: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        tabs: {
+            label: string;
+            url: string;
+            active: boolean;
+        }[];
+        variant: string;
+        id: string;
+        navAriaLabel: string;
     };
 };
 export default _default;
-export declare const Default: any;
+export declare const Default: {
+    render: (args: any) => HTMLDivElement;
+};
+export declare const Inverse: {
+    render: (args: any) => HTMLDivElement;
+    args: {
+        variant: string;
+    };
+};
+export declare const ManyTabs: {
+    render: (args: any) => HTMLDivElement;
+    args: {
+        tabs: {
+            label: string;
+            active: boolean;
+        }[];
+        id: string;
+    };
+};
+export declare const WithAriaLabels: {
+    render: (args: any) => HTMLDivElement;
+    args: {
+        tabs: {
+            label: string;
+            active: boolean;
+            ariaLabel: string;
+        }[];
+        navAriaLabel: string;
+        id: string;
+    };
+};

package/dist/types/components/eds-tag/eds-tag.d.ts

@@ -10,7 +10,7 @@ export declare class EdsTag {
     /**
      * The visual style or intent of the tag.
      */
-    intent: 'primary' | 'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong';
+    intent: 'primary' | 'dark' | 'inverse' | 'brand' | 'brand-dark' | 'strong';
     /**
      * The size of the tag: small, medium, or large.
      */

package/dist/types/components/eds-tag/eds-tag.stories.d.ts

@@ -33,3 +33,9 @@ export declare const Default: {
         size: string;
     };
 };
+export declare const AllIntents: {
+    render: () => string;
+};
+export declare const AllSizes: {
+    render: () => string;
+};

package/dist/types/components/eds-toast/eds-toast.d.ts

@@ -7,7 +7,7 @@ export declare class EdsToast {
     /**
      * The visual intent or style of the toast, indicating the toast type.
      */
-    intent: 'default' | 'success' | 'error' | 'warning';
+    intent: 'default' | 'success' | 'error' | 'warning' | 'brand' | 'brandInverse';
     /**
      * Determines the duration before the toast auto-dismisses (in milliseconds).
      * If set, the toast will auto-dismiss and show a close button.

package/dist/types/components/eds-toast/eds-toast.stories.d.ts

@@ -31,3 +31,13 @@ export declare const Default: {
         duration: number;
     };
 };
+export declare const Brand: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        duration: number;
+    };
+};
+export declare const AllVariants: {
+    render: () => string;
+};

package/dist/types/components/eds-user/eds-user.d.ts

@@ -5,7 +5,7 @@ interface User {
     family_name: string;
     preferred_username: string;
 }
-type Intent = 'primary' | 'secondary' | 'ghost' | 'tertiary';
+type Intent = 'primary' | 'secondary' | 'brand' | 'ghost';
 /**
  * `EdsUser` is a user component for managing and displaying
  * the user's auth information. Displays a user dropdown menu when authenticated.