@ebrains/components 3.0.0 → 3.2.0

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

@@ -26,16 +26,6 @@ export default {
             control: { type: 'boolean' },
             description: 'Enable column sorting'
         },
-        columnSize: {
-            control: 'select',
-            options: ['default', 'medium', 'large'],
-            description: 'Column sizing mode'
-        },
-        theme: {
-            control: 'select',
-            options: ['default', 'color', 'brand'],
-            description: 'Table theme: default (no bg), color (alternating rows), brand (modern with hover/accents)'
-        },
         view: {
             control: 'select',
             options: ['table', 'card'],
@@ -65,13 +55,9 @@ export default {
         paginationEnabled: true,
         searchEnabled: true,
         sortingEnabled: false,
-        columnSize: 'default',
-        theme: 'color',
         view: 'table',
         showViewToggle: false,
-        actions: [
-            { name: 'view', label: 'View' }
-        ]
+        actions: [{ name: 'view', label: 'View' }]
     }
 };
 // Sample data for the table
@@ -87,6 +73,8 @@ const sampleData = [
     { name: 'Ian', age: 27, occupation: 'Developer' },
     { name: 'Jackie', age: 33, occupation: 'Consultant' }
 ];
+// Single story — the EBRAINS brand theme (the only supported theme), with
+// pagination, search, sorting, row actions and the table/card view toggle.
 export const Default = {
     render: (args) => `
     <eds-table
@@ -96,38 +84,9 @@ export const Default = {
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
       sorting-enabled="${args.sortingEnabled}"
-      column-size="${args.columnSize}"
-      theme="${args.theme}"
+      theme="brand"
       view="${args.view}"
       show-view-toggle="${args.showViewToggle}"
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' },
-            occupation: { format: 'uppercase' }
-        },
-        rowsPerPage: 5,
-        paginationEnabled: true,
-        searchEnabled: true,
-        sortingEnabled: false,
-        columnSize: 'default',
-        theme: 'color',
-        view: 'table',
-        showViewToggle: false
-    }
-};
-export const BrandTheme = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      pagination-enabled="${args.paginationEnabled}"
-      search-enabled="${args.searchEnabled}"
-      sorting-enabled="${args.sortingEnabled}"
-      theme="brand"
       actions='${JSON.stringify(args.actions)}'
     ></eds-table>
   `,
@@ -141,75 +100,8 @@ export const BrandTheme = {
         paginationEnabled: true,
         searchEnabled: true,
         sortingEnabled: true,
-        actions: [
-            { name: 'view', label: 'View', icon: 'view', intent: 'brand' }
-        ]
-    }
-};
-export const DefaultTheme = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      theme="default"
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' }
-        },
-        rowsPerPage: 10
-    }
-};
-export const CardView = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      view="card"
-      show-view-toggle="true"
-      theme="${args.theme}"
-      actions='${JSON.stringify(args.actions)}'
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' }
-        },
-        rowsPerPage: 6,
-        theme: 'brand',
-        actions: [
-            { name: 'view', label: 'View', showLabel: true, intent: 'brand' }
-        ]
-    }
-};
-export const WithViewToggle = {
-    render: (args) => `
-    <eds-table
-      table-data='${JSON.stringify(args.data)}'
-      config='${JSON.stringify(args.config)}'
-      rows-per-page="${args.rowsPerPage}"
-      search-enabled="true"
-      show-view-toggle="true"
-      sorting-enabled="true"
-      theme="brand"
-      actions='${JSON.stringify(args.actions)}'
-    ></eds-table>
-  `,
-    args: {
-        data: sampleData,
-        config: {
-            name: { format: 'bold' },
-            occupation: { format: 'uppercase' }
-        },
-        rowsPerPage: 5,
-        actions: [
-            { name: 'view', label: 'View', icon: 'view', intent: 'brand' },
-            { name: 'delete', label: 'Delete', type: 'checkbox' }
-        ]
+        view: 'table',
+        showViewToggle: true,
+        actions: [{ name: 'view', label: 'View', showLabel: true, intent: 'brand' }]
     }
 };

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

