@ebrains/components 2.4.0 → 3.0.0

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

@@ -4,48 +4,56 @@ export default {
     argTypes: {
         tabs: {
             control: 'object',
-            defaultValue: [
-                { label: 'Home', url: '#', active: true },
-                { label: 'Profile', url: '#', active: false },
-                { label: 'Settings', url: '#', active: false }
-            ]
+            description: 'Array of tab objects with label, url, active, and optional ariaLabel'
+        },
+        variant: {
+            control: { type: 'select' },
+            options: ['default', 'inverse'],
+            description: 'Visual variant: default (dark bg) or inverse (light bg)'
+        },
+        id: {
+            control: 'text',
+            description: 'Unique identifier for the tabs component'
+        },
+        navAriaLabel: {
+            control: 'text',
+            description: 'Aria label for the tab navigation'
         }
+    },
+    args: {
+        tabs: [
+            { label: 'Home', url: '#', active: true },
+            { label: 'Profile', url: '#', active: false },
+            { label: 'Settings', url: '#', active: false }
+        ],
+        variant: 'default',
+        id: 'demo-tabs',
+        navAriaLabel: 'Tabs'
     }
 };
-const Template = (args) => {
-    // Create a container element
+const createTabsStory = (args, panelContents) => {
     const container = document.createElement('div');
-    // Insert the eds-tabs element and an output element for dynamic updates.
+    const panels = panelContents
+        .map((content, i) => `<div class="container mt-8" slot="panel-${i}">
+        <h2 class="f-heading-05">${content.title}</h2>
+        <p>${content.body}</p>
+      </div>`)
+        .join('\n');
     container.innerHTML = `
-    <eds-alert message="Implementation with slot content" pressable-label="Example" pressable-url="https://design.ebrains.eu/shared-ui/eds-tabs/#example-with-slot-content"></eds-alert>
-    
-    <eds-tabs tabs='${JSON.stringify(args.tabs)}'>
-      <!-- Define each panel with matching slot names -->
-      <div class="container mt-8" slot="panel-0">
-        <h2 class="f-heading-05">Home</h2>
-        <p>Welcome to our homepage! Here’s the latest news and updates.</p>
-      </div>
-
-      <div class="container mt-8" slot="panel-1">
-        <h2 class="f-heading-05">Profile</h2>
-        <p>See and update your profile settings.</p>
-      </div>
-
-      <div class="container mt-8" slot="panel-2">
-        <h2 class="f-heading-05">Settings</h2>
-        <p>Update the app's settings.</p>
-      </div>
+    <eds-tabs
+      tabs='${JSON.stringify(args.tabs)}'
+      variant="${args.variant}"
+      id="${args.id}"
+      nav-aria-label="${args.navAriaLabel}"
+    >
+      ${panels}
     </eds-tabs>
-    
     <p id="active-tab-output" style="margin-top: 16px; font-family: sans-serif; font-weight: bold;"></p>
   `;
-    // Query the eds-tabs element and the output element after the content is rendered.
-    // We use setTimeout to ensure that the custom element has upgraded.
     setTimeout(() => {
         const edsTabs = container.querySelector('eds-tabs');
         const output = container.querySelector('#active-tab-output');
         if (edsTabs) {
-            // Listen for the "tabChange" event
             edsTabs.addEventListener('tab', (event) => {
                 const { index, name } = event.detail;
                 output.textContent = `Active Tab Index: ${index}, Tab Name: ${name}`;
@@ -54,11 +62,48 @@ const Template = (args) => {
     }, 0);
     return container;
 };
-export const Default = Template.bind({});
-Default.args = {
-    tabs: [
-        { label: 'Home', url: '#', active: true },
-        { label: 'Profile', url: '#', active: false },
-        { label: 'Settings', url: '#', active: false }
-    ]
+const defaultPanels = [
+    { 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.' }
+];
+export const Default = {
+    render: (args) => createTabsStory(args, defaultPanels)
+};
+export const Inverse = {
+    render: (args) => createTabsStory(args, defaultPanels),
+    args: {
+        variant: 'inverse'
+    }
+};
+export const ManyTabs = {
+    render: (args) => createTabsStory(args, [
+        { title: 'Overview', body: 'General overview of the project.' },
+        { title: 'Data', body: 'Browse and manage datasets.' },
+        { title: 'Models', body: 'Explore computational models.' },
+        { title: 'Software', body: 'Access tools and applications.' },
+        { title: 'Publications', body: 'Related publications and references.' }
+    ]),
+    args: {
+        tabs: [
+            { label: 'Overview', active: true },
+            { label: 'Data', active: false },
+            { label: 'Models', active: false },
+            { label: 'Software', active: false },
+            { label: 'Publications', active: false }
+        ],
+        id: 'many-tabs'
+    }
+};
+export const WithAriaLabels = {
+    render: (args) => createTabsStory(args, defaultPanels),
+    args: {
+        tabs: [
+            { label: 'Home', active: true, ariaLabel: 'Navigate to home page' },
+            { label: 'Profile', active: false, ariaLabel: 'View your profile' },
+            { label: 'Settings', active: false, ariaLabel: 'Change app settings' }
+        ],
+        navAriaLabel: 'Main navigation tabs',
+        id: 'aria-tabs'
+    }
 };

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

@@ -1,6 +1,5 @@
   .f-ui-01 {
     font-family: var(--f-ui-01-fontFamily);
-    font-weight: var(--f-ui-01-fontWeight);
     font-size: var(--f-ui-01-fontSize);
     line-height: var(--f-ui-01-lineHeight);
     letter-spacing: var(--f-ui-01-letterSpacing);
@@ -8,7 +7,6 @@
 
   .f-ui-03 {
     font-family: var(--f-ui-03-fontFamily);
-    font-weight: var(--f-ui-03-fontWeight);
     font-size: var(--f-ui-03-fontSize);
     line-height: var(--f-ui-03-lineHeight);
     letter-spacing: var(--f-ui-03-letterSpacing);
@@ -16,7 +14,6 @@
 
   .f-ui-05 {
     font-family: var(--f-ui-05-fontFamily);
-    font-weight: var(--f-ui-05-fontWeight);
     font-size: var(--f-ui-05-fontSize);
     line-height: var(--f-ui-05-lineHeight);
     letter-spacing: var(--f-ui-05-letterSpacing);
@@ -52,28 +49,158 @@
     padding-right: 0.375rem;
   }
 
+  .px-8 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+  }
+
   .border-2 {
     border-width: 2px;
   }
 
+  .rounded-xs {
+    border-radius: 4px;
+  }
+
+  .rounded-xxs {
+    border-radius: 2px;
+  }
+
   .rounded-pill {
     border-radius: 100px;
   }
 
   .border-default {
-    border: 2px solid var(--black);
+    border-color: var(--brand-black);
+  }
+
+  .border-grey-dark {
+    border-color: var(--grey-dark);
+  }
+
+  .border-inside {
+    position: relative;
+
+    &::after {
+      pointer-events: none;
+      position: absolute;
+      inset: 0rem;
+      z-index: 0;
+      border-radius: 8px;
+      border-width: 1px;
+      border-style: solid;
+      content: '';
+    }
+
+    /* Ensure text content is above the border */
+    &>* {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .border-inside-inverse {
+    position: relative;
+
+    &::after {
+      pointer-events: none;
+      position: absolute;
+      inset: 0rem;
+      z-index: 0;
+      border-radius: 8px;
+      border-width: 2px;
+      border-style: solid;
+      border-color: rgba(255, 255, 255, 1);
+      /* white border */
+      content: '';
+    }
+
+    /* Ensure text content is above the border */
+    &>* {
+      position: relative;
+      z-index: 1;
+    }
+  }
+
+  .border-inside-pill {
+    &::after {
+      border-radius: 100px;
+      /* pill shape */
+      content: '';
+    }
+  }
+
+  .border-inside-inverse.border-inside-pill {
+    &::after {
+      border-radius: 100px;
+      /* pill shape for inverse border */
+    }
+  }
+
+  /* Override border-radius for tags with rounded-xs */
+  .rounded-xs.border-inside {
+    &::after {
+      border-radius: 4px;
+    }
+  }
+
+  .rounded-xs.border-inside-inverse {
+    &::after {
+      border-radius: 4px;
+    }
+  }
+
+  .border-accent {
+    border-color: var(--brand-green);
+    /* NEW: #00FF9D */
+  }
+
+
+  .border-inverse {
+    border-color: var(--white);
+    /* NEW: #00FF9D */
+  }
+
+
+  .border-accent-dark {
+    border-color: var(--brand-green-dark);
+    /* NEW: #00FF9D */
+  }
+
+  .border-soft {
+    border-color: var(--grey-dark);
+  }
+
+  .border-softest {
+    border-color: var(--grey-light);
+  }
+
+  .bg-transparent {
+    background-color: transparent;
   }
 
   .text-inverse {
     color: var(--white);
   }
 
+  .text-accent {
+    color: var(--brand-green);
+  }
+
+  .text-accent-dark {
+    color: var(--brand-green-dark);
+  }
+
   .bg-accent {
-    background-color: var(--green-500);
+    background-color: var(--brand-green);
+  }
+
+  .bg-accent-dark {
+    background-color: var(--brand-green-dark);
   }
 
   .bg-strongest {
-    background-color: var(--black);
+    background-color: var(--brand-black);
   }
 
   .text-\[\#0034CB\] {
@@ -87,7 +214,7 @@
   }
 
   .text-light {
-    color: var(--grey-700);
+    color: var(--grey-dark);
   }
 
   .bg-strongest-soft {
@@ -107,5 +234,21 @@
   }
 
   .text-lighter {
-    color: var(--grey-600);
+    color: var(--grey-dark);
+  }
+
+  .items-center {
+    align-items: center;
+  }
+
+  .justify-center {
+    justify-content: center;
+  }
+
+  .justify-between {
+    justify-content: space-between;
+  }
+
+  .inline-flex {
+    display: inline-flex;
   }

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

@@ -1,26 +1,25 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 // Define the CVA for the tag styles
-const tagStyles = cva(['border-2 rounded-pill'], // Base classes
+const tagStyles = cva(['relative inline-flex justify-center items-center py-8 rounded-xs'], // Base classes
 {
     variants: {
         intent: {
-            primary: 'border-accent bg-accent',
-            default: 'border-default',
-            strong: 'text-inverse bg-strongest border-default',
-            accent: 'text-[#0034CB] border-[#0034CB]',
-            weak: 'text-light bg-strongest-soft border-transparent',
-            inverse: 'border-inverse text-inverse',
-            'inverse-strong': 'bg-inverse border-inverse text-lighter'
+            primary: 'border-inside bg-inverse text-default',
+            dark: 'border-inside border-softest bg-inverse text-light',
+            inverse: 'border-inside bg-transparent text-inverse border-inverse',
+            strong: 'bg-strongest text-inverse',
+            brand: 'border-inside bg-transparent border-accent text-accent',
+            'brand-dark': 'border-inside bg-transparent border-accent-dark text-accent-dark'
         },
         size: {
             small: 'f-ui-05 py-2 px-4', // smaller padding
-            medium: 'f-ui-03 py-3 px-5', // moderate padding
-            large: 'f-ui-01 py-4 px-6' // larger padding
+            medium: 'f-ui-03 py-3 px-6', // moderate padding
+            large: 'f-ui-01 py-4 px-8' // larger padding
         }
     },
     defaultVariants: {
-        intent: 'default',
+        intent: 'primary',
         size: 'small'
     }
 });
@@ -31,12 +30,12 @@ const tagStyles = cva(['border-2 rounded-pill'], // Base classes
 export class EdsTag {
     constructor() {
         this.label = undefined;
-        this.intent = 'default';
-        this.size = 'small';
+        this.intent = 'brand';
+        this.size = 'large';
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: '0b37fdd21a8828a00daba55a7157e164e7057a88', class: classes }, this.label);
+        return (h("span", { key: 'ca20e54df5fc895110b39ce7875c3c0026e94fc3', class: classes }, h("span", { key: '5ad7ada1ae051ff2840bb033ec683b44477f6684', style: { position: 'relative', zIndex: '1' } }, this.label)));
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }
@@ -73,8 +72,8 @@ export class EdsTag {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'default' | 'strong' | 'accent' | 'weak' | 'inverse' | 'inverse-strong'",
-                    "resolved": "\"accent\" | \"default\" | \"inverse\" | \"inverse-strong\" | \"primary\" | \"strong\" | \"weak\"",
+                    "original": "'primary' | 'dark' | 'inverse' | 'brand' | 'brand-dark' | 'strong'",
+                    "resolved": "\"brand\" | \"brand-dark\" | \"dark\" | \"inverse\" | \"primary\" | \"strong\"",
                     "references": {}
                 },
                 "required": false,
@@ -85,7 +84,7 @@ export class EdsTag {
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'default'"
+                "defaultValue": "'brand'"
             },
             "size": {
                 "type": "string",
@@ -103,7 +102,7 @@ export class EdsTag {
                 },
                 "attribute": "size",
                 "reflect": false,
-                "defaultValue": "'small'"
+                "defaultValue": "'large'"
             }
         };
     }

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

@@ -8,7 +8,7 @@ export default {
         },
         intent: {
             control: 'select',
-            options: ['primary', 'default', 'strong', 'accent', 'weak', 'inverse', 'inverse-strong'],
+            options: ['primary', 'dark', 'inverse', 'brand', 'brand-dark'],
             description: 'The visual intent style for the tag'
         },
         size: {
@@ -19,8 +19,8 @@ export default {
     },
     args: {
         label: 'Default Tag',
-        intent: 'default',
-        size: 'small'
+        intent: 'brand',
+        size: 'large'
     },
     parameters: {}
 };
@@ -28,7 +28,27 @@ export const Default = {
     render: (args) => `<eds-tag label="${args.label}" intent="${args.intent}" size="${args.size}"></eds-tag>`,
     args: {
         label: 'Default Tag',
-        intent: 'default',
-        size: 'small'
+        intent: 'brand',
+        size: 'large'
     }
 };
+export const AllIntents = {
+    render: () => `
+    <div style="display: flex; gap: 12px; flex-wrap: wrap; align-items: center;">
+      <eds-tag label="Primary" intent="primary"></eds-tag>
+      <eds-tag label="Dark" intent="dark"></eds-tag>
+      <eds-tag label="Inverse" intent="inverse" style="background: #333; padding: 8px;"></eds-tag>
+      <eds-tag label="Brand" intent="brand"></eds-tag>
+      <eds-tag label="Brand Dark" intent="brand-dark"></eds-tag>
+    </div>
+  `
+};
+export const AllSizes = {
+    render: () => `
+    <div style="display: flex; gap: 12px; align-items: center;">
+      <eds-tag label="Small" intent="brand" size="small"></eds-tag>
+      <eds-tag label="Medium" intent="brand" size="medium"></eds-tag>
+      <eds-tag label="Large" intent="brand" size="large"></eds-tag>
+    </div>
+  `
+};

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

@@ -41,9 +41,9 @@ export class EdsTimeline {
         }
     }
     render() {
-        return (h("div", { key: 'cc0184654ced150ab0500a77d89f831530ddc52c', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '693b53e776bdf110d7f21e68b9e3f8fb6f5eab4b', class: "relative" }, h("div", { key: '030ef1b15f76a75292b2998cb7083da0e5f16bd4', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '0811245c700b23e10a3d2b83504673aee12a8bc4', 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", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        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
                 ? [{ 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", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+                : [{ 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' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))))))))));
     }

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

@@ -34,12 +34,12 @@
     gap: 0.25rem;
 }
 
-.f-ui-01 {
-    font-family: var(--f-ui-01-fontFamily);
-    font-weight: var(--f-ui-01-fontWeight);
-    font-size: var(--f-ui-01-fontSize);
-    line-height: var(--f-ui-01-lineHeight);
-    letter-spacing: var(--f-ui-01-letterSpacing);
+.f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
 }
 
 .ml-8 {
@@ -50,6 +50,14 @@
     padding: 0.75rem;
 }
 
+.rounded-sm {
+  border-radius: 8px;
+}
+
+.rounded-xs {
+  border-radius: 4px;
+}
+
 .rounded-lg {
     border-radius: 16px;
 }
@@ -63,11 +71,11 @@
 }
 
 .bg-dark {
-    background-color: var(--grey-300);
+    background-color: var(--grey-light);
 }
 
 .bg-success {
-    background-color: var(--green-200);
+    background-color: var(--brand-green);
 }
 
 .bg-error {
@@ -79,7 +87,7 @@
 }
 
 .text-light {
-    color: var(--grey-700);
+    color: var(--grey-dark);
 }
 
 .text-current {
@@ -87,5 +95,57 @@
 }
 
 .text-default {
-    color: var(--black);
+    color: var(--brand-black);
+}
+
+.text-accent {
+    color: var(--brand-green);
+}
+
+/* Brand variant classes (fallback for other intents) */
+.bg-inverse {
+    background-color: var(--white);
+}
+
+.bg-strongest {
+    background-color: var(--brand-black);
+}
+
+.border-l-\[3px\] {
+    border-left-width: 3px;
+}
+
+.border-accent {
+    border-color: var(--brand-green);
+}
+
+.py-16 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+}
+
+.px-20 {
+    padding-left: 1.25rem;
+    padding-right: 1.25rem;
+}
+
+.rounded-r-4 {
+    border-top-right-radius: 4px;
+    border-bottom-right-radius: 4px;
+}
+
+.f-ui-02 {
+    font-family: var(--f-ui-02-fontFamily);
+    font-weight: var(--f-ui-02-fontWeight);
+    font-size: var(--f-ui-02-fontSize);
+    line-height: var(--f-ui-02-lineHeight);
+    letter-spacing: var(--f-ui-02-letterSpacing);
+}
+
+.opacity-50 {
+    opacity: 0.5;
+}
+
+.hover\:opacity-100:hover {
+    opacity: 1;
 }

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

@@ -1,12 +1,14 @@
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
-const toastStyles = cva(['relative bottom-4 w-auto p-12 rounded-lg shadow-md'], {
+const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
     variants: {
         intent: {
-            default: 'bg-dark text-light',
+            default: 'bg-dark text-dark',
             success: 'bg-success text-dark',
-            error: 'bg-error text-light',
-            warning: 'bg-warning text-dark'
+            error: 'bg-error text-dark',
+            warning: 'bg-warning text-dark',
+            brand: 'bg-strongest text-accent',
+            brandInverse: 'bg-inverse text-default'
         }
     },
     defaultVariants: {
@@ -60,7 +62,7 @@ export class EdsToast {
             return null;
         }
         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-01" }, this.message), h("eds-button", { intent: "tertiary", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
+        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" }))));
     }
     static get is() { return "eds-toast"; }
     static get encapsulation() { return "shadow"; }
@@ -97,8 +99,8 @@ export class EdsToast {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'success' | 'error' | 'warning'",
-                    "resolved": "\"default\" | \"error\" | \"success\" | \"warning\"",
+                    "original": "'default' | 'success' | 'error' | 'warning' | 'brand' | 'brandInverse'",
+                    "resolved": "\"brand\" | \"brandInverse\" | \"default\" | \"error\" | \"success\" | \"warning\"",
                     "references": {}
                 },
                 "required": false,