@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

package/dist/collection/{components/eds-form-v2/eds-form-v2.stories.js → shared-ui/eds-form/eds-form.stories.js}

@@ -1,7 +1,7 @@
 import { html } from "lit-html";
 export default {
-    title: 'Components/Form v2',
-    component: 'eds-form-v2',
+    title: 'Shared UI/Form',
+    component: 'eds-form',
     argTypes: {
         name: { control: 'text', description: 'Form name', defaultValue: 'extended-form' },
         fields: { control: 'object', description: 'Form fields as JSON array' },
@@ -14,12 +14,12 @@ export default {
     }
 };
 const Template = (args) => html `
-  <eds-form-v2
+  <eds-form
     name="${args.name}"
     .fields="${JSON.stringify(args.fields)}"
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
-  ></eds-form-v2>
+  ></eds-form>
 `;
 export const Default = Template.bind({});
 Default.args = {

package/dist/collection/{eds-docs-ui → shared-ui}/eds-frame/eds-frame.css

@@ -54,6 +54,9 @@
   .h-full {
     height: 100%;
   }
+  .h-auto {
+    height: auto;
+  }
   .effect-height {
     transition-duration: 300ms;
     transition-timing-function: cubic-bezier(0, 0, 0.2, 1);

package/dist/collection/{eds-docs-ui → shared-ui}/eds-frame/eds-frame.js

@@ -13,13 +13,16 @@ import { h } from "@stencil/core";
  *
  * Ideal for showcasing embedded content within an application, especially when previewing external resources.
  */
+/**
+ * @internal
+ */
 export class EdsFrame {
     constructor() {
         this.frameLabel = undefined;
-        this.urlLabel = 'Open in Storybook';
-        this.errorMessage = 'Could not load the requested Storybook content. Please check the URL or try again later.';
-        this.storybookUrl = undefined;
-        this.storyPath = undefined;
+        this.frameSrc = undefined;
+        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.size = 'auto';
         this.iframeError = false;
@@ -52,7 +55,7 @@ export class EdsFrame {
     articleClasses() {
         return [
             'bg-inverse min-h-156 rounded border-softer effect-focus-within relative flex grow flex-col border-2',
-            'w-full h-full'
+            'w-full h-auto'
         ].join(' ');
     }
     getFrameHeight() {
@@ -80,14 +83,8 @@ export class EdsFrame {
             this.iframeError = true;
         }
     }
-    get storyLink() {
-        return `${this.storybookUrl}/?path=/story/${this.storyPath}`;
-    }
-    get frameSrc() {
-        return `${this.storybookUrl}/iframe.html?id=${this.storyPath}&viewMode=story`;
-    }
     render() {
-        return (h("div", { key: 'e4b72fab30dcf1eeee6fdf3c63719599eafedb6d', class: this.articleClasses() }, h("div", { key: 'f8643db32120c14dd18b3d44ae530a83e81e59e0', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '7b40c644e142e6a6356e4d6a683b9c1c57104f5d', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.storyLink, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '8a1fe80134dadd38d113968ad0c825a6f9426921', 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: 'b26229611868992daf5f4ca5037e1e10b2540ee5', class: this.articleClasses() }, h("div", { key: '4cf9ff78b27ce7f88db50feccc9d267c2e727a2c', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'bf2c1607d3fcbbf152691ec4e6134e737f6d1082', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (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: 'd9f059766c509d7325ea734c63e29d7995cc8065', 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"; }
@@ -120,7 +117,7 @@ export class EdsFrame {
                 "attribute": "frame-label",
                 "reflect": false
             },
-            "urlLabel": {
+            "frameSrc": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -128,17 +125,16 @@ export class EdsFrame {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": false,
-                "optional": true,
+                "required": true,
+                "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The label for the external link at the top right of the frame. Defaults to 'Open in Storybook'."
+                    "text": "The frame src url to be displayed."
                 },
-                "attribute": "url-label",
-                "reflect": false,
-                "defaultValue": "'Open in Storybook'"
+                "attribute": "frame-src",
+                "reflect": false
             },
-            "errorMessage": {
+            "urlLabel": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -150,13 +146,13 @@ export class EdsFrame {
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The error message displayed if the iframe fails to load."
+                    "text": "The label for the external link at the top right of the frame. Defaults to 'Open'."
                 },
-                "attribute": "error-message",
+                "attribute": "url-label",
                 "reflect": false,
-                "defaultValue": "'Could not load the requested Storybook content. Please check the URL or try again later.'"
+                "defaultValue": "'Open'"
             },
-            "storybookUrl": {
+            "errorMessage": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -164,16 +160,17 @@ export class EdsFrame {
                     "resolved": "string",
                     "references": {}
                 },
-                "required": true,
-                "optional": false,
+                "required": false,
+                "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "The base URL of the Storybook instance."
+                    "text": "The error message displayed if the iframe fails to load."
                 },
-                "attribute": "storybook-url",
-                "reflect": false
+                "attribute": "error-message",
+                "reflect": false,
+                "defaultValue": "'Could not load the requested content. Please check the URL or try again later.'"
             },
-            "storyPath": {
+            "url": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -185,9 +182,9 @@ export class EdsFrame {
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "The story path identifier used to generate the iframe URL."
+                    "text": "The base URL of the external reference."
                 },
-                "attribute": "story-path",
+                "attribute": "url",
                 "reflect": false
             },
             "intent": {

package/dist/collection/{eds-docs-ui → shared-ui}/eds-frame/eds-frame.stories.js

@@ -1,23 +1,23 @@
 import { html } from "lit-html";
 export default {
-    title: 'Components/Frame',
+    title: 'Shared Ui/Frame',
     component: 'eds-frame',
     argTypes: {
         frameLabel: {
             control: 'text',
             description: 'The label of the frame. This is displayed as the title.'
         },
-        urlLabel: {
+        frameSrc: {
             control: 'text',
-            description: 'The label for the URL link.'
+            description: 'The source of the frame.'
         },
-        storybookUrl: {
+        urlLabel: {
             control: 'text',
-            description: 'The base URL for Storybook (e.g., https://gitlab-org.gitlab.io/gitlab-ui).'
+            description: 'The label for the URL link.'
         },
-        storyPath: {
+        url: {
             control: 'text',
-            description: 'The story path to display (e.g., base-card--default).'
+            description: 'The base URL for the reference (e.g., https://gitlab-org.gitlab.io/gitlab-ui).'
         },
         size: {
             control: { type: 'select' },
@@ -31,12 +31,12 @@ export default {
         }
     }
 };
-const Template = ({ frameLabel, urlLabel, storybookUrl, storyPath, intent, size }) => html `
+const Template = ({ frameLabel, frameSrc, urlLabel, url, intent, size }) => html `
   <eds-frame
     frame-label=${frameLabel}
+    frame-src=${frameSrc}
     url-label=${urlLabel}
-    storybook-url=${storybookUrl}
-    story-path=${storyPath}
+    url=${url}
     intent=${intent}
     size=${size}
   ></eds-frame>
@@ -44,9 +44,9 @@ const Template = ({ frameLabel, urlLabel, storybookUrl, storyPath, intent, size
 export const Default = Template.bind({});
 Default.args = {
     frameLabel: 'Default Frame',
+    frameSrc: 'https://gitlab-org.gitlab.io/gitlab-ui/?path=/docs/base-accordion--docs',
     urlLabel: 'Visit Storybook',
-    storybookUrl: 'https://gitlab-org.gitlab.io/gitlab-ui',
-    storyPath: 'base-card--default',
+    url: 'https://gitlab-org.gitlab.io/gitlab-ui',
     intent: 'primary',
-    size: 'auto'
+    size: 'xl'
 };

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.css

@@ -0,0 +1,120 @@
+.bg-default {
+    background-color: var(--grey-200);
+  }
+  .bg-darker {
+    background-color: var(--grey-400);
+  }
+  .bg-inverse {
+    background-color: var(--white);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .fixed {
+    position: fixed;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .inset-0 {
+    inset: 0rem;
+  }
+  .z-\[999999\] {
+    z-index: 999999;
+  }
+  .overflow-y-scroll {
+    overflow-y: scroll;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .min-h-full {
+    min-height: 100%;
+  }
+  .flex-col {
+    flex-direction: column;
+  }
+  .w-full {
+    width: 100%;
+  }
+  .top-0 {
+    top: 0rem;
+  }
+  .mx-auto {
+    margin-left: auto;
+    margin-right: auto;
+  }
+  .mt-auto {
+    margin-top: auto;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
+  .h-\[85px\] {
+    height: 85px;
+  }
+  .px-16 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  .py-16 {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+  }
+  .mt-28 {
+    margin-top: 1.75rem;
+  }
+  .gap-y-8 {
+    row-gap: 0.5rem;
+  }
+  .effect-color {
+    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+  .effect-focus {
+    outline-width: 3px;
+    outline-offset: 2px;
+    outline-color: var(--green-500);
+  }
+  .rounded-xs {
+    border-radius: 4px;
+  }
+  .f-heading-02 {
+    font-family: var(--f-heading-02-fontFamily);
+    font-weight: var(--f-heading-02-fontWeight);
+    font-size: var(--f-heading-02-fontSize);
+    line-height: var(--f-heading-02-lineHeight);
+    letter-spacing: var(--f-heading-02-letterSpacing);
+  }
+  .hover\:text-lighter:hover {
+    color: var(--grey-600);
+  }
+  .w-fit {
+    width: -moz-fit-content;
+    width: fit-content;
+  }
+
+

package/dist/collection/shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js

@@ -69,9 +69,10 @@ export class EdsFullscreenMenu {
         return parseData(this.menuLinks);
     }
     render() {
-        return this.isMenuOpen ? (h("div", { 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: `bg-default 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("div", { class: "mt-auto" }, h("eds-footer", { social: true, "extra-class": "bg-darker" }))))) : null;
+        return this.isMenuOpen ? (h("div", { 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("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"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-fullscreen-menu.css"]

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

@@ -0,0 +1,138 @@
+.block {
+    display: block;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline {
+    display: inline;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }.block {
+    display: block;
+  }
+  .inline-block {
+    display: inline-block;
+  }
+  .inline {
+    display: inline;
+  }
+  .flex {
+    display: flex;
+  }
+  .inline-flex {
+    display: inline-flex;
+  }
+  .items-center {
+    align-items: center;
+  }
+  .justify-center {
+    justify-content: center;
+  }
+  .justify-between {
+    justify-content: space-between;
+  }
+  .fixed {
+    position: fixed;
+  }
+  .absolute {
+    position: absolute;
+  }
+  .relative {
+    position: relative;
+  }
+  .sticky {
+    position: sticky;
+  }
+  .z-10 {
+    z-index: 10;
+  }
+  .text-default {
+    color: var(--black);
+  }
+  .text-inverse {
+    color: var(--white);
+  }
+  .bg-dark {
+    background-color: var(--grey-300);
+  }
+  .bg-strongest {
+    background-color: var(--black);
+  }
+  .mr-auto {
+    margin-right: auto;
+  }
+  .w-\[200px\] {
+    width: 200px;
+  }
+  .h-\[85px\] {
+    height: 85px;
+  }
+  .left-1\/2 {
+    left: 50%;
+  }
+  .top-1\/2 {
+    top: 50%;
+  }
+  .grow {
+    flex-grow: 1;
+  }
+  .-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));
+  }
+  .-translate-y-1\/2 {
+    --tw-translate-y: -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));
+  }
+  .hidden {
+    display: none;
+  }
+  .gap-x-2 {
+    -moz-column-gap: 0.125rem;
+         column-gap: 0.125rem;
+  }
+  .after\:effect-opacity::after {
+    transition-property: opacity;
+    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
+    transition-duration: 300ms;
+    transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
+  }
+  .whitespace-nowrap {
+    white-space: nowrap;
+  }
+  .\!text-current {
+    color: currentColor !important;
+  }
+  .overflow-hidden {
+    overflow: hidden;
+  }
+  .after\:\!border-transparent::after {
+    border-color: var(--transparent) !important;
+  }
+  .hover\:after\:\!border-transparent:hover::after {
+    border-color: var(--transparent) !important;
+  }
+  .after\:opacity-0::after {
+    opacity: 0;
+  }
+  .hover\:after\:opacity-100:hover::after {
+    opacity: 1;
+  }
+  .px-16 {
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+  
+  @media (min-width: 750px) {
+    .md\:flex {
+      display: flex;
+    }
+    .md\:hidden {
+      display: none;
+    }
+}

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

@@ -74,10 +74,11 @@ export class EdsHeader {
         return parseData(this.links);
     }
     render() {
-        return (h("header", { key: '2e39471507762066b258c72da9690f3001ca9a94', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '75a52a092065c2f3f65f7d8a388b887d3991497e', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '632c71d268929e06bc507573db21e04da4c60c67', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '2a1bb9a64ea5731ea3a8c1537b1d95b28b2368f5', 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: '6cecbd7d268cd2aef5b7b117df422128c7dc994d', 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: "small", 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: 'b352a1456858d5190a6268928d2f92ddebdf99c2' }), 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: '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));
     }
     static get is() { return "eds-header"; }
+    static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-header.css"]

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

@@ -1,6 +1,9 @@
 import { h } from "@stencil/core";
 import { login, logout, isAuthenticated, getUser, initKeycloak, checkServerAvailability } from "../../utils/keycloak";
 import { toast } from "../../utils/toastManager";
+/**
+ * @internal
+ */
 export class EdsLogin {
     constructor() {
         /**
@@ -85,7 +88,7 @@ export class EdsLogin {
         }
     }
     render() {
-        return (h("div", { key: '074566b791eeb9ea4a0558b4ed83a96e4b673356', class: "block" }, !this.authenticated && (h("eds-button", { key: '3a05ff97a90d73204eb77c5dad0d328294d72d3e', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
+        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) }))));
     }
     static get is() { return "eds-login"; }
     static get encapsulation() { return "shadow"; }

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

@@ -34,6 +34,10 @@
     z-index: 10;
 }
 
+.z-\[999999\] {
+    z-index: 999999;
+}
+
 .left-0 {
     left: 0rem;
 }