@@ -36,7 +36,13 @@
   border-radius: 8px;
   font-size: 1.125rem;
   cursor: pointer;
-  transition: all 0.2s ease;
+  /* Transition ONLY color (hover effect). Background must not
+     animate — the active-state move is a decisive UI change that
+     has to land in the same frame as the focus outline; an
+     animated background can read as "ahead of" the outline during
+     rapid keyboard navigation. Outline is left unanimated for the
+     same reason. */
+  transition: color 0.15s ease;
   border: none;
   background: transparent;
   font-family: 'IBM Plex Sans', sans-serif;

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

@@ -35,14 +35,28 @@ export class EdsTabs {
     }
     /**
      * Parses the `tabs` prop into an array of 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() {
         this.parsedTabs = parseData(this.tabs);
-        this.tabRefs = [];
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
+        }
     }
     componentDidUpdate() {
-        if (this.tabRefs.length !== this.parsedTabs.length) {
-            this.tabRefs = new Array(this.parsedTabs.length).fill(null);
+        // Same reasoning as parseTabs: only shrink, never re-allocate
+        // to nulls — that would re-introduce the silent-no-op window.
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
         }
     }
     setActiveIndex() {
@@ -53,6 +67,7 @@ export class EdsTabs {
         }
     }
     handleTabClick(index, tabLabel, shouldFocus = true) {
+        var _a;
         if (index < 0 || index >= this.parsedTabs.length) {
             return;
         }
@@ -67,11 +82,34 @@ export class EdsTabs {
                 action: 'click'
             });
         }
-        if (shouldFocus && this.tabRefs[index]) {
-            setTimeout(() => {
+        if (shouldFocus) {
+            // Focus must move SYNCHRONOUSLY, while the keydown event
+            // that triggered this call is still on the stack. Otherwise
+            // the browser's `:focus-visible` heuristic doesn't flag the
+            // focus move as keyboard-driven and the outline never paints
+            // — accessibility regression (WCAG 2.4.7).
+            //
+            // We query by static id (`#tab-${index}`) instead of using
+            // `tabRefs[index]` because consumer-driven prop changes can
+            // briefly drop the cached ref. The button id is set in
+            // `render()` and doesn't depend on active state, so it is
+            // always findable.
+            const findBtn = () => { var _a; return ((_a = this.el.shadowRoot) !== null && _a !== void 0 ? _a : this.el).querySelector(`#tab-${index}`); };
+            (_a = findBtn()) === null || _a === void 0 ? void 0 : _a.focus();
+            // Belt-and-suspenders: if a consumer reacts to the `tab`
+            // event by re-rendering our buttons (rare, but possible
+            // when the `tabs` prop is recomputed), the sync focus above
+            // landed on a button that is now detached. Re-focus once
+            // the next frame's DOM is in place. We only act if focus
+            // genuinely isn't on the right element, to avoid a redundant
+            // focus call that would reset selection/IME state.
+            requestAnimationFrame(() => {
                 var _a;
-                (_a = this.tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
+                const after = findBtn();
+                if (after && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== after) {
+                    after.focus();
+                }
+            });
         }
     }
     onKeyDown(ev, idx) {
@@ -101,19 +139,12 @@ export class EdsTabs {
         }
     }
     render() {
-        const containerClasses = [
-            'tabs-container',
-            `tabs-container-${this.variant}`
-        ].join(' ');
-        return (h("div", { key: '66e0871d6cd917c15598b6e3ea80e5ff82970029', id: `${this.identifier}` }, h("div", { key: 'c65163e33fcf4960bbcc367a2abf62c0aec99446', class: containerClasses }, h("nav", { key: 'fae5e0f23904318299d60e1d3212f84b8c5a0bed', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        const containerClasses = ['tabs-container', `tabs-container-${this.variant}`].join(' ');
+        return (h("div", { key: '39b1e8fc98303be43fbbd0e67807786fe0ad8fef', id: `${this.identifier}` }, h("div", { key: '3cef6bd5804c110e51560c7b58de5cb77eadbbb6', class: containerClasses }, h("nav", { key: 'b59ed6ad2fe067b2c39b1db43cd4242eec1b01bf', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             const isActive = index === this.activeIndex;
-            const tabClasses = [
-                'tab',
-                `tab-${this.variant}`,
-                isActive ? 'tab-active' : ''
-            ].filter(Boolean).join(' ');
+            const tabClasses = ['tab', `tab-${this.variant}`, isActive ? 'tab-active' : ''].filter(Boolean).join(' ');
             return (h("button", { class: tabClasses, type: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }, tab.label || tab.ariaLabel));
-        }))), h("div", { key: 'a259d3e45fbcc5f75303cf8eb256374c67c62db1', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1 }, h("slot", { name: `panel-${index}` })))))));
+        }))), h("div", { key: '224717af5f59fbea2683dd33144760be8c553bb8', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1 }, h("slot", { name: `panel-${index}` })))))));
     }
     static get is() { return "eds-tabs"; }
     static get encapsulation() { return "shadow"; }

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

@@ -63,9 +63,9 @@ const createTabsStory = (args, panelContents) => {
     return container;
 };
 const defaultPanels = [
-    { title: 'Home', body: 'Welcome to our homepage! Here\'s the latest news and updates.' },
+    { title: 'Home', body: "Welcome to our homepage! Here's the latest news and updates." },
     { title: 'Profile', body: 'See and update your profile settings.' },
-    { title: 'Settings', body: 'Update the app\'s settings.' }
+    { title: 'Settings', body: "Update the app's settings." }
 ];
 export const Default = {
     render: (args) => createTabsStory(args, defaultPanels)

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

@@ -35,7 +35,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return (h("span", { key: 'ca20e54df5fc895110b39ce7875c3c0026e94fc3', class: classes }, h("span", { key: '5ad7ada1ae051ff2840bb033ec683b44477f6684', style: { position: 'relative', zIndex: '1' } }, this.label)));
+        return (h("span", { key: 'f9399ed92717576781bff9fb5f117743d50720af', class: classes }, h("span", { key: '9500083dfbddd73539de9e1c5b738bf7a3415624', style: { position: 'relative', zIndex: '1' } }, this.label)));
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,7 +41,7 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: '9670bbe26e6f092d88c73268838d9349dca0c323', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '202722dc0cb384ce68b2239915f44bf90d87a77e', class: "relative" }, h("div", { key: '59760e5a62518dc6c3cc7fcfa711e060837f4c49', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '2f1f6c5f5e7f2a770fc762b1b886dd199f0cf953', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
+        return (h("div", { key: '3816dfeeec536ae803b069e5f5e5112f476dffed', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '360b8c6752eab781870de60aa1f89889eff644d3', class: "relative" }, h("div", { key: 'eda9ed9904dfe7c8c0fff2295666666cfbd3763a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '5f7b736ed512cf4752c66c8a0c9010822d8b4f44', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), h("div", { class: "flex items-center justify-center relative" }, event.completed ? (h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), h("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (h("eds-card-generic", { title: event.title, url: "#", description: event.description, intent: "secondary", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

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

@@ -1,3 +1,10 @@
+/* Block host so the banner variant fills its container in normal flow. The
+   toast variant is used inside a flex column (toast manager), where flex items
+   are blockified regardless, so this is safe for both. */
+:host {
+    display: block;
+}
+
 .relative {
     position: relative;
 }
