@ebrains/components 2.3.1 → 2.4.0

package/dist/collection/components/eds-steps-v2/eds-steps-v2.js

@@ -3,48 +3,74 @@ import { parseData } from "../../utils/sharedUtils";
 export class EdsStepsV2 {
     constructor() {
         this.handleTitleClick = (index) => {
-            // If clicking the same title, keep your existing toggle behavior
-            if (index === this.activeStep) {
-                this.activeStep = this.activeStep === index ? -1 : index;
+            // In linear mode, do NOT collapse; only navigate if allowed.
+            if (this.type === 'linear') {
+                if (index > this.activeStep) {
+                    // Prevent jumping forward over disabled steps
+                    for (let i = this.activeStep; i < index; i++) {
+                        if (this.isStepDisabled(i)) {
+                            return;
+                        }
+                    }
+                }
+                this.activeStep = index;
                 this.step.emit(this.activeStep);
                 return;
             }
-            // Block *forward* jumps when progression is gated by disableNext (boolean)
-            const forwardBlocked = this.type === 'linear' && index > this.activeStep && this.isNextDisabledForCurrent();
-            if (forwardBlocked) {
+            // Non-linear vertical mode can toggle collapse of the current title
+            if (this.orientation === 'vertical' && index === this.activeStep) {
+                this.activeStep = this.activeStep === index ? -1 : index;
+                this.step.emit(this.activeStep);
                 return;
             }
-            // Allow back (or forward when not gated)
+            // Otherwise just set
             this.activeStep = index;
             this.step.emit(this.activeStep);
         };
         this.handleNext = () => {
             const lastIndex = this.parsedSteps.length - 1;
+            // On last step: do NOT collapse; keep content visible, just emit finished
             if (this.activeStep >= lastIndex) {
                 this.finished.emit();
-                this.activeStep = -1; // collapse last step
+                this.activeStep = -1; // collapse the content
+                this.step.emit(this.activeStep); // notify change (-1 sentinel)
                 return;
             }
             const target = this.activeStep + 1;
             this.next.emit(target);
-            if (!this.disableNext) {
-                this.activeStep = target;
-                this.step.emit(this.activeStep);
+            if (this.isStepDisabled(this.activeStep)) {
+                return;
+            }
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // clear boolean form when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
+            const lastIndex = this.parsedSteps.length - 1;
+            // Recover from collapsed sentinel if it ever occurs
+            if (this.activeStep < 0) {
+                this.activeStep = lastIndex;
+                this.step.emit(this.activeStep);
+                return;
+            }
             if (this.activeStep > 0) {
                 const target = this.activeStep - 1;
                 this.back.emit(target);
                 this.activeStep = target;
                 this.step.emit(this.activeStep);
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.orientation = 'vertical';
         this.imageSrc = undefined;
         this.imageWidth = undefined;
-        this.bg = true;
         this.message = undefined;
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
@@ -53,57 +79,87 @@ export class EdsStepsV2 {
         this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    componentDidLoad() {
-        var _a;
-        if (this.type === 'linear') {
-            const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
-            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
-                this.emitContext(btn);
-            });
+    handleDisableNextChange(newValue) {
+        if (typeof newValue === 'string' && newValue.trim().startsWith('[')) {
+            try {
+                this.disableNext = JSON.parse(newValue);
+            }
+            catch (e) {
+                console.error('Failed to parse disable-next array:', e);
+            }
         }
     }
     activeStepChanged(newValue) {
+        // Clamp and ignore collapsed sentinel
+        const max = Math.max(0, this.parsedSteps.length - 1);
+        if (newValue > max) {
+            this.activeStep = max;
+            return;
+        }
+        if (newValue < -1) {
+            this.activeStep = -1;
+            return;
+        }
+        if (newValue < 0) {
+            return;
+        } // ignore collapsed state if ever set elsewhere
+        // Emit parentContext to buttons inside the newly active step
         setTimeout(() => {
-            var _a;
-            const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
-            if (activeStepContainer) {
-                const btns = activeStepContainer.querySelectorAll('eds-button');
-                btns.forEach((btn) => {
-                    this.emitContext(btn);
-                });
-            }
+            const host = this.el.shadowRoot || this.el;
+            const activeStepContainer = host.querySelectorAll('.step')[newValue];
+            activeStepContainer === null || activeStepContainer === void 0 ? void 0 : activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
         }, 50);
     }
+    componentWillLoad() {
+        this.handleDisableNextChange(this.disableNext);
+    }
+    componentDidLoad() {
+        if (this.type === 'linear') {
+            const host = this.el.shadowRoot || this.el;
+            const btns = host.querySelectorAll('eds-button');
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
+        }
+    }
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
                 componentName: this.el.tagName.toLowerCase(),
                 identifier: this.activeStep
-            }
+            },
+            bubbles: true,
+            composed: true
         });
         linkElement.dispatchEvent(event);
     }
     articleClasses() {
-        return [
-            this.bg ? 'bg-inverse' : 'bg-default',
-            'border-softer effect-focus-within relative rounded-lg border-2'
-        ].join(' ');
+        return ['border-softer effect-focus-within relative rounded-lg border-2'].join(' ');
     }
-    /**
-     * Parses the steps property into an array of Step objects.
-     */
     get parsedSteps() {
         return parseData(this.steps);
     }
-    isNextDisabledForCurrent() {
-        return !!this.disableNext;
+    isStepDisabled(index) {
+        if (Array.isArray(this.disableNext)) {
+            return index < this.disableNext.length ? !!this.disableNext[index] : false;
+        }
+        return index === this.activeStep && !!this.disableNext;
+    }
+    isNextDisabledFor(index) {
+        return this.isStepDisabled(index);
     }
-    /** Render the semantic heading element */
     renderHeading(title, index) {
         const Tag = this.headingLevel;
         if (this.type === 'linear') {
             const isOpen = this.activeStep === index;
-            const forwardBlocked = index > this.activeStep && this.isNextDisabledForCurrent();
+            // Check if jumping to this step crosses a disabled step
+            let forwardBlocked = false;
+            if (index > this.activeStep) {
+                for (let i = this.activeStep; i < index; i++) {
+                    if (this.isStepDisabled(i)) {
+                        forwardBlocked = true;
+                        break;
+                    }
+                }
+            }
             const onKey = (e) => {
                 if (forwardBlocked) {
                     return;
@@ -115,13 +171,42 @@ export class EdsStepsV2 {
             };
             return (h(Tag, { class: `eds-steps__title ${forwardBlocked ? 'is-disabled' : ''}`, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-disabled": forwardBlocked ? 'true' : 'false', "aria-expanded": isOpen, "aria-controls": `eds-step-panel-${index}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey }, title));
         }
-        return h(Tag, { class: "eds-steps__title" }, title);
+        return (h(Tag, { class: "eds-steps__title", onClick: () => this.handleTitleClick(index) }, title));
+    }
+    /** Render horizontal indicator item */
+    renderHorizontalIndicator(step, index) {
+        const isActive = this.activeStep === index;
+        const isCompleted = this.activeStep > index;
+        let forwardBlocked = false;
+        if (index > this.activeStep) {
+            for (let i = this.activeStep; i < index; i++) {
+                if (this.isStepDisabled(i)) {
+                    forwardBlocked = true;
+                    break;
+                }
+            }
+        }
+        const onKey = (e) => {
+            if (forwardBlocked) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.handleTitleClick(index);
+            }
+        };
+        return (h("div", { class: `horizontal-step ${isActive ? 'is-active' : ''} ${isCompleted ? 'is-completed' : ''}`, onClick: () => !forwardBlocked && this.handleTitleClick(index), onKeyDown: onKey, role: "button", tabindex: forwardBlocked ? -1 : 0, "aria-label": `Step ${index + 1}: ${step.title}`, "aria-current": isActive ? 'step' : undefined, "aria-disabled": forwardBlocked ? 'true' : 'false' }, h("div", { class: "step-indicator" }, h("span", { class: "step-number" }, index + 1)), h("span", { class: `text-center text-default f-ui-03 ${forwardBlocked ? 'opacity-50' : ''}` }, step.title)));
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'b486aa34dfab4902cd6569cc2ce228104ca536cd', 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: 'e2a928ecb67caed4885c9e364621b422249610f1', 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, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, 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 }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, 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 })))))))))));
+        const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
+        return (h("div", { key: '0f9dbb87f9cd269057183ee969addd55e85b2149', 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: 'd636d36c2e95d73c23c269b1faf67870eca97c16', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: "steps--horizontal", style: { '--step-count': steps.length.toString() } }, h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index) => {
+            const isLast = index === steps.length - 1;
+            if (this.activeStep !== index) {
+                return null;
+            }
+            return (h("div", { class: "step-content", key: index, id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, 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: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null })), h("slot", { name: `actions-${index}` })));
+        }))) : this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step mt-16', key: index }, this.renderHeading(step.title, index), this.activeStep === index && (h("div", { class: "content grid gap-y-16", id: `eds-step-panel-${index}` }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content })), h("div", { class: `flex items-center justify-between ${marginClass}` }, 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.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null }))))))))) : (h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title, index), h("div", { class: "content", id: `eds-step-panel-${index}` }, h("div", { class: "content-body" }, h("slot", { name: `step-${index}` }, h("div", { class: "my-16 f-body-02 text-lighter", innerHTML: step.content }))))))))))));
     }
     static get is() { return "eds-steps-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -155,7 +240,7 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "JSON string or an array of step objects.\nEach object should have a `title` and optional `content` property."
+                    "text": "JSON string or array of steps: { title, content? }"
                 },
                 "attribute": "steps",
                 "reflect": false,
