@ebrains/components 2.4.0 → 3.0.0

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

@@ -1,396 +1,106 @@
-*,
-::before,
-::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x: ;
-  --tw-pan-y: ;
-  --tw-pinch-zoom: ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position: ;
-  --tw-gradient-via-position: ;
-  --tw-gradient-to-position: ;
-  --tw-ordinal: ;
-  --tw-slashed-zero: ;
-  --tw-numeric-figure: ;
-  --tw-numeric-spacing: ;
-  --tw-numeric-fraction: ;
-  --tw-ring-inset: ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(147 197 253 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur: ;
-  --tw-brightness: ;
-  --tw-contrast: ;
-  --tw-grayscale: ;
-  --tw-hue-rotate: ;
-  --tw-invert: ;
-  --tw-saturate: ;
-  --tw-sepia: ;
-  --tw-drop-shadow: ;
-  --tw-backdrop-blur: ;
-  --tw-backdrop-brightness: ;
-  --tw-backdrop-contrast: ;
-  --tw-backdrop-grayscale: ;
-  --tw-backdrop-hue-rotate: ;
-  --tw-backdrop-invert: ;
-  --tw-backdrop-opacity: ;
-  --tw-backdrop-saturate: ;
-  --tw-backdrop-sepia: ;
-  --tw-contain-size: ;
-  --tw-contain-layout: ;
-  --tw-contain-paint: ;
-  --tw-contain-style: ;
+:host {
+  display: block;
 }
 
-*,
-::before,
-::after {
-  box-sizing: border-box;
-  /* 1 */
-  border-width: 0;
-  /* 2 */
-  border-style: solid;
-  /* 2 */
-  border-color: currentColor;
-  /* 2 */
+/* Tabs Container */
+.tabs-container {
+  display: flex;
+  gap: 0.25rem;
+  padding: 0.25rem;
+  border-radius: 10px;
+  width: fit-content;
+  margin-bottom: 3rem;
 }
 
-::before,
-::after {
-  --tw-content: '';
+/* Default variant - dark background */
+.tabs-container-default {
+  background-color: var(--brand-black, #07140D);
+  border: 1px solid rgba(255, 255, 255, 0.06);
 }
 
-a {
-  color: inherit;
-  text-decoration: inherit;
+/* Inverse variant - light background */
+.tabs-container-inverse {
+  background: rgba(0, 0, 0, 0.02);
+  border: 1px solid rgba(0, 0, 0, 0.06);
 }
 
-.relative {
-  position: relative;
+/* Tabs Navigation */
+.tabs-nav {
+  display: flex;
+  gap: 0.25rem;
 }
 
-.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);
-}
-
-.whitespace-nowrap {
+/* Tab Base Styles */
+.tab {
+  padding: 0.625rem 1.25rem;
+  border-radius: 8px;
+  font-size: 1.125rem;
+  cursor: pointer;
+  transition: all 0.2s ease;
+  border: none;
+  background: transparent;
+  font-family: 'IBM Plex Sans', sans-serif;
   white-space: nowrap;
+  outline: none;
 }
 
-.effect-focus {
-  outline-width: 3px;
-  outline-offset: 2px;
-  outline-color: var(--green-500);
-}
-
-.effect-focus:focus-visible {
-  outline-style: solid;
-}
-
-.effect-focus-within {
-  outline-width: 3px;
+.tab:focus-visible {
+  outline: 3px solid var(--brand-green);
   outline-offset: 2px;
-  outline-color: var(--green-500);
-}
-
-.focus-visible\:text-default:focus-visible {
-  color: var(--black);
-}
-
-.hover\:text-default:hover {
-  color: var(--black);
-}
-
-.border-2 {
-  border-width: 2px;
-}
-
-.after\:content-\[\'\'\]::after {
-  --tw-content: '';
-  content: var(--tw-content);
 }
 
-.after\:bottom-0::after {
-  bottom: 0rem;
+/* Default variant tabs */
+.tab-default {
+  color: var(--grey-700);
 }
 
-.after\:border-0::after {
-  border-width: 0px;
+.tab-default:hover {
+  color: var(--white);
 }
 
-.after\:border-b-2::after {
-  border-bottom-width: 2px;
+.tab-default.tab-active {
+  background: rgba(0, 255, 157, 0.1);
+  color: var(--brand-green);
 }
 
-.after\:absolute::after {
-  position: absolute;
+/* Inverse variant tabs */
+.tab-inverse {
+  color: var(--grey-700);
 }
 
-.after\:inset-0::after {
-  inset: 0rem;
+.tab-inverse:hover {
+  color: var(--brand-black);
 }
 
-.after\:rounded-lg::after {
-  border-radius: 16px;
+.tab-inverse.tab-active {
+  background: rgba(0, 200, 123, 0.1);
+  color: var(--brand-green-dark);
 }
 
-.after\:border-solid::after {
-  border-style: solid;
+/* Tab Panels */
+.tab-panels {
+  margin-top: 2rem;
 }
 
-.after\:border-3::after {
-  border-width: 3px;
+.tab-panels > div {
+  outline: none;
 }
 
-.after\:border-accent::after {
-  border-color: var(--green-500);
-}
-
-.after\:opacity-0::after {
-  opacity: 0;
-}
-
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus\:outline-none:focus {
-  outline: 2px solid transparent;
+.tab-panels > div:focus-visible {
+  outline: 3px solid var(--brand-green);
   outline-offset: 2px;
+  border-radius: 4px;
 }
 
-.focus-visible\:outline-none:focus {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
-
-.focus-visible\:after\:opacity-100:focus-visible::after {
-  opacity: 1;
-}
-
-.rounded-t-lg {
-  border-top-left-radius: 16px;
-  border-top-right-radius: 16px;
-}
-
-.rounded-tl-lg {
-  border-top-left-radius: 16px;
-}
-
-.rounded-tr-lg {
-  border-top-right-radius: 16px;
-}
-
-.border-l-0 {
-  border-left-width: 0px;
-}
-
-.border-r-0 {
-  border-right-width: 0px;
-}
-
-.border-b-0 {
-  border-bottom-width: 0px;
-}
-
-.pr-28 {
-  padding-right: 1.75rem;
-}
-
-.pl-28 {
-  padding-left: 1.75rem;
-}
-
-.-mr-16 {
-  margin-right: -1rem;
-}
-
-.-ml-16 {
-  margin-left: -1rem;
-}
-
-.px-16 {
-  padding-left: 1rem;
-  padding-right: 1rem;
-}
-
-.py-12 {
-  padding-top: 0.75rem;
-  padding-bottom: 0.75rem;
-}
-
-.after\:left-16::after {
-  left: 1rem;
-}
-
-.after\:right-16::after {
-  right: 1rem;
-}
-
-.text-lighter {
-  color: var(--grey-600);
-}
-
-.bg-dark {
-  background-color: var(--grey-300);
-}
-
-.hover\:bg-darker:hover {
-  background-color: var(--grey-400);
-}
-
-.border-soft {
-  border-color: var(--grey-400);
-}
-
-.border-softest {
-  border-color: rgba(0, 0, 0, .05);
-}
-
-.bg-default {
-  background-color: var(--grey-200);
-}
-
-.text-default {
-  color: var(--black);
-}
-
-.z-99 {
-  z-index: 99;
-}
-
-.after\:z-10::after {
-  z-index: 10;
-}
-
-.before\:bottom-0::before {
-  bottom: 0rem;
-}
-
-.before\:h-12::before {
-  height: 0.75rem;
-}
-
-.before\:opacity-5::before {
-  opacity: 0.05;
-}
-
-.before\:content-\[\'\'\]::before {
-  --tw-content: '';
-  content: var(--tw-content);
-}
-
-.before\:absolute::before {
-  position: absolute;
-}
-
-.before\:-bottom-2::before {
-  bottom: -0.125rem;
-}
-
-.after\:inset-x-0::after {
-  left: 0rem;
-  right: 0rem;
-}
-
-.before\:inset-x-0::before {
-  left: 0rem;
-  right: 0rem;
-}
-
-.before\:h-3::before {
-  height: 0.1875rem;
-}
-
-.before\:bg-default::before {
-  background-color: var(--grey-200);
-}
-
-.after\:border-soft::after {
-  border-color: rgba(0, 0, 0, .15 );
-}
-
-.after\:border-softest::after {
-  border-color: rgba(0, 0, 0, .05);
-}
-
-.overflow-x-hidden {
-  overflow-x: hidden;
-}
-
-.overflow-y-auto {
-  overflow-y: auto;
-}
-
-.before\:bg-gradient-y::before {
-  background: linear-gradient(to bottom, transparent, ease-in-out, black);
-}
-
-.scroller-x {
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-}
-
-.overflow-x-auto {
-  overflow-x: auto;
-}
-
-.max-w-xxxl {
-  max-width: 2200px;
-}
-
-.z-1 {
-  z-index: 1;
-}
-
-.mx-auto {
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.pt-8 {
-  padding-top: 0.5rem;
-}
-
-.pr-16 {
-  padding-right: 1rem;
-}
-
-.pl-16 {
-  padding-left: 1rem;
-}
-
-.inline-flex {
-  display: inline-flex;
-}
-
-@media (min-width: 900px) {
-  .lg\:px-28 {
-    padding-left: 1.75rem;
-    padding-right: 1.75rem;
+/* Responsive */
+@media (max-width: 768px) {
+  .tabs-container {
+    width: 100%;
+    overflow-x: auto;
   }
-}
 
-@media (min-width: 2200px) {
-  .xxxl\:px-0 {
-    padding-left: 0rem;
-    padding-right: 0rem;
+  .tabs-nav {
+    width: 100%;
+    min-width: fit-content;
   }
-}
+}

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,30 @@ 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
      */
     parseTabs() {
         this.parsedTabs = parseData(this.tabs);
-        // Reset tab refs when tabs change
         this.tabRefs = [];
     }
-    componentDidLoad() {
-        this.scrollToActiveTab();
-    }
     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);
         }
     }
     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
         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,9 +67,7 @@ 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(() => {
                 var _a;
                 (_a = this.tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
@@ -163,19 +94,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: '36b4771f5dc68c2b2686ece5957b4a54f70d8c38', id: `${this.identifier}` }, h("div", { key: '0b9cac117898a5c8d179c69aaa971c63fed5b12c', 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: '6bb2ca84bd9b12e67bb2e6055cb435c66061f547', 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: '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 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: '7b17d99c5dda91842171c941228b0a0f82d595d4', 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: '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}` })))))));
     }
     static get is() { return "eds-tabs"; }
     static get encapsulation() { return "shadow"; }
@@ -230,8 +168,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 +180,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'"
             }
         };
     }