@ebrains/components 2.4.0 → 3.0.0

package/dist/types/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/.stencil/packages/svgs/src/lib/svgs.d.ts

@@ -0,0 +1,12 @@
+import euSvg from '../img/eu.svg';
+import gitlabColor from '../img/gitlab/color.svg';
+import gitlabBlack from '../img/gitlab/mono.svg';
+import twitter from '../img/social/twitter.svg';
+import linkedin from '../img/social/linkedin.svg';
+import facebook from '../img/social/facebook.svg';
+import youtube from '../img/social/youtube.svg';
+import mastodon from '../img/social/mastodon.svg';
+import bluesky from '../img/social/bluesky.svg';
+import logoNegative from '../img/logo/2025/negative.svg';
+import logoPositive from '../img/logo/2025/positive.svg';
+export { twitter, linkedin, facebook, youtube, mastodon, bluesky, euSvg, gitlabColor, gitlabBlack, logoNegative, logoPositive };

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

@@ -1,82 +1,46 @@
+import { IconName } from '../../utils/icons';
 import { EventEmitter } from '../../stencil-public-runtime';
 /**
  * `EdsAccordion` is a flexible, interactive component for expanding and collapsing content sections.
- * It features a customizable header, optional description, and content area that can be dynamically expanded.
- * This component supports a range of configurations, including background toggling, minimum height adjustments,
- * and various styles to suit different layouts and display requirements.
+ * It features a customizable header with optional icon, description, and content area.
  *
- * It includes an optional button or link element within the header, which can be customized for additional interactions.
+ * Supports two visual variants (`default` and `inverse`) matching the card design system,
+ * with hover effects, smooth CSS-driven expand/collapse animation, and optional icon display.
  *
- * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent components
- * to track its open/close status.
- *
- * Key features include:
- * - Header with customizable title
- * - Expandable/collapsible content section
- * - Background color switch on expand and hover
- * - Compact layout option with reduced header height
- * - Adjustable content height and text clamping
- * - Emitted events for tracking changes in expansion state and context
+ * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent
+ * components to track its open/close status.
  */
 export declare class EdsAccordion {
     /** Host element reference */
     el: HTMLElement;
     /** The title of the accordion, displayed in the header area */
     heading: string;
-    /** Optional description displayed above the main content */
+    /** Optional description displayed below the title in the header */
     description?: string;
-    /** Toggles the background color on expand and hover */
+    /** Visual variant: 'default' for dark background, 'inverse' for light background */
+    variant: 'default' | 'inverse';
+    /** Optional icon displayed in the header */
+    icon?: IconName;
+    /** @deprecated Use `variant` prop instead. Kept for backward compatibility. */
     switchBg: boolean;
     /** Determines if the accordion is expanded by default */
     expanded: boolean;
-    /** Reduces the minimum height of the header for a more compact view
-    @Prop() tiny: boolean = false;*/
-    /** Clamps the text when the accordion is collapsed to prevent overflow */
+    /** Clamps the description text when the accordion is collapsed to prevent overflow */
     clampText: boolean;
-    /**
-     * Intent/style of the toggle button.
-     * Options: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'
-     * @default 'tertiary'
-     */
-    buttonIntent: 'secondary' | 'tertiary' | 'ghost';
     /** Internal state to track if the accordion is expanded */
     isExpanded: boolean;
-    /** Internal state to dynamically set the panel height for proper expansion and collapse */
-    panelHeight: number;
-    /** Tracks if the content is considered "short" based on the current layout */
-    shortContent: boolean;
-    /** Holds the height of the header (<h3>) element */
-    headerHeight: number;
+    /** Internal state for the current toggle icon */
+    toggleIcon: string;
     /** Event emitted when the accordion toggles, indicating the new expanded/collapsed state */
     accordion: EventEmitter<boolean>;
-    /** Reference to the wrapper element for the accordion */
-    private wrapperRef;
-    /** Reference to the element containing the main content */
-    private childContentRef;
-    /** Reference to the header element (h3) */
-    private headerRef;
-    /**
-     * Lifecycle method that sets up the initial panel height and adds a resize event listener
-     * to recalculate height on window resize.
-     */
-    componentDidLoad(): void;
     /**
      * Handles the click event on the accordion header to toggle expansion.
      * Toggles the `isExpanded` state and emits the `accordion` event.
      */
     private handleClick;
     /**
-     * Calculates and sets the panel height based on the content height
-     * and adjusts based on the `shortContent` and `isExpanded` states.
-     */
-    private setPanelHeight;
-    /**
-     * Lifecycle method that cleans up the resize event listener when the component is removed.
-     */
-    disconnectedCallback(): void;
-    /**
-     * Renders the accordion structure, including header, content, description, and any slotted content.
-     * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
+     * Handles keyboard activation on the header (Enter and Space keys).
      */
+    private handleKeyDown;
     render(): any;
 }

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