@@ -172,16 +257,31 @@ export class EdsStepsV2 {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "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."
+                    "tags": [],
+                    "text": "Stepper mode"
                 },
                 "attribute": "type",
                 "reflect": false,
                 "defaultValue": "'static'"
             },
+            "orientation": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'vertical' | 'horizontal'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Orientation (applies to linear visuals)"
+                },
+                "attribute": "orientation",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
             "imageSrc": {
                 "type": "string",
                 "mutable": false,
@@ -194,7 +294,7 @@ export class EdsStepsV2 {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional image source to display above the steps."
+                    "text": "Optional illustration"
                 },
                 "attribute": "image-src",
                 "reflect": false
@@ -211,29 +311,11 @@ export class EdsStepsV2 {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional image width for the `eds-img` component."
+                    "text": ""
                 },
                 "attribute": "image-width",
                 "reflect": false
             },
-            "bg": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [],
-                    "text": "If true, apply an inverse background to the container."
-                },
-                "attribute": "bg",
-                "reflect": false,
-                "defaultValue": "true"
-            },
             "message": {
                 "type": "string",
                 "mutable": false,
@@ -246,7 +328,7 @@ export class EdsStepsV2 {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional message to display inside the placeholder if no image is provided."
+                    "text": ""
                 },
                 "attribute": "message",
                 "reflect": false
@@ -263,7 +345,7 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label text for the \"Next\" button."
+                    "text": "Labels"
                 },
                 "attribute": "next-label",
                 "reflect": false,
