@ebrains/components 2.1.0 → 2.2.0

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.css

@@ -1,32 +1,3 @@
-/*
-Remove the default font size and weight for headings.
-*/
-h1,
-h2,
-h3,
-h4,
-h5,
-h6 {
-  font-size: inherit;
-  font-weight: inherit;
-}
-
-blockquote,
-dl,
-dd,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hr,
-figure,
-p,
-pre {
-  margin: 0;
-}
-
 .steps {
   position: sticky;
   margin-left: 16px;
@@ -49,7 +20,7 @@ pre {
   content: counter(step);
   position: absolute;
   left: -40px;
-  top: 0;
+  top: -2px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -66,7 +37,8 @@ pre {
 }
 
 /* Style for h4 headings inside the steps */
-.steps h4 {
+.steps h4,
+.steps h5 {
   counter-increment: step;
   font-size: var(--f-heading-06-fontSize);
   font-weight: var(--f-heading-06-fontWeight);
@@ -74,11 +46,12 @@ pre {
   position: relative;
 }
 
-.steps h4::before {
+.steps h4::before,
+.steps h5::before {
   content: counter(step);
   position: absolute;
   left: -40px;
-  top: 0;
+  top: -2px;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -275,4 +248,42 @@ pre {
   --tw-space-y-reverse: 0;
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
+}
+
+.ml-8 {
+  margin-left: 0.5rem;
+}
+
+.gap-y-16 {
+  row-gap: 1rem;
+}
+
+.gap-x-16 {
+  -moz-column-gap: 1rem;
+  column-gap: 1rem;
+}
+
+.flex {
+  display: flex;
+}
+
+.grid {
+  display: grid;
+}
+
+.hidden {
+  display: none;
+}
+
+.block {
+  display: block;
+}
+
+.px-8 {
+  padding-left: 0.5rem;
+  padding-right: 0.5rem;
+}
+
+.pb-20 {
+  padding-bottom: 1.25rem;
 }

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.js

@@ -3,14 +3,25 @@ import { parseData } from "../../utils/sharedUtils";
 export class EdsStepsV2 {
     constructor() {
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                // Finish
+                this.finished.emit();
+                return;
+            }
+            // Next
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (!this.disableNext) {
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
             }
         };
@@ -20,6 +31,11 @@ export class EdsStepsV2 {
         this.imageWidth = undefined;
         this.bg = true;
         this.message = undefined;
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
     componentDidLoad() {
@@ -58,24 +74,22 @@ export class EdsStepsV2 {
             'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
     /**
      * Parses the steps property into an array of Step objects.
      */
     get parsedSteps() {
         return parseData(this.steps);
     }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return h(Tag, null, title);
+    }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: 'bbcec2dd9a5096eb0cecf0d413892e5708822f52', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'db0618aad7d5986fcb0889f1c439be73f83a00df', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))) : (
+        return (h("div", { key: '1ff00f17a85e9a3a9d7bef23694560acd77e7ee4', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "w-full bg-[#00A595] rounded-t-lg border-2" }, h("div", { class: "p-24" }, h("span", { class: "text-inverse f-heading-04 " }, this.message))))), h("div", { key: 'a0328e80df5d9447cfa5378eb9e45925f1f68c69', class: "pb-20 px-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: index === 0 ? 'step' : 'step space-y-16', key: index }, this.renderHeading(step.title), this.activeStep === index && (h("div", { class: "content grid gap-y-16" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: index === steps.length - 1 ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.disableNext, size: "small", class: "ml-8" }))))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })))))))))));
+        h("div", { class: "steps space-y-8" }, steps.map((step, index) => (h("div", { class: "step", key: index }, this.renderHeading(step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter', innerHTML: step.content })))))))))));
     }
     static get is() { return "eds-steps-v2"; }
     static get encapsulation() { return "shadow"; }
@@ -109,7 +123,7 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "JSON string or an array of step objects.\nExample:\n'[\n  { \"title\": \"Step One\", \"content\": \"Details for step one\" },\n  { \"title\": \"Step Two\", \"content\": \"Details for step two\" }\n]'"
+                    "text": "JSON string or an array of step objects.\nEach object should have a `title` and optional `content` property."
                 },
                 "attribute": "steps",
                 "reflect": false,
@@ -126,8 +140,11 @@ export class EdsStepsV2 {
                 "required": false,
                 "optional": false,
                 "docs": {
-                    "tags": [],
-                    "text": "The type of stepper. Default is \"static\" (all steps visible, no navigation buttons).\nUse \"linear\" if only one step should be visible at a time."
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"static\""
+                        }],
+                    "text": "The type of stepper:\n- `\"static\"`: shows all steps with their content.\n- `\"linear\"`: shows only one step at a time with navigation controls."
                 },
                 "attribute": "type",
                 "reflect": false,
@@ -162,7 +179,7 @@ export class EdsStepsV2 {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Optional image width for the eds-img component."
+                    "text": "Optional image width for the `eds-img` component."
                 },
                 "attribute": "image-width",
                 "reflect": false
@@ -179,7 +196,7 @@ export class EdsStepsV2 {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "If true, apply a background class to the container."
+                    "text": "If true, apply an inverse background to the container."
                 },
                 "attribute": "bg",
                 "reflect": false,
@@ -201,6 +218,99 @@ export class EdsStepsV2 {
                 },
                 "attribute": "message",
                 "reflect": false
+            },
+            "nextLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the \"Next\" button."
+                },
+                "attribute": "next-label",
+                "reflect": false,
+                "defaultValue": "'Next'"
+            },
+            "backLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the \"Back\" button."
+                },
+                "attribute": "back-label",
+                "reflect": false,
+                "defaultValue": "'Back'"
+            },
+            "finishLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Label text for the \"Finish\" button (last step in linear mode)."
+                },
+                "attribute": "finish-label",
+                "reflect": false,
+                "defaultValue": "'Finish'"
+            },
+            "disableNext": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "If true, disables the \"Next\" button to block progression."
+                },
+                "attribute": "disable-next",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "headingLevel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'h3' | 'h4' | 'h5'",
+                    "resolved": "\"h3\" | \"h4\" | \"h5\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "default",
+                            "text": "\"h4\""
+                        }],
+                    "text": "Heading level to use for each step title."
+                },
+                "attribute": "heading-level",
+                "reflect": true,
+                "defaultValue": "'h4'"
             }
         };
     }
