@ebrains/components 2.4.1 → 3.1.0

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

@@ -1,57 +1,30 @@
 import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
-import { cva } from "class-variance-authority";
 import { parseData } from "../../utils/sharedUtils";
 /**
- * `EdsTabs` is a tabs component that renders a navigational tab bar.
- * Each tab can be configured with various properties such as label, URL, active state, and more.
- * It includes interactive features like handling tab clicks, scrolling to the active tab,
- * and emitting events for tab changes and analytics tracking.
+ * `EdsTabs` is a modern tabs component with a pill-shaped container design.
+ * Features a clean, minimal interface with smooth transitions and two variant styles.
  *
- * This component is ideal for building a customizable tab navigation system with accessibility features
- * and is designed to fit seamlessly into any layout.
+ * Key features:
+ * - Default variant (dark background) and inverse variant (light background)
+ * - Pill-shaped container with rounded tabs
+ * - Smooth hover and active state transitions
+ * - Keyboard navigation support (Arrow keys, Home, End)
+ * - Analytics tracking integration
+ * - Accessible with proper ARIA attributes
  */
 export class EdsTabs {
     constructor() {
         this.tabRefs = [];
-        // Store tab reference
         this.setTabRef = (el, index) => {
             if (el) {
                 this.tabRefs[index] = el;
             }
         };
-        // cva configuration
-        this.tabCva = cva([
-            'relative py-12',
-            'f-ui-03 whitespace-nowrap',
-            'effect-color effect-focus',
-            'focus-visible:text-default hover:text-default',
-            'border-2'
-        ], {
-            variants: {
-                position: {
-                    first: 'px-16 rounded-t-lg',
-                    center: 'px-16',
-                    left: 'pl-16 pr-28 rounded-tl-lg border-r-0 -mr-16 after:right-16',
-                    right: 'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'
-                },
-                active: {
-                    false: [
-                        'text-lighter bg-dark hover:bg-darker border-softest border-b-0 z-1',
-                        "after:content-[''] after:absolute after:bottom-0 after:inset-x-0 after:h-2 after:border-soft"
-                    ],
-                    true: [
-                        'bg-default text-default z-99',
-                        'rounded-t-lg',
-                        "before:content-[''] before:absolute before:-bottom-2 z-1 before:inset-x-0 before:h-3 before:bg-default",
-                        'border-soft'
-                    ]
-                }
-            }
-        });
         this.identifier = undefined;
         this.navAriaLabel = 'Tabs';
         this.tabs = undefined;
+        this.variant = 'default';
         this.parsedTabs = [];
         this.activeIndex = -1;
     }
@@ -62,70 +35,45 @@ export class EdsTabs {
     }
     /**
      * Parses the `tabs` prop into an array of tab objects.
-     * Returns an empty array if parsing fails or if `tabs` is not a valid JSON string or object.
      *
-     * @returns {any[]} Array of parsed 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);
-        // Reset tab refs when tabs change
-        this.tabRefs = [];
-    }
-    componentDidLoad() {
-        this.scrollToActiveTab();
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
+        }
     }
     componentDidUpdate() {
-        // Ensure we have the correct number of tab refs after render
-        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() {
         this.activeIndex = this.parsedTabs.findIndex((tab) => tab.active);
-        // If no active tab found, default to first tab
         if (this.activeIndex === -1 && this.parsedTabs.length > 0) {
             this.activeIndex = 0;
             this.parsedTabs[0].active = true;
         }
     }
-    scrollToActiveTab() {
-        var _a;
-        const activeTab = (_a = this.tabContainer) === null || _a === void 0 ? void 0 : _a.querySelector('[data-tab-active]');
-        if (activeTab) {
-            setTimeout(() => {
-                activeTab.scrollIntoView({
-                    inline: 'center',
-                    block: 'nearest'
-                });
-            }, 316);
-        }
-    }
-    getTabOptions(active, index) {
-        const position = active
-            ? 'center'
-            : this.activeIndex === -1 && index === 0
-                ? 'first'
-                : index < this.activeIndex
-                    ? 'left'
-                    : 'right';
-        const rawZ = position === 'left' ? index : this.parsedTabs.length + 1 - index;
-        // clamp inactive to at least 1
-        const z = active ? this.parsedTabs.length + 99 : Math.max(rawZ, 1);
-        return Object.assign({ class: this.tabCva({ active, position }), style: {
-                // stringify the number so it matches { [key: string]: string }
-                zIndex: `${z}`
-            } }, (active ? { 'data-tab-active': 'true' } : {}));
-    }
     handleTabClick(index, tabLabel, shouldFocus = true) {
-        // Validate index
+        var _a;
         if (index < 0 || index >= this.parsedTabs.length) {
             return;
         }
-        // Update the active index and set all tabs' active state accordingly
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
         this.tab.emit({ tabId: this.identifier, index: index, name: tabLabel });
-        // Only send analytics for actual clicks, not keyboard navigation
         if (shouldFocus) {
             sendAnalytics({
                 category: 'ui-component',
@@ -134,13 +82,34 @@ export class EdsTabs {
                 action: 'click'
             });
         }
-        // Focus management for keyboard navigation
-        if (shouldFocus && this.tabRefs[index]) {
-            // Use a small timeout to ensure the DOM has updated
-            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) {
@@ -163,19 +132,26 @@ export class EdsTabs {
                 ev.preventDefault();
                 break;
             default:
-                return; // Don't handle other keys
+                return;
         }
         if (newIndex !== idx) {
             this.handleTabClick(newIndex, this.parsedTabs[newIndex].label, true);
         }
     }
     render() {
-        return (h("div", { key: '94766d744d61eb8d1eef51393621f85b06af822f', id: `${this.identifier}` }, h("div", { key: 'd76f26bd4e70baebab9fed6c61df26b496d899a5', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("nav", { key: '74afc95f82764cedb44b99a482bedc7b5f918196', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
-            const TabComponent = 'button';
-            const tabProps = this.getTabOptions(tab.active, index);
+        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 isActive = index === this.activeIndex;
-            return (h(TabComponent, Object.assign({}, tabProps, { type: "button", role: "tab", "aria-selected": tab.active ? '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: '4652dc3741f95ccfac7d53e5e49607515f559ce1', 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, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
+            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}` })))))));
     }
     static get is() { return "eds-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -230,8 +206,8 @@ export class EdsTabs {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string | { label: string; url: string; active: boolean; ariaLabel?: string }[]",
-                    "resolved": "string | { label: string; url: string; active: boolean; ariaLabel?: string; }[]",
+                    "original": "string | { label: string; url?: string; active: boolean; ariaLabel?: string }[]",
+                    "resolved": "string | { label: string; url?: string; active: boolean; ariaLabel?: string; }[]",
                     "references": {}
                 },
                 "required": false,
@@ -242,6 +218,24 @@ export class EdsTabs {
                 },
                 "attribute": "tabs",
                 "reflect": false
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'inverse'",
+                    "resolved": "\"default\" | \"inverse\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual variant: 'default' for dark backgrounds, 'inverse' for light backgrounds"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'default'"
             }
         };
     }

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;
   }