@@ -281,7 +363,7 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label text for the \"Back\" button."
+                    "text": ""
                 },
                 "attribute": "back-label",
                 "reflect": false,
@@ -299,25 +381,28 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Label text for the \"Finish\" button (last step in linear mode)."
+                    "text": ""
                 },
                 "attribute": "finish-label",
                 "reflect": false,
                 "defaultValue": "'Finish'"
             },
             "disableNext": {
-                "type": "boolean",
-                "mutable": false,
+                "type": "any",
+                "mutable": true,
                 "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
+                    "original": "boolean | boolean[] | string",
+                    "resolved": "boolean | boolean[] | string",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "If true, disables the \"Next\" button to block progression."
+                    "tags": [{
+                            "name": "attr",
+                            "text": "disable-next"
+                        }],
+                    "text": "Disable Next/Finish (boolean or per-step boolean[]). Also accepts a JSON array string."
                 },
                 "attribute": "disable-next",
                 "reflect": false,
@@ -334,11 +419,8 @@ export class EdsStepsV2 {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [{
-                            "name": "default",
-                            "text": "\"h4\""
-                        }],
-                    "text": "Heading level to use for each step title."
+                    "tags": [],
+                    "text": "Heading level for titles"
                 },
                 "attribute": "heading-level",
                 "reflect": true,
