@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/components/eds-alert/eds-alert.js

@@ -1,65 +1,13 @@
 import { h } from "@stencil/core";
-import { cva } from "class-variance-authority";
-const alertStyles = cva(['w-full bg-dark'], {
-    variants: {
-        intent: {
-            default: '',
-            warning: 'bg-warning',
-            error: 'bg-error',
-            success: 'bg-success'
-        },
-        brd: {
-            rounded: 'rounded-lg border-inside after:border-softest after:rounded-lg',
-            normal: ''
-        },
-        direction: {
-            vertical: 'space-y-12',
-            horizontal: 'flex flex-row items-center justify-between gap-x-12'
-        },
-        withBtn: {
-            false: '',
-            true: ''
-        }
-    },
-    compoundVariants: [
-        {
-            direction: 'horizontal',
-            withBtn: true,
-            class: 'px-20 pr-12 py-12'
-        },
-        {
-            direction: 'horizontal',
-            withBtn: false,
-            class: 'p-20'
-        },
-        {
-            direction: 'vertical',
-            withBtn: true,
-            class: 'p-16'
-        },
-        {
-            direction: 'vertical',
-            withBtn: false,
-            class: 'px-12 py-20'
-        }
-    ],
-    defaultVariants: {
-        intent: 'default',
-        brd: 'rounded',
-        direction: 'horizontal'
-    }
-});
 /**
- * `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.
- *
- * 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.
+ * `EdsAlert` is a versatile alert component for displaying contextual messages.
  *
- * 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 class EdsAlert {
     constructor() {
@@ -68,46 +16,38 @@ export class EdsAlert {
         this.pressableUrl = undefined;
         this.direction = 'horizontal';
         this.intent = 'default';
-        this.brd = 'rounded';
+        this.icon = undefined;
+        this.dismissible = false;
         this.withBtn = false;
+        this.dismissed = false;
     }
     componentWillLoad() {
         this.withBtn = Boolean(this.pressableLabel);
     }
-    componentDidLoad() {
-        // Focus the alert container for immediate screen reader announcement
-        /*if (this.intent === 'error' || this.intent === 'warning') {
-          this.el.shadowRoot?.querySelector('[role="alert"]')?.setAttribute('tabindex', '-1');
-          (this.el.shadowRoot?.querySelector('[role="alert"]') as HTMLElement)?.focus();
-        }*/
-        var _a;
-        // Query for the 'eds-link' element inside the shadow root.
-        const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
-        if (lnk) {
-            this.emitContext(lnk);
-        }
+    onPressableLabelChange(newVal) {
+        this.withBtn = Boolean(newVal);
     }
