@ebrains/components 3.1.0 → 3.2.0

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

@@ -95,12 +95,15 @@ button.switch.switch--checked .switch-handle {
   background: transparent;
   border: none;
   border-radius: 1.5rem;
-  font-family: var(--f-ui-02-fontFamily);
-  font-size: 0.9rem;
+  /* Mockup type: Plex Sans 14px medium. Note we bundle 400/600 only, so 500
+     resolves to 400 in-app — kept at 500 so environments that do load the
+     medium cut match the mockup exactly. */
+  font-family: var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);
+  font-size: 14px;
   font-weight: 500;
   cursor: pointer;
   transition: all 0.3s;
-  color: var(--grey-dark);
+  color: var(--body-l, #5a5f5c);
   white-space: nowrap;
 }
 
@@ -113,6 +116,26 @@ button.switch.switch--checked .switch-handle {
   color: var(--brand-black);
 }
 
+/* Dark segmented — the mockup's quiet control bar: white pill container with a
+   hairline border; the active segment inverts to brand-black. */
+.segmented-container--dark {
+  background: #fff;
+  border: 1px solid var(--grey-300, #e2e2e2);
+  padding: 4px;
+  gap: 3px;
+}
+
+.segmented-container--dark .segmented-btn {
+  padding: 9px 30px;
+  border-radius: 999px;
+  transition: 0.14s;
+}
+
+.segmented-container--dark .segmented-btn--active {
+  background: var(--brand-black, #07140d);
+  color: #fff;
+}
+
 .segmented-btn--disabled {
   opacity: 0.6;
   cursor: not-allowed;

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

@@ -31,7 +31,7 @@ export class EdsSwitch {
         this.variant = 'toggle';
     }
     render() {
-        if (this.variant === 'segmented') {
+        if (this.variant === 'segmented' || this.variant === 'segmented-dark') {
             return this.renderSegmented();
         }
         return this.renderToggle();
@@ -59,7 +59,10 @@ export class EdsSwitch {
             }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { class: "switch-handle" })), this.labelOn && (h("span", { id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     renderSegmented() {
-        return (h("div", { class: "segmented-container", role: "group", "aria-label": "View toggle" }, h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+        return (h("div", { class: {
+                'segmented-container': true,
+                'segmented-container--dark': this.variant === 'segmented-dark'
+            }, role: "group", "aria-label": "View toggle" }, h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
                 'segmented-btn': true,
                 'segmented-btn--active': !this.checked,
                 'segmented-btn--disabled': this.disabled
@@ -67,7 +70,7 @@ export class EdsSwitch {
                 if (!this.disabled && this.checked) {
                     this.toggleSwitch();
                 }
-            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOff)), h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, h("span", null, this.labelOff)), h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
                 'segmented-btn': true,
                 'segmented-btn--active': this.checked,
                 'segmented-btn--disabled': this.disabled
@@ -75,7 +78,7 @@ export class EdsSwitch {
                 if (!this.disabled && !this.checked) {
                     this.toggleSwitch();
                 }
-            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOn))));
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, h("span", null, this.labelOn))));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -167,15 +170,15 @@ export class EdsSwitch {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'toggle' | 'segmented'",
-                    "resolved": "\"segmented\" | \"toggle\"",
+                    "original": "'toggle' | 'segmented' | 'segmented-dark'",
+                    "resolved": "\"segmented\" | \"segmented-dark\" | \"toggle\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Variant of the switch: 'toggle' (default) or 'segmented' (pill-style buttons)"
+                    "text": "Variant of the switch:\n- 'toggle' (default): the classic on/off switch\n- 'segmented': pill-style buttons \u2014 light container, green active pill\n- 'segmented-dark': pill-style buttons \u2014 white container with a hairline\n  border and a dark (brand-black) active pill"
                 },
                 "attribute": "variant",
                 "reflect": false,

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

@@ -6,7 +6,11 @@ export default {
         disabled: { control: 'boolean', description: 'Disables the switch when true.' },
         labelOn: { control: 'text', description: 'Label displayed when the switch is ON.' },
         labelOff: { control: 'text', description: 'Label displayed when the switch is OFF.' },
-        variant: { control: 'select', options: ['toggle', 'segmented'], description: 'Switch variant: toggle or segmented.' }
+        variant: {
+            control: 'select',
+            options: ['toggle', 'segmented', 'segmented-dark'],
+            description: 'Switch variant: toggle, segmented (green active pill), or segmented-dark (white container, dark active pill).'
+        }
     },
     args: {
         checked: false,
@@ -90,6 +94,21 @@ export const SegmentedChecked = {
         labelOff: 'Light'
     }
 };
+export const SegmentedDark = {
+    render: (args) => `
+    <eds-switch
+      variant="segmented-dark"
+      ${args.checked ? 'checked' : ''}
+      ${args.disabled ? 'disabled' : ''}
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'Results',
+        labelOff: 'Poll',
+        checked: true
+    }
+};
 export const SegmentedDisabled = {
     render: (args) => `
     <eds-switch

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

@@ -350,9 +350,7 @@ export class EdsTable {
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
         const showControls = this.showViewToggle || this.searchEnabled;
-        return (h("div", { key: '1e8a2f5f19df240ee3a57951641b60b947342fad' }, showControls && (h("div", { key: '778fe091226330448bba089189e9dd6a6aa977a9', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: '7ef287464bb2fba846be5341f4bb0e71d982be0e', class: "view-toggle-wrapper" }, h("eds-switch", { key: '2d3a494a5b354a14c8e882a153633bd5e85a40ab', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: 'dfcf6d0bdc23cb10481121881a7656b02a0599c1', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card'
-            ? this.renderCardView(paginatedRows)
-            : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (h("div", { key: '3f7faafdd6147855cb8812ff6303c335c7fd1f35', class: "mt-20" }, h("eds-pagination", { key: '17705ba01a8ca8cc79bacfce34e55f11ce53d70c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        return (h("div", { key: '8a025e9e12285aa3444b2f83e0b68af55cbe32e6' }, showControls && (h("div", { key: 'f97864d8b61db7ec4fa623ecadc3c225464a6c84', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (h("div", { key: 'ddf8b1c0fb59fe81efa22a4dc02b414d41ae7208', class: "view-toggle-wrapper" }, h("eds-switch", { key: 'c3631986b456a88559face6a2ce7ce8acd5d01c2', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (h("div", { key: 'a02d7f163dd2bb34bb26ae60bd5b018ed07291d9', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card' ? this.renderCardView(paginatedRows) : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (h("div", { key: 'ecf412674a951b4d19e87385270cb49e64e590f6', class: "mt-20" }, h("eds-pagination", { key: 'fe1365ecb4d249548ba0c936a48b6141ff14ad0e', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -57,9 +57,7 @@ export default {
         sortingEnabled: false,
         view: 'table',
         showViewToggle: false,
-        actions: [
-            { name: 'view', label: 'View' }
-        ]
+        actions: [{ name: 'view', label: 'View' }]
     }
 };
 // Sample data for the table
@@ -104,8 +102,6 @@ export const Default = {
         sortingEnabled: true,
         view: 'table',
         showViewToggle: true,
-        actions: [
-            { name: 'view', label: 'View', showLabel: true, intent: 'brand' }
-        ]
+        actions: [{ name: 'view', label: 'View', showLabel: true, intent: 'brand' }]
     }
 };

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

@@ -139,19 +139,12 @@ export class EdsTabs {
         }
     }
     render() {
-        const containerClasses = [
-            'tabs-container',
-            `tabs-container-${this.variant}`
-        ].join(' ');
-        return (h("div", { key: '646f43031cde2e0ab84d2830fd9477841b3c757b', id: `${this.identifier}` }, h("div", { key: '2eb01c96640c6fc602777f227525066e5970489e', class: containerClasses }, h("nav", { key: 'b419fc7414574ea70b19433a3c5daa63b5ad6652', 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: '0ce244b3d2b2120d1bdf127144e9b42e2ad34e52', 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: '20e1625ac01b0dc1f40356d02622e0649faa7fa7', class: classes }, h("span", { key: '313c3f18c0a5df285afe6a40ded9e68035d9648f', 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: '78b199b18d361ae3223e4f1fe9a2043d61f4271b', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: 'afdfdf7dc573a7f273703a02e38e755a9815bdf7', class: "relative" }, h("div", { key: '7affc96f356ee901ca263c7347ae60b84869f28b', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '7ba006234bd1365890e75b7f59aa118265ba727c', 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() {