@@ -217,8 +327,74 @@ export class EdsStepsV2 {
                 "cancelable": true,
                 "composed": true,
                 "docs": {
-                    "tags": [],
-                    "text": "Emits when a step is clicked, providing the step's index."
+                    "tags": [{
+                            "name": "event",
+                            "text": "step"
+                        }, {
+                            "name": "payload",
+                            "text": "{number} The index of the new active step."
+                        }],
+                    "text": "Emitted when the active step changes."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "finished",
+                "name": "finished",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "finished"
+                        }],
+                    "text": "Emitted when the \"Finish\" button is clicked (last step in linear mode)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }, {
+                "method": "next",
+                "name": "next",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "next"
+                        }, {
+                            "name": "payload",
+                            "text": "{number} The target step index."
+                        }],
+                    "text": "Emitted when the \"Next\" button is clicked."
+                },
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                }
+            }, {
+                "method": "back",
+                "name": "back",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [{
+                            "name": "event",
+                            "text": "back"
+                        }, {
+                            "name": "payload",
+                            "text": "{number} The target step index."
+                        }],
+                    "text": "Emitted when the \"Back\" button is clicked."
                 },
                 "complexType": {
                     "original": "number",

package/dist/collection/shared-ui/eds-steps-v2/eds-steps-v2.stories.js

@@ -30,6 +30,29 @@ export default {
         message: {
             control: 'text',
             description: 'Message to display if no image is provided'
+        },
+        headingLevel: {
+            name: 'heading-level',
+            control: { type: 'select' },
+            options: ['h3', 'h4', 'h5'],
+            description: 'Semantic heading tag to render for each step title',
+            defaultValue: 'h4'
+        },
+        nextLabel: {
+            control: 'text',
+            description: 'Label for the Next button (linear)'
+        },
+        backLabel: {
+            control: 'text',
+            description: 'Label for the Back button (linear)'
+        },
+        finishLabel: {
+            control: 'text',
+            description: 'Label for the Finish button on the last step (linear)'
+        },
+        disableNext: {
+            control: 'boolean',
+            description: 'Disable Next/Finish to block progression (linear)'
         }
     },
     args: {
@@ -41,12 +64,29 @@ export default {
         type: 'static',
         imageSrc: '',
         bg: true,
-        message: 'No image available'
+        message: 'No image available',
+        headingLevel: 'h4',
+        nextLabel: 'Next',
+        backLabel: 'Back',
+        finishLabel: 'Finish',
+        disableNext: false
     }
 };
-const Template = ({ steps, type, imageSrc, bg, message }) => html `
-  <div class="max-w-sidebar">
-    <eds-steps-v2 .steps=${steps} type="${type}" .imageSrc=${imageSrc} ?bg=${bg} message="${message}"></eds-steps-v2>
+const Template = ({ steps, type, imageSrc, imageWidth, bg, message, headingLevel, nextLabel, backLabel, finishLabel, disableNext }) => html `
+  <div class="grid grid-layout grid-cols-2">
+    <eds-steps-v2
+      .steps=${steps}
+      type="${type}"
+      .imageSrc=${imageSrc}
+      .imageWidth=${imageWidth}
+      ?bg=${bg}
+      message="${message || ''}"
+      heading-level="${headingLevel}"
+      next-label="${nextLabel}"
+      back-label="${backLabel}"
+      finish-label="${finishLabel}"
+      ?disable-next=${disableNext}
+    ></eds-steps-v2>
   </div>
 `;
 export const Static = Template.bind({});
@@ -61,6 +101,7 @@ WithImage.storyName = 'With Image';
 WithImage.args = {
     type: 'static',
     imageSrc: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+    imageWidth: 960,
     message: ''
 };
 export const WithMessage = Template.bind({});
@@ -77,3 +118,23 @@ Linear.args = {
     imageSrc: '',
     message: ''
 };
+export const LinearBlocked = Template.bind({});
+LinearBlocked.storyName = 'Linear (Next Disabled)';
+LinearBlocked.args = {
+    type: 'linear',
+    disableNext: true
+};
+export const CustomLabels = Template.bind({});
+CustomLabels.storyName = 'Linear (Custom Labels)';
+CustomLabels.args = {
+    type: 'linear',
+    nextLabel: 'Continue',
+    backLabel: 'Previous',
+    finishLabel: 'Create Form'
+};
+export const HeadingLevels = Template.bind({});
+HeadingLevels.storyName = 'Static (Heading Levels)';
+HeadingLevels.args = {
+    type: 'static',
+    headingLevel: 'h3'
+};

package/dist/collection/shared-ui/eds-tabs/eds-tabs.js

@@ -170,12 +170,12 @@ export class EdsTabs {
         }
     }
     render() {
-        return (h("div", { key: 'e3bd802f08f460d5f3e89860669fefe2a8006e59', id: `${this.identifier}` }, h("div", { key: 'bcbd4afb8febec0520075c8e34269f184e2d9738', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("nav", { key: '32e93b3ee6831918fd863fb23f1a5af1ae979201', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '7cb51cf475d45ee3e43877ee4d42565f5930613a', id: `${this.identifier}` }, h("div", { key: '4f3c6d23f9084f07e5728b72310b96798d20b724', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("nav", { key: '4d55e72e9f437cef8be06931445f619196a973a7', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             const TabComponent = 'button';
             const tabProps = this.getTabOptions(tab.active, index);
             const isActive = index === this.activeIndex;
             return (h(TabComponent, Object.assign({}, tabProps, { type: "button", role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }), tab.label || tab.ariaLabel));
-        }))), h("div", { key: 'ffe610574d342933121cbaca9bcb8fb483fde60b', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
+        }))), h("div", { key: 'e75f877da39c25e912853fea5dc2438fc15c67b5', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
     }
     static get is() { return "eds-tabs"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-toast-manager/eds-toast-manager.js

@@ -31,7 +31,7 @@ export class EdsToastManager {
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '85027aad9484f391686c4126e984a84e8045511c', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: '27172b1f3c76ebb460c35ea070eeff330390ed7d', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-user/eds-user.js

@@ -7,7 +7,12 @@ import { h } from "@stencil/core";
  */
 export class EdsUser {
     constructor() {
+        this.handleDropdown = (e) => {
+            this.expanded = e.detail.expanded;
+        };
         this.user = undefined;
+        this.intent = 'tertiary';
+        this.expanded = false;
     }
     /**
      * Helper getter to ensure we work with a User object.
@@ -33,7 +38,8 @@ export class EdsUser {
     }
     render() {
         const user = this.parsedUser;
-        return (h("div", { key: '8a1f10cc85d8e2707042c85bc597b76fb2d25da4', class: "block" }, h("div", { key: 'a744de3d113920b8ff0d01ce273672b2bff57c97', class: "flex items-center" }, h("eds-dropdown", { key: 'e9230372d79936a785050ebb3e41f40e73282a57', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '7d4bd0ee0985c840a18764cac784726ff1c987fb', class: "min-w-[280px] p-8" }, h("div", { key: '603d6807988dd79cd4e7827918ff8932d8463fc3', class: "flex gap-x-16" }, h("eds-avatar", { key: '65ba89139cb6e3b6cb90c2072eb68cc7dc1da49c', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: 'df35b758918ebccbdfe6630bd356e647522404e1', class: "max-w-full" }, user.name && h("p", { key: '7174f34445bb1a0b77a3c1b893421bd104832485', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '72d853f5014c03803dce7aa0a74d96847ed8c875', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e406e2f3ca8504220ee9586a1d176c15c7236502', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '8fd3b42ab4eb3d1d70a0b827e3a03af8503c55d1', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '6a477155c256543b7793947d52feb3f5abb0df6e' })))))));
+        const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
+        return (h("div", { key: '965387104c4bd6cd3223c08f16d90146c098594c', class: "block" }, h("div", { key: '37fe5539cb058112ebe0d910439acb55b5abccd8', class: "flex items-center" }, h("eds-dropdown", { key: '17afc8dbae191aec1202ba04d85c41ed656a8c5b', label: `Hi, ${user.preferred_username}`, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: '0228c1728b0b73e2504d2608339f9be408be09b8', class: "min-w-[280px] p-8" }, h("div", { key: 'b83148ff8249bde91842b036da5506f9f5cbb145', class: "flex gap-x-16" }, h("eds-avatar", { key: '243a05bae2e4e592dc386b1897d824232d0bcfa6', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '6938f54621aa89e61aa6639e8c88af4e262e0fec', class: "max-w-full" }, user.name && h("p", { key: '224ce5cf6819a9dd0c3794410a94da30cc4213bf', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '096ac761149763ef4305ef5e9bf1f4b593a0fe4f', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '79f7da3c6c5efc1f521991c403184cf050b3d2e7', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '52ce98bcc290902605ebd427ee8ab72ac9af3d62', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '88d1b250c434830347e0eb813214382ce899c485' })))))));
     }
     static get is() { return "eds-user"; }
     static get encapsulation() { return "shadow"; }
@@ -70,8 +76,36 @@ export class EdsUser {
                 },
                 "attribute": "user",
                 "reflect": false
+            },
+            "intent": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "Intent",
+                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {
+                        "Intent": {
+                            "location": "global",
+                            "id": "global::Intent"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Visual intent of the trigger button"
+                },
+                "attribute": "intent",
+                "reflect": false,
+                "defaultValue": "'tertiary'"
             }
         };
     }
+    static get states() {
+        return {
+            "expanded": {}
+        };
+    }
     static get elementRef() { return "hostEl"; }
 }

package/dist/collection/shared-ui/examples/eds-app-root/eds-app-root.js

@@ -27,7 +27,7 @@ export class EdsAppRoot {
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (h("div", { key: '36bb7790b9e035749548410ba1d54092c7a40810' }, h("eds-splash-screen", { key: '7be473b1c48f0ab2549077d7619a1dbd3a1fd90c', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '824affc8c670317f2c1b8a22b9fe6223a477d364', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: 'c5f6f9dae8608a49d3c47139f33735236a65091c' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
+        return (h("div", { key: '01c80f8c47f13066a4b9e6978951c2a264efbd15' }, h("eds-splash-screen", { key: 'bb17fc106515c71c7d70196a933301987c69ae4b', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: 'dbedc547296adc5ca8c9c9ff3e7c85e33e104e92', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '24ce16d73eb316e5fdbc0a3bdd16b44cc6a740a4' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
     }
     static get is() { return "eds-app-root"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/eds-form/formValidators.js

@@ -78,9 +78,10 @@ isFieldVisible) {
                 const npsEl = findNpsElement(formEl);
                 if (npsEl && npsEl.shadowRoot) {
                     const raw = (_a = npsEl.shadowRoot
-                        .querySelector('div[role="radio"][aria-checked="true"] eds-button')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
-                    const value = raw !== null ? parseInt(raw, 10) : null;
-                    if (value === null) {
+                        .querySelector('eds-button[tabindex="0"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
+                    const parsed = raw !== null ? parseInt(raw, 10) : NaN;
+                    const value = Number.isInteger(parsed) && parsed >= 0 && parsed <= 10 ? parsed : NaN;
+                    if (isNaN(value)) {
                         // eslint-disable-next-line
                         if (field.required) {
                             errors[field.name] = ['This field is required.'];

package/dist/components/components-section.js

@@ -37,7 +37,7 @@ const DocsOverview = () => (h("div", { class: "static-content container" },
             }
         ] }),
     h("p", null, "Once included, components can be used in your markup like any other regular HTML elements:"),
-    h("eds-code-block", { code: '<eds-button \n  label="my bytton" \n  intent="primary">\n</eds-button>', language: "html", "copy-label": "Copy Code" }),
+    h("eds-code-block", { code: '<eds-button label="my bytton" intent="primary"></eds-button>', language: "html", "copy-label": "Copy Code" }),
     h("h2", null, "Load the variables and styles"),
     h("p", null,
         "To directly use only the produced variables (colors, breakpoints, typography) add the tag below to the",
@@ -55,9 +55,7 @@ const DocsOverview = () => (h("div", { class: "static-content container" },
         "Note that, loading either the variables or the predefined CSS framework above,",
         ' ',
         h("b", null, "automatically loads the fonts so you can skip loading them separately"),
-        ". If you wish, however, to load the fonts, add the tag below to the ",
-        h("code", null, "head")),
-    h("eds-code-block", { code: '<link rel="stylesheet" href="https://unpkg.com/@ebrains/assets@latest/styles/base/fonts.css"/>', language: "css", "copy-label": "Copy Code" })));
+        ".")));
 
 const DocsInstallation = () => (h("div", null,
     h("p", null, "Before proceeding, ensure that Node.js is installed on your machine\u2014you can download the latest version from the official website. If your project doesn\u2019t already use npm and you plan to integrate EBRAINS Components, you'll need to create a package.json file by running npm init and following the on-screen instructions."),
@@ -143,7 +141,7 @@ const ComponentsSection$1 = /*@__PURE__*/ proxyCustomElement(class ComponentsSec
         }
     }
     render() {
-        return h("div", { key: 'dc274e3d76a296c8a8b18abcc4fc8741a6b9eddd', class: "container" }, this.renderContent());
+        return h("div", { key: 'a5c54560de99e81caaabafc4342522602ffe35a1', class: "container" }, this.renderContent());
     }
 }, [0, "components-section", {
         "tabIndex": [2, "tab-index"]

package/dist/components/components.css

@@ -6789,9 +6789,6 @@ input[type="range"]::-webkit-slider-thumb {
 .p-20 {
   padding: 1.25rem;
 }
-.p-4 {
-  padding: 0.25rem;
-}
 .p-8 {
   padding: 0.5rem;
 }