@ebrains/components 0.9.1-beta → 0.9.3-beta

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

@@ -55,7 +55,7 @@ export class EdsHeader {
     }
     /** Emits an event to open or close the menu */
     handleToggleMenu() {
-        this.toggleMenu.emit(!this.isMenuOpen);
+        this.toggleheadermenu.emit(!this.isMenuOpen);
     }
     /**
      * Toggles the visibility of the user menu.
@@ -74,8 +74,8 @@ export class EdsHeader {
         return parseData(this.links);
     }
     render() {
-        return (h("header", { key: 'eabb97331efd8b4aee5e1f249ebc60d38926eb5e', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: 'b561941a2e10252a45526e565e9711be6a0d2f41', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'fa1350f9b9584f7b5d128facd8077efcf117abe7', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '6cc3c1b32250b671b394f0ac65b52e9b4491c57f', 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: 'ce1277ca3a9082e1b639ae42b96bbc1d3d665edc', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", 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: '7a1d67916c63dcab3d46d1223805a3c20af65d97' }), this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
+        return (h("header", { key: 'a0679671c9ed9659fb8393f69dcf1b902ab9f25f', class: `flex items-center justify-between relative z-10
+       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '115780a93b21d638cb7abf32ed365966bf4c0a6e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: 'e0dfbb999e87178c1992c692edd791fbe239886b', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '283bab0cfd25a47ffc7007bf24a98dbc3c138d2d', 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: 'fb2fa5863a04869a9922218ac13d287e7120afd8', class: "flex gap-x-2" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: "ghost", 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: 'c5d15841fc49af502fea717dbc36d81721d7688d' }), this.menuEnabled ? (h("div", { class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { "aria-label": "Menu", intent: "ghostInverse", icon: "menu", size: "small", onClick: () => this.handleToggleMenu() }))) : null));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }
@@ -173,8 +173,8 @@ export class EdsHeader {
     }
     static get events() {
         return [{
-                "method": "toggleMenu",
-                "name": "toggleMenu",
+                "method": "toggleheadermenu",
+                "name": "toggleheadermenu",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

package/dist/collection/shared-ui/eds-header/eds-header.stories.js

@@ -35,6 +35,7 @@ export const Default = (args) => `
     <eds-header
       home-url="${args.homeUrl}"
       links='${JSON.stringify(args.links)}'
+      menu-enabled="${args.menuEnabled}"
       inverse-header="${args.inverseHeader}"
     ></eds-header>
   `;

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

@@ -88,7 +88,7 @@ export class EdsLogin {
         }
     }
     render() {
-        return (h("div", { key: 'ac10895096f36f2fb3a79622972d5a8c519685eb', class: "block" }, !this.authenticated && (h("eds-button", { key: '55aab5ee63214d6a1ccdefc303273df99aa309cf', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
+        return (h("div", { key: '041846174aaad541acce03588a087793d10daa1e', class: "block" }, !this.authenticated && (h("eds-button", { key: '360a84ec79a15c9293e3898b77df649c469d9529', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
     }
     static get is() { return "eds-login"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.js

@@ -37,7 +37,7 @@ export class EdsMatomoNotice {
      */
     componentWillLoad() {
         // If a decision has been made previously (opted in or out), don't show the notice.
-        const consentGiven = localStorage.getItem('matomo-consent-given');
+        const consentGiven = localStorage.getItem(`${window.location.host}-matomo-consent-given`);
         if (consentGiven === 'out' || this.optedOut()) {
             this.showNotice = false;
             return;
@@ -76,7 +76,7 @@ export class EdsMatomoNotice {
     }
     optInAnalytics() {
         matomoOptIn();
-        localStorage.removeItem('matomo-consent-given');
+        localStorage.removeItem(`${window.location.host}-matomo-consent-given`);
         this.hideNotice();
         this.consent.emit('in');
     }
@@ -86,7 +86,7 @@ export class EdsMatomoNotice {
         this.consent.emit('out');
     }
     noThanks() {
-        localStorage.setItem('matomo-consent-given', 'out');
+        localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
         this.hideNotice();
     }
     deferDecision() {

package/dist/collection/shared-ui/eds-matomo-notice/eds-matomo-notice.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared Ui/Matomo Notice',
+    title: 'Shared Ui/Analytics Notice',
     component: 'eds-matomo-notice',
     argTypes: {
         title: {
@@ -9,10 +9,6 @@ export default {
         description: {
             control: 'text',
             description: 'The description explaining the purpose of collecting analytics data.'
-        },
-        forceShow: {
-            control: 'boolean',
-            description: 'Controls whether the notice is displayed.'
         }
     },
     args: {
@@ -24,13 +20,11 @@ export const Default = {
     render: (args) => `
       <eds-matomo-notice 
         title="${args.title}" 
-        description="${args.description}"
-        force-show="${args.forceShow}">
+        description="${args.description}">
       </eds-matomo-notice>
     `,
     args: {
         title: 'Analytics Consent',
-        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.',
-        forceShow: false
+        description: 'We use anonymous analytics to improve our services. No personal data is collected unless you give your consent.'
     }
 };

package/dist/collection/shared-ui/eds-social-networks/eds-social-networks.js

@@ -53,7 +53,7 @@ export class EdsSocialNetworks {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '830f2648d282b24630f9266bc07dcf9d1fb528de' }, h("p", { key: '14d58e971d0ca585376d21400258742d2067471d', class: "f-ui-02" }, this.heading), h("ul", { key: 'd5ff24b6dbcfa25bae9b863b64e635e5c838db50', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
+        return (h("div", { key: 'f78431d66b849abfd16c60fc42d341e50fa38c47' }, h("p", { key: '1f905e5bb56695352d1da528862f597bdaa66933', class: "f-ui-02" }, this.heading), h("ul", { key: 'b281b99744549c8f2b941e10ce9b239df2ef6b63', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index) => (h("li", { key: index }, h("eds-link", { "extra-class": "effect-color effect-focus text-lighter hover:text-default flex items-center justify-center rounded-sm", external: true, "aria-label": network.label, url: network.url, icon: network.icon, intent: "strong" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }

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

@@ -262,10 +262,15 @@ pre {
   margin-bottom: 1.25rem;
 }
 
+.mt-16 {
+  margin-top: 1rem;
+}
+.mb-0 {
+  margin-bottom: 0rem;
+}
 .mb-10 {
   margin-bottom: 0.625rem;
 }
-
 .mb-12 {
   margin-bottom: 0.75rem;
 }
@@ -273,7 +278,12 @@ pre {
 .mb-28 {
   margin-bottom: 1.75rem;
 }
-
+.last\:mb-0:last-child {
+  margin-bottom: 0rem;
+}
+.last\:mt-16:last-child {
+  margin-top: 1rem;
+}
 .border-softer {
   border: 2px solid rgba(0, 0, 0, .1);
 }
@@ -301,6 +311,10 @@ pre {
 .rounded-lg {
   border-radius: 16px;
 }
+.rounded-t-lg {
+  border-top-left-radius: 16px;
+  border-top-right-radius: 16px;
+}
 
 .border-2 {
   border-width: 2px;
@@ -358,4 +372,14 @@ pre {
 
 .bg-opacity-90 {
   --tw-bg-opacity: 0.9;
+}
+
+.overflow-hidden {
+  overflow: hidden;
+}
+
+.space-y-8  {
+  --tw-space-y-reverse: 0;
+  margin-top: calc(0.5rem * calc(1 - var(--tw-space-y-reverse)));
+  margin-bottom: calc(0.5rem * var(--tw-space-y-reverse));
 }

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

@@ -54,7 +54,7 @@ export class EdsStepsV2 {
     articleClasses() {
         return [
             this.bg ? 'bg-inverse' : 'bg-default',
-            'border-softer effect-focus-within relative rounded-lg border-2 p-16'
+            'border-softer effect-focus-within relative rounded-lg border-2'
         ].join(' ');
     }
     handleStepClick(index) {
@@ -72,9 +72,9 @@ export class EdsStepsV2 {
     }
     render() {
         const steps = this.parsedSteps;
-        return (h("div", { key: '06d6c64cd4389908276a6b0c738700c315d693af', class: this.articleClasses() }, this.imageSrc ? (h("div", { class: "mb-28" }, h("eds-img", { src: this.imageSrc, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (h("div", { class: "mb-28 w-full bg-[#00A595] relative" }, h("div", { class: "text-inverse f-heading-04 p-24 md:p-48" }, this.message)))), this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "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: 'e86620aed9aafbf0c8e0cde0230b2147df952379', 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, "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: '773e51621fbfbc7b828d196d1e64a9752d02e5a4', class: "p-8" }, this.type === 'linear' ? (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step space-y-8", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-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' })))))))) : (
         // Static mode: show all steps with their content.
-        h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "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 }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), h("div", { class: "content" }, h("div", { class: "f-body-02 text-lighter mt-16", innerHTML: step.content }))))))))));
     }
     static get is() { return "eds-steps-v2"; }
     static get encapsulation() { return "shadow"; }

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

@@ -0,0 +1,79 @@
+import { html } from "lit-html";
+export default {
+    title: 'Shared UI/Steps V2',
+    component: 'eds-steps-v2',
+    argTypes: {
+        steps: {
+            control: 'object',
+            description: 'Array of step objects',
+            defaultValue: [
+                { title: 'Step One', content: '<p>Details for step one.</p>' },
+                { title: 'Step Two', content: '<p>Details for step two.</p>' },
+                { title: 'Step Three', content: '<p>Details for step three.</p>' }
+            ]
+        },
+        type: {
+            control: 'select',
+            options: ['static', 'linear'],
+            description: 'Stepper type: static (all steps) or linear (one at a time)',
+            defaultValue: 'static'
+        },
+        imageSrc: {
+            control: 'text',
+            description: 'URL of the image to display above the steps'
+        },
+        bg: {
+            control: 'boolean',
+            description: 'Whether to apply inverse background to container',
+            defaultValue: true
+        },
+        message: {
+            control: 'text',
+            description: 'Message to display if no image is provided'
+        }
+    },
+    args: {
+        steps: [
+            { title: 'Step One', content: '<p>Details for step one.</p>' },
+            { title: 'Step Two', content: '<p>Details for step two.</p>' },
+            { title: 'Step Three', content: '<p>Details for step three.</p>' }
+        ],
+        type: 'static',
+        imageSrc: '',
+        bg: true,
+        message: 'No image available'
+    }
+};
+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>
+  </div>
+`;
+export const Static = Template.bind({});
+Static.storyName = 'Static Steps';
+Static.args = {
+    type: 'static',
+    imageSrc: '',
+    message: ''
+};
+export const WithImage = Template.bind({});
+WithImage.storyName = 'With Image';
+WithImage.args = {
+    type: 'static',
+    imageSrc: 'https://files.ebrains.eu/img/f999348c-beaa-40f8-ba60-230316d4a947/EBRAINS-BernsteinConference01.jpg',
+    message: ''
+};
+export const WithMessage = Template.bind({});
+WithMessage.storyName = 'With Message';
+WithMessage.args = {
+    type: 'static',
+    imageSrc: '',
+    message: 'This is a fallback message when no image is provided.'
+};
+export const Linear = Template.bind({});
+Linear.storyName = 'Linear (One Step at a Time)';
+Linear.args = {
+    type: 'linear',
+    imageSrc: '',
+    message: ''
+};

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

@@ -6192,9 +6192,6 @@ input[type="range"]::-webkit-slider-thumb {
 .bottom-0 {
   bottom: 0rem;
 }
-.bottom-20 {
-  bottom: 1.25rem;
-}
 .bottom-4 {
   bottom: 0.25rem;
 }
@@ -6207,9 +6204,6 @@ input[type="range"]::-webkit-slider-thumb {
 .left-1\/2 {
   left: 50%;
 }
-.left-20 {
-  left: 1.25rem;
-}
 .left-4 {
   left: 0.25rem;
 }
@@ -6219,9 +6213,6 @@ input[type="range"]::-webkit-slider-thumb {
 .right-0 {
   right: 0rem;
 }
-.right-20 {
-  right: 1.25rem;
-}
 .right-4 {
   right: 0.25rem;
 }
@@ -6243,9 +6234,6 @@ input[type="range"]::-webkit-slider-thumb {
 .top-16 {
   top: 1rem;
 }
-.top-20 {
-  top: 1.25rem;
-}
 .top-full {
   top: 100%;
 }
@@ -7710,15 +7698,27 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 @media (min-width: 750px) {
+  .md\:bottom-20 {
+    bottom: 1.25rem;
+  }
   .md\:left-1\/2 {
     left: 50%;
   }
+  .md\:top-1\/2 {
+    top: 50%;
+  }
+  .md\:top-20 {
+    top: 1.25rem;
+  }
   .md\:flex {
     display: flex;
   }
   .md\:hidden {
     display: none;
   }
+  .md\:w-auto {
+    width: auto;
+  }
   .md\:-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));
@@ -7730,9 +7730,6 @@ input[type="range"]::-webkit-slider-thumb {
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
-  .md\:p-48 {
-    padding: 3rem;
-  }
   .md\:pt-28 {
     padding-top: 1.75rem;
   }

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

@@ -113,7 +113,7 @@ export class EdsTabs {
         });
     }
     render() {
-        return (h("div", { key: '78e73af37efa96baee5b9bbd7df026f1bac8c9c5', id: `${this.identifier}`, class: "after:border-softest 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("div", { key: '22b7d1dbd3463065b162985571b378a6324e0119', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'e8e3d55837e9be701615ff89b3efa0bda79ba235', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        return (h("div", { key: '316e5dff0f7cade692e782fe02f618687aef132e', id: `${this.identifier}`, class: "after:border-softest 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("div", { key: '21e9fcd6e30d04912ce5625bf3c4998feaa75311', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'caa94c1691903bc447d08850eb2b1b8545741dce', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
             const TabComponent = tab.active ? 'span' : 'a';
             const tabProps = this.getTabOptions(tab.active, index);
             return (h(TabComponent, Object.assign({}, tabProps, { "aria-label": tab.label, "aria-current": index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) }), tab.label || tab.ariaLabel));

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: '0ca6de02db6bd537c7efe007c898480d07f69bc6', 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: 'cc2aa94e01507dc8c27e82dfa550af5da6eaba3e', 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.css

@@ -6192,9 +6192,6 @@ input[type="range"]::-webkit-slider-thumb {
 .bottom-0 {
   bottom: 0rem;
 }
-.bottom-20 {
-  bottom: 1.25rem;
-}
 .bottom-4 {
   bottom: 0.25rem;
 }
@@ -6207,9 +6204,6 @@ input[type="range"]::-webkit-slider-thumb {
 .left-1\/2 {
   left: 50%;
 }
-.left-20 {
-  left: 1.25rem;
-}
 .left-4 {
   left: 0.25rem;
 }
@@ -6219,9 +6213,6 @@ input[type="range"]::-webkit-slider-thumb {
 .right-0 {
   right: 0rem;
 }
-.right-20 {
-  right: 1.25rem;
-}
 .right-4 {
   right: 0.25rem;
 }
@@ -6243,9 +6234,6 @@ input[type="range"]::-webkit-slider-thumb {
 .top-16 {
   top: 1rem;
 }
-.top-20 {
-  top: 1.25rem;
-}
 .top-full {
   top: 100%;
 }
@@ -7710,15 +7698,27 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 @media (min-width: 750px) {
+  .md\:bottom-20 {
+    bottom: 1.25rem;
+  }
   .md\:left-1\/2 {
     left: 50%;
   }
+  .md\:top-1\/2 {
+    top: 50%;
+  }
+  .md\:top-20 {
+    top: 1.25rem;
+  }
   .md\:flex {
     display: flex;
   }
   .md\:hidden {
     display: none;
   }
+  .md\:w-auto {
+    width: auto;
+  }
   .md\:-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));
@@ -7730,9 +7730,6 @@ input[type="range"]::-webkit-slider-thumb {
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
-  .md\:p-48 {
-    padding: 3rem;
-  }
   .md\:pt-28 {
     padding-top: 1.75rem;
   }

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

@@ -33,7 +33,7 @@ export class EdsUser {
     }
     render() {
         const user = this.parsedUser;
-        return (h("div", { key: '099427eda976cd3fffcd201a2629d9db752f427d', class: "block" }, h("div", { key: '33e8e4a2aca3fa48420abbd9304ed1d681dbad60', class: "flex items-center" }, h("eds-dropdown", { key: '6f25836fbe49e6cb08e7fe8f057a094e21271784', label: `Welcome, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '143b3561a2b0484f60df993882d1c9e74e413859', class: "min-w-[280px] p-8" }, h("div", { key: '5f178c0ce2a4b08a4bef0e2a2348b5372fc1a723', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: '6ee2187e673738f3ac5e8bbd5ef56b4df69a51f5', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '73a58dfadc56f71e75f14d7edf4385682d45126a', class: "max-w-full" }, user.name && h("p", { key: '17d87baf2254d8b1667eb2ba196acc783f66a5d7', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'cc8c94e020735521b046805067c1ecef86ccb4bf', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '70989c3cc79d174f3ad99dc40db7b69a22f14d34', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: 'f028bde937b98a01c2f9d5028bdd5038003193a0', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("slot", { key: '3f6d7c1c540f93c9a35e6c6fa30c68bf06fa1a92' })))))));
+        return (h("div", { key: 'd20dc8ea0fb7eab53f20927af8ffe6dd67db8641', class: "block" }, h("div", { key: '40001630f8981113ba758b74ba58a939c25306cd', class: "flex items-center" }, h("eds-dropdown", { key: '613be962bda1e516f1733b1cda14811d5a5aa28e', label: `Welcome, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: 'd1654f4e46e1aca7f1a2f66dba008635c7bdd748', class: "min-w-[280px] p-8" }, h("div", { key: '60222bae842c9937fcf75add9566c70f4d3720cf', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, h("eds-avatar", { key: 'e6850f9475524ad03424d307505ed073e682610d', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '7b45fec592f3259bba46a499ee555f51db2a6861', class: "max-w-full" }, user.name && h("p", { key: 'fc9037c44c0ad50b4449801ddea82c8bc50aca9e', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '49249936faebf486c5ef0e83b8e288e2fe02b087', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e6893863bdc060de05bcda216d4437affd0cc805', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '4f1141c9b29ac97007dd790ff26d062d067fdfa5', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, h("slot", { key: '686a63f8e772e12ff575a686b189343bcccbd2ac' })))))));
     }
     static get is() { return "eds-user"; }
     static get encapsulation() { return "shadow"; }

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: '7b0b74c02f9fa25dc3d3e5a0fd10d8b4c3a59ffe' }, h("eds-splash-screen", { key: 'e1fabb47903b011c397af3a8da59130e8455280f', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '30d8ca5116c5b8a18972df9c55bd4a947226d682', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '16ead78b24f561049fb12609b23bff028262d9d5' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
+        return (h("div", { key: 'e17896f68a7a987b73756e1a0d572f48272ae65f' }, h("eds-splash-screen", { key: 'f269a92c479b27c1c3d4fa199889770dfc98e0e1', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '271e28d665f9676d9a75c8537553f29bbdab6651', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: 'fbcbec5f93e57b450936e8df1a35da1cc6493175' }, 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/components/components-section.js

@@ -137,7 +137,7 @@ const ComponentsSection$1 = /*@__PURE__*/ proxyCustomElement(class ComponentsSec
         }
     }
     render() {
-        return h("div", { key: 'ee8facfaad3786770fd3ea39f1db7922a67ffd3e', class: "container" }, this.renderContent());
+        return h("div", { key: 'ee1dd33b05afae12511c5876db4e8bd771117853', class: "container" }, this.renderContent());
     }
 }, [0, "components-section", {
         "tabIndex": [2, "tab-index"]

package/dist/components/components.css

@@ -6192,9 +6192,6 @@ input[type="range"]::-webkit-slider-thumb {
 .bottom-0 {
   bottom: 0rem;
 }
-.bottom-20 {
-  bottom: 1.25rem;
-}
 .bottom-4 {
   bottom: 0.25rem;
 }
@@ -6207,9 +6204,6 @@ input[type="range"]::-webkit-slider-thumb {
 .left-1\/2 {
   left: 50%;
 }
-.left-20 {
-  left: 1.25rem;
-}
 .left-4 {
   left: 0.25rem;
 }
@@ -6219,9 +6213,6 @@ input[type="range"]::-webkit-slider-thumb {
 .right-0 {
   right: 0rem;
 }
-.right-20 {
-  right: 1.25rem;
-}
 .right-4 {
   right: 0.25rem;
 }
@@ -6243,9 +6234,6 @@ input[type="range"]::-webkit-slider-thumb {
 .top-16 {
   top: 1rem;
 }
-.top-20 {
-  top: 1.25rem;
-}
 .top-full {
   top: 100%;
 }
@@ -7710,15 +7698,27 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 @media (min-width: 750px) {
+  .md\:bottom-20 {
+    bottom: 1.25rem;
+  }
   .md\:left-1\/2 {
     left: 50%;
   }
+  .md\:top-1\/2 {
+    top: 50%;
+  }
+  .md\:top-20 {
+    top: 1.25rem;
+  }
   .md\:flex {
     display: flex;
   }
   .md\:hidden {
     display: none;
   }
+  .md\:w-auto {
+    width: auto;
+  }
   .md\:-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));
@@ -7730,9 +7730,6 @@ input[type="range"]::-webkit-slider-thumb {
   .md\:gap-y-12 {
     row-gap: 0.75rem;
   }
-  .md\:p-48 {
-    padding: 3rem;
-  }
   .md\:pt-28 {
     padding-top: 1.75rem;
   }