@ebrains/components 2.4.0 → 3.0.0

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

@@ -142,7 +142,11 @@ pre {
 }
 
 .text-default {
-  color: var(--black);
+  color: var(--brand-black);
+}
+
+.text-accent {
+  color: var(--brand-green);
 }
 
 .text-inverse {
@@ -150,11 +154,11 @@ pre {
 }
 
 .text-light {
-  color: var(--grey-700);
+  color: var(--grey-light);
 }
 
 .text-lighter {
-  color: var(--grey-600);
+  color: var(--grey-dark);
 }
 
 .w-full {
@@ -207,7 +211,7 @@ pre {
 }
 
 .border-softer {
-  border: 2px solid rgba(0, 0, 0, .1);
+  border: none;
 }
 
 .relative {
@@ -240,7 +244,7 @@ pre {
 }
 
 .border-2 {
-  border-width: 2px;
+  border-width: 0;
 }
 
 .p-8 {
@@ -252,13 +256,17 @@ pre {
 }
 
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .bg-inverse {
   background-color: var(--white);
 }
 
+.bg-strongest {
+  background-color: var(--brand-black);
+}
+
 .top-2 {
   top: 0.125rem;
 }
@@ -374,6 +382,12 @@ pre {
   padding: 1rem 0;
 }
 
+/* Helper class for aligning content with first step indicator */
+.step-content-aligned {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 .horizontal-step {
   display: flex;
   flex-direction: column;
@@ -388,15 +402,15 @@ pre {
   content: '';
   position: absolute;
   top: 1.25rem;
-  left: 50%;
-  width: 100%;
+  left: calc(50% + 2rem); /* Start after the circle */
+  width: calc(100% - 3rem); /* Width to reach next step with gap */
   height: 2px;
   background-color: #e0e0e0;
-  z-index: -1;
+  z-index: 1;
 }
 
 .horizontal-step.is-completed:not(:last-child)::after {
-  background-color: var(--green-500); /* green */
+  background-color: var(--brand-green); /* brand green */
 }
 
 .step-indicator {
@@ -413,13 +427,13 @@ pre {
 }
 
 .horizontal-step.is-active .step-indicator {
-  border-color: var(--green-500); /* green */
-  background-color: var(--green-500);
+  border-color: var(--brand-green-dark); /* green */
+  background-color: var(--brand-green-dark);
   color: var(--white);
 }
 
 .horizontal-step.is-completed .step-indicator {
-  border-color: var(--green-500); /* green */
+  border-color: var(--brand-green-dark); /* green */
   background-color: var(--white);
 }
 
@@ -440,16 +454,157 @@ pre {
 }
 
 .horizontal-step.is-active .step-label {
-  color: var(--green-500);
+  color: var(--brand-green-dark);
 }
 
 .step-content {
-  padding: 2rem 0;
+  padding: 0.5rem 0;
   /* Align content to start under the first step indicator */
-  margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
-  margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  margin-left: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+  margin-right: calc((100% / var(--step-count, 1)) * 0.20 - 1.25rem);
+}
+
+/* Adjust margins for larger screens (> 700px) */
+@media (min-width: 700px) {
+  .step-content {
+    padding: 1.5rem 0;
+    margin-left: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+    margin-right: calc((100% / var(--step-count, 1)) * 0.45 - 1.25rem);
+  }
 }
 
 .opacity-50 {
   opacity: 0.5;
+}
+
+.bg-dark {
+  background-color: var(--grey-light);
+}
+
+.bg-darker {
+  background-color: var(--grey-dark);
+}
+
+/* ============================================
+   BRAND THEME STYLES
+   ============================================ */
+
+/* Brand theme - Vertical steps */
+.theme-brand.steps h3::before,
+.theme-brand.steps h4::before,
+.theme-brand.steps h5::before {
+  background: var(--brand-green); /* #00FF9D */
+  color: var(--brand-black); /* #07140D */
+  border-color: var(--brand-green);
+  font-weight: 600;
+}
+
+/* Hide step number for completed steps in vertical mode */
+.theme-brand.steps h3.is-completed::before,
+.theme-brand.steps h4.is-completed::before,
+.theme-brand.steps h5.is-completed::before {
+  content: '';
+  /* Keep the circle background, just remove the number */
+}
+
+/* Position checkmark icon inside the ::before circle */
+.theme-brand.steps .step-checkmark-icon {
+  position: absolute;
+  left: -39px;
+  top: 0px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 30px;
+  height: 30px;
+  z-index: 1;
+}
+
+.theme-brand.steps h3 .step-checkmark-icon {
+  left: -41px;
+  width: 32px;
+  height: 32px;
+  top: 2px;
+}
+
+/* Brand theme - Horizontal step indicators */
+.theme-brand .step-indicator {
+  background-color: var(--grey-light);
+}
+
+.theme-brand .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+.theme-brand .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green);
+  background-color: var(--brand-green);
+  color: var(--brand-black);
+}
+
+/* Hide step number when completed (checkmark will show instead) */
+.theme-brand .horizontal-step.is-completed .step-number {
+  display: none;
+}
+
+.theme-brand .horizontal-step:not(:last-child)::after {
+  background-color: var(--grey-light); /* Default state */
+}
+
+.theme-brand .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green);
+}
+
+.theme-brand .horizontal-step.is-active .step-label {
+  color: var(--brand-black);
+  font-weight: 600;
+}
+
+.theme-brand .step-number {
+  font-weight: 600;
+}
+
+/* Default theme - explicitly define to ensure clarity */
+.theme-default.steps h3::before,
+.theme-default.steps h4::before,
+.theme-default.steps h5::before {
+  background: var(--grey-900);
+  color: #fff;
+  border-color: #ccc;
+}
+
+.theme-default .step-indicator {
+  background-color: white;
+  border-color: #e0e0e0;
+}
+
+.theme-default .horizontal-step.is-active .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--brand-green-dark);
+  color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed .step-indicator {
+  border-color: var(--brand-green-dark);
+  background-color: var(--white);
+}
+
+.theme-default .horizontal-step.is-completed:not(:last-child)::after {
+  background-color: var(--brand-green-dark);
+}
+
+.theme-default .horizontal-step.is-active .step-label {
+  color: var(--brand-green-dark);
+}
+
+.effect-focus-within {
+  outline-width: 3px;
+  outline-offset: 2px;
+  outline-color: var(--brand-green);
+}
+
+.effect-focus-within:focus-within {
+  outline-style: solid;
 }

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: '0f95d17cc699c020419593bec5ed76c4515501c9', 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: 'ed26ac9fc5cc4d7c409d29c3cd623e37a5abc944', 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: '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: {
+        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: 'c7bbace6e78fe2358ee4b91febec51a280305df0', class: "switch-handle" })), this.labelOn && (h("span", { key: 'b4fa05fc1296a6d906abb4a7fa609d721d01248f', 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'"
             }
         };
     }