@ebrains/components 2.4.1 → 3.1.0

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

@@ -3,7 +3,6 @@ export default {
     title: 'Components/Form',
     component: 'eds-form',
     argTypes: {
-        name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
         title: { control: 'text', description: 'Form title displayed above the form' },
         description: { control: 'text', description: 'Form description displayed below the title' },
         fields: {
@@ -26,7 +25,7 @@ export default {
         },
         buttonIntent: {
             control: { type: 'select' },
-            options: ['primary', 'secondary', 'tertiary', 'ghost'],
+            options: ['primary', 'secondary'],
             description: 'Variant/style intent for the submit button'
         },
         formStyle: {
@@ -37,13 +36,12 @@ export default {
 };
 const Template = (args) => html `
   <eds-form
-    name="${args.name}"
+    name="form-name"
     title="${args.title}"
     description="${args.description}"
     .fields=${args.fields}
     .groups=${args.groups}
     .initData=${args.initData}
-    .setFormUrl=${args.setFormUrl}
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
     button-intent="${args.buttonIntent}"
@@ -52,7 +50,6 @@ const Template = (args) => html `
 `;
 export const Default = Template.bind({});
 Default.args = {
-    name: 'extended-form',
     title: 'User Details',
     description: 'Please fill out the form below.',
     fields: [
@@ -108,7 +105,6 @@ Default.args = {
             disabled: true
         }
     ],
-    setFormUrl: true,
     formBtn: true,
     formBtnLabel: 'Validate',
     buttonIntent: 'primary',
@@ -116,7 +112,6 @@ Default.args = {
 };
 export const WithGroups = Template.bind({});
 WithGroups.args = {
-    name: 'grouped-form',
     title: 'Grouped Form',
     description: 'Form with grouped fields',
     fields: [
@@ -128,7 +123,6 @@ WithGroups.args = {
         { id: 'personal', title: 'Personal Info' },
         { id: 'comments', title: 'Comments' }
     ],
-    setFormUrl: true,
     formBtn: true,
     formBtnLabel: 'Submit',
     buttonIntent: 'secondary',
@@ -136,7 +130,6 @@ WithGroups.args = {
 };
 export const WithInitData = Template.bind({});
 WithInitData.args = {
-    name: 'prefill-form',
     title: 'Prefilled Form',
     description: 'Form with initial values',
     fields: [
@@ -148,9 +141,8 @@ WithInitData.args = {
         username: 'janedoe',
         email: 'jane.doe@example.com'
     },
-    setFormUrl: false,
     formBtn: true,
     formBtnLabel: 'Save',
-    buttonIntent: 'ghost',
+    buttonIntent: 'primary',
     formStyle: 'default'
 };

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: 'dce969c76fcfbb77f315ab0203ef77136f8a449b', class: this.articleClasses() }, h("div", { key: '80ab4a9035e3008708a4f4bfe53d9679a9e687d1', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'f065ee637af801e5fbc8039211384002dd594d84', 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: 'eae4f61cec9aab217116dbed39c54b39fc5b2040', 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: 'ddbc978054f645eb990cde6bdd26647bd01eeb1a', class: this.articleClasses() }, h("div", { key: '0a16fbd950742b8a75428b3705deaa03ef785a5b', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '0c2a84cae101ec1e5352ed7be7b874b6ec45f37d', 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: 'c001f1b33c5136820155b0299e83b6dc49fbbd43', 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: 'ebfd125d1e27d224e5702f0c7a4b8f46e279f3b7', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '64be678f68c5d5590e0a976f46a1939320d5d9c2', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'a94192d8df3fb22d629d29d58d681e2a2eb0506d', type: logoType, href: this.homeUrl })), this.parsedLinks && (h("nav", { key: 'd7f1055e683b90d91c977ae9fef52a00f90b63a0', 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: 'a15b4d203bacbe7f58490b8d34dd57dc31d4f573', 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: '2d83f5093b34bdc40f574f8d5676e046029c6e5d', name: "actions" }), this.menuEnabled && (h("div", { key: 'd2ad33f5ea9e55a5efb1f4dd598be5d61f1d9ab6', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: 'da824afdcaa6ce68d837096bff6bdfadec4af17c', "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: 'fd95f6b0126d620ab1d4f58240d471301d607fa5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'e7b1bd9a146543107d87ff6f4c8575ad63fc3889', class: "w-[250px]" }, h("div", { key: '257a8bf3d0efea39bd0e7f5c92d2a6bcbaa66d48', class: "p-[24px]" }, h("eds-logo", { key: '71365268524d0db6999dc6ff4a9227e388d53cdf', variant: logoType, href: this.url }))), this.parsedLinks && (h("nav", { key: '085b2bd5f667ea7e0be4de77cb4bd3d1a2bb6e3c', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, h("ul", { key: 'b5c015e6e1fb376f6b48805cc5d0db436234a5fc', 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: '9bca10c081cd1b8157579fa587615538dc624817', class: "w-[250px] flex justify-end items-center" }, h("slot", { key: '360fb5fe76b41b2513cba2f8705ea5ea91cae9a9', name: "actions" })), this.menu && (h("div", { key: '7feaa2b97062e7ceb94bacc35e61a12edc0b2e54', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '706c1668e3b04517cfe0cb92da5b459980986df0', "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

@@ -2,7 +2,7 @@ export default {
     title: 'Components/Header/Main',
     component: 'eds-header',
     argTypes: {
-        homeUrl: {
+        url: {
             control: 'text',
             description: 'URL for the home logo link.'
         },
@@ -10,33 +10,45 @@ export default {
             control: 'object',
             description: 'An array of link objects for the header navigation'
         },
-        menuEnabled: {
+        menu: {
             control: 'boolean',
-            description: 'Shows/hides burger menu on small screens.'
+            description: 'Shows/hides burger menu toggle on small screens.'
         },
-        headerVariant: {
+        variant: {
             control: { type: 'select' },
             options: ['default', 'inverse', 'strong'],
-            description: 'The header variant'
+            description: 'Header style variant: determines text and background colors.'
         }
     },
     args: {
-        homeUrl: '/',
+        url: '/',
         links: [
             { label: 'About', url: '#' },
-            { label: 'Focus Areas', url: '#' },
-            { label: 'News & Events', url: '#' },
             { label: 'Contact', url: '#' }
         ],
-        menuEnabled: false,
-        headerVariant: 'default'
+        menu: false,
+        variant: 'default'
     }
 };
-export const Default = (args) => `
+export const Default = (args) => {
+    // The burger menu toggle is hidden on wide viewports (md:hidden) and only
+    // renders on small screens. When `menu` is enabled, surface a notice so the
+    // toggle isn't "missing" — mirrors the eds-footer story's matomo notice.
+    const menuNotice = String(args.menu) === 'true'
+        ? `<eds-alert
+         intent="info"
+         icon="information"
+         message="The burger menu toggle only appears on small screens. Resize the viewport (or use Storybook's responsive viewport toolbar) to see it."
+         class="mb-16"
+       ></eds-alert>`
+        : '';
+    return `
+    ${menuNotice}
     <eds-header
-      home-url="${args.homeUrl}"
+      url="${args.url}"
       links='${JSON.stringify(args.links)}'
-      menu-enabled="${args.menuEnabled}"
-      header-variant="${args.headerVariant}"
+      menu="${args.menu}"
+      variant="${args.variant}"
     ></eds-header>
   `;
+};

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; }