@@ -148,4 +155,143 @@
 
 .hover\:opacity-100:hover {
     opacity: 1;
+}
+
+/* ============================================================================
+   Banner variant — richer inline status banner. Per-intent tone is expressed
+   through CSS custom properties so the structural rules stay intent-agnostic.
+   Semantic colours are deliberate (warn=amber, error=red); brand green never
+   signals "safe" or "blocked" on its own.
+   ========================================================================== */
+.banner {
+    /* neutral defaults; overridden per intent below */
+    --rail: #7a7b7a;
+    --surface: #ffffff;
+    --line: #e2e2e2;
+    --icon-bg: #f0f0f0;
+    --icon-fg: #5a5f5c;
+    --title: #07140d;
+    --msg: #8a8c8a;
+
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 14px;
+    background: var(--surface);
+    border: 1px solid var(--line);
+    border-left: 3px solid var(--rail);
+    border-radius: 12px;
+    padding: 15px 18px;
+}
+
+.banner--brand,
+.banner--info {
+    --rail: var(--brand-green, #00ff9d);
+    --icon-bg: rgba(0, 255, 157, 0.12);
+    --icon-fg: var(--green-d, #00c87b);
+    --title: var(--brand-black, #07140d);
+    --msg: #8a8c8a;
+}
+
+.banner--success {
+    --rail: var(--green-d, #00c87b);
+    --surface: #f0fbf6;
+    --line: #cdeede;
+    --icon-bg: rgba(0, 200, 123, 0.12);
+    --icon-fg: var(--green-d, #00c87b);
+    --title: #0a6b46;
+    --msg: #5a7a6c;
+}
+
+.banner--warning {
+    --rail: #b26b00;
+    --surface: #fff6e6;
+    --line: #f0dcb4;
+    --icon-bg: rgba(178, 107, 0, 0.12);
+    --icon-fg: #b26b00;
+    --title: #b26b00;
+    --msg: #8a6a2a;
+}
+
+.banner--error {
+    --rail: #c0392b;
+    --surface: #fdf0ee;
+    --line: #f2cfc9;
+    --icon-bg: rgba(192, 57, 43, 0.1);
+    --icon-fg: #c0392b;
+    --title: #c0392b;
+    --msg: #8d5049;
+}
+
+.banner-ic {
+    flex: 0 0 auto;
+    width: 38px;
+    height: 38px;
+    border-radius: 10px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background: var(--icon-bg);
+    color: var(--icon-fg);
+}
+
+.banner-copy {
+    flex: 1 1 auto;
+    min-width: 0;
+}
+
+.banner-title {
+    font-family: var(--sans, 'IBM Plex Sans', system-ui, sans-serif);
+    font-size: 14.5px;
+    font-weight: 600;
+    color: var(--title);
+}
+
+.banner-msg {
+    font-family: var(--mono, 'IBM Plex Mono', ui-monospace, monospace);
+    font-size: 10.5px;
+    letter-spacing: 0.04em;
+    color: var(--msg);
+    line-height: 1.45;
+    margin-top: 3px;
+}
+/* When there's no heading, let the message read as the primary line. */
+.banner-title + .banner-msg {
+    margin-top: 3px;
+}
+
+/* Compact inline actions: they sit on the top row next to the dismiss, so the
+   banner stays a single tidy row (the copy shrinks to make room). */
+.banner-actions {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    gap: 16px;
+}
+
+.banner-x {
+    flex: 0 0 auto;
+    border: none;
+    background: transparent;
+    color: var(--msg);
+    cursor: pointer;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px;
+    border-radius: 6px;
+    opacity: 0.6;
+    transition: opacity 0.14s, background 0.14s;
+}
+.banner-x:hover {
+    opacity: 1;
+    background: rgba(0, 0, 0, 0.05);
+}
+
+/* Narrow screens: keep it compact — the copy (min-width:0) absorbs the width so
+   the actions + dismiss stay inline on the top row rather than wrapping. */
+@media (max-width: 1024px) {
+    .banner-actions {
+        gap: 12px;
+    }
 }

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

@@ -7,6 +7,8 @@ const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
             success: 'bg-success text-dark',
             error: 'bg-error text-dark',
             warning: 'bg-warning text-dark',
+            info: 'bg-dark text-dark',
+            neutral: 'bg-dark text-dark',
             brand: 'bg-strongest text-accent',
             brandInverse: 'bg-inverse text-default'
         }
@@ -15,6 +17,16 @@ const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
         intent: 'default'
     }
 });
+/** Fallback leading icon per intent for the `banner` variant. */
+const DEFAULT_BANNER_ICON = {
+    default: 'information',
+    neutral: 'information',
+    info: 'information',
+    brand: 'information',
+    success: 'checkmark',
+    warning: 'warning',
+    error: 'warning'
+};
 export class EdsToast {
     constructor() {
         /**
@@ -26,12 +38,23 @@ export class EdsToast {
         };
         this.message = undefined;
         this.intent = 'default';
+        this.variant = 'toast';
+        this.heading = undefined;
+        this.icon = undefined;
+        this.dismissible = false;
         this.duration = undefined;
         this.visible = true;
+        this.hasActions = false;
+    }
+    componentWillLoad() {
+        // Slotted actions live in light DOM (children with slot="actions").
+        this.hasActions = !!this.el.querySelector('[slot="actions"]');
     }
     componentDidLoad() {
         const btn = this.el.shadowRoot.querySelector('eds-button');
-        this.emitContext(btn);
+        if (btn) {
+            this.emitContext(btn);
+        }
     }
     /**
      * Emits a custom event called `parentContext` for a given button element.
@@ -57,10 +80,18 @@ export class EdsToast {
         // Clear the timeout when the component is removed
         clearTimeout(this.dismissTimeout);
     }
+    renderBanner() {
+        const iconName = this.icon || DEFAULT_BANNER_ICON[this.intent] || 'information';
+        const showClose = this.dismissible || (this.duration && this.duration > 0);
+        return (h("div", { class: `banner banner--${this.intent}`, role: "status", "aria-live": "polite" }, h("span", { class: "banner-ic", "aria-hidden": "true" }, h("eds-icon-wrapper", { name: iconName, size: 20 })), h("div", { class: "banner-copy" }, this.heading && h("div", { class: "banner-title" }, this.heading), h("div", { class: "banner-msg" }, this.message)), this.hasActions && (h("div", { class: "banner-actions" }, h("slot", { name: "actions" }))), showClose && (h("button", { type: "button", class: "banner-x", "aria-label": "Dismiss", onClick: () => this.dismissToast() }, h("eds-icon-wrapper", { name: "close", size: 16 })))));
+    }
     render() {
         if (!this.visible) {
             return null;
         }
+        if (this.variant === 'banner') {
+            return this.renderBanner();
+        }
         const classes = toastStyles({ intent: this.intent });
         return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("span", { class: "f-ui-02" }, this.message), h("eds-button", { intent: "ghost", size: "large", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
     }
@@ -99,8 +130,8 @@ export class EdsToast {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'success' | 'error' | 'warning' | 'brand' | 'brandInverse'",
-                    "resolved": "\"brand\" | \"brandInverse\" | \"default\" | \"error\" | \"success\" | \"warning\"",
+                    "original": "'default' | 'success' | 'error' | 'warning' | 'info' | 'neutral' | 'brand' | 'brandInverse'",
+                    "resolved": "\"brand\" | \"brandInverse\" | \"default\" | \"error\" | \"info\" | \"neutral\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,
@@ -113,6 +144,76 @@ export class EdsToast {
                 "reflect": false,
                 "defaultValue": "'default'"
             },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'toast' | 'banner'",
+                    "resolved": "\"banner\" | \"toast\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant:\n- \"toast\": the classic compact pill (message + close). Default; used by the\n  global toast manager.\n- \"banner\": a richer inline banner \u2014 leading icon in a tinted square, a bold\n  heading over a mono message, a coloured left rail on a tinted surface, an\n  optional actions slot and an optional dismiss button. Use for persistent,\n  in-page status (form expiry, saved draft, etc.)."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'toast'"
+            },
+            "heading": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Bold heading shown above the message. Banner variant only."
+                },
+                "attribute": "heading",
+                "reflect": false
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Leading icon name (from the EBRAINS icon set). Banner variant only.\nFalls back to a sensible default per intent when omitted."
+                },
+                "attribute": "icon",
+                "reflect": false
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show a dismiss (\u00D7) button regardless of `duration`. The `toast` variant\nalready shows one whenever `duration` is set; set this for a persistent\nbanner the user can still close."
+                },
+                "attribute": "dismissible",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "duration": {
                 "type": "number",
                 "mutable": false,
@@ -134,7 +235,8 @@ export class EdsToast {
     }
     static get states() {
         return {
-            "visible": {}
+            "visible": {},
+            "hasActions": {}
         };
     }
     static get events() {