@@ -359,14 +441,8 @@ export class EdsStepsV2 {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "event",
-                            "text": "step"
-                        }, {
-                            "name": "payload",
-                            "text": "{number} The index of the new active step."
-                        }],
-                    "text": "Emitted when the active step changes."
+                    "tags": [],
+                    "text": "Fired whenever the active step changes. Payload: current step index."
                 },
                 "complexType": {
                     "original": "number",
@@ -380,11 +456,8 @@ export class EdsStepsV2 {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [{
-                            "name": "event",
-                            "text": "finished"
-                        }],
-                    "text": "Emitted when the \"Finish\" button is clicked (last step in linear mode)."
+                    "tags": [],
+                    "text": "Fired when user clicks Finish on the last step."
                 },
                 "complexType": {
                     "original": "void",
@@ -398,14 +471,8 @@ export class EdsStepsV2 {
                 "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."
+                    "tags": [],
+                    "text": "Fired before advancing, with the target step index."
                 },
                 "complexType": {
                     "original": "number",
@@ -419,14 +486,8 @@ export class EdsStepsV2 {
                 "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."
+                    "tags": [],
+                    "text": "Fired before going back, with the target step index."
                 },
                 "complexType": {
                     "original": "number",
@@ -438,6 +499,9 @@ export class EdsStepsV2 {
     static get elementRef() { return "el"; }
     static get watchers() {
         return [{
+                "propName": "disableNext",
+                "methodName": "handleDisableNextChange"
+            }, {
                 "propName": "activeStep",
                 "methodName": "activeStepChanged"
             }];

package/dist/collection/components/eds-steps-v2/eds-steps-v2.stories.js

@@ -12,6 +12,11 @@ export default {
                 { title: 'Step Three', content: '<p>Details for step three.</p>' }
             ]
         },
+        orientation: {
+            control: { type: 'select' },
+            options: ['vertical', 'horizontal'],
+            description: 'Stepper orientation (applies to **linear** mode only). "vertical" stacks steps; "horizontal" shows numbered indicators above content.'
+        },
         type: {
             control: 'select',
             options: ['static', 'linear'],
@@ -61,6 +66,7 @@ export default {
             { title: 'Step Two', content: '<p>Details for step two.</p>' },
             { title: 'Step Three', content: '<p>Details for step three.</p>' }
         ],
+        orientation: 'vertical',
         type: 'static',
         imageSrc: '',
         bg: true,
@@ -72,11 +78,12 @@ export default {
         disableNext: false
     }
 };
-const Template = ({ steps, type, imageSrc, imageWidth, bg, message, headingLevel, nextLabel, backLabel, finishLabel, disableNext }) => html `
+const Template = ({ steps, type, orientation, 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}"
+      orientation="${orientation}"
       .imageSrc=${imageSrc}
       .imageWidth=${imageWidth}
       ?bg=${bg}

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

@@ -45,11 +45,11 @@ export class EdsSwitch {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (h("div", { key: '34573e6f2b377e168039a13afb4d5fe981f575ad', class: "switch-container" }, this.labelOff && (h("span", { key: '1728e1aac88d275cd6bee0aaf50e93e3a421944d', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: '5d35387a9bf808923bd94f5d64528cca1e4055d5', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
+        return (h("div", { key: 'a339677097f16cd2dfe180f0a7de26d4963a9f17', class: "switch-container" }, this.labelOff && (h("span", { key: '7db8e71c0f1668fb66f2b1ff049706b80b4683b3', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'ce2a8400bc42612bcb22b47ce46762348a7a7b80', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: 'd8e0e1e3b562b4ac894998641cb7c813578e1a3f', class: "switch-handle" })), this.labelOn && (h("span", { key: '86b56fbbc537e9f08d11a509a1cb0e19d8dc3c39', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: 'c7bbace6e78fe2358ee4b91febec51a280305df0', class: "switch-handle" })), this.labelOn && (h("span", { key: 'b4fa05fc1296a6d906abb4a7fa609d721d01248f', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -12,6 +12,20 @@ table {
     /* 3 */
 }
 
+/* Default theme - no alternating colors */
+tr.table-row-default {
+  background-color: transparent;
+}
+
+/* Color theme - alternating rows */
+tr.table-row-color:nth-child(even) {
+  background-color:var(--grey-100);
+}
+
+tr.table-row-color:nth-child(odd) {
+  background-color: transparent;
+}
+
 .container {
     width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
     margin-right: auto;