@ebrains/components 0.9.3-beta → 1.0.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: 'ee6e8eeb12df62ee801164877a357c075590ebae', 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: '7b35e3ddca346ff09730aa332b9f47b6d6707721', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: 'fe4201815e3791e6e3d6da8856d7a7a9e0211cfc', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }

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: '8760afff9f85f05fec52b0a7fb668661e49dc06f', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '06165b69fe7e170f4f61d9f95b5a44342d4ee67a', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '0c48e65c5a6cb0b4dff7a7e3e248052cdc29957d', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'fc6f7396cf741ba18d1b5d065bdd1b7bfff12abe', 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: '685ac01e4db577b07d00030b0c25e10b9b0defa8', 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: 'ff0b28dffb8aca2ad0ac1ee3eea7ebda75078f96' }, h("eds-section-heading", { key: '23e9bb2b084c6b8a534dd310fbe10e0de0211187', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9cae6378bdb5304191d393967025570f94fdcdb2' })));
     }
     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: 'bb32f87fd944ebf08ebcde3980c18cd4bed18783', 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: '0cd8ea8aada58e30675579c82ba130b40257c7c6', 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: '214876a56949c147e74c1a7072406234c2fb1a02' }, h("div", { key: 'b75b639fa38aafaf13e1eb727e28c5e67f3edafe', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '87ba2ef7e1e9601ac0ae8132e9c891b4149a20b5', 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: '442876be1bad7ea8c9e383bc68b192a2744c38f9', class: "switch-container" }, this.labelOff && h("span", { key: 'e4a7b01c0188d26e5b6524741b1c8ef66e357e35', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'f56b3762622671acf793568a96567193c38999c7', 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: 'b76e89a1e37130542dd86ce3aed8c5690aeeda63', class: "switch-handle" })), this.labelOn && h("span", { key: '4e5d4f8a2f19bb612a17fa73e441e7e718b71508', 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.js

@@ -174,15 +174,15 @@ export class EdsTable {
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '9ac7ad4f02237c02eaf5d3b351ded21bce29bd6c' }, this.searchEnabled && (h("div", { key: '1cecf9a9089391c3bce72dd53a6f5ffa92692661' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
+        return (h("div", { key: '81735ac374853c8c92b3f50e26263ff9d71b326c' }, this.searchEnabled && (h("div", { key: '0b2ab8dbb343033f605e2028890bd963cd650998' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
             // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: '435bbfd0a4dd3ddd0a7766863cdd8c2eaf41eb8f', class: "mt-20" }, h("table", { key: '4785490532015b7069be068e80135220f37c3955', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: '8a99a961cf350bca26b1f73b8ffd6c8e1c48378f' }, h("tr", { key: 'a4ee04e342687830e905a3bd5217e53e513f0167', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'eb3eebe6fb124d4e1983b2fb7e636707817d36bd', class: "mt-20" }, h("table", { key: '03b312ac20bdec28843a46907a3cc4fba69f62ae', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'ccab58dc46ae765df28da97ded6b1dd14d45d7f1' }, h("tr", { key: '904a125aad610cebe42b0bce46615be38f0ee17a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
             return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: '3c764ac7137d1b21f45003c6df5324e7d0db749f' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        }))), h("tbody", { key: 'a4c54c9c89d15546020dbb684e5486decde33f30' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
             var _a;
             return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '98a1179b45fbc1b2f079825c899410ef4faf8c45', class: "mt-20" }, h("eds-pagination", { key: '662c479139658ea7f3d2a3955c77e24d44dd6e74', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '2a248cbbe81ac8c1ad4dfbb49a9615f15931bac6', class: "mt-20" }, h("eds-pagination", { key: '11701d81922ca4c8b36fe82be32316a175eddbcd', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }

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

@@ -10,10 +10,6 @@ export default {
             control: 'object',
             description: 'Column configurations (hiding and formatting)'
         },
-        endpoint: {
-            control: 'text',
-            description: 'API endpoint to fetch data from'
-        },
         rowsPerPage: {
             control: { type: 'number' },
             description: 'Number of rows displayed per page'
@@ -66,7 +62,6 @@ export const Default = {
       rows-per-page="${args.rowsPerPage}"
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
-      endpoint="${args.endpoint || ''}"
       column-size="${args.columnSize}"
     ></eds-table>
   `,
@@ -79,21 +74,16 @@ export const Default = {
         rowsPerPage: 5,
         paginationEnabled: true,
         searchEnabled: true,
-        endpoint: '', // Leave empty for manual data entry
         columnSize: 'default'
     }
 };
 export const WithEndpoint = {
     render: (args) => `
     <eds-table 
-      endpoint="${args.endpoint}"
       rows-per-page="${args.rowsPerPage}"
       pagination-enabled="${args.paginationEnabled}"
       search-enabled="${args.searchEnabled}"
       host-width="600"
       column-size="${args.columnSize}"
-    ></eds-table>`,
-    args: {
-        endpoint: 'http://127.0.0.1:5001/api/catalogue'
-    }
+    ></eds-table>`
 };

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

@@ -5,6 +5,7 @@
     line-height: var(--f-ui-01-lineHeight);
     letter-spacing: var(--f-ui-01-letterSpacing);
   }
+
   .f-ui-03 {
     font-family: var(--f-ui-03-fontFamily);
     font-weight: var(--f-ui-03-fontWeight);
@@ -12,6 +13,7 @@
     line-height: var(--f-ui-03-lineHeight);
     letter-spacing: var(--f-ui-03-letterSpacing);
   }
+
   .f-ui-05 {
     font-family: var(--f-ui-05-fontFamily);
     font-weight: var(--f-ui-05-fontWeight);
@@ -19,83 +21,91 @@
     line-height: var(--f-ui-05-lineHeight);
     letter-spacing: var(--f-ui-05-letterSpacing);
   }
-  .py-1 {
-    padding-top: 0.0625rem;
-    padding-bottom: 0.0625rem;
-  }
+
   .py-2 {
     padding-top: 0.125rem;
     padding-bottom: 0.125rem;
   }
+
   .py-3 {
     padding-top: 0.1875rem;
     padding-bottom: 0.1875rem;
   }
+
   .py-4 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
   }
-  .px-2 {
-    padding-left: 0.125rem;
-    padding-right: 0.125rem;
-  }
-  .px-3 {
-    padding-left: 0.1875rem;
-    padding-right: 0.1875rem;
-  }
+
   .px-4 {
     padding-left: 0.25rem;
     padding-right: 0.25rem;
   }
+
   .px-5 {
     padding-left: 0.3125rem;
     padding-right: 0.3125rem;
   }
+
   .px-6 {
     padding-left: 0.375rem;
     padding-right: 0.375rem;
   }
+
   .border-2 {
     border-width: 2px;
   }
+
   .rounded-pill {
     border-radius: 100px;
   }
+
   .border-default {
     border: 2px solid var(--black);
   }
+
   .text-inverse {
     color: var(--white);
   }
+
   .bg-accent {
     background-color: var(--green-500);
   }
+
   .bg-strongest {
     background-color: var(--black);
   }
+
   .text-\[\#0034CB\] {
     --tw-text-opacity: 1;
     color: rgb(0 52 203 / var(--tw-text-opacity));
   }
+
   .border-\[\#0034CB\] {
     --tw-border-opacity: 1;
     border: 2px solid rgb(0 52 203 / var(--tw-border-opacity));
   }
+
   .text-light {
     color: var(--grey-700);
   }
+
   .bg-strongest-soft {
     background-color: rgba(0, 0, 0, .05);
   }
+
   .border-transparent {
     border-color: var(--transparent);
   }
+
   .border-inverse {
     border-color: var(--white);
   }
+
   .bg-inverse {
     background-color: var(--white);
   }
+
   .text-lighter {
     color: var(--grey-600);
   }

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

@@ -36,7 +36,7 @@ export class EdsTag {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: '4531e69a8dce962b77107b2da984aeae6ba4b4c4', class: classes }, this.label);
+        return h("span", { key: '78ef2d9ed4fc79f078df2fe418c339fc8934eef2', class: classes }, this.label);
     }
     static get is() { return "eds-tag"; }
     static get encapsulation() { return "shadow"; }