@ebrains/components 0.8.0-alpha.0 → 0.9.1-beta

package/dist/collection/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;
@@ -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: '387b8a4cb8f300a5a6b82287369f123b33613616', class: this.articleClasses() }, h("div", { key: '8db6b1b5aecdaf2722786db85b2d3cf5b4bccac4', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '696cb266ffbaeb8325c274c646668ba0d8beb751', 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: '9841812873efe999746eb008dd5e606e89efdb71', 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/shared-ui/eds-frame/eds-frame.stories.js

@@ -7,17 +7,17 @@ export default {
             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-header/eds-header.js

@@ -74,8 +74,8 @@ export class EdsHeader {
         return parseData(this.links);
     }
     render() {
-        return (h("header", { key: '7b98b945005f538f43432cbd5ad405fd90985506', class: `flex items-center justify-between relative z-10
-       ${this.inverseHeader ? 'text-inverse bg-strongest' : 'text-default bg-dark'}` }, h("div", { key: '2a7f0026a12abd316bf3511746706b16368a5c20', class: "mr-auto w-[200px] h-[85px]" }, h("eds-logo", { key: '9f4d19c9cb68c11baf1fb76c1bb702722648233f', type: this.inverseHeader ? 'color-white' : 'color', href: this.homeUrl })), this.parsedLinks && (h("nav", { key: '47ed93a21fec15c4d8bc93658d49749f9aba915d', 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: 'da6f7ef405e0ac3779ea631a098e090a442e8266', 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: '7b6fe4135500c87b0eba724f7ff9df7c10d54f5b' }), 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"; }

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: 'dace7b16af2f945e4981c9ef139f4c2ae94e130c', class: "block" }, !this.authenticated && (h("eds-button", { key: 'a8d0bd545e8ae4a159b5977d50d05ae27dec7df3', 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.js

@@ -2,7 +2,7 @@ import { h } from "@stencil/core";
 import { matomoOptIn, matomoOptOut } from "../../utils/analytics";
 export class EdsMatomoNotice {
     constructor() {
-        this.title = 'Analytics Consent';
+        this.heading = 'Analytics Consent';
         this.description = "We use anonymous analytics to improve our services. No data is collected unless you give your consent. If you don't wish to send data right now, you can always re-enable analytics later by clicking the Cookies Preference button in the footer. However, by opting in today, you're joining a community that shapes our product's future—all while keeping your data completely anonymous.";
         this.optOutMessage = "You are already part of our community, and your anonymous data helps shape our product's future! Rest assured, your privacy is fully protected.";
         this.forceShow = false;
@@ -104,7 +104,7 @@ export class EdsMatomoNotice {
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.title, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
+        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
     }
     static get is() { return "eds-matomo-notice"; }
     static get encapsulation() { return "shadow"; }
@@ -120,7 +120,7 @@ export class EdsMatomoNotice {
     }
     static get properties() {
         return {
-            "title": {
+            "heading": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {

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

@@ -44,7 +44,7 @@ export class EdsSocialNetworks {
                 icon: 'bluesky'
             }
         ];
-        this.title = 'Follow EBRAINS to keep up-to-date';
+        this.heading = 'Follow EBRAINS to keep up-to-date';
     }
     /**
      * Renders the component's HTML structure with links to EBRAINS social profiles.
@@ -53,7 +53,7 @@ export class EdsSocialNetworks {
      * @returns {JSX.Element} The rendered JSX for the component.
      */
     render() {
-        return (h("div", { key: '6dba77a15e8259a12d1d6a22c00ab764a213611d' }, h("p", { key: '15fe6ee8597b359e25b8936c9e3506b91abaca11', class: "f-ui-02" }, this.title), h("ul", { key: 'b2e6dfa5c671a871df7a5a85f9a02f5822c8fd28', 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: '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" })))))));
     }
     static get is() { return "eds-social-networks"; }
     static get encapsulation() { return "shadow"; }
@@ -69,7 +69,7 @@ export class EdsSocialNetworks {
     }
     static get properties() {
         return {
-            "title": {
+            "heading": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {

package/dist/collection/shared-ui/eds-splash-screen/eds-splash-screen.js

@@ -5,21 +5,27 @@ export class EdsSplashScreen {
         this.initPromise = undefined;
         this.isVisible = true;
     }
+    // When the component loads, check if there is a promise.
     componentWillLoad() {
-        // If an initialization promise is provided, wait for it.
         if (this.initPromise) {
-            this.initPromise
-                .then(() => {
-                // eslint-disable-next-line
-                console.log('Promises resolved');
-                this.hideSplash();
-            })
-                .catch((error) => {
-                // eslint-disable-next-line
-                console.error('Initialization error:', error);
-                this.splash.emit({ type: 'error', message: error.message || 'Unknown error' });
-                //this.hideSplash();
-            });
+            this.handleInitPromise(this.initPromise);
+        }
+    }
+    // Watch for changes on initPromise.
+    async watchInitPromise(newPromise) {
+        if (newPromise) {
+            this.handleInitPromise(newPromise);
+        }
+    }
+    async handleInitPromise(promise) {
+        try {
+            await promise;
+            //console.log('Promises resolved');
+            this.hideSplash();
+        }
+        catch (error) {
+            //console.error('Initialization error:', error);
+            this.splash.emit({ type: 'error', message: error.message || 'Unknown error' });
         }
     }
     handleHideSplash() {
@@ -112,6 +118,12 @@ export class EdsSplashScreen {
                 }
             }];
     }
+    static get watchers() {
+        return [{
+                "propName": "initPromise",
+                "methodName": "watchInitPromise"
+            }];
+    }
     static get listeners() {
         return [{
                 "name": "hideSplash",

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

@@ -6282,8 +6282,8 @@ input[type="range"]::-webkit-slider-thumb {
 .m-0 {
   margin: 0rem;
 }
-.m-32 {
-  margin: 2rem;
+.m-16 {
+  margin: 1rem;
 }
 .mx-auto {
   margin-left: auto;
@@ -6311,6 +6311,9 @@ input[type="range"]::-webkit-slider-thumb {
 .-mr-16 {
   margin-right: -1rem;
 }
+.-mr-4 {
+  margin-right: -0.25rem;
+}
 .mb-10 {
   margin-bottom: 0.625rem;
 }
@@ -6500,6 +6503,9 @@ input[type="range"]::-webkit-slider-thumb {
 .h-full {
   height: 100%;
 }
+.\!min-h-0 {
+  min-height: 0rem !important;
+}
 .\!min-h-20 {
   min-height: 1.25rem !important;
 }
@@ -6617,11 +6623,6 @@ input[type="range"]::-webkit-slider-thumb {
 .resize {
   resize: both;
 }
-.appearance-none {
-  -webkit-appearance: none;
-     -moz-appearance: none;
-          appearance: none;
-}
 .grid-cols-1 {
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -6694,6 +6695,10 @@ input[type="range"]::-webkit-slider-thumb {
 .gap-4 {
   gap: 0.25rem;
 }
+.gap-x-1 {
+  -moz-column-gap: 0.0625rem;
+       column-gap: 0.0625rem;
+}
 .gap-x-12 {
   -moz-column-gap: 0.75rem;
        column-gap: 0.75rem;
@@ -7037,6 +7042,10 @@ input[type="range"]::-webkit-slider-thumb {
   padding-left: 0.25rem;
   padding-right: 0.25rem;
 }
+.px-5 {
+  padding-left: 0.3125rem;
+  padding-right: 0.3125rem;
+}
 .px-6 {
   padding-left: 0.375rem;
   padding-right: 0.375rem;
@@ -7053,10 +7062,18 @@ input[type="range"]::-webkit-slider-thumb {
   padding-top: 1rem;
   padding-bottom: 1rem;
 }
+.py-2 {
+  padding-top: 0.125rem;
+  padding-bottom: 0.125rem;
+}
 .py-20 {
   padding-top: 1.25rem;
   padding-bottom: 1.25rem;
 }
+.py-3 {
+  padding-top: 0.1875rem;
+  padding-bottom: 0.1875rem;
+}
 .py-4 {
   padding-top: 0.25rem;
   padding-bottom: 0.25rem;
@@ -7129,6 +7146,9 @@ input[type="range"]::-webkit-slider-thumb {
 .pt-32 {
   padding-top: 2rem;
 }
+.pt-4 {
+  padding-top: 0.25rem;
+}
 .pt-48 {
   padding-top: 3rem;
 }
@@ -7377,6 +7397,10 @@ input[type="range"]::-webkit-slider-thumb {
   transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
 }
 @media (min-width: 750px) {
+  .md\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
   .md\:grid-col-span-4 {
     --container-grid-columns: 4;
     grid-column: span 4 / span 4;
@@ -7387,6 +7411,10 @@ input[type="range"]::-webkit-slider-thumb {
   }
 }
 @media (min-width: 900px) {
+  .lg\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
   .lg\:grid-col-span-5 {
     --container-grid-columns: 5;
     grid-column: span 5 / span 5;
@@ -7399,6 +7427,22 @@ input[type="range"]::-webkit-slider-thumb {
     grid-column-start: 7;
   }
 }
+@media (min-width: 1024px) {
+  .xl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
+@media (min-width: 1280px) {
+  .xxl\:grid-col-span-2 {
+    --container-grid-columns: 2;
+    grid-column: span 2 / span 2;
+  }
+  .xxl\:grid-col-span-3 {
+    --container-grid-columns: 3;
+    grid-column: span 3 / span 3;
+  }
+}
 .even\:bg-inverse-softer:nth-child(even) {
   background-color: rgba(255, 255, 255, .15);
 }
@@ -7675,9 +7719,6 @@ input[type="range"]::-webkit-slider-thumb {
   .md\:hidden {
     display: none;
   }
-  .md\:w-\[300px\] {
-    width: 300px;
-  }
   .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));
@@ -7715,9 +7756,6 @@ input[type="range"]::-webkit-slider-thumb {
   .lg\:hidden {
     display: none;
   }
-  .lg\:w-\[500px\] {
-    width: 500px;
-  }
   .lg\:w-auto {
     width: auto;
   }

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

@@ -41,7 +41,7 @@ export class EdsTabs {
                 }
             }
         });
-        this.id = undefined;
+        this.identifier = undefined;
         this.navAriaLabel = 'Tabs';
         this.tabs = undefined;
         this.parsedTabs = [];
@@ -50,7 +50,7 @@ export class EdsTabs {
     componentWillLoad() {
         this.parseTabs();
         this.setActiveIndex();
-        this.tab.emit({ tabId: this.id, index: 0 });
+        this.tab.emit({ tabId: this.identifier, index: 0 });
     }
     /**
      * Parses the `links` prop into an array of link objects.
@@ -104,7 +104,7 @@ export class EdsTabs {
         // Update the active index and set all tabs' active state accordingly
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
-        this.tab.emit({ tabId: this.id, index: index, name: tabLabel });
+        this.tab.emit({ tabId: this.identifier, index: index, name: tabLabel });
         sendAnalytics({
             category: 'ui-component',
             tag: this.el.tagName.toLowerCase(),
@@ -113,7 +113,7 @@ export class EdsTabs {
         });
     }
     render() {
-        return (h("div", { key: '217bdc60c3b3089fb3e16e4b18214b3ed4096118', id: `${this.id}`, 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: 'c8f10440cbc52e4b6c93c8512e011da343290e4b', 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: 'cc8375d321a7116dcda08a0174ad941382d0ba43', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+        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) => {
             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));
@@ -133,7 +133,7 @@ export class EdsTabs {
     }
     static get properties() {
         return {
-            "id": {
+            "identifier": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {

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: '30aec03e44a3d83d766786a4fd8c995ce3a524c2', 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: '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) }))))));
     }
     static get is() { return "eds-toast-manager"; }
     static get encapsulation() { return "shadow"; }