@ebrains/components 2.4.1 → 3.1.0

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

@@ -69,12 +69,14 @@ export class EdsStepsV2 {
         this.steps = [];
         this.type = 'static';
         this.orientation = 'vertical';
+        this.theme = 'default';
         this.imageSrc = undefined;
         this.imageWidth = undefined;
         this.message = undefined;
         this.nextLabel = 'Next';
         this.backLabel = 'Back';
         this.finishLabel = 'Finish';
+        this.showFinish = true;
         this.disableNext = false;
         this.headingLevel = 'h4';
         this.activeStep = 0;
@@ -132,7 +134,7 @@ export class EdsStepsV2 {
         linkElement.dispatchEvent(event);
     }
     articleClasses() {
-        return ['border-softer effect-focus-within relative rounded-lg border-2'].join(' ');
+        return ['border-softer relative rounded-lg border-2'].join(' ');
     }
     get parsedSteps() {
         return parseData(this.steps);
@@ -148,6 +150,7 @@ export class EdsStepsV2 {
     }
     renderHeading(title, index) {
         const Tag = this.headingLevel;
+        const isCompleted = this.activeStep > index;
         if (this.type === 'linear') {
             const isOpen = this.activeStep === index;
             // Check if jumping to this step crosses a disabled step
@@ -169,7 +172,7 @@ export class EdsStepsV2 {
                     this.handleTitleClick(index);
                 }
             };
-            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 ${forwardBlocked ? 'is-disabled' : ''} ${isCompleted ? 'is-completed' : ''}`, 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 }, isCompleted && (h("span", { class: "step-checkmark-icon" }, h("eds-icon-wrapper", { name: "checkmark", size: 20 }))), title));
         }
         return (h(Tag, { class: "eds-steps__title", onClick: () => this.handleTitleClick(index) }, title));
     }
@@ -195,18 +198,22 @@ export class EdsStepsV2 {
                 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)));
+        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" }, isCompleted ? (h("eds-icon-wrapper", { name: "checkmark", size: 20 })) : (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;
         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 themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
+        return (h("div", { key: 'e1d78d18506adb662bbcc100f6f886e33c21a996', 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 ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, h("div", { class: "p-24" }, h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), h("div", { key: '5b69e2c641d96025b34377fc647679f94d0e4e44', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (h("div", { class: `steps--horizontal ${themeClass}`, 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 }))))))))))));
+            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: "primary", icon: "arrow-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small", pill: true }), (!isLast || this.showFinish) && (h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "arrow-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null, pill: true }))), h("slot", { name: `actions-${index}` })));
+        }))) : this.type === 'linear' ? (h("div", { class: `steps ${themeClass}` }, steps.map((step, index) => {
+            const isCompleted = this.activeStep > index;
+            return (h("div", { class: `${index === 0 ? 'step' : 'step mt-16'} ${isCompleted ? 'is-completed' : ''}`, 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: "secondary", icon: "chevron-left", iconPos: "left", onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small", pill: true }), (index < steps.length - 1 || this.showFinish) && (h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: index > 0 ? 'ml-8' : null, pill: true })))))));
+        }))) : (h("div", { class: `steps space-y-8 ${themeClass}` }, 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"; }
@@ -231,7 +238,7 @@ export class EdsStepsV2 {
                     "references": {
                         "Step": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-steps-v2/eds-steps-v2.tsx",
+                            "path": "/Users/nikolaosgeorgomanolis/Documents/EBRAINS/Projects/ebrains-ui-ecosystem/packages/components/src/components/eds-steps-v2/eds-steps-v2.tsx",
                             "id": "../../../packages/components/src/components/eds-steps-v2/eds-steps-v2.tsx::Step"
                         }
                     }
@@ -282,6 +289,24 @@ export class EdsStepsV2 {
                 "reflect": false,
                 "defaultValue": "'vertical'"
             },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'brand'",
+                    "resolved": "\"brand\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual theme for the steps component.\n- 'default': Grey step circles with white text\n- 'brand': Brand green step circles with black text (CTA style)"
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'default'"
+            },
             "imageSrc": {
                 "type": "string",
                 "mutable": false,
@@ -387,6 +412,24 @@ export class EdsStepsV2 {
                 "reflect": false,
                 "defaultValue": "'Finish'"
             },
+            "showFinish": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show or hide the finish button on the last step"
+                },
+                "attribute": "show-finish",
+                "reflect": false,
+                "defaultValue": "true"
+            },
             "disableNext": {
                 "type": "any",
                 "mutable": true,

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

@@ -55,9 +55,9 @@ export default {
             control: 'text',
             description: 'Label for the Finish button on the last step (linear)'
         },
-        disableNext: {
+        showFinish: {
             control: 'boolean',
-            description: 'Disable Next/Finish to block progression (linear)'
+            description: 'Show or hide the Finish button on the last step (linear mode). Default: true.'
         }
     },
     args: {
@@ -75,10 +75,10 @@ export default {
         nextLabel: 'Next',
         backLabel: 'Back',
         finishLabel: 'Finish',
-        disableNext: false
+        showFinish: true
     }
 };
-const Template = ({ steps, type, orientation, imageSrc, imageWidth, bg, message, headingLevel, nextLabel, backLabel, finishLabel, disableNext }) => html `
+const Template = ({ steps, type, orientation, imageSrc, imageWidth, bg, message, headingLevel, nextLabel, backLabel, finishLabel, showFinish }) => html `
   <div class="grid grid-layout grid-cols-2">
     <eds-steps-v2
       .steps=${steps}
@@ -92,7 +92,7 @@ const Template = ({ steps, type, orientation, imageSrc, imageWidth, bg, message,
       next-label="${nextLabel}"
       back-label="${backLabel}"
       finish-label="${finishLabel}"
-      ?disable-next=${disableNext}
+      ?show-finish=${showFinish}
     ></eds-steps-v2>
   </div>
 `;
@@ -103,14 +103,6 @@ Static.args = {
     imageSrc: '',
     message: ''
 };
-export const WithImage = Template.bind({});
-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({});
 WithMessage.storyName = 'With Message';
 WithMessage.args = {
@@ -125,23 +117,17 @@ 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 = {
+export const LinearHorizontal = Template.bind({});
+LinearHorizontal.storyName = 'Linear Horizontal';
+LinearHorizontal.args = {
     type: 'linear',
-    nextLabel: 'Continue',
-    backLabel: 'Previous',
-    finishLabel: 'Create Form'
+    orientation: 'horizontal',
+    showFinish: true
 };
-export const HeadingLevels = Template.bind({});
-HeadingLevels.storyName = 'Static (Heading Levels)';
-HeadingLevels.args = {
-    type: 'static',
-    headingLevel: 'h3'
+LinearHorizontal.parameters = {
+    docs: {
+        description: {
+            story: 'Horizontal orientation with Finish button hidden. Perfect for multi-step forms or calculators where the last step displays results.'
+        }
+    }
 };

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

@@ -24,14 +24,14 @@ button.switch {
   height: 26px;
   border: none;
   border-radius: 13px;
-  background-color: #ccc;
+  background-color:var(--grey-dark);
   padding: 0;
   cursor: pointer;
   transition: background-color 0.2s;
 }
 
 button.switch.switch--checked {
-  background-color: var(--green-500);
+  background-color: var(--brand-green);
 }
 
 button.switch.switch--disabled {
@@ -75,5 +75,67 @@ button.switch.switch--checked .switch-handle {
 .switch:focus-visible {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
+}
+
+/* ============================================
+   SEGMENTED VARIANT (Pill-style Toggle)
+   ============================================ */
+
+.segmented-container {
+  display: inline-flex;
+  gap: 0.5rem;
+  background: var(--grey-light);
+  padding: 0.5rem;
+  border-radius: 2rem;
+}
+
+.segmented-btn {
+  padding: 0.5rem 1.5rem;
+  background: transparent;
+  border: none;
+  border-radius: 1.5rem;
+  font-family: var(--f-ui-02-fontFamily);
+  font-size: 0.9rem;
+  font-weight: 500;
+  cursor: pointer;
+  transition: all 0.3s;
+  color: var(--grey-dark);
+  white-space: nowrap;
+}
+
+.segmented-btn--active {
+  background: var(--brand-green);
+  color: var(--brand-black);
+}
+
+.segmented-btn:hover:not(.segmented-btn--active):not(.segmented-btn--disabled) {
+  color: var(--brand-black);
+}
+
+.segmented-btn--disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.segmented-btn:focus {
+  outline: 2px solid #005fcc;
+  outline-offset: 2px;
+}
+
+.segmented-btn:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.segmented-btn:focus-visible {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--brand-green);
+}
+
+.f-ui-03 {
+  font-family: var(--f-ui-03-fontFamily);
+  font-weight: var(--f-ui-03-fontWeight);
+  font-size: var(--f-ui-03-fontSize);
+  letter-spacing: var(--f-ui-03-letterSpacing);
 }

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

@@ -28,8 +28,15 @@ export class EdsSwitch {
         this.disabled = false;
         this.labelOn = '';
         this.labelOff = '';
+        this.variant = 'toggle';
     }
     render() {
+        if (this.variant === 'segmented') {
+            return this.renderSegmented();
+        }
+        return this.renderToggle();
+    }
+    renderToggle() {
         const switchId = `switch-${Math.random().toString(36).substr(2, 9)}`;
         const labelledBy = [];
         if (this.labelOff) {
@@ -45,11 +52,30 @@ export class EdsSwitch {
                     : this.labelOff
                 : 'Toggle switch'
             : undefined;
-        return (h("div", { key: '0ee7bcdc3d6bb78881c310e36e5189e5ef99bab0', class: "switch-container" }, this.labelOff && (h("span", { key: '858c4a43ccc633530d4e13a6bfa8115194ff5082', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'faa59b03c46dd814c4125534a88fd7564b02205a', 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", { class: "switch-container" }, this.labelOff && (h("span", { id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { 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: '74db0f827a4f50dd77b88e0d372cbef1adb10f87', class: "switch-handle" })), this.labelOn && (h("span", { key: '2648bb13d533bc9fde1dc04af9cfd7116dadd581', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { class: "switch-handle" })), this.labelOn && (h("span", { id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
+    }
+    renderSegmented() {
+        return (h("div", { class: "segmented-container", role: "group", "aria-label": "View toggle" }, h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+                'segmented-btn': true,
+                'segmented-btn--active': !this.checked,
+                'segmented-btn--disabled': this.disabled
+            }, onClick: () => {
+                if (!this.disabled && this.checked) {
+                    this.toggleSwitch();
+                }
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": !this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOff)), h("button", { type: "button", tabindex: this.disabled ? '-1' : '0', class: {
+                'segmented-btn': true,
+                'segmented-btn--active': this.checked,
+                'segmented-btn--disabled': this.disabled
+            }, onClick: () => {
+                if (!this.disabled && !this.checked) {
+                    this.toggleSwitch();
+                }
+            }, onKeyDown: this.handleKeyDown, disabled: this.disabled, "aria-pressed": this.checked ? 'true' : 'false' }, h("span", { class: "f-ui-03" }, this.labelOn))));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -136,6 +162,24 @@ export class EdsSwitch {
                 "attribute": "label-off",
                 "reflect": false,
                 "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'toggle' | 'segmented'",
+                    "resolved": "\"segmented\" | \"toggle\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant of the switch: 'toggle' (default) or 'segmented' (pill-style buttons)"
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'toggle'"
             }
         };
     }

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

@@ -2,37 +2,104 @@ export default {
     title: 'Components/Switch',
     component: 'eds-switch',
     argTypes: {
-        checked: {
-            control: 'boolean',
-            description: 'Indicates whether the switch is checked.'
-        },
-        disabled: {
-            control: 'boolean',
-            description: 'Disables the switch when true.'
-        },
-        labelOn: {
-            control: 'text',
-            description: 'Label displayed when the switch is ON.'
-        },
-        labelOff: {
-            control: 'text',
-            description: 'Label displayed when the switch is OFF.'
-        }
+        checked: { control: 'boolean', description: 'Indicates whether the switch is checked.' },
+        disabled: { control: 'boolean', description: 'Disables the switch when true.' },
+        labelOn: { control: 'text', description: 'Label displayed when the switch is ON.' },
+        labelOff: { control: 'text', description: 'Label displayed when the switch is OFF.' },
+        variant: { control: 'select', options: ['toggle', 'segmented'], description: 'Switch variant: toggle or segmented.' }
     },
     args: {
         checked: false,
         disabled: false,
         labelOn: '',
-        labelOff: ''
+        labelOff: '',
+        variant: 'toggle'
     }
 };
 export const Default = {
     render: (args) => `
-      <eds-switch
-        ${args.checked ? 'checked' : ''}
-        ${args.disabled ? 'disabled' : ''}
-        label-on="${args.labelOn}"
-        label-off="${args.labelOff}"
-      ></eds-switch>
-    `
+    <eds-switch
+      ${args.checked ? 'checked' : ''}
+      ${args.disabled ? 'disabled' : ''}
+      variant="${args.variant}"
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`
+};
+export const WithLabels = {
+    render: (args) => `
+    <eds-switch
+      ${args.checked ? 'checked' : ''}
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'On',
+        labelOff: 'Off'
+    }
+};
+export const Checked = {
+    render: (args) => `
+    <eds-switch
+      checked
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'Enabled',
+        labelOff: 'Disabled'
+    }
+};
+export const Disabled = {
+    render: (args) => `
+    <eds-switch
+      disabled
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'On',
+        labelOff: 'Off'
+    }
+};
+export const Segmented = {
+    render: (args) => `
+    <eds-switch
+      variant="segmented"
+      ${args.checked ? 'checked' : ''}
+      ${args.disabled ? 'disabled' : ''}
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'Grid',
+        labelOff: 'List',
+        checked: false
+    }
+};
+export const SegmentedChecked = {
+    render: (args) => `
+    <eds-switch
+      variant="segmented"
+      checked
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'Dark',
+        labelOff: 'Light'
+    }
+};
+export const SegmentedDisabled = {
+    render: (args) => `
+    <eds-switch
+      variant="segmented"
+      disabled
+      label-on="${args.labelOn}"
+      label-off="${args.labelOff}">
+    </eds-switch>`,
+    args: {
+        labelOn: 'Monthly',
+        labelOff: 'Yearly'
+    }
 };