@ebrains/components 0.9.3-beta → 1.1.0

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

@@ -5,6 +5,7 @@ import { cva } from "class-variance-authority";
 const linkStyles = cva([
     'relative inline-flex justify-center items-center py-8 rounded-sm',
     'effect-color effect-focus aria-disabled:text-lightest',
+    'cursor-pointer',
     'aria-disabled:bg-dark aria-disabled:cursor-not-allowed aria-disabled:!border-transparent aria-disabled:after:!border-transparent'
 ], {
     variants: {
@@ -215,7 +216,7 @@ export class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: '761ada887164cf469c685196d40dd9931a4db099', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'cdb706513c559552f7cdf0fdaf5b74aac0709f0f', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '8104cef2a013b4bfcbd7a1b2dced4d40594633b6', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: '8c7ab8b80b9765e83e4e57d59ba1b45fe36f15b7', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: '94284b425a331f6a56a3e63db89fed5fa1a207c1', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '7496886c7c975d6795633c36b9cc8d31673d5a4b', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: 'a23e44227ebaa3b999c961e1354c268f2c916a6f', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: 'cba53a54e6d31aabfa62ddcd8aa53bda56b8b706', innerHTML: logoContent })));
+        return (h("a", { key: 'ab11d53e1f417221dcca2de441c7b3efa96f99a5', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0d4a6b970788534d34d55b28fe83407ce7c4e00e', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,9 +121,9 @@ export class EdsModal {
     render() {
         // Generate a unique id for the title so we can reference it for aria-labelledby.
         const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
-        return (h("div", { key: '3a2446813eebf215f2c7aafc26d5688f58020c54', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '7081928b01c09e692cac0f61dbc58b4f5578271d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: 'affa340307adc5bdd637696b56a59e3f73cbf7e9', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'e4359b32052a155f879070deea34fbca2fb67e3b', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: '0fc5f4716022cb01c2da9a28738586710625c70f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8e4bdffba2f69b18e8846e4c2709c5c423b0a99e', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '6e0d237fc95c1b74b1b0c0456848684578367302', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '3499de216da4ba38edb66cdcd688872f51b41aaf', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: 'f723dded796961e925cc2b046c31e7345fd3e159', class: "pt-8 px-20 py-20" }, h("slot", { key: 'ffe1213b65e60dfaf7c220e3c7e3dd8495706dcf' })))));
+            onClick: () => this.close() })), h("div", { key: 'ba95f463e8c807e2ac2e900b3167191908ca2f5d', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '1fc4649d6ba728745e4f1ed73e8fb8bdac6eda59', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '731e7cb6c7aaa36bcda8d1c32bd1b8da9d85f253', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '89657ac29b27ce173569353f3101e998cb756eec', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '2e39edaa1f5cc5389873e203c3e4294de8b56678', class: "pt-8 px-20 py-20" }, h("slot", { key: '0fb09f52100042fc5f20f5f443a8f5cff381d944' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -173,7 +173,7 @@ export class EdsPagination {
         }
     }
     render() {
-        return (h("div", { key: '1d53f69179791434224f152503c0b81c4cfc7cd3' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '00ae324b49d62a74feee9d1cde21d67cd726ecf0', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'dedf2ce2700eae9d1386b305ec1d1904b133f992', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (h("div", { key: '6377e0187e461bcbeac835dd7cb83e93ef199865' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'ec2a6b6a40c76352743d012c51cda5d7fe1137df', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: '3a23e3d156f87167b0dacb4085870958ce19e793', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'

package/dist/collection/components/eds-progress-bar/eds-progress-bar.css

@@ -1,62 +1,97 @@
+.w-full {
+  width: 100%;
+}
 
-  .w-full {
-    width: 100%;
-  }
-  .h-full {
-    height: 100%;
-  }
-  .bg-default {
-    background-color: var(--grey-200);
-  }
-  .rounded-lg {
-    border-radius: 16px;
-  }
-  .h-24 {
-    height: 1.5rem;
-  }
-  .border {
-    border-width: 1px;
-  }
-  .border-softer {
-    border: 2px solid rgba(0, 0, 0, .1 );
-  }
-  .overflow-hidden {
-    overflow: hidden;
-  }
-  .bg-accent {
-    background-color: var(--green-500);
-  }
-  .bg-\[\#0034CB\] {
-    --tw-text-opacity: 1;
-    background-color: rgb(0 52 203 / var(--tw-text-opacity));
-  }
-  .transition-all {
-    transition-property: all;
-    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-    transition-duration: 150ms;
-  }
-  .duration-300 {
-    transition-duration: 300ms;
-  }
-  .flex {
-    display: flex;
-  }
-  .items-center {
-    align-items: center;
-  }
-  .justify-center {
-    justify-content: center;
-  }
-  .text-default {
-    color: var(--black);
-  }
-  .text-inverse {
-    color: var(--white);
-  }
-  .f-body-02 {
-    font-family: var(--f-body-02-fontFamily);
-    font-weight: var(--f-body-02-fontWeight);
-    font-size: var(--f-body-02-fontSize);
-    line-height: var(--f-body-02-lineHeight);
-    letter-spacing: var(--f-body-02-letterSpacing);
-  }
+.h-full {
+  height: 100%;
+}
+
+.bg-default {
+  background-color: var(--grey-200);
+}
+
+.rounded-lg {
+  border-radius: 16px;
+}
+
+.h-24 {
+  height: 1.5rem;
+}
+
+.border {
+  border-width: 1px;
+}
+
+.border-softer {
+  border: 2px solid rgba(0, 0, 0, .1);
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.bg-accent {
+  background-color: var(--green-500);
+}
+
+.bg-\[\#0034CB\] {
+  --tw-text-opacity: 1;
+  background-color: rgb(0 52 203 / var(--tw-text-opacity));
+}
+
+.transition-all {
+  transition-property: all;
+  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+  transition-duration: 150ms;
+}
+
+.duration-300 {
+  transition-duration: 300ms;
+}
+
+.flex {
+  display: flex;
+}
+
+.items-center {
+  align-items: center;
+}
+
+.justify-center {
+  justify-content: center;
+}
+
+.text-default {
+  color: var(--black);
+}
+
+.text-inverse {
+  color: var(--white);
+}
+
+.f-body-02 {
+  font-family: var(--f-body-02-fontFamily);
+  font-weight: var(--f-body-02-fontWeight);
+  font-size: var(--f-body-02-fontSize);
+  line-height: var(--f-body-02-lineHeight);
+  letter-spacing: var(--f-body-02-letterSpacing);
+}
+
+.absolute {
+  position: absolute;
+}
+.relative {
+  position: relative;
+}
+.z-0 {
+  z-index: 0;
+}
+.z-10 {
+  z-index: 10;
+}
+.inset-0 {
+  inset: 0rem;
+}
+.pointer-events-none {
+  pointer-events: none;
+}

package/dist/collection/components/eds-progress-bar/eds-progress-bar.js

@@ -2,17 +2,44 @@ import { h } from "@stencil/core";
 export class EdsProgressBar {
     constructor() {
         this.value = 0;
+        this.rounded = true;
     }
     /**
      * Method to update the progress value externally.
      * @param newValue The new progress value (0-100).
      */
     async updateValue(newValue) {
-        this.value = Math.min(100, Math.max(0, newValue)); // Clamp value between 0 and 100
+        this.value = Math.min(100, Math.max(0, newValue)); // Clamp 0–100
     }
     render() {
-        const progressValue = this.value;
-        return (h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        const progressValue = Math.min(100, Math.max(0, this.value));
+        // Outer container classes (conditionally rounded)
+        const outerClasses = [
+            'outer',
+            'w-full',
+            'h-24',
+            'bg-default',
+            'border',
+            'border-softer',
+            'overflow-hidden',
+            this.rounded ? 'rounded-lg' : '',
+            'relative'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        // Fill bar classes (conditionally rounded only when >0)
+        const fillClasses = [
+            'inner',
+            'h-full',
+            'transition-all',
+            'duration-300',
+            'bg-accent',
+            progressValue > 0 && this.rounded ? 'rounded-lg' : '',
+            'z-0'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h("div", { key: '3360c1a9e61c83fee5312d007f6d2965a8983eba', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '7210dc5931f08626b286c30ae790a3a864533632', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '7586cd593b4e851f4605ad33b96781841ee0b1aa', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '21fa3de543e5e717ed4fd76c689aa47c3fa6a853', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get is() { return "eds-progress-bar"; }
     static get encapsulation() { return "shadow"; }
@@ -45,6 +72,24 @@ export class EdsProgressBar {
                 "attribute": "value",
                 "reflect": false,
                 "defaultValue": "0"
+            },
+            "rounded": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether to render with rounded corners."
+                },
+                "attribute": "rounded",
+                "reflect": false,
+                "defaultValue": "true"
             }
         };
     }

package/dist/collection/components/eds-progress-bar/eds-progress-bar.stories.js

@@ -9,16 +9,15 @@ export default {
                 max: 100
             },
             description: 'The progress value (0-100)'
-        }
+        },
+        rounded: { control: 'boolean' }
     },
     args: {
         value: 50 // Default value
     }
 };
 export const Default = {
-    render: (args) => `
-        <eds-progress-bar value="${args.value}"></eds-progress-bar>
-      `,
+    render: (args) => `<eds-progress-bar value="${args.value}" rounded="${args.rounded}"></eds-progress-bar>`,
     args: {
         value: 50 // Default progress value for the story
     }

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

@@ -39,7 +39,7 @@ export class EdsRating {
         this.rating.emit(rating);
     }
     render() {
-        return (h("div", { key: 'd1650c37f02bf467f888d0afd0a025198bc0eedc', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '6686575f0b8b9017bf19b105208f6adbfd46dabd', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.

package/dist/collection/components/eds-section/eds-section-core/eds-section-core.js

@@ -9,6 +9,9 @@ import { h } from "@stencil/core";
  *
  * This component is suitable for organizing content into clearly defined sections with semantic HTML structure.
  */
+/**
+ * @internal
+ */
 export class EdsSectionCore {
     constructor() {
         this.tag = 'section';
@@ -17,9 +20,10 @@ export class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: 'f07162204271dca0f1ec8a3d309ab9d38a9fff4f' }, h("eds-section-heading", { key: 'c4db2a67151fcec22306f624b071725518292e65', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: 'e610f4777f1b334e20482862504085f5317a63df' })));
+        return (h(TagType, { key: '43f8d599041ae0c9761988fdec4872ec4a8ca037' }, h("eds-section-heading", { key: 'd120ddd851a0485e2edb43e2a6f508a661f35c07', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9818b82a3eebcb741f5bccc9781e4212f2c5fa3d' })));
     }
     static get is() { return "eds-section-core"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-section-core.css"]

package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js

@@ -36,12 +36,12 @@ export class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: 'efa6dd7e228db2b86961efdff9b5dd9729a1a24b', class: {
+        return (h(TagType, { key: '740ed8b3208e07091a1f4c79888e172dec33773a', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: 'dd50f0fe3baf084c71dc4c8fa745484645a58f76', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '4d4ceef35b7cb06bfbff2fdae47e66dd7ac10c49', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -37,7 +37,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '77f17386e37b3dae21c2893dab53ef046d74b8fb' }, h("div", { key: 'c9420f866d61331901df7d6d681d09f75e31846c', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '83497de6228b75fad77225a1b6fee9a614d68fe4', class: "spinner", style: spinnerStyle }))));
+        return (h(Host, { key: 'f687ccbbb05840b7699202f3758ec4a8d0de1bc4' }, h("div", { key: '4bb5c697f1ccd90d2d65d519fcfb3ec809b106ac', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'a07722d9ee9c94d03d9766a4b297a498998c00be', class: "spinner", style: spinnerStyle }))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -8,8 +8,11 @@
 }
 
 .switch-label {
-  font-size: 14px;
-  margin: 0 8px;
+  font-family: var(--f-ui-02-light-fontFamily);
+  font-weight: var(--f-ui-02-light-fontWeight);
+  font-size: var(--f-ui-02-light-fontSize);
+  line-height: var(--f-ui-02-light-lineHeight);
+  letter-spacing: var(--f-ui-02-light-letterSpacing);
 }
 
 /* Base styling for the switch button */
@@ -55,4 +58,12 @@ button.switch.switch--disabled {
 
 button.switch.switch--checked .switch-handle {
   transform: translateX(24px);
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.mr-8 {
+  margin-right: 0.5rem;
 }

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { sendAnalytics } from "../../utils/analytics";
 export class EdsSwitch {
     constructor() {
         this.toggleSwitch = () => {
@@ -6,7 +7,13 @@ export class EdsSwitch {
                 return;
             }
             this.checked = !this.checked;
-            this.toggle.emit(this.checked);
+            this.uiswitch.emit(this.checked);
+            sendAnalytics({
+                category: 'ui-component',
+                tag: this.el.tagName.toLowerCase(),
+                name: this.checked ? this.labelOn : this.labelOff || '',
+                action: 'checked'
+            });
         };
         this.checked = false;
         this.disabled = false;
@@ -16,11 +23,11 @@ export class EdsSwitch {
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: 'ef70db7a5ed4f8e8db7e1a9e94334a3686ec1d0e', class: "switch-container" }, this.labelOff && h("span", { key: '4a18de129ba0b4e643a0929b6fc797b7bc35cb4c', class: "switch-label switch-label--off" }, this.labelOff), h("button", { key: '2d75656fadf36a38269d361fef176e243e1291c2', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (h("div", { key: '385c1463b11e83ff5b982218e0f28c54299210fd', class: "switch-container" }, this.labelOff && h("span", { key: 'f7e825a34487a1cec466b5172d77c2802029607c', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'fd1e8ffab675ee79edc6b99de4dfff42545d91af', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '71bd3c8c042ac337c1392977c27e8f4ccde5e79f', class: "switch-handle" })), this.labelOn && h("span", { key: '7cfa0b1f805271c9281853a872cedf93db7e07d8', class: "switch-label switch-label--on" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '0d185957ffe2577ffc8798c298820c84c838a2a4', class: "switch-handle" })), this.labelOn && h("span", { key: 'f12b752ff94a363bb9593bd00cf43e7110e4399e', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }
@@ -112,8 +119,8 @@ export class EdsSwitch {
     }
     static get events() {
         return [{
-                "method": "toggle",
-                "name": "toggle",
+                "method": "uiswitch",
+                "name": "uiswitch",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,
@@ -128,4 +135,5 @@ export class EdsSwitch {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
 }

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

@@ -95,6 +95,11 @@ table {
     background-color: rgba(255, 255, 255, .15);
 }
 
+.px-8 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
 .px-20 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;