@@ -10,60 +10,72 @@ declare const _default: {
             control: string;
             description: string;
         };
-        switchBg: {
-            control: string;
+        variant: {
+            control: {
+                type: string;
+            };
+            options: string[];
             description: string;
         };
-        expanded: {
+        icon: {
             control: string;
             description: string;
         };
-        clampText: {
+        expanded: {
             control: string;
             description: string;
         };
-        minHeightContent: {
+        clampText: {
             control: string;
             description: string;
         };
-        buttonIntent: {
-            control: string;
-            options: string[];
-            description: string;
-        };
     };
     args: {
         title: string;
         description: string;
-        switchBg: boolean;
+        variant: string;
         expanded: boolean;
         clampText: boolean;
-        minHeightContent: boolean;
-        buttonIntent: string;
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: any) => string;
+};
+export declare const DefaultVariant: {
+    render: (args: any) => string;
     args: {
         title: string;
         description: string;
-        switchBg: boolean;
-        expanded: boolean;
-        clampText: boolean;
-        minHeightContent: boolean;
-        buttonIntent: string;
     };
 };
-export declare const SlotComponent: {
+export declare const WithIcon: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+        icon: string;
+    };
+};
+export declare const WithIconInverse: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+        icon: string;
+    };
+};
+export declare const Expanded: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+    };
+};
+export declare const WithSlotComponent: {
     render: (args: any) => string;
     args: {
         title: string;
         description: string;
-        switchBg: boolean;
-        expanded: boolean;
-        clampText: boolean;
-        minHeightContent: boolean;
-        buttonIntent: string;
     };
 };

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

@@ -1,54 +1,65 @@
 import { EventEmitter } from '../../stencil-public-runtime';
+import { IconName } from '../../utils/icons';
 /**
- * `EdsAlert` is a versatile alert component designed for displaying contextual messages.
- * This component offers various configuration options to support different use cases, making it ideal for notifying users of information, warnings, errors, or successes.
+ * `EdsAlert` is a versatile alert component for displaying contextual messages.
  *
- * Key features include:
- * - Customizable alert message with different visual intents (`default`, `warning`, `error`, `success`).
- * - Configurable layout direction (`horizontal` or `vertical`) to accommodate various design requirements.
- * - Optional pressable element (link or button) that allows users to interact with the alert.
- * - Emits context events to allow parent components to track alert interactions.
- *
- * This component is styled with predefined CSS classes to ensure consistent appearance across different alert types and layout configurations.
+ * Key features:
+ * - Contextual intents (`default`, `info`, `warning`, `error`, `success`) with matching icons and accent colors
+ * - Configurable layout direction (`horizontal` or `vertical`)
+ * - Optional action element (link when URL provided, ghost button otherwise)
+ * - Optional dismiss button to close the alert
+ * - Left accent border colored per intent
  */
 export declare class EdsAlert {
     /**
      * The main message or text to be displayed in the alert.
+     * If not provided, slot content will be used instead.
      */
-    message: string;
+    message?: string;
     /**
-     * Determines whether the alert includes a pressable element, such as a button or link.
+     * Label for the action element (link or button).
      */
     pressableLabel?: string;
     /**
-     * The URL for the pressable element if it is a link.
+     * URL for the action element. When provided, renders a link instead of a button.
      */
     pressableUrl?: string;
     /**
-     * The layout direction of the alert content, either 'horizontal' or 'vertical'.
+     * The layout direction of the alert content.
      */
     direction: 'horizontal' | 'vertical';
     /**
-     * The visual intent or style of the alert, indicating the alert type.
+     * The visual intent of the alert. 'info' is an alias for 'default'.
+     */
+    intent: 'default' | 'info' | 'warning' | 'error' | 'success' | 'brand';
+    /**
+     * Optional icon override. When not set, an icon matching the intent is shown automatically.
      */
-    intent: 'default' | 'warning' | 'error' | 'success';
+    icon?: IconName;
     /**
-     * The border style of the alert. Defaults to "rounded" (rounded borders).
-     * Set to "normal" to have non-rounded (square) borders.
+     * When true, shows a close button to dismiss the alert.
      */
-    brd: 'rounded' | 'normal';
+    dismissible: boolean;
+    /** Whether the action element should be shown */
     withBtn: boolean;
+    /** Whether the alert has been dismissed */
+    dismissed: boolean;
     /**
      * Emitted when the alert action button is clicked (for non-URL actions).
      */
     edsalert: EventEmitter<void>;
     /**
-     * Reference to the host element.
+     * Emitted when the alert is dismissed.
      */
+    edsDismiss: EventEmitter<void>;
     el: HTMLElement;
     componentWillLoad(): void;
-    componentDidLoad(): void;
-    emitContext(linkElement: HTMLElement): void;
+    onPressableLabelChange(newVal: string): void;
+    /** Normalize 'info' → 'default' */
+    private get normalizedIntent();
+    /** Get the icon to display, or null if none provided */
+    private get intentIcon();
     private handleAction;
+    private handleDismiss;
     render(): any;
 }

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