-    emitContext(linkElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        linkElement.dispatchEvent(event);
+    /** Normalize 'info' → 'default' */
+    get normalizedIntent() {
+        return this.intent === 'info' ? 'default' : this.intent;
+    }
+    /** Get the icon to display, or null if none provided */
+    get intentIcon() {
+        return this.icon || null;
     }
     handleAction() {
-        // Emit the alertAction event for parent components to handle
         this.edsalert.emit();
     }
+    handleDismiss() {
+        this.dismissed = true;
+        this.edsDismiss.emit();
+    }
     render() {
-        const ariaLabel = this.intent !== 'default' ? `${this.intent} alert` : 'alert';
-        return (h("div", { key: 'd8f0a45ddbaf3d3eb284751e33ddfdce2e13b67a', class: alertStyles({
-                intent: this.intent,
-                brd: this.brd,
-                direction: this.direction,
-                withBtn: this.withBtn
-            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, h("p", { key: '179862c141a2ce05fa9f8562be7e64196baa3922', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: '3677358bd563a3e2ee1b74309dc4fb6c84ac475f', id: "alert-action" }, this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (h("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
+        if (this.dismissed)
+            return null;
+        const intent = this.normalizedIntent;
+        const ariaLabel = intent !== 'default' ? `${intent} alert` : 'alert';
+        return (h("div", { class: `alert-card alert-${intent} alert-${this.direction}`, role: "alert", "aria-label": ariaLabel, "aria-live": intent === 'error' || intent === 'warning' ? 'assertive' : 'polite' }, this.intentIcon && (h("div", { class: "alert-icon" }, h("eds-icon-wrapper", { name: this.intentIcon, size: 20 }))), h("div", { class: "alert-body" }, this.message ? (h("p", { class: "alert-message" }, this.message)) : (h("div", { class: "alert-message" }, h("slot", null)))), this.withBtn && (h("div", { class: "alert-action" }, this.pressableUrl ? (h("eds-link", { label: this.pressableLabel, url: this.pressableUrl, intent: "strong" })) : (h("eds-button", { label: this.pressableLabel, intent: "ghost", onClick: () => this.handleAction() })))), this.dismissible && (h("button", { class: "alert-dismiss", onClick: () => this.handleDismiss(), "aria-label": "Dismiss alert" }, h("eds-icon-wrapper", { name: "close", size: 20 })))));
     }
     static get is() { return "eds-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -131,11 +71,11 @@ export class EdsAlert {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The main message or text to be displayed in the alert."
+                    "text": "The main message or text to be displayed in the alert.\nIf not provided, slot content will be used instead."
                 },
                 "attribute": "message",
                 "reflect": false
@@ -152,7 +92,7 @@ export class EdsAlert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Determines whether the alert includes a pressable element, such as a button or link."
+                    "text": "Label for the action element (link or button)."
                 },
                 "attribute": "pressable-label",
                 "reflect": false
@@ -169,7 +109,7 @@ export class EdsAlert {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The URL for the pressable element if it is a link."
+                    "text": "URL for the action element. When provided, renders a link instead of a button."
                 },
                 "attribute": "pressable-url",
                 "reflect": false
@@ -186,7 +126,7 @@ export class EdsAlert {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The layout direction of the alert content, either 'horizontal' or 'vertical'."
+                    "text": "The layout direction of the alert content."
                 },
                 "attribute": "direction",
                 "reflect": false,
@@ -196,43 +136,67 @@ export class EdsAlert {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'warning' | 'error' | 'success'",
-                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "original": "'default' | 'info' | 'warning' | 'error' | 'success' | 'brand'",
+                    "resolved": "\"brand\" | \"default\" | \"error\" | \"info\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual intent or style of the alert, indicating the alert type."
+                    "text": "The visual intent of the alert. 'info' is an alias for 'default'."
                 },
                 "attribute": "intent",
                 "reflect": false,
                 "defaultValue": "'default'"
             },
-            "brd": {
+            "icon": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'rounded' | 'normal'",
-                    "resolved": "\"normal\" | \"rounded\"",
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional icon override. When not set, an icon matching the intent is shown automatically."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The border style of the alert. Defaults to \"rounded\" (rounded borders).\nSet to \"normal\" to have non-rounded (square) borders."
+                    "text": "When true, shows a close button to dismiss the alert."
                 },
-                "attribute": "brd",
+                "attribute": "dismissible",
                 "reflect": false,
-                "defaultValue": "'rounded'"
+                "defaultValue": "false"
             }
         };
     }
     static get states() {
         return {
-            "withBtn": {}
+            "withBtn": {},
+            "dismissed": {}
         };
     }
     static get events() {
@@ -251,7 +215,28 @@ export class EdsAlert {
                     "resolved": "void",
                     "references": {}
                 }
+            }, {
+                "method": "edsDismiss",
+                "name": "edsDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert is dismissed."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
             }];
     }
     static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "pressableLabel",
+                "methodName": "onPressableLabelChange"
+            }];
+    }
 }

package/dist/collection/components/eds-alert/eds-alert.stories.js

