@ebrains/components 2.4.0 → 3.0.0

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

@@ -1,17 +1,22 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName } from '../../utils/icons';
 export declare class EdsRating {
     /**
      * The type of icon to display. Can be "stars" or "thumbs".
      */
-    ratingType: 'star' | 'thumbs-up' | 'thumbs-down';
+    ratingType: IconName;
     /**
      * Number of stars in the rating system.
      */
     ratingCount: number;
     /**
-     * Current selected rating value.
+     * Current selected rating value (controlled from parent).
      */
     selectedRating: number;
+    /**
+     * Internal state to track the current rating.
+     */
+    internalRating: number;
     /**
      * Event emitted when the rating is changed.
      */
@@ -21,6 +26,14 @@ export declare class EdsRating {
      */
     el: HTMLElement;
     private buttonRefs;
+    /**
+     * Watch for changes to the selectedRating prop and sync internal state.
+     */
+    handleSelectedRatingChange(newValue: number): void;
+    /**
+     * Initialize internal rating from prop on component load.
+     */
+    componentWillLoad(): void;
     /**
      * Lifecycle method that runs when the component has fully loaded.
      * It emits a custom event for each `eds-button` element contained within the breadcrumb.

package/dist/types/components/eds-social-networks/eds-social-networks.d.ts

@@ -7,6 +7,13 @@ export declare class EdsSocialNetworks {
      * Social Network custom title to display
      */
     heading: string;
+    /**
+     * Controls the visual variant of the social networks.
+     * - 'default': Light background with dark text
+     * - 'inverse': Dark/black background with white text
+     * @type {'default' | 'inverse'}
+     */
+    variant: 'default' | 'inverse';
     /**
      * Array of social network objects, each containing label, URL, and icon.
      * These are used to render the social network links.

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

@@ -10,10 +10,18 @@ export declare class EdsSteps {
     type: 'static' | 'linear';
     /** Orientation (applies to linear mode 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';
     /** Labels */
     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/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 */
@@ -87,12 +98,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 +117,23 @@ 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:
+     * - 'default': Simple rows with no background
+     * - 'color': Alternating row colors
+     * - 'brand': Modern brand styling with hover effects and green accents
+     */
+    theme: 'default' | 'color' | '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 +147,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 +162,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;
@@ -166,5 +197,8 @@ export declare class EdsTable {
     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,32 @@ declare const _default: {
             };
             description: string;
         };
+        sortingEnabled: {
+            control: {
+                type: string;
+            };
+            description: string;
+        };
         columnSize: {
             control: string;
             options: string[];
+            description: string;
+        };
+        theme: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        view: {
+            control: string;
+            options: string[];
+            description: string;
+        };
+        showViewToggle: {
+            control: {
+                type: string;
+            };
+            description: string;
         };
         actions: {
             control: string;
@@ -57,7 +80,11 @@ declare const _default: {
         rowsPerPage: number;
         paginationEnabled: boolean;
         searchEnabled: boolean;
+        sortingEnabled: boolean;
         columnSize: string;
+        theme: string;
+        view: string;
+        showViewToggle: boolean;
         actions: {
             name: string;
             label: string;
@@ -84,21 +111,83 @@ export declare const Default: {
         rowsPerPage: number;
         paginationEnabled: boolean;
         searchEnabled: boolean;
+        sortingEnabled: boolean;
         columnSize: string;
+        theme: string;
+        view: string;
+        showViewToggle: boolean;
     };
 };
-export declare const WithActions: {
-    render: (args: any) => import("lit-html").TemplateResult<1>;
+export declare const BrandTheme: {
+    render: (args: any) => string;
     args: {
-        actions: ({
+        data: {
+            name: string;
+            age: number;
+            occupation: string;
+        }[];
+        config: {
+            name: {
+                format: string;
+            };
+            occupation: {
+                format: string;
+            };
+        };
+        rowsPerPage: number;
+        paginationEnabled: boolean;
+        searchEnabled: boolean;
+        sortingEnabled: boolean;
+        actions: {
             name: string;
             label: string;
             icon: string;
-        } | {
+            intent: string;
+        }[];
+    };
+};
+export declare const DefaultTheme: {
+    render: (args: any) => string;
+    args: {
+        data: {
+            name: string;
+            age: number;
+            occupation: string;
+        }[];
+        config: {
+            name: {
+                format: string;
+            };
+        };
+        rowsPerPage: number;
+    };
+};
+export declare const CardView: {
+    render: (args: any) => string;
+    args: {
+        data: {
+            name: string;
+            age: number;
+            occupation: string;
+        }[];
+        config: {
+            name: {
+                format: string;
+            };
+        };
+        rowsPerPage: number;
+        theme: string;
+        actions: {
             name: string;
             label: string;
-            icon?: undefined;
-        })[];
+            showLabel: boolean;
+            intent: string;
+        }[];
+    };
+};
+export declare const WithViewToggle: {
+    render: (args: any) => string;
+    args: {
         data: {
             name: string;
             age: number;
@@ -113,8 +202,18 @@ export declare const WithActions: {
             };
         };
         rowsPerPage: number;
-        paginationEnabled: boolean;
-        searchEnabled: boolean;
-        columnSize: string;
+        actions: ({
+            name: string;
+            label: string;
+            icon: string;
+            intent: string;
+            type?: undefined;
+        } | {
+            name: string;
+            label: string;
+            type: string;
+            icon?: undefined;
+            intent?: undefined;
+        })[];
     };
 };

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,16 @@ 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
      */
     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.
      */