@@ -7,18 +7,25 @@ declare const _default: {
             description: string;
         };
         intent: {
-            control: string;
+            control: {
+                type: string;
+            };
             options: string[];
             description: string;
         };
         direction: {
-            control: string;
+            control: {
+                type: string;
+            };
             options: string[];
             description: string;
         };
-        brd: {
+        icon: {
+            control: string;
+            description: string;
+        };
+        dismissible: {
             control: string;
-            options: string[];
             description: string;
         };
         pressableLabel: {
@@ -34,20 +41,86 @@ declare const _default: {
         message: string;
         intent: string;
         direction: string;
-        brd: string;
-        pressableLabel: string;
-        pressableUrl: string;
+        dismissible: boolean;
     };
 };
 export default _default;
 export declare const Default: {
     render: (args: any) => string;
+};
+export declare const Warning: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        icon: string;
+    };
+};
+export declare const Error: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        icon: string;
+    };
+};
+export declare const Success: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        icon: string;
+    };
+};
+export declare const Brand: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        icon: string;
+    };
+};
+export declare const WithLink: {
+    render: (args: any) => string;
     args: {
         message: string;
         intent: string;
-        direction: string;
-        brd: string;
-        pressableLabel: string;
-        pressableUrl: string;
     };
 };
+export declare const WithButton: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        icon: string;
+    };
+};
+export declare const Dismissible: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        icon: string;
+    };
+};
+export declare const WithCustomIcon: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        intent: string;
+        icon: string;
+    };
+};
+export declare const NoIcon: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+    };
+};
+export declare const Vertical: {
+    render: (args: any) => string;
+    args: {
+        message: string;
+        icon: string;
+    };
+};
+export declare const SlotContent: {
+    render: () => string;
+};
+export declare const AllIntents: {
+    render: () => string;
+};

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

