@ebrains/components 2.0.0 → 2.2.0

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.js

@@ -3,14 +3,25 @@ import { parseData } from "../../utils/sharedUtils";
 export class EdsStepsV2 {
     constructor() {
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                // Finish
+                this.finished.emit();
+                return;
+            }
+            // Next
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (!this.disableNext) {
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
@@ -20,6 +31,11 @@ export class EdsStepsV2 {
         this.imageWidth = undefined;
         this.bg = true;
         this.message = undefined;
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
     componentDidLoad() {
@@ -58,24 +74,22 @@ export class EdsStepsV2 {
             'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
     /**
      * Parses the steps property into an array of Step objects.
      */
     get parsedSteps() {
         return parseData(this.steps);
     }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return h(Tag, null, title);
+    }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'db0618aad7d5986fcb0889f1c439be73f83a00df', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (h("div", { key: '1ff00f17a85e9a3a9d7bef23694560acd77e7ee4', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'a0328e80df5d9447cfa5378eb9e45925f1f68c69', class: "pb-20 px-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, this.renderHeading(step.title), this.activeStep === index && (h("div", { class: "content grid gap-y-16" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.disableNext, size: "small", class: "ml-8" }))))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })))))))))));
+        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter', innerHTML: step.content })))))))))));
     }
     static get is() { return "eds-steps-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -109,7 +123,7 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "JSON string or an array of step objects.\nExample:\n'[\n  { \"title\": \"Step One\", \"content\": \"Details for step one\" },\n  { \"title\": \"Step Two\", \"content\": \"Details for step two\" }\n]'"
+                    "text": "JSON string or an array of step objects.\nEach object should have a `title` and optional `content` property."
                 },
                 "attribute": "steps",
                 "reflect": false,
@@ -126,8 +140,11 @@ export class EdsStepsV2 {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The type of stepper. Default is \"static\" (all steps visible, no navigation buttons).\nUse \"linear\" if only one step should be visible at a time."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"static\""
+                        }],
+                    "text": "The type of stepper:\n- `\"static\"`: shows all steps with their content.\n- `\"linear\"`: shows only one step at a time with navigation controls."
                 },
                 "attribute": "type",
                 "reflect": false,
@@ -162,7 +179,7 @@ export class EdsStepsV2 {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional image width for the eds-img component."
+                    "text": "Optional image width for the `eds-img` component."
                 },
                 "attribute": "image-width",
                 "reflect": false
@@ -179,7 +196,7 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, apply a background class to the container."
+                    "text": "If true, apply an inverse background to the container."
                 },
                 "attribute": "bg",
                 "reflect": false,
@@ -201,6 +218,99 @@ export class EdsStepsV2 {
                 },
                 "attribute": "message",
                 "reflect": false
+            },
+            "nextLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the \"Next\" button."
+                },
+                "attribute": "next-label",
+                "reflect": false,
+                "defaultValue": "'Next'"
+            },
+            "backLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the \"Back\" button."
+                },
+                "attribute": "back-label",
+                "reflect": false,
+                "defaultValue": "'Back'"
+            },
+            "finishLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the \"Finish\" button (last step in linear mode)."
+                },
+                "attribute": "finish-label",
+                "reflect": false,
+                "defaultValue": "'Finish'"
+            },
+            "disableNext": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, disables the \"Next\" button to block progression."
+                },
+                "attribute": "disable-next",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h3' | 'h4' | 'h5'",
+                    "resolved": "\"h3\" | \"h4\" | \"h5\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"h4\""
+                        }],
+                    "text": "Heading level to use for each step title."
+                },
+                "attribute": "heading-level",
+                "reflect": true,
+                "defaultValue": "'h4'"
             }
         };
     }
