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

package/dist/collection/eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js

@@ -5,7 +5,7 @@ import { hLogoColor } from "../../../../../../../../packages/svgs/src/index";
  */
 export class LogoWrongUsage {
     render() {
-        return (h("ul", { key: 'f5aef262ac65790a1f86ea7eb8a80fc093406798', class: "container grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("span", { key: '150bcdb8502a137f54415e24618cf39d0f098c28', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '7df94271a37ae57dc021390f6f16637ea3c6948e', class: "example" }, h("div", { key: '8b4bff581312ed63a5812b9bd7c93bbae6137809', class: "bg-dark " }, h("div", { key: '78fd9855901f2da1392006dbbcaec5537586ef9d', class: "no-other-bg-color logo", innerHTML: hLogoColor })), h("p", { key: '5bbf1ae6a4b6b4f9c1a5a310c0c5b123b24f3581', class: "f-ui-02" }, "Do not use with backgrounds that make legibility difficult"))), h("span", { key: '7d1c8346857b6366b69e9ad6bc910adfed8b6213', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '3df57b6e370e166e63b36aa45901800de51bedc5', class: "example" }, h("div", { key: 'dc1983f4b8faad9d3c23ad612a1c01462bf033b0', class: "no-other-color p-16" }, h("div", { key: '42f985c970bce2bfa9590f64458e6987500d6036', class: "logo non-brand-color", innerHTML: hLogoColor })), h("p", { key: '9f44984a151b0720f2be17074bdd3c0d42c8210a', class: "f-ui-02" }, "Do not apply other colors"))), h("span", { key: 'd6481a9e1f79c892e54853f3137e5724a42c2479', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'fd550421e565543c1aaff054a86733a585ce9b9b', class: "example" }, h("div", { key: '3b677e85c9b3cb237e10a212187ba192b711fd53', class: "bg-light p-16" }, h("div", { key: '958733b94eca4e7e27dc5ac3e74f2c745198f37d', class: "logo distorted", innerHTML: hLogoColor })), h("p", { key: '9f4d3fc90cf8143480fb143a8932f91185a62f4c', class: "f-ui-02" }, "Do not deform the logo"))), h("span", { key: '7254597b2dbcb94118547e3b640c79c3bbd3e7ff', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '4caef2a8c103ecfc8ff91e40b8c5255571984d14', class: "example" }, h("div", { key: 'c93ae6b7c3d58700300fe01b398e4e57728fb314', class: "bg-white p-16" }, h("div", { key: '92916204870722a6da1f45d3d09505589763390b', class: "logo effects", innerHTML: hLogoColor })), h("p", { key: 'f9295bc1f1b1de2c575d934588f95dee6fc81143', class: "f-ui-02" }, "Do not apply effects"))), h("span", { key: '1b8488e14728799e81205823d2a964cf8e6f9baf', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'd3be08fe47ce2fd20dee086553cd16950fb6f964', class: "example" }, h("div", { key: '76713df96cca42778f26b580e790dd3fcfb0abee', class: "bg-white p-16" }, h("div", { key: 'db1a9153dc37119255fa75ea0491daea09545d61', class: "logo rotated", innerHTML: hLogoColor })), h("p", { key: '95b0f06f728a846119bd6844207e93d068dabcc6', class: "f-ui-02" }, "Do not rotate the logo"))), h("span", { key: '92c5de7b7834ae8a14548712239ec22667d2fb5c', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: '64533bc4e04c802b4cedc6866c168eaac72c2550', class: "example" }, h("div", { key: 'd630811a1c2ae0a252a7e1bdf7383440e6aa417a', class: "bg-light p-16" }, h("div", { key: '525f7eaebf6e0a75b4ea91c2795f13a7837ebb54', class: "logo outlined", innerHTML: hLogoColor })), h("p", { key: '455855e6657b98d55b0f637548a88ed312130007', class: "f-ui-02" }, "Do not apply outlines"))), h("span", { key: 'a0c54e90591e693fb705d085c21b281e0468bc6e', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }), h("span", { key: 'af1f7db921096e0a20372ad028bf8eb6522ec736', class: `grid-col-span-12 md:grid-col-span-4 flex flex-col` }, h("div", { key: 'ba754fd4de6ea65d74f8215aee158c3657b42b23', class: "example" }, h("div", { key: '91b10cf3ad9ce224546f5c67ddd10a6009a6278d', class: "bg-accent p-16" }, h("div", { key: '1ea0aa874d42426a0e4762532a1b5aaa8c7fc671', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: '3219f17362a76b5694e44c34d9405c04e378d7fd', class: "f-ui-02" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones")))));
+        return (h("div", { key: '3abc03c4b2592a3138a60c80c390ff12ac79c92e', class: "container" }, h("ul", { key: 'be3a492fe05ef05b96bfc66833f7ac30d596cf7c', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '60f3aa76849d2793907b27ad6ed0584f27896dc1', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '7c0c0f86de1354651d42f11c865ea4e68d7fd5f6', class: "mx-auto no-other-bg-color logo", innerHTML: hLogoColor }), h("p", { key: '6c1e0b7bc964a2b062ddd539f740622ed5cf9ef8', class: "f-ui-02 text-center" }, "Do not use with backgrounds that make legibility difficult")), h("li", { key: '4dbf231814d5994d3075ca55b8a18006eb3b487e', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'ee1964d4fe1390daa4c3446370d6efd183ec80e2', class: "mx-auto no-other-color logo non-brand-color", innerHTML: hLogoColor }), h("p", { key: '509d867602f88bfd2ce5030e78005eb96993e22b', class: "f-ui-02 text-center" }, "Do not apply other colors")), h("li", { key: '40b486fdcf816d6cc3943b3444014a145798889f', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'cc64549a8aaf14eac2ed57543ca7bbca39fd7686', class: "mx-auto distorted logo", innerHTML: hLogoColor }), h("p", { key: 'e8fdc70352a2084d5bc7255059addb232f055f63', class: "f-ui-02 text-center" }, "Do not deform the logo")), h("li", { key: '375278f35b81a58f00f0a5702d156774b8d5f5a0', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4c4d4f2e3a8b4111b2f444a744f366c276f1869f', class: "mx-auto effects logo", innerHTML: hLogoColor }), h("p", { key: 'c3bf1ab4f4244a345ab5babbce4f4de78b696ac6', class: "f-ui-02 text-center" }, "Do not apply effects")), h("li", { key: '5fe3b28dba45127dc391d8101402834f09a61976', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'e4e36e3539813527c339e0e46a66661d8d9fd412', class: "mx-auto rotated logo", innerHTML: hLogoColor }), h("p", { key: '6d48a5cc5a0917047ba8377da80a24f42d3d16d1', class: "f-ui-02 text-center" }, "Do not rotate the logo")), h("li", { key: '9e55f909b1fc0fcbc9b3a1e6d57257f4972f7632', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'c1867f7232957dc5022936f2174039e4d02e6ad7', class: "mx-auto outlined logo", innerHTML: hLogoColor }), h("p", { key: 'd0769904f374ae87e5e283135854dbfb7b448663', class: "f-ui-02 text-center" }, "Do not apply outlines")), h("li", { key: '0955a1f0e63fdc260e990ce995f8d1e1546bfdf4', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4f9ad9e2a5d3ba7125284b1657db0cad282480ce', class: "mx-auto" }, h("div", { key: 'd1a2ef07750991919768bd699a8e8c2cd2801254', class: "bg-accent p-16" }, h("div", { key: '291732a9a1463be409989c10def40eafb4e89ee2', class: "text-inverse", innerHTML: hLogoColor })), h("p", { key: 'b9946ad16af5c474a06179be04966dfaba6c81c3', class: "f-ui-02 text-center" }, "Do not use the green background for the logo version of the logo with backgrounds with the same tones"))))));
     }
     static get is() { return "logo-wrong-usage"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/eds-docs-ui/{eds-svg-repository/eds-svg-repository.js → svg-repository/svg-repository.js}

@@ -3,7 +3,7 @@ import * as svgs from "../../../../../../../packages/svgs/src/index";
 /**
  * @internal
  */
-export class EdsSvgRepository {
+export class SvgRepository {
     // Convert SVG data to a format usable by `eds-table`
     getSvgData() {
         return Object.entries(svgs)
@@ -25,18 +25,18 @@ export class EdsSvgRepository {
             icon: { format: 'svg' },
             name: { format: 'bold' }
         };
-        return (h("div", { key: '8b10e6b478c9a2354f4cf418dacb33d5629585ac', class: "full-width" }, h("eds-table", { key: '04ea0a3bc8d72f42225290210aa0bda441e14b95', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
+        return (h("div", { key: 'f9b58e4ab1104753ef5e26fa70af162d9e5ddb1c', class: "full-width" }, h("eds-table", { key: 'fe21b6043cc0fc6f96cb8359f3e7ace75d3f4639', "table-data": JSON.stringify(svgData), config: JSON.stringify(tableConfig), "rows-per-page": 10, "search-enabled": true, "pagination-enabled": true })));
     }
-    static get is() { return "eds-svg-repository"; }
+    static get is() { return "svg-repository"; }
     static get encapsulation() { return "shadow"; }
     static get originalStyleUrls() {
         return {
-            "$": ["eds-svg-repository.css"]
+            "$": ["svg-repository.css"]
         };
     }
     static get styleUrls() {
         return {
-            "$": ["eds-svg-repository.css"]
+            "$": ["svg-repository.css"]
         };
     }
     static get elementRef() { return "hostEl"; }

package/dist/collection/shared-ui/eds-cookies-preference/eds-cookies-preference.js

@@ -25,7 +25,7 @@ export class EdsCookiesPreference {
         }
     }
     render() {
-        return (h("div", { key: '13e1244d4e151f091eaca1d22dbed009bcb97786' }, h("eds-link", { key: '4cfc54b447c93824f98da1f990a28fdb61018afe', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: 'fe3330180b8f3a5ff6b02156f5d76afb8cdf7edd' }, h("eds-link", { key: 'c5d63e486cb63bcb28b89babe606ac1eae525fe0', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get is() { return "eds-cookies-preference"; }
     static get originalStyleUrls() {

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

@@ -50,6 +50,14 @@ pre {
     letter-spacing: var(--f-body-01-letterSpacing);
 }
 
+.f-heading-01 {
+    font-family: var(--f-heading-01-fontFamily);
+    font-weight: var(--f-heading-01-fontWeight);
+    font-size: var(--f-heading-01-fontSize);
+    line-height: var(--f-heading-01-lineHeight);
+    letter-spacing: var(--f-heading-01-letterSpacing);
+}
+
 .f-heading-02 {
     font-family: var(--f-heading-02-fontFamily);
     font-weight: var(--f-heading-02-fontWeight);

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

@@ -47,7 +47,7 @@ export class EdsFeedback {
         this.selectedRating = e.detail;
     }
     render() {
-        return (h("div", { key: '3cdbbc2eb256ca4f2008f03e90ae9aacb6afbaac', class: "grid inline" }, h("p", { key: 'afb5aa7ab4a8c3117a4db0a5cbeca0195ccec3e8', class: "f-heading-03 my-4" }, this.label), h("p", { key: '9b1b83b31d05d10943bcf9e9a413686caa9e49a7', class: "f-body-02 text-light" }, this.description), h("eds-rating", { key: '4535006f72ee21d168d9b42da6a5c3528417d2f4', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'b90b59aaae1e2bc6071e1488f332d0c154bdb25a', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '5fbf2af8386c318134b64c1323553bc00ee2fe2c', class: "grid inline" }, h("h1", { key: 'f5ec1e3cbbfa9c1d549a69c76e01609253c6dfea', class: "f-heading-01 my-4" }, this.label), h("p", { key: '60348466e10a5295fdb861f512c1037cdf8fbf27', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'ed559e7844c20081e82ccc0cddd4a34691a7ad1d', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'b4ab49d3c936649c75714ef2cd9fc09f9a213437', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }

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

@@ -41,9 +41,9 @@ export class EdsFooter {
      * @returns {JSX.Element} The rendered JSX for the footer component.
      */
     render() {
-        return (h("footer", { key: '97ad163716ff16e519a37a9d69895ec1813a1d28', class: `pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '170923d5155be90a814adaf5ec503d6f3c097fba', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '21d0e035b5d3163530af6dcd23b908689696e8dc', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '4a1926948db9d4717396a07fef924a10c3f28480', class: "flex items-center gap-x-12" }, h("a", { key: '91f122ffc396a19233d8b1b443db83e7eb272afc', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: 'a159fed1d2f11be99143d1858cc8b40687d121e0', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'c1d69e25e663e8a25ef9f333bcd555863a2afe40' }, h("div", { key: 'a7d7895bfc18565aa8b98c751f99365de5e33532', class: "f-ui-04 text-light" }, h("p", { key: 'bb7a341fb7471e0cdcf3cd3bbe2bbb1f42296535' }, this.fundedBy), h("div", { key: '2abd03a76d5c89f004e8da425f03e9152e4f2290', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '21e042b3b5a7b09c1ad92daf7ce191714a157892', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: "Cookies preferences", intent: "weak", "extra-class": "f-ui-04 ml-4 cursor-pointer effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline", onClick: () => {
+        return (h("footer", { key: '63daf387ac4ae4d3aea75345d1599b0cce0aa28e', class: `pb-banner` }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: '31a6ca4ea417c61d0e927092cf6dffb18bfd9547', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '91ff15aa4b47ae73642d0c36e569fd598a9f2ac9', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '57b332abdbc53662253f00add0491779c7421e5e', class: "flex items-center gap-x-12" }, h("a", { key: 'c9b659030dfeb3d1485219e1882a9ff1dde4cd42', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, h("eds-img", { key: 'cbd71badd41f5c1c1220c5d0042651eda2a73e51', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'a012c699d5088292d171432b074eb61dd160e22f' }, h("div", { key: '1e4ab16ccb53b12468b3d53f30d671a35cc625ce', class: "f-ui-04 text-light" }, h("p", { key: 'f31aadca310d2a24153c135f1f49f96dbe69c768' }, this.fundedBy), h("div", { key: 'cb885e8666536e4e940309cc1fb0b79725ec737e', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '328fc8376cb062846dc665278a6e00c0c19cc7f4', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved), this.enableCookiesSettings ? (h("eds-link", { label: "Cookies preferences", intent: "weak", "extra-class": "f-ui-04 ml-4 cursor-pointer effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '9bce0373f2b427b1244916c88a2cabefe41e7b14', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": "Back to Top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
+            } })) : null))), h("div", { key: '4965f9293058a1d750f5aa6598e829152b37f34d', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("eds-button", { id: "backToTop", "aria-hidden": "true", "aria-label": "Back to Top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, class: "transition-all transition duration-75 opacity-0 " })) : null)))));
     }
     static get is() { return "eds-footer"; }
     static get encapsulation() { return "shadow"; }

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

@@ -45,8 +45,7 @@ export class EdsForm {
         }
     }
     get shouldFormProcessInitData() {
-        var _a;
-        return !!((_a = this.initData) === null || _a === void 0 ? void 0 : _a._id);
+        return !!this.initData;
     }
     parseFields(newValue) {
         this.parsedFields = parseData(newValue);
@@ -136,22 +135,57 @@ export class EdsForm {
         });
         return formData;
     }
+    makeFormData() {
+        const formData = new FormData();
+        // Add the form name
+        formData.append('form_name', this.name);
+        // Add the form URL
+        if (this.setFormUrl && typeof window !== 'undefined') {
+            formData.set('form_url', window.location.href);
+        }
+        Object.keys(this.values).forEach((key) => {
+            // Append each key-value pair to the FormData object.
+            formData.append(key, this.values[key]);
+        });
+        return formData;
+    }
     handleChange(e, field) {
         const target = e.target;
-        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
-        // Emit an input event with message and current form values
+        if (target.type === 'checkbox') {
+            // Get the current comma separated string or default to an empty string.
+            const currentStr = this.values[field.name] || '';
+            // Convert the string into an array. If the string is empty, we get an empty array.
+            let valuesArray = currentStr ? currentStr.split(',') : [];
+            if (target.checked) {
+                // Only add if it's not already in the array.
+                if (!valuesArray.includes(target.value)) {
+                    valuesArray.push(target.value);
+                }
+            }
+            else {
+                // Remove the value from the array if the checkbox is unchecked.
+                valuesArray = valuesArray.filter((item) => item !== target.value);
+            }
+            // Reassemble the comma separated string and update your form values.
+            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: valuesArray.join(',') });
+        }
+        else {
+            // Handle non-checkbox input normally.
+            this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        }
+        // Emit the updated form state.
         this.form.emit({
             event: 'change',
             field: field.name,
-            value: target.value,
+            value: target.type === 'checkbox' ? this.values[field.name] : target.value,
             message: `${field.name} updated`,
-            data: this.getFormData()
+            data: this.makeFormData()
         });
     }
     handleInput(e, field) {
         const target = e.target;
         // Update the field's value in state.
-        this.values = Object.assign(Object.assign({}, this.values), { [field.name]: target.value });
+        //this.values = { ...this.values, [field.name]: target.value };
         // Create a copy of the current errors.
         const newErrors = Object.assign({}, this.errors);
         // Use the utility to validate the field.
@@ -174,12 +208,13 @@ export class EdsForm {
         this.isSubmitting = true;
         this.validateForm();
         if (this.hasError) {
+            this.isSubmitting = false;
             this.form.emit({
                 event: 'submit',
                 validated: false,
                 success: false,
                 message: this.errorMessage,
-                data: this.getFormData()
+                data: this.makeFormData()
             }); // Emit form status submit false validation error
             sendAnalytics({
                 category: 'ui-component',
@@ -221,13 +256,13 @@ export class EdsForm {
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
-        return (h("form", { key: '695438941134ef6a3c43b70008b1904b03700743', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '870ff661aded11c890e4f144a970c5ab5120a61f' }, h("slot", { key: 'b1070ccc8984afe457d28a6bbf52255dcbbc9b33' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
+        return (h("form", { key: '2f5651942cd01c0574b5a5f08483480c285472cb', ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '0dab281f049f6afb8cfbad146076d7f3015b8c17' }, h("slot", { key: '661b26b05023480447f87aa03e2f21b814355d00' }), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), otherFields.map((field, index) => {
             var _a, _b;
             if (!this.isFieldVisible(field)) {
                 return null;
             }
-            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
-        })), this.formBtn && (h("div", { key: '80e0af076f3c57124f8a1f6718a0d45cfd45c0cd', class: "mt-20" }, h("eds-button", { key: '51dd28fb2a6610983e50ddb60409b3acf18dba1b', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            return (h("eds-input-field", { key: index, name: field.name, id: `${this.name}_${field.name}`, label: field.label, value: this.values[field.name] || null, type: field.type, icon: field.icon || null, required: field.required, maxLength: field.maxlength, hint: field.hint, link: field.link, message: field.message, error: ((_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.length) > 0, errorMessage: (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br />'), onInput: (e) => this.handleInput(e, field), onChange: (e) => this.handleChange(e, field), class: index > 0 ? 'mt-20' : '', options: field.options }));
+        })), this.formBtn && (h("div", { key: '3f250271116962a060359cf462b053234f059bd1', class: "mt-20" }, h("eds-button", { key: 'b234af290bcae3205c874edb4796e484320a5475', intent: "primary", label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }

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-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: '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: '213e6e637f2097165429ed584fb24b0251826627' }, h("p", { key: '060717f30e5ecb2e8128933b761b058eafc7ce6a', class: "f-ui-02" }, this.title), h("ul", { key: '7d8cbd7a92d8785058be18899e42da7495eedfc5', 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-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",