@@ -1,62 +1,84 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the render treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 export default {
     title: 'Components/Alert',
     component: 'eds-alert',
     argTypes: {
         message: {
             control: 'text',
-            description: 'The alert message content'
+            description: 'The main alert message text'
         },
         intent: {
-            control: 'select',
-            options: ['default', 'warning', 'error', 'success'],
-            description: 'The intent style of the alert'
+            control: { type: 'select' },
+            options: ['default', 'info', 'warning', 'error', 'success', 'brand'],
+            description: 'Visual intent of the alert'
         },
         direction: {
-            control: 'select',
+            control: { type: 'select' },
             options: ['horizontal', 'vertical'],
-            description: 'The layout direction of the alert content'
+            description: 'Layout direction'
         },
-        brd: {
-            control: 'select',
-            options: ['normal', 'rounded'],
-            description: 'Alert borders style'
+        icon: {
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'Optional icon name (from the EDS icon set). No icon shown by default.'
+        },
+        dismissible: {
+            control: 'boolean',
+            description: 'Show dismiss button'
         },
         pressableLabel: {
             control: 'text',
-            description: 'Label for the pressable element (if enabled)'
+            description: 'Action element label'
         },
         pressableUrl: {
             control: 'text',
-            description: 'URL for the pressable link (only if pressable is true and URL is provided)'
+            description: 'Action element URL (renders link when provided)'
         }
     },
     args: {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
-        brd: 'rounded',
-        pressableLabel: 'Click',
-        pressableUrl: 'https://example.com'
+        icon: 'information',
+        dismissible: false
     }
 };
+// Single control-driven story — use the Controls panel to exercise intent,
+// direction, icon, dismissible and the pressable action.
 export const Default = {
     render: (args) => `
-    <div class="container">
-      <eds-alert 
-        message="${args.message}" 
-        intent="${args.intent}" 
-        direction="${args.direction}"
-        brd="${args.brd}"
-        pressable-label="${args.pressableLabel}" 
-        pressable-url="${args.pressableUrl}">
-      </eds-alert>
-    </div>`,
-    args: {
-        message: 'This is an alert message.',
-        intent: 'default',
-        direction: 'horizontal',
-        brd: 'rounded',
-        pressableLabel: 'Click',
-        pressableUrl: 'https://example.com'
-    }
+    <eds-alert
+      message="${args.message}"
+      intent="${args.intent}"
+      direction="${args.direction}"
+      ${args.icon ? `icon="${args.icon}"` : ''}
+      ${args.dismissible ? 'dismissible="true"' : ''}
+      ${args.pressableLabel ? `pressable-label="${args.pressableLabel}"` : ''}
+      ${args.pressableUrl ? `pressable-url="${args.pressableUrl}"` : ''}
+    ></eds-alert>
+  `
+};
+// Gallery overview of every intent at a glance — not reproducible via Controls.
+export const AllIntents = {
+    render: () => `
+    <div style="display: flex; flex-direction: column; gap: 1rem;">
+      <eds-alert message="Default informational alert." intent="default" icon="information"></eds-alert>
+      <eds-alert message="Warning: please review your input." intent="warning" icon="warning"></eds-alert>
+      <eds-alert message="Error: something went wrong." intent="error" icon="error"></eds-alert>
+      <eds-alert message="Success: operation completed." intent="success" icon="checkmark-filled"></eds-alert>
+      <eds-alert message="Brand: welcome to EBRAINS." intent="brand" icon="information"></eds-alert>
+      <eds-alert message="No icon — just the message." intent="default"></eds-alert>
+    </div>
+  `
+};
+// Demonstrates slotted HTML content instead of the `message` prop.
+export const SlotContent = {
+    render: () => `
+    <eds-alert intent="default" icon="information">
+      This alert uses <strong>slot content</strong> with <code>HTML markup</code> instead of the message prop.
+    </eds-alert>
+  `
 };

package/dist/collection/components/eds-avatar/eds-avatar.css

@@ -122,27 +122,27 @@ abbr:where([title]) {
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .bg-darker {
-    background-color: var(--grey-400);
+    background-color: var(--grey-light);
 }
 
 .bg-stronger {
-    background-color: var(--grey-900);
+    background-color: var(--grey-dark);
 }
 
 .bg-strongest {
-    background-color: var(--black);
+    background-color: var(--brand-black);
 }
 
 .text-accent {
-    color: var(--green-500);
+    color: var(--brand-green);
 }
 
 .text-default {
-    color: var(--black);
+    color: var(--brand-black);
 }
 
 .\!no-underline {

package/dist/collection/components/eds-avatar/eds-avatar.js

@@ -64,7 +64,7 @@ export class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: '7b5bf31c794c9bbddd2976fdd5a273842a75603a', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (h("div", { key: '36f8cb598e0e53793ce8a49e9e2419f41ba8f160', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
     static get is() { return "eds-avatar"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-avatar/eds-avatar.stories.js

@@ -31,8 +31,8 @@ export const Default = {
     
     <div class="mt-32">
       <span>To try out the picture field use this example:</span>
-      <eds-code-block 
-        code="https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200" 
+      <eds-code-block
+        code="https://randomuser.me/api/portraits/women/44.jpg"
         language="url"
       ></eds-code-block>
     </div>`,

package/dist/collection/components/eds-block-break/eds-block-break.css

@@ -3,7 +3,7 @@
 }
 
 .border-default {
-  border-color: var(--black);
+  border-color: var(--brand-black);
 }
 
 .my-16 {

package/dist/collection/components/eds-block-break/eds-block-break.js

@@ -7,7 +7,7 @@ export class EdsBlockBreak {
         this.inverse = false;
     }
     render() {
-        return h("hr", { key: 'dd9b98d66f195135ff2fb1374a56d4c670e43d3e', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '2531c44fa20745f7860e4647f77ffa038a56d832', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
     static get is() { return "eds-block-break"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-breadcrump/eds-breadcrumb.stories.js

@@ -8,7 +8,7 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
+            options: ['ghost', 'strong', 'weak', 'inverse', 'underline'],
             description: 'The visual style or intent of the breadcrumb links.',
             defaultValue: 'ghost'
         }

package/dist/collection/components/eds-breadcrump/eds-breadcrump.js

@@ -123,7 +123,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: '4894fb9e6b37ef84880a62f4dcd3289dcb9cab38', "aria-label": "Breadcrumb" }, h("ol", { key: 'd69405fcee024465d645d9cdbb17189998a94b95', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '95c13ac07de20bc04fb57ee990e5d21f928f3a86', "aria-label": "Breadcrumb" }, h("ol", { key: '2a03ff53ac27eaa5e37ddfef32e9a4fe322755dd', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);
@@ -135,7 +135,7 @@ export class EdsBreadcrumb {
                             : this.intent
                     : this.intent;
                 return (h("eds-link", Object.assign({ label: fullLabel, url: item.url, intent: linkIntent, disabled: isLast, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
-            })()) : (h("eds-link", { label: "...", url: "#", intent: "strong", current: false, "aria-label": "...", size: "small", "icon-small": "false", icon: "chevron-right" })), !isLast && !item.isHidden && (h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+            })()) : (h("eds-link", { label: "...", url: "#", intent: "strong", current: false, "aria-label": "...", size: "small", "icon-small": "false", icon: "chevron-right" })), !isLast && !item.isHidden && (h("eds-icon-wrapper", { name: "chevron-right", class: "w-20 h-20" }))));
         }))));
     }
     static get is() { return "eds-breadcrumb"; }
@@ -179,15 +179,15 @@ export class EdsBreadcrumb {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'inverse' | 'underline'",
-                    "resolved": "\"ghost\" | \"inverse\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "original": "'ghost' | 'strong' | 'weak' | 'inverse' | 'underline'",
+                    "resolved": "\"ghost\" | \"inverse\" | \"strong\" | \"underline\" | \"weak\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The visual style or intent of the breadcrumb links.\nOptions include: 'primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'.\nDefault is 'ghost'."
+                    "text": "The visual style or intent of the breadcrumb links.\nOptions include: 'ghost', 'strong', 'weak', 'inverse', 'underline'.\nDefault is 'ghost'."
                 },
                 "attribute": "intent",
                 "reflect": false,