@@ -217,8 +327,74 @@ export class EdsStepsV2 {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits when a step is clicked, providing the step's index."
+                    "tags": [{
+                            "name": "event",
+                            "text": "step"
+                        }, {
+                            "name": "payload",
+                            "text": "{number} The index of the new active step."
+                        }],
+                    "text": "Emitted when the active step changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "finished",
+                "name": "finished",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "finished"
+                        }],
+                    "text": "Emitted when the \"Finish\" button is clicked (last step in linear mode)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "next",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "next"
+                        }, {
+                            "name": "payload",
+                            "text": "{number} The target step index."
+                        }],
+                    "text": "Emitted when the \"Next\" button is clicked."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "back",
+                "name": "back",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "back"
+                        }, {
+                            "name": "payload",
+                            "text": "{number} The target step index."
+                        }],
+                    "text": "Emitted when the \"Back\" button is clicked."
                 },
                 "complexType": {
                     "original": "number",

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.stories.js

@@ -30,6 +30,29 @@ export default {
         message: {
             control: 'text',
             description: 'Message to display if no image is provided'
+        },
+        headingLevel: {
+            name: 'heading-level',
+            control: { type: 'select' },
+            options: ['h3', 'h4', 'h5'],
+            description: 'Semantic heading tag to render for each step title',
+            defaultValue: 'h4'
+        },
+        nextLabel: {
+            control: 'text',
+            description: 'Label for the Next button (linear)'
+        },
+        backLabel: {
+            control: 'text',
+            description: 'Label for the Back button (linear)'
+        },
+        finishLabel: {
+            control: 'text',
+            description: 'Label for the Finish button on the last step (linear)'
+        },
+        disableNext: {
+            control: 'boolean',
+            description: 'Disable Next/Finish to block progression (linear)'
         }
     },
     args: {
@@ -41,12 +64,29 @@ export default {
         type: 'static',
         imageSrc: '',
         bg: true,
-        message: 'No image available'
+        message: 'No image available',
+        headingLevel: 'h4',
+        nextLabel: 'Next',
+        backLabel: 'Back',
+        finishLabel: 'Finish',
+        disableNext: false
     }
 };
-const Template = ({ steps, type, imageSrc, bg, message }) => html `
-  <div class="max-w-sidebar">
-    <eds-steps-v2 .steps=${steps} type="${type}" .imageSrc=${imageSrc} ?bg=${bg} message="${message}"></eds-steps-v2>
+const Template = ({ steps, type, imageSrc, imageWidth, bg, message, headingLevel, nextLabel, backLabel, finishLabel, disableNext }) => html `
+  <div class="grid grid-layout grid-cols-2">
+    <eds-steps-v2
+      .steps=${steps}
+      type="${type}"
+      .imageSrc=${imageSrc}
+      .imageWidth=${imageWidth}
+      ?bg=${bg}
+      message="${message || ''}"
+      heading-level="${headingLevel}"
+      next-label="${nextLabel}"
+      back-label="${backLabel}"
+      finish-label="${finishLabel}"
+      ?disable-next=${disableNext}
+    ></eds-steps-v2>
   </div>
 `;
 export const Static = Template.bind({});
@@ -61,6 +101,7 @@ WithImage.storyName = 'With Image';
 WithImage.args = {
     type: 'static',
     imageSrc: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+    imageWidth: 960,
     message: ''
 };
 export const WithMessage = Template.bind({});
@@ -77,3 +118,23 @@ Linear.args = {
     imageSrc: '',
     message: ''
 };
+export const LinearBlocked = Template.bind({});
+LinearBlocked.storyName = 'Linear (Next Disabled)';
+LinearBlocked.args = {
+    type: 'linear',
+    disableNext: true
+};
+export const CustomLabels = Template.bind({});
+CustomLabels.storyName = 'Linear (Custom Labels)';
+CustomLabels.args = {
+    type: 'linear',
+    nextLabel: 'Continue',
+    backLabel: 'Previous',
+    finishLabel: 'Create Form'
+};
+export const HeadingLevels = Template.bind({});
+HeadingLevels.storyName = 'Static (Heading Levels)';
+HeadingLevels.args = {
+    type: 'static',
+    headingLevel: 'h3'
+};

package/dist/collection/shared-ui/eds-tabs/eds-tabs.css

@@ -93,11 +93,20 @@ a {
   white-space: nowrap;
 }
 
-.effect-color {
-  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
-  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+.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;
+  outline-offset: 2px;
+  outline-color: var(--green-500);
 }
 
 .focus-visible\:text-default:focus-visible {
@@ -197,6 +206,10 @@ a {
   border-right-width: 0px;
 }
 
+.border-b-0 {
+  border-bottom-width: 0px;
+}
+
 .pr-28 {
   padding-right: 1.75rem;
 }
@@ -263,6 +276,10 @@ a {
   z-index: 99;
 }
 
+.after\:z-10::after {
+  z-index: 10;
+}
+
 .before\:bottom-0::before {
   bottom: 0rem;
 }
@@ -306,6 +323,10 @@ a {
   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);
 }

package/dist/collection/shared-ui/eds-tabs/eds-tabs.js

@@ -13,15 +13,20 @@ import { parseData } from "../../utils/sharedUtils";
  */
 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-color effect-focus',
             'focus-visible:text-default hover:text-default',
-            'border-2',
-            "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:opacity-0",
-            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
+            'border-2'
         ], {
             variants: {
                 position: {
@@ -31,7 +36,10 @@ export class EdsTabs {
                     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 after:border-0',
+                    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',
@@ -50,28 +58,35 @@ export class EdsTabs {
     componentWillLoad() {
         this.parseTabs();
         this.setActiveIndex();
-        this.tab.emit({ tabId: this.identifier, index: 0 });
+        this.tab.emit({ tabId: this.identifier, index: this.activeIndex });
     }
     /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
-     */
-    /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     * 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 link objects
+     * @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;
@@ -93,31 +108,74 @@ export class EdsTabs {
                 : index < this.activeIndex
                     ? 'left'
                     : 'right';
-        return Object.assign({ class: this.tabCva({
-                active,
-                position
-            }), style: {
-                zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+        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) {
+    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 });
-        sendAnalytics({
-            category: 'ui-component',
-            tag: this.el.tagName.toLowerCase(),
-            name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
-            action: 'click'
-        });
+        // Only send analytics for actual clicks, not keyboard navigation
+        if (shouldFocus) {
+            sendAnalytics({
+                category: 'ui-component',
+                tag: this.el.tagName.toLowerCase(),
+                name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+                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();
+            }, 0);
+        }
+    }
+    onKeyDown(ev, idx) {
+        let newIndex = idx;
+        switch (ev.key) {
+            case 'ArrowRight':
+                newIndex = (idx + 1) % this.parsedTabs.length;
+                ev.preventDefault();
+                break;
+            case 'ArrowLeft':
+                newIndex = (idx - 1 + this.parsedTabs.length) % this.parsedTabs.length;
+                ev.preventDefault();
+                break;
+            case 'Home':
+                newIndex = 0;
+                ev.preventDefault();
+                break;
+            case 'End':
+                newIndex = this.parsedTabs.length - 1;
+                ev.preventDefault();
+                break;
+            default:
+                return; // Don't handle other keys
+        }
+        if (newIndex !== idx) {
+            this.handleTabClick(newIndex, this.parsedTabs[newIndex].label, true);
+        }
     }
     render() {
-        return (h("div", { key: 'ef6902f4dafc40f290f8b63627f4534d665aa01d', id: `${this.identifier}` }, h("div", { key: 'a120ea68061894c2d9e2e3f0b8e61f53732c8753', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'fb2bb608addcc777a55be828367e92268c676e16', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
-            const TabComponent = tab.active ? 'span' : 'a';
+        return (h("div", { key: '7cb51cf475d45ee3e43877ee4d42565f5930613a', id: `${this.identifier}` }, h("div", { key: '4f3c6d23f9084f07e5728b72310b96798d20b724', 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: '4d55e72e9f437cef8be06931445f619196a973a7', 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);
-            return (h(TabComponent, Object.assign({}, tabProps, { "aria-label": tab.label, "aria-current": index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) }), tab.label || tab.ariaLabel));
-        }))), h("div", { key: '82d6a43a9c326b6be73c81205201b18f148641ad', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { hidden: index !== this.activeIndex }, h("slot", { name: `panel-${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: 'e75f877da39c25e912853fea5dc2438fc15c67b5', 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}` })))))));
     }
     static get is() { return "eds-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.js

@@ -31,7 +31,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '5724dea66c7025b67571699860af8ff1c318ef48', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: '27172b1f3c76ebb460c35ea070eeff330390ed7d', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }