@ebrains/components 2.4.0 → 3.0.0

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

@@ -1,5 +1,8 @@
+/* Outer container */
 .bg-inverse {
-  background-color: var(--white);
+  background-color: #FFFFFF;
+  border: 1px solid #ECECEC;
+  color: #07140D;
 }
 
 .min-h-156 {
@@ -22,22 +25,23 @@
   border-radius: 12px;
 }
 
+/* Borders */
 .border-soft {
-  border-color: rgba(0, 0, 0, .15);
+  border-color: #ECECEC;
 }
 
 .border-softer {
-  border-color: rgba(0, 0, 0, .1);
+  border-color: #ECECEC;
 }
 
 .border-softest {
-  border-color: rgba(0, 0, 0, .05);
+  border-color: #f2f2f2;
 }
 
 .effect-focus-within {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: #00FF9D;
 }
 
 .effect-focus-within:focus-within {
@@ -61,7 +65,7 @@
 }
 
 .border-2 {
-  border-width: 2px;
+  border-width: 0;
 }
 
 .w-full {
@@ -90,22 +94,28 @@
   justify-content: space-between;
 }
 
+/* Header bar */
 .py-8 {
-  padding-top: 0.5rem;
-  padding-bottom: 0.5rem;
+  padding-top: 0.75rem;
+  padding-bottom: 0.75rem;
 }
 
 .px-12 {
-  padding-left: 0.75rem;
-  padding-right: 0.75rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
 }
 
+.py-8.px-12 {
+  border-bottom: 1px solid #ECECEC;
+}
+
+/* Label */
 .f-ui-02 {
-  font-family: var(--f-ui-02-fontFamily);
-  font-weight: var(--f-ui-02-fontWeight);
-  font-size: var(--f-ui-02-fontSize);
-  line-height: var(--f-ui-02-lineHeight);
-  letter-spacing: var(--f-ui-02-letterSpacing);
+  font-family: 'IBM Plex Sans', sans-serif;
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: #07140D;
+  line-height: 1.4;
 }
 
 .ml-auto {
@@ -113,21 +123,19 @@
 }
 
 .border-t-2 {
-  border-top-width: 2px;
+  border-top-width: 1px;
+  border-color: #ECECEC;
 }
 
 .border {
-  border: 1px solid rgba(0, 0, 0, .1);
-}
-
-.border-2 {
-  border: 1px solid rgba(0, 0, 0, .1);
+  border: 1px solid #ECECEC;
 }
 
 .container {
   width: calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));
   margin-right: auto;
   margin-left: auto;
+  color: #7A7B7A;
 }
 
 .container>* {
@@ -145,4 +153,8 @@
 
 .mt-16 {
   margin-top: 1rem;
-}
+}
+
+iframe {
+  border-radius: 0 0 12px 12px;
+}

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

@@ -23,7 +23,7 @@ export class EdsFrame {
         this.urlLabel = 'Open';
         this.errorMessage = 'Could not load the requested content. Please check the URL or try again later.';
         this.url = undefined;
-        this.intent = 'strong';
+        this.intent = 'cta';
         this.size = 'auto';
         this.iframeError = false;
     }
@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        return (h("div", { key: '5bcdb5bdd66a7530a82662ff9b6ef06d3a1eb1d3', class: this.articleClasses() }, h("div", { key: '4c9e224f1a6421398cfef1fd89d113513727b6dd', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '7704b4f1d1a3e8a728f0ad751891ecbfd118411a', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: 'd4372713fc8984d14808171857d6efd40790dec2', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '0fa74cf426f9d934a035b5e3f6c9e5722c40beab', class: this.articleClasses() }, h("div", { key: '65ab4084241ce1b5337e9bfaaffb5c2aaceec28e', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'f1cda1a4d61b47550d9d8cd08986f2253710c4ea', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), h("div", { key: 'e02ffe4f38f1375a0694f2acec72406824745437', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     static get is() { return "eds-frame"; }
     static get encapsulation() { return "shadow"; }
@@ -191,8 +191,8 @@ export class EdsFrame {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'strong' | 'weak' | 'underline'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"strong\" | \"tertiary\" | \"underline\" | \"weak\"",
+                    "original": "'primary' | 'secondary' | 'ghost' | 'underline' | 'cta'",
+                    "resolved": "\"cta\" | \"ghost\" | \"primary\" | \"secondary\" | \"underline\"",
                     "references": {}
                 },
                 "required": false,
@@ -203,7 +203,7 @@ export class EdsFrame {
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'strong'"
+                "defaultValue": "'cta'"
             },
             "size": {
                 "type": "string",

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

@@ -26,7 +26,7 @@ export default {
         },
         intent: {
             control: { type: 'select' },
-            options: ['primary', 'secondary', 'tertiary', 'ghost', 'strong', 'weak', 'inverse', 'underline'],
+            options: ['primary', 'secondary', 'ghost', 'underline'],
             description: 'Intent for styling the link.'
         }
     }

package/dist/collection/components/eds-fullscreen-menu/eds-fullscreen-menu.css

@@ -1,9 +1,9 @@
 .bg-default {
-  background-color: var(--grey-200);
+  background-color: var(--grey-light);
 }
 
 .bg-darker {
-  background-color: var(--grey-400);
+  background-color: var(--grey-dark);
 }
 
 .bg-inverse {
@@ -11,7 +11,7 @@
 }
 
 .bg-strongest {
-  background-color: var(--black);
+  background-color: var(--brand-black);
 }
 
 .fixed {
@@ -91,8 +91,8 @@
   margin-right: auto;
 }
 
-.w-\[200px\] {
-  width: 200px;
+.w-\[250px\] {
+  width: 250px;
 }
 
 .h-\[85px\] {
@@ -149,4 +149,8 @@
 .w-fit {
   width: -moz-fit-content;
   width: fit-content;
+}
+
+.p-\[24px\] {
+  padding: 24px;
 }

package/dist/collection/components/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -12,6 +12,9 @@ import { parseData } from "../../utils/sharedUtils";
  * - **Responsive Behavior**: Automatically closes the menu when the screen width is larger than a specified breakpoint (1024px).
  * - **Footer Integration**: Optionally displays social links and a customizable footer section within the fullscreen menu.
  */
+/**
+ * @internal
+ */
 export class EdsFullscreenMenu {
     constructor() {
         this.links = undefined;
@@ -85,7 +88,7 @@ export class EdsFullscreenMenu {
         return parseData(this.menuLinks);
     }
     render() {
-        return this.isMenuOpen ? (h("div", { role: "dialog", "aria-modal": "true", "aria-label": "Main menu", class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghostInverse", icon: "close", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "tertiary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, h("slot", null))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
+        return this.isMenuOpen ? (h("div", { role: "dialog", "aria-modal": "true", "aria-label": "Main menu", class: "eds-full-screen bg-default fixed inset-0 z-[999999] overflow-y-scroll" }, h("div", { class: "flex min-h-full flex-col" }, h("div", { class: `w-full sticky top-0 ${this.inverseHeader ? 'bg-strongest' : 'bg-default'}` }, h("div", { class: "mx-auto flex items-center justify-between" }, h("div", { class: "mr-auto w-[250px]" }, h("div", { class: "p-[24px]" }, h("eds-logo", { variant: "positive", href: this.homeUrl }))), h("div", { class: "px-16" }, h("eds-button", { "aria-label": "Close menu", intent: "ghost", icon: "close", size: "large", onClick: () => this.closeMenu() })))), h("div", { class: "py-16 px-16" }, h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "secondary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "arrow-right" })))), h("eds-block-break", null), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, this.parsedMenuLinks.map((link, index) => (h("eds-link", { label: link.label, key: index, url: link.url, intent: "secondary", size: "large", class: "effect-color effect-focus rounded-xs f-heading-02 hover:text-lighter w-fit", onClick: () => this.closeMenu(), icon: "chevron-right" })))), h("nav", { class: "mt-28 flex flex-col gap-y-8" }, h("slot", null))), h("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
     }
     static get is() { return "eds-fullscreen-menu"; }
     static get encapsulation() { return "shadow"; }

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

@@ -83,25 +83,29 @@
 }
 
 .bg-dark {
-  background-color: var(--grey-300);
+  background-color: var(--grey-light);
 }
 
 .bg-strongest {
-  background-color: var(--black);
+  background-color: var(--brand-black);
 }
 
 .mr-auto {
   margin-right: auto;
 }
 
-.w-\[200px\] {
-  width: 200px;
+.w-\[250px\] {
+  width: 250px;
 }
 
 .h-\[85px\] {
   height: 85px;
 }
 
+.p-\[24px\] {
+  padding: 24px;
+}
+
 .left-1\/2 {
   left: 50%;
 }
@@ -114,6 +118,14 @@
   flex-grow: 1;
 }
 
+.flex-1 {
+  flex: 1 1 0%;
+}
+
+.justify-end {
+  justify-content: flex-end;
+}
+
 .-translate-x-1\/2 {
   --tw-translate-x: -50%;
   transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
@@ -138,6 +150,10 @@
   column-gap: 1rem;
 }
 
+.gap-8 {
+  gap: 0.5rem;
+}
+
 .after\:effect-opacity::after {
   transition-property: opacity;
   transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);

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

@@ -15,10 +15,10 @@ import { parseData } from "../../utils/sharedUtils";
  */
 export class EdsHeader {
     constructor() {
-        this.homeUrl = '/';
+        this.url = '/';
         this.links = undefined;
-        this.headerVariant = 'default';
-        this.menuEnabled = false;
+        this.variant = 'default';
+        this.menu = false;
         this.isMenuOpen = false;
         this.isUserMenuOpen = false;
     }
@@ -43,16 +43,18 @@ export class EdsHeader {
         return parseData(this.links);
     }
     render() {
-        // Define classes based on headerVariant
+        // Define classes based on variant
         const variantClasses = {
-            default: 'text-default bg-dark',
+            strong: 'text-inverse bg-strongest',
             inverse: 'text-default bg-inverse',
-            strong: 'text-inverse bg-strongest'
+            default: 'text-default bg-dark'
         };
-        const classes = variantClasses[this.headerVariant] || variantClasses.default;
+        const classes = variantClasses[this.variant] || variantClasses.default;
         // Logo color variant: default and inverse use 'color', strong uses 'color-white'
-        const logoType = this.headerVariant === 'strong' ? 'color-white' : 'color';
-        return (h("header", { key: 'cf272ed6242b2effa3027081d72b58025c49d055', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '16f81e55c3aa28beabfead914488ce1fd70b408d', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '0961fb91dff26c457833b67ef963d60a9902a916', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'a034d1bfc21da2245b3c91a2f91f092476d67f97', role: "navigation", "aria-label": "Primary", class: "absolute left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center hidden md:flex" }, h("ul", { key: '06ebd9012b829a30f7cdc27f417116a21d2bfc2f', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "strong", size: "large", icon: link.icon, external: link.external, "extra-class": "after:effect-opacity aria-current-page:bg-darker whitespace-nowrap !text-current after:!border-transparent after:opacity-0 hover:after:!border-transparent hover:after:opacity-100" })))))), h("slot", { key: '68c34af928ee215329d354ca1a5ef7850d1112cf', name: "actions" }), this.menuEnabled && (h("div", { key: 'cb4cd94fbf5ebbd770631066f2f69f8ac50a3f5f', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '8f2aa4d59705e9410a0fa8b10c9f348fcfe73db3', "aria-label": "Menu", intent: this.headerVariant === 'default' ? 'ghost' : 'ghostInverse', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        const logoType = this.variant === 'strong' ? 'negative' : 'positive';
+        // Link intent based on header variant
+        const linkIntent = this.variant === 'strong' ? 'underlineInverse' : 'underline';
+        return (h("header", { key: '2c1cfca934f70c0d72fa50c163eb14524ca4e5a5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'b7914ad1431d19a167e39814aa5ab7e6c87ce8e4', class: "w-[250px]" }, h("div", { key: 'efb6efcb51f960e48bf236dd94d308ae12480808', class: "p-[24px]" }, h("eds-logo", { key: 'a8b20eee1ed9577fc06da51e6325875f56025694', variant: logoType, href: this.url }))), this.parsedLinks && (h("nav", { key: '3b322f02b8249091158876559339baf4ba763242', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, h("ul", { key: '8c74e64f51bddefcc578c09e5d6570f208ecbcf6', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), h("div", { key: 'c75b261b7bc734a121ac195400d2c1200b58d7ec', class: "w-[250px] flex justify-end items-center" }, h("slot", { key: '1b447037e7158d3e06f68add6084da957ff8c8b0', name: "actions" })), this.menu && (h("div", { key: '8e92ee65ed8a235ad0af4d61588ce6118a92b07f', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '8b79d619d4b51dac26f0ff5347909611383cb635', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }
@@ -68,7 +70,7 @@ export class EdsHeader {
     }
     static get properties() {
         return {
-            "homeUrl": {
+            "url": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -82,7 +84,7 @@ export class EdsHeader {
                     "tags": [],
                     "text": "URL for the home logo link.\nThis is the default URL that the logo points to."
                 },
-                "attribute": "home-url",
+                "attribute": "url",
                 "reflect": true,
                 "defaultValue": "'/'"
             },
@@ -103,7 +105,7 @@ export class EdsHeader {
                 "attribute": "links",
                 "reflect": false
             },
-            "headerVariant": {
+            "variant": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -117,11 +119,11 @@ export class EdsHeader {
                     "tags": [],
                     "text": "Header style variant: determines text and background colors.\n- \"default\": text-default on bg-dark\n- \"inverse\": text-default on bg-inverse\n- \"strong\": text-inverse on bg-strongest"
                 },
-                "attribute": "header-variant",
+                "attribute": "variant",
                 "reflect": true,
                 "defaultValue": "'default'"
             },
-            "menuEnabled": {
+            "menu": {
                 "type": "boolean",
                 "mutable": false,
                 "complexType": {
@@ -135,7 +137,7 @@ export class EdsHeader {
                     "tags": [],
                     "text": "Flag to enable or disable header menu toggle feature.\nWhen true, displays the toggle in the header.\nRequires the <eds-fullscreen-menu> to properly work."
                 },
-                "attribute": "menu-enabled",
+                "attribute": "menu",
                 "reflect": false,
                 "defaultValue": "false"
             }

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

@@ -24,8 +24,6 @@ export default {
         homeUrl: '/',
         links: [
             { label: 'About', url: '#' },
-            { label: 'Focus Areas', url: '#' },
-            { label: 'News & Events', url: '#' },
             { label: 'Contact', url: '#' }
         ],
         menuEnabled: false,

package/dist/collection/components/eds-icon-wrapper/eds-icon-wrapper.css

@@ -0,0 +1,32 @@
+/* src/components/eds-icon/eds-icon.css */
+
+:host {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.icon svg {
+  display: block;
+  fill: currentColor;
+  color: inherit;
+}
+
+.icon--16 { width: 16px; height: 16px; }
+.icon--16 svg { width: 16px; height: 16px; }
+
+.icon--20 { width: 20px; height: 20px; }
+.icon--20 svg { width: 20px; height: 20px; }
+
+.icon--24 { width: 24px; height: 24px; }
+.icon--24 svg { width: 24px; height: 24px; }
+
+.icon--32 { width: 32px; height: 32px; }
+.icon--32 svg { width: 32px; height: 32px; }

package/dist/collection/components/eds-icon-wrapper/eds-icon-wrapper.js

@@ -1,92 +1,74 @@
-import { h } from "@stencil/core";
-/**
- * `EdsIconWrapper` is a wrapper component for displaying icons with dynamic loading capabilities.
- * It allows specifying the icon name, which is dynamically imported and rendered within the component.
- *
- * Key Features:
- * - Dynamically loads the icon component based on the `icon` prop.
- * - Allows additional CSS classes through the `class` prop for custom styling.
- * - Observes changes to the `icon` prop and reloads the icon component accordingly.
- *
- * Ideal for scenarios where icons need to be dynamically selected and styled consistently across an application.
- */
+// src/components/eds-icon/eds-icon.tsx
+import { h, Host } from "@stencil/core";
+import { ICONS } from "../../utils/icons";
 export class EdsIconWrapper {
     constructor() {
-        this.TagName = null;
-        this.icon = 'arrow-right';
-        this.class = '';
-        this.IconComponent = null;
-    }
-    componentWillLoad() {
-        this.loadIconComponent(this.icon);
-    }
-    iconChanged(newValue) {
-        this.loadIconComponent(newValue);
-    }
-    async loadIconComponent(iconName) {
-        try {
-            // Dynamically import the Stencil icon component based on the icon name
-            this.IconComponent = `eds-icon-${iconName}`;
-        }
-        catch (error) {
-            //console.error(`Failed to load icon component: ${iconName}`, error);
-            this.IconComponent = `eds-icon-unknown`;
-        }
+        this.name = undefined;
+        this.size = 20;
     }
     render() {
-        const IconComponent = this.IconComponent;
-        return IconComponent ? h(IconComponent, { class: this.class }) : null;
+        const iconSvg = ICONS[this.name];
+        if (!iconSvg) {
+            console.warn(`Icon "${this.name}" not found in ICONS`);
+            return null;
+        }
+        return (h(Host, { role: "img" }, h("span", { class: `icon icon--${this.size}`, innerHTML: iconSvg })));
     }
     static get is() { return "eds-icon-wrapper"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-icon-wrapper.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-icon-wrapper.css"]
+        };
+    }
     static get properties() {
         return {
-            "icon": {
+            "name": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
-                "required": false,
+                "required": true,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The name of the icon to be displayed.\nDefault is 'arrow-right'."
+                    "text": ""
                 },
-                "attribute": "icon",
-                "reflect": false,
-                "defaultValue": "'arrow-right'"
+                "attribute": "name",
+                "reflect": false
             },
-            "class": {
-                "type": "string",
+            "size": {
+                "type": "number",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
+                    "original": "16 | 20 | 24 | 32",
+                    "resolved": "16 | 20 | 24 | 32",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Additional CSS classes to be applied to the icon for styling."
+                    "text": ""
                 },
-                "attribute": "class",
+                "attribute": "size",
                 "reflect": false,
-                "defaultValue": "''"
+                "defaultValue": "20"
             }
         };
     }
-    static get states() {
-        return {
-            "IconComponent": {}
-        };
-    }
-    static get watchers() {
-        return [{
-                "propName": "icon",
-                "methodName": "iconChanged"
-            }];
-    }
 }

package/dist/collection/components/eds-icons/eds-icon-eu/eds-icon-eu.js

@@ -8,7 +8,7 @@ export class EdsIconEu {
         this.class = '';
     }
     render() {
-        return h("span", { key: '400a5811c1d31a1c8d490e9614d89fe861cb4dd6', class: this.class, innerHTML: euSvg });
+        return h("span", { key: 'c4a043469698de97b7433749599ee04746df7f8e', class: this.class, innerHTML: euSvg });
     }
     static get is() { return "eds-icon-eu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js

@@ -8,7 +8,7 @@ export class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ef1ed1fd0fc7bcc7b0904589699656943af3f77e', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: '41c0a44af7394753c8c656f5a1de86b1446f05e3', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js

@@ -8,7 +8,7 @@ export class EdsIconBluesky {
         this.class = '';
     }
     render() {
-        return h("span", { key: '686dbb5f0c3c5f156940c83380c16c169f016219', class: this.class, innerHTML: bluesky });
+        return h("span", { key: 'c2d0ffef1833f4a53a4447d517c6505ce9be70a4', class: this.class, innerHTML: bluesky });
     }
     static get is() { return "eds-icon-bluesky"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js

@@ -8,7 +8,7 @@ export class EdsIconFacebook {
         this.class = '';
     }
     render() {
-        return h("span", { key: '97ff8677a8252ec4cce47f9f857185945aca7cc8', class: this.class, innerHTML: facebook });
+        return h("span", { key: '8498500cd0da2784b889a7b2b2ca9ff4e8414ab6', class: this.class, innerHTML: facebook });
     }
     static get is() { return "eds-icon-facebook"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.js

@@ -8,7 +8,7 @@ export class EdsIconLinkedin {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'bfed785cb748dc93f95bb317750b5e82dc6c1dcc', class: this.class, innerHTML: linkedin });
+        return h("span", { key: '02a55590ddf6ee6b873370913e9e7cbfe5390c79', class: this.class, innerHTML: linkedin });
     }
     static get is() { return "eds-icon-linkedin"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-mastodon/eds-icon-mastodon.js

@@ -8,7 +8,7 @@ export class EdsIconMastodon {
         this.class = '';
     }
     render() {
-        return h("span", { key: '5be4622aebcbe17b4b40c31fd4b9dc92a102b85e', class: this.class, innerHTML: mastodon });
+        return h("span", { key: '633a54b9f7bdeec8d704d7994de959a8e12ebe4f', class: this.class, innerHTML: mastodon });
     }
     static get is() { return "eds-icon-mastodon"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js

@@ -8,7 +8,7 @@ export class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e149a8a26c99f8048a42ed42f143a5947b215ea5', class: this.class, innerHTML: twitter });
+        return h("span", { key: '6f20d0106096d427556e05b663e3fa133852470e', class: this.class, innerHTML: twitter });
     }
     static get is() { return "eds-icon-twitter"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js

@@ -8,7 +8,7 @@ export class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'a2dd7d5f2d615999cd5e7970a96117ed90bdcda3', class: this.class, innerHTML: youtube });
+        return h("span", { key: 'e07946107d2e0e5a0705bc52d27a436e0f4d5956', class: this.class, innerHTML: youtube });
     }
     static get is() { return "eds-icon-youtube"; }
     static get properties() {