@@ -26,10 +26,10 @@ export declare class EdsBreadcrumb {
     items: string | Link[];
     /**
      * The visual style or intent of the breadcrumb links.
-     * Options include: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'.
+     * Options include: 'ghost', 'strong', 'weak', 'inverse', 'underline'.
      * Default is 'ghost'.
      */
-    intent: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline';
+    intent: 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline';
     /**
      * Holds the parsed breadcrumb items after processing the `items` prop.
      * This is an internal state used for rendering the breadcrumb links.

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

@@ -1,15 +1,22 @@
+import { IconName } from '../../utils/icons';
 /**
- * `EdsButton` is a versatile button component designed for a range of actions and interactions in applications.
- * The button offers various customization options for appearance, size, and behavior.
+ * `EdsButton` - Updated for EBRAINS Visual System 2025
  *
- * Key features include:
- * - Configurable visual styles (`intent`) such as primary, secondary, and ghost.
- * - Loading state indicator and disabled state for control over user interactions.
- * - Optional icon display with customizable position and size.
- * - Support for different element types (`button` or `a`) and pill-shaped buttons.
- * - Emits a custom Matomo event when clicked for tracking interactions.
+ * A versatile button component designed for a range of actions and interactions.
+ * Updated to match the new EBRAINS visual identity with:
+ * - Brand black (#07140D) for primary buttons
+ * - Brand green (#00FF9D) for accents and focus states
+ * - Pill-shaped design (rounded-full by default)
+ * - IBM Plex Sans typography
+ * - High-contrast accessibility
  *
- * This component is suitable for buttons, links, and other interactive elements within an interface.
+ * Key features:
+ * - Primary (black) and Secondary (outlined) button styles
+ * - Loading state indicator with proper color handling
+ * - Disabled state for control over user interactions
+ * - Optional icon display with customizable position and size
+ * - Support for different element types (button or a)
+ * - Emits custom Matomo event when clicked for tracking
  */
 export declare class EdsButton {
     /**
@@ -27,9 +34,14 @@ export declare class EdsButton {
     elementType: 'button' | 'a';
     /**
      * The visual intent or style of the button.
-     * Options include 'primary', 'secondary', 'tertiary', 'ghost', and 'ghostInverse'.
+     * - 'primary': Brand black background with white text
+     * - 'secondary': Transparent/white background with black border and text
+     * - 'secondaryInverse': Transparent background with white border and white text (for dark backgrounds)
+     * - 'brand': Brand green background with black text (CTA style)
+     * - 'cta': CTA link style with monospace font (gray text that turns green on hover)
+     * - 'cta-brand': CTA link style with monospace font (always green)
      */
-    intent: 'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse';
+    intent: 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand';
     /**
      * A boolean indicating whether the button is in a loading state.
      */
@@ -39,13 +51,14 @@ export declare class EdsButton {
      */
     disabled: boolean;
     /**
-     * A boolean to determine if the button should have a pill shape (rounded).
+     * A boolean to determine if the button should have a pill shape (rounded-full).
+     * Default is true to match new EBRAINS visual system.
      */
     pill: boolean;
     /**
-     * The icon name to be displayed inside the button. Assumes a string for the icon name.
+     * The icon name to be displayed inside the button.
      */
-    icon?: string;
+    icon?: IconName;
     /**
      * The size of the button. Options are 'small' or 'large'. Default is 'small'.
      */
@@ -62,6 +75,10 @@ export declare class EdsButton {
      * Custom click handler passed to the button.
      */
     triggerClick?: () => void;
+    /**
+     * Whether the button should take the full width of its container.
+     */
+    fullWidth: boolean;
     /**
      * Reference to the host element.
      */

package/dist/types/components/eds-cards/eds-card-app/eds-card-app.d.ts

@@ -0,0 +1,57 @@
+export interface AppTag {
+    label: string;
+}
+/**
+ * `EdsCardApp` is a card component designed to showcase applications with category, title, description, tags, and link.
+ *
+ * Key features:
+ * - Category label at the top (e.g., "BRAIN ATLASES", "DATA MANAGEMENT")
+ * - Large, lightweight title
+ * - Description text
+ * - Multiple tags for features/technologies
+ * - Optional action link at the bottom
+ * - Hover effects with transform and border glow
+ *
+ * This component is ideal for application grids, service catalogs, and platform showcases.
+ */
+export declare class EdsCardApp {
+    /**
+     * The category label (e.g., "BRAIN ATLASES", "DATA MANAGEMENT")
+     * Optional - if not provided, the category tag won't be displayed
+     */
+    category?: string;
+    /**
+     * The main title of the application
+     */
+    title: string;
+    /**
+     * The description text
+     */
+    description: string;
+    /**
+     * Tags to display (features, technologies, etc.)
+     * Can be a JSON string or array of tag objects
+     */
+    tags: string | AppTag[];
+    /**
+     * Optional URL for the action link
+     */
+    url?: string;
+    /**
+     * Optional link text (defaults to "Explore Components")
+     */
+    linkText: string;
+    /**
+     * Visual variant: 'default' for light text on dark background, 'inverse' for dark text on light background
+     */
+    variant: 'default' | 'inverse';
+    /**
+     * Reference to the host element
+     */
+    el: HTMLElement;
+    /**
+     * Parse the tags prop into an array
+     */
+    get parsedTags(): AppTag[];
+    render(): any;
+}

package/dist/types/components/eds-cards/eds-card-app/eds-card-app.stories.d.ts

@@ -0,0 +1,60 @@
+declare const _default: {
+    title: string;
+    component: string;
+    argTypes: {
+        title: {
+            control: string;
+            description: string;
+        };
+        description: {
+            control: string;
+            description: string;
+        };
+        category: {
+            control: string;
+            description: string;
+        };
+        url: {
+            control: string;
+            description: string;
+        };
+        linkText: {
+            control: string;
+            description: string;
+        };
+        variant: {
+            control: string;
+            options: string[];
+        };
+        tags: {
+            control: string;
+            description: string;
+        };
+    };
+    args: {
+        title: string;
+        description: string;
+        category: string;
+        url: string;
+        linkText: string;
+        variant: string;
+        tags: {
+            label: string;
+        }[];
+    };
+};
+export default _default;
+export declare const Default: {
+    render: (args: any) => string;
+};
+export declare const Inverse: {
+    render: (args: any) => string;
+    args: {
+        title: string;
+        description: string;
+        category: string;
+        tags: {
+            label: string;
+        }[];
+    };
+};

package/dist/types/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.d.ts

@@ -24,6 +24,7 @@ export declare class EdsCardDesc {
      * Default is 3 lines.
      */
     truncateLines: string;
+    intent: 'primary' | 'secondary' | 'inverse' | 'dark';
     private getTruncateClass;
     render(): any;
 }