@ebrains/components 3.0.0 → 3.1.0

package/dist/components/eds-dropdown2.js

@@ -22,6 +22,13 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
             if (this.isOpen) {
                 // refresh focusables each open in case slot changed
                 this.focusableItems = Array.from(((_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, [role="menuitem"]')) || []);
+                // The panel declares role="menu"; slotted links/buttons need
+                // role="menuitem" or screen readers announce an empty menu.
+                this.focusableItems.forEach((item) => {
+                    if (!item.hasAttribute('role')) {
+                        item.setAttribute('role', 'menuitem');
+                    }
+                });
                 this.focusIndex = this.focusableItems.length ? 0 : -1;
                 this.focusItem();
             }
@@ -60,7 +67,6 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
         const path = (e.composedPath && e.composedPath()) || [];
         if (!path.includes(this.host)) {
             this.closeDropdown();
-            this.dropdown.emit({ expanded: false });
         }
     }
     /**
@@ -68,12 +74,22 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
      * @param {KeyboardEvent} event - The keyboard event.
      */
     handleKeyDown(event) {
+        var _a;
         if (this.isOpen) {
             const key = event.key;
             switch (key) {
                 case 'Tab':
+                    // ARIA menu pattern: Tab does not walk the items — it closes
+                    // the menu and lets focus continue to the next element on the
+                    // page (no preventDefault on purpose).
                     this.closeDropdown();
-                    this.dropdown.emit({ expanded: false });
+                    break;
+                case 'Escape':
+                    // Close and hand focus back to the trigger so keyboard users
+                    // can back out without committing to a Tab.
+                    event.preventDefault();
+                    this.closeDropdown();
+                    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -85,6 +101,16 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
                     this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length;
                     this.focusItem();
                     break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusIndex = this.focusableItems.length ? 0 : -1;
+                    this.focusItem();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusIndex = this.focusableItems.length - 1;
+                    this.focusItem();
+                    break;
             }
         }
     }
@@ -152,13 +178,13 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: '52f349afae529afc12461642abf17fcf4870ca6f', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ed1f3366306f7e3d708473e14fc8de5723dba03f', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), h("nav", { key: 'fb9a559a97ad866b62d4cb2a0f7f828548e24c75', ref: (el) => (this.panelEl = el), role: "menu", class: {
+        return (h("div", { key: '1ce4926a15ac67d653ef03de877e64be83f61b4e', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '8b45fc57c018dd620701b2b9db5403c30f88a6ed', ref: (el) => (this.buttonEl = el), label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), h("nav", { key: '35854d55ea595e35513348bf36145794b2c57007', ref: (el) => (this.panelEl = el), role: "menu", class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
                 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '6205de74b039cb784bf9b104edfd6f7a03cc5ed1' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'd6b153bb5968fa958be4d96d60cce774a9a0713c' }))));
     }
     get host() { return this; }
     static get style() { return EdsDropdownStyle0; }

package/dist/components/eds-feedback.js

@@ -63,7 +63,7 @@ const EdsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class EdsFeedback extends
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (h("div", { key: '7d01b8aef2854cfdb739553e7f43ed9516199e1e', class: "grid inline" }, h(HeadingTag, { key: 'a0c4a4f93598b955e90416d50260aaa3f644615a', class: headingClass }, this.label), h("p", { key: 'acb2db8fc209faf2d39622e2e858fa1e7403e1b4', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'b0db57c9e3539a5edfecf67cc3a12dd87d74fad9', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '8d6bf62a18fdb12dddba932be9a5115396fdfd6f', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '5eddbd664389530e209698e5e435c853c8f50b9f', class: "grid inline" }, h(HeadingTag, { key: '22d1d4a44a116f78bbfa66946d8b7a9f95779524', class: headingClass }, this.label), h("p", { key: 'd3e5abefa5d0e1e32281b5088251fb9c304b8d2a', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '65f1e772ac885d20f46e147aedeb55ab2ec871fe', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'f660ceb9889d560ec1687c6f17bdbbe6a89f90ee', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     get el() { return this; }
     static get style() { return EdsFeedbackStyle0; }

package/dist/components/eds-footer2.js

@@ -4,41 +4,113 @@ import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 import { d as defineCustomElement$1 } from './eds-social-networks2.js';
 
-const edsFooterCss = "p{margin:0}footer{position:relative}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-darker{background-color:var(--grey-light)}.bg-strongest{background-color:var(--brand-black)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-inverse-softer{border-color:rgba(255, 255, 255, .15)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus:focus-visible{outline-style:solid}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.h-auto{height:auto}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-light)}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.mt-4{margin-top:0.25rem}.mr-4{margin-right:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}.opacity-0{opacity:0}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-75{transition-duration:75ms}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}";
+const edsFooterCss = ":host{display:block}p{margin:0}ul{list-style:none;padding:0;margin:0}.eds-footer-root{position:relative;padding:4rem 4rem 2rem;border-top:1px solid rgba(0, 0, 0, 0.06);font-family:var(--f-ui-02-fontFamily)}.eds-footer-root.theme-inverse{background-color:var(--brand-black, #000000);color:var(--grey-light, rgba(255, 255, 255, 0.7));border-top-color:rgba(255, 255, 255, 0.06)}.eds-footer-root.theme-default{background-color:var(--white, #ffffff);color:var(--grey-dark, #4b5563);border-top-color:rgba(0, 0, 0, 0.06)}.footer-container{max-width:1400px;margin:0 auto}.footer-grid{display:grid;grid-template-columns:2fr repeat(3, 1fr);gap:4rem;margin-bottom:4rem}.footer-brand-row{display:flex;align-items:center;gap:1rem}.footer-flag-link{display:inline-block;width:54px;flex-shrink:0;border-radius:4px}.footer-flag-link:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px}.footer-flag-svg{height:auto;width:100%;display:block}.footer-funded{font-size:0.875rem;line-height:1.6;max-width:300px}.theme-inverse .footer-funded{color:var(--grey-dark, rgba(255, 255, 255, 0.55))}.theme-default .footer-funded{color:var(--grey-dark, #4b5563)}.footer-copyright{font-size:0.875rem;margin-top:0.75rem}.theme-inverse .footer-copyright{color:var(--grey-dark, rgba(255, 255, 255, 0.55))}.theme-default .footer-copyright{color:var(--grey-dark, #4b5563)}.footer-column-heading{font-size:0.8125rem;font-weight:500;margin:0 0 1.5rem 0}.theme-inverse .footer-column-heading{color:var(--white, #ffffff)}.theme-default .footer-column-heading{color:var(--brand-black, #111827)}.footer-column-list li{margin-bottom:0.75rem}.footer-column-list li:last-child{margin-bottom:0}.footer-link,.footer-text-item{font-size:0.875rem;text-decoration:none;transition:color 0.3s ease}.footer-link{cursor:pointer}.theme-inverse .footer-link,.theme-inverse .footer-text-item{color:var(--grey-dark, rgba(255, 255, 255, 0.55))}.theme-default .footer-link,.theme-default .footer-text-item{color:var(--grey-dark, #4b5563)}.footer-link:hover{color:var(--brand-green)}.footer-link:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px;border-radius:2px}.footer-social{padding-bottom:2rem;margin-bottom:2rem}.theme-inverse .footer-social{border-bottom:1px solid rgba(255, 255, 255, 0.06)}.theme-default .footer-social{border-bottom:1px solid rgba(0, 0, 0, 0.06)}.footer-back-to-top{position:absolute;top:1.5rem;right:2rem;opacity:0;transition:opacity 75ms cubic-bezier(0.4, 0, 0.2, 1)}@media (max-width: 1200px){.footer-grid{grid-template-columns:repeat(2, 1fr);gap:3rem}}@media (max-width: 768px){.eds-footer-root{padding:3rem 2rem 2rem}.footer-grid{grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}.footer-funded{max-width:none}}";
 const EdsFooterStyle0 = edsFooterCss;
 
+/**
+ * EBRAINS-wide default link columns. Used when a consumer doesn't pass
+ * the `columns` prop. URLs are absolute so the same footer renders
+ * correctly from any app's domain (handbook.ebrains.eu, forms.ebrains.eu,
+ * design.ebrains.eu, …) — the previous eds-docs design used relative
+ * paths which only worked from design.ebrains.eu itself.
+ *
+ * If EBRAINS adds / renames a canonical resource, change it here once
+ * and every consumer's footer updates on the next component release.
+ */
+const DEFAULT_COLUMNS = [
+    {
+        heading: 'Resources',
+        links: [
+            { label: 'Documentation', href: 'https://design.ebrains.eu/get-started/', external: true },
+            { label: 'Components', href: 'https://design.ebrains.eu/ui-components/', external: true },
+            { label: 'Foundations', href: 'https://design.ebrains.eu/foundations/', external: true },
+            { label: 'Analytics', href: 'https://design.ebrains.eu/analytics/', external: true },
+        ],
+    },
+    {
+        heading: 'Community',
+        links: [
+            { label: 'GitLab', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/', external: true },
+            { label: 'Storybook', href: 'https://storybook.design.ebrains.eu', external: true },
+            { label: 'Report Issues', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/-/issues', external: true },
+            { label: 'Contribute', href: 'https://design.ebrains.eu/get-started/contributing/', external: true },
+        ],
+    },
+    {
+        heading: 'Legal',
+        links: [
+            { label: 'MIT License' },
+            { label: 'Cookie Preferences', action: 'cookies' },
+        ],
+    },
+];
 const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLElement {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
         this.cookies = createEvent(this, "cookies", 7);
-        /**
-         * Scrolls the page smoothly back to the top.
-         * Called when the "Back to top" button is clicked.
-         * @private
-         */
         this.backToTop = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
+        this.emitCookies = () => {
+            this.cookies.emit('toggle');
+        };
         this.social = false;
-        this.variant = 'default';
+        this.variant = 'inverse';
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
-        this.cookiesPreferences = 'Cookies preferences';
+        this.cookiesPreferences = 'Cookie Preferences';
         this.enableCookiesSettings = false;
         this.backToTopAriaLabel = 'Back to Top';
-        this.showMatomoNotice = false;
+        this.columns = undefined;
+        this.resolvedColumns = DEFAULT_COLUMNS;
+    }
+    componentWillLoad() {
+        this.resolvedColumns = this.parseColumns(this.columns);
+    }
+    onColumnsChange(value) {
+        this.resolvedColumns = this.parseColumns(value);
+    }
+    /**
+     * Resolve the `columns` prop to a usable array.
+     *   - undefined / null   → defaults
+     *   - JSON-parseable str → parsed array
+     *   - already an array   → used as-is
+     *   - anything else (malformed JSON, wrong shape) → defaults + console warning
+     *
+     * Defensive parsing so a typo in a Hugo template's attribute doesn't
+     * render an empty footer in production. Failure logs a warning but
+     * keeps the footer working with sensible defaults.
+     */
+    parseColumns(value) {
+        if (value === undefined || value === null || value === '')
+            return DEFAULT_COLUMNS;
+        if (Array.isArray(value))
+            return value;
+        if (typeof value === 'string') {
+            try {
+                const parsed = JSON.parse(value);
+                if (Array.isArray(parsed))
+                    return parsed;
+                console.warn('eds-footer: `columns` JSON parsed but is not an array; using defaults');
+                return DEFAULT_COLUMNS;
+            }
+            catch (e) {
+                console.warn('eds-footer: failed to parse `columns` JSON, using defaults', e);
+                return DEFAULT_COLUMNS;
+            }
+        }
+        return DEFAULT_COLUMNS;
     }
     componentDidLoad() {
         var _a;
         this.backBtn = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#toTop');
     }
     handleScroll() {
-        if (!this.backBtn) {
+        if (!this.backBtn)
             return;
-        }
         const shouldShow = window.scrollY > 100 && document.body.scrollHeight > window.innerHeight;
         this.backBtn.style.opacity = shouldShow ? '1' : '0';
         this.backBtn.style.pointerEvents = shouldShow ? 'auto' : 'none';
@@ -48,38 +120,55 @@ const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLE
             btn.setAttribute('tabindex', shouldShow ? '0' : '-1');
         }
     }
-    toggleCookiesConsent() {
-        this.cookies.emit('toggle');
-    }
     /**
-     * Renders the footer component with optional sections and elements,
-     * including social network links, a Horizon Europe funding acknowledgment, and
-     * legal links such as "Cookies Preferences" and copyright information.
+     * Render one link inside a column.
+     *   - `action: 'cookies'` → button-like anchor that fires the cookies event
+     *   - `href` present      → real anchor (target=_blank when `external`)
+     *   - neither             → plain text span (e.g. "MIT License")
      */
+    renderLink(link, index) {
+        if (link.action === 'cookies') {
+            if (!this.enableCookiesSettings)
+                return null;
+            return (h("li", { key: `cookies-${index}` }, h("a", { href: "javascript:void(0)", class: "footer-link", onClick: this.emitCookies, role: "button" }, this.cookiesPreferences || link.label)));
+        }
+        if (link.href) {
+            const external = link.external === true;
+            return (h("li", { key: `${link.label}-${index}` }, h("a", Object.assign({ class: "footer-link", href: link.href }, (external ? { target: '_blank', rel: 'noopener noreferrer' } : {})), link.label)));
+        }
+        return (h("li", { key: `text-${index}` }, h("span", { class: "footer-text-item" }, link.label)));
+    }
     render() {
         const year = new Date().getFullYear();
         const rights = this.rightsReserved || `${year} EBRAINS. All rights reserved.`;
         const isInverse = this.variant === 'inverse';
-        const footerClasses = isInverse ? 'bg-strongest text-inverse' : '';
-        const borderClasses = isInverse ? 'border-inverse-softer' : 'border-softest';
-        const textClasses = isInverse ? 'text-inverse' : 'text-default';
-        return (h("footer", { key: 'ffe47afda9981e367f24d2525a5b21e96f4f3d10', class: footerClasses }, this.social ? (h("div", { class: `${borderClasses} 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", variant: this.variant })))))) : null, h("div", { key: '2e884f06ca55ea5837aabfd7d726a79b72365ab3', class: `${borderClasses} ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'f601602dd39c564ce77d978325cbacaa752bd5f0', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '94d6bf12bca8a37560124de2a9114a4566494883', class: "flex items-center gap-x-12" }, h("a", { key: '8c9bf0a41cce7e043311b39c6418d2dc3541694f', 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-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("svg", { key: '5d0c96911aa0069dd7c0ef6a5690d5ac59dbc737', class: "h-auto w-full", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bab3fd3f37857e99c2a525b7a9553d4c706d247c', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: 'e77d6f1fc21f36083196adcb4f6b7a3e70105b0f', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" })))), h("div", { key: '3057a627d8cc6e524f6381f21bb34b549d45021f' }, h("div", { key: 'd6397eaa434f15d415bff0c5171b4f71295dabc3', class: `f-ui-02 ${textClasses}` }, h("p", { key: 'cc9e370cd5b4238fcd76bc8f1f84c54af2873bab' }, this.fundedBy), h("div", { key: '9af9a16cf3cc6fc4223c1b5eac13f96894b92962', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'e86c83c7504f60831dc9d4239b3e2b551b2765b6', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
-                this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: 'd2dcb8a3a99c5aa368d6d710e125e3a9f8fefd25', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+        // Class hooks driven by variant — the CSS file styles each
+        // selector independently rather than relying on prop-based
+        // inline styles, so theme tokens stay overridable from outside
+        // via the host's CSS custom properties.
+        const rootClasses = ['eds-footer-root', isInverse ? 'theme-inverse' : 'theme-default']
+            .join(' ');
+        return (h("footer", { key: 'b09063376e3bd78845302473a96884bd473cea09', class: rootClasses }, this.social ? (h("div", { class: "footer-social" }, h("div", { class: "footer-container" }, h("eds-social-networks", { variant: this.variant })))) : null, h("div", { key: '3aeb8f496bb4c3c73da907ba9b9fbb72841be213', class: "footer-container" }, h("div", { key: 'e7e33ce7dee8079a9aff17d45963dfaff9576121', class: "footer-grid" }, h("div", { key: 'e6fc738e086774e114c5ceef1b82fea2e2840990', class: "footer-brand" }, h("div", { key: '96f7030269174c122ffe0117897a79b00020dd29', class: "footer-brand-row" }, h("a", { key: '5967c33efff435ceee2a45c21cae67749b91b9ba', target: "_blank", rel: "noopener noreferrer", class: "footer-flag-link", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("svg", { key: '3de7debe64d431152e47a4daefb7c9facf7bf951', class: "footer-flag-svg", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '50e3f0c5ae41e3e7cc5689ddf01a8944a6c5d2eb', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: '2c0f61e6de734d7214accd10cefd3a39e31f36a1', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" }))), h("p", { key: '9ff8e10db0e213754bfc73bcce1b3dd36bc62e30', class: "footer-funded" }, this.fundedBy)), h("p", { key: 'a24c4fbfe48c4c3c8d076f24da9c84b739a982d8', class: "footer-copyright" }, "\u00A9 ", rights)), this.resolvedColumns.map((col, ci) => (h("div", { class: "footer-column", key: `col-${ci}` }, h("h4", { class: "footer-column-heading" }, col.heading), h("ul", { class: "footer-column-list" }, (col.links || []).map((link, li) => this.renderLink(link, li)))))))), this.enableScrollTop ? (h("div", { id: "toTop", class: "footer-back-to-top" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null));
     }
     get el() { return this; }
+    static get watchers() { return {
+        "columns": ["onColumnsChange"]
+    }; }
     static get style() { return EdsFooterStyle0; }
 }, [1, "eds-footer", {
         "social": [4],
-        "variant": [1],
+        "variant": [513],
         "enableScrollTop": [4, "enable-scroll-top"],
         "fundedBy": [1, "funded-by"],
         "rightsReserved": [1, "rights-reserved"],
         "cookiesPreferences": [1, "cookies-preferences"],
         "enableCookiesSettings": [4, "enable-cookies-settings"],
         "backToTopAriaLabel": [1, "back-to-top-aria-label"],
-        "showMatomoNotice": [32]
-    }, [[9, "scroll", "handleScroll"]]]);
+        "columns": [1],
+        "resolvedColumns": [32]
+    }, [[9, "scroll", "handleScroll"]], {
+        "columns": ["onColumnsChange"]
+    }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/eds-form.js

@@ -1,21 +1,21 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 import { p as parseData } from './sharedUtils.js';
+import { s as safeInlineFormat, d as defineCustomElement$a } from './eds-input-footer2.js';
 import { d as defineCustomElement$g } from './eds-button2.js';
 import { d as defineCustomElement$f } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$e } from './eds-input2.js';
 import { d as defineCustomElement$d } from './eds-input-dropzone2.js';
 import { d as defineCustomElement$c } from './eds-input-field2.js';
 import { d as defineCustomElement$b } from './eds-input-file2.js';
-import { d as defineCustomElement$a } from './eds-input-footer2.js';
 import { d as defineCustomElement$9 } from './eds-input-label2.js';
 import { d as defineCustomElement$8 } from './eds-input-range2.js';
-import { d as defineCustomElement$7 } from './eds-input-search2.js';
-import { d as defineCustomElement$6 } from './eds-input-select2.js';
-import { d as defineCustomElement$5 } from './eds-kg-web-services-select2.js';
-import { d as defineCustomElement$4 } from './eds-link2.js';
-import { d as defineCustomElement$3 } from './eds-nps2.js';
-import { d as defineCustomElement$2 } from './eds-rating2.js';
+import { d as defineCustomElement$7 } from './eds-input-select2.js';
+import { d as defineCustomElement$6 } from './eds-kg-web-services-select2.js';
+import { d as defineCustomElement$5 } from './eds-link2.js';
+import { d as defineCustomElement$4 } from './eds-nps2.js';
+import { d as defineCustomElement$3 } from './eds-rating2.js';
+import { d as defineCustomElement$2 } from './eds-search-select2.js';
 
 // utils/validators.ts
 function validateField(name, value, type, required, maxLength, min, max) {
@@ -146,7 +146,8 @@ isFieldVisible) {
             delete errors[field.name];
             return;
         }
-        if (field.type !== 'hidden') {
+        // 'content' is a presentational text block — no input, never validated.
+        if (field.type !== 'hidden' && field.type !== 'content') {
             if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
                 // Single checkbox or radio without multiple options
                 const fieldErrors = validateSingleBox(field.name, field.required, formEl);
@@ -247,7 +248,7 @@ function getFormInitData({ initData, parsedFields, currentValues
     return { updatedValues };
 }
 
-const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:600;font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:600;font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing);overflow:visible}.text-light{color:var(--grey-dark)}.rounded-xs{border-radius:4px}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.border-t-2{border-top-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pt-32{padding-top:2rem}.pt-64{padding-top:4rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-20{row-gap:1.25rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.form-brand{box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border-left:4px solid var(--brand-green);animation:fadeInUp 0.6s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-4{padding-bottom:0.25rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.w-full{width:100%}.justify-between{justify-content:space-between}.items-center{align-items:center}@media (min-width: 750px){.md\\:flex-row-reverse{flex-direction:row-reverse}.md\\:justify-between{justify-content:space-between}.md\\:gap-y-0{row-gap:0}.md\\:w-auto{width:auto}.md\\:mt-64{margin-top:4rem}.md\\:pt-64{padding-top:4rem}}";
+const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:600;font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:600;font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing);overflow:visible}.text-light{color:var(--grey-dark)}.rounded-xs{border-radius:4px}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.border-t-2{border-top-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pt-32{padding-top:2rem}.pt-64{padding-top:4rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-20{row-gap:1.25rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.form-brand{box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border-left:4px solid var(--brand-green);animation:fadeInUp 0.6s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-4{padding-bottom:0.25rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.w-full{width:100%}.justify-between{justify-content:space-between}.items-center{align-items:center}@media (min-width: 750px){.md\\:flex-row-reverse{flex-direction:row-reverse}.md\\:justify-between{justify-content:space-between}.md\\:gap-y-0{row-gap:0}.md\\:w-auto{width:auto}.md\\:mt-64{margin-top:4rem}.md\\:pt-64{padding-top:4rem}}.eds-desc-link{position:relative;display:inline-block;color:var(--brand-black);text-decoration:none}.eds-desc-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--brand-green);transition:width 0.3s ease}.eds-desc-link:hover::after{width:100%}.eds-desc-link:focus-visible::after{width:0}.eds-content-block{line-height:1.5;color:var(--brand-black, #07140d)}.eds-content-block strong{font-weight:600}.eds-content-block .eds-desc-link{font-weight:600}";
 const EdsFormStyle0 = edsFormCss;
 
 const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLElement {
@@ -437,7 +438,20 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         if (this.setFormUrl && typeof window !== 'undefined') {
             formData.set('form_url', window.location.href);
         }
+        // Group fields by name so we can drop values for fields hidden by a condition.
+        // A name may be reused across mutually-exclusive conditional variants (e.g. a
+        // `web_app_url` shown for service_type=web_app AND another for =platform), so a
+        // value is dropped ONLY when EVERY field with that name is hidden — if any
+        // variant is visible, its value is kept.
+        const fieldsByName = {};
+        this.parsedFields.forEach((f) => {
+            (fieldsByName[f.name] = fieldsByName[f.name] || []).push(f);
+        });
         Object.keys(this.values).forEach((key) => {
+            const fields = fieldsByName[key];
+            if (fields && fields.length && !fields.some((f) => this.isFieldVisible(f))) {
+                return; // all fields with this name are conditionally hidden — skip
+            }
             const value = this.values[key];
             // Handle File arrays (from file inputs)
             if (Array.isArray(value)) {
@@ -732,29 +746,53 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         return map;
     }
     renderField(field) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!this.isFieldVisible(field)) {
             return null;
         }
+        // 0) Presentational "Text Block" — static formatted text, NOT an input.
+        // It has no value, is never added to the submission (makeFormData only
+        // iterates this.values) and is never validated (see formValidators). The
+        // text runs through formatDescription, which escapes HTML first, so author
+        // content can never inject markup — only the **bold**/[link]/newline subset.
+        if (field.type === 'content') {
+            const raw = ((_b = (_a = field.content) !== null && _a !== void 0 ? _a : field.label) !== null && _b !== void 0 ? _b : '');
+            return (h("div", { class: "eds-content-block f-body-02 text-default", key: field.name, innerHTML: this.formatDescription(raw) }));
+        }
         // 1) Handle rating
         if (field.type === 'rating') {
             // pull the current value (or zero)
             const val = this.values[field.name] || 0;
-            return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
+            return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
             // pull the current value (or null)
             const val = this.values[field.name] !== undefined ? this.values[field.name] : null;
-            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.join('<br/>'), error: !!this.errors[field.name] }))));
+        }
+        else if (field.type === 'search-select') {
+            return (h("eds-search-select", { key: field.name, name: field.name, label: field.label, source: field.source, options: field.options, multiple: !!field.multiple, "api-base": field.apiBase || '/api/v1', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_e = this.errors[field.name]) === null || _e === void 0 ? void 0 : _e.join('<br/>'), value: this.values[field.name], onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
         }
         else if (field.type === 'kg-web-service') {
-            return (h("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), value: this.values[field.name], size: field.size || 500, onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
+            return (h("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_f = this.errors[field.name]) === null || _f === void 0 ? void 0 : _f.join('<br/>'), value: this.values[field.name], size: field.size || 500, onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
         }
-        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
+        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_g = this.errors[field.name]) === null || _g === void 0 ? void 0 : _g.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
     }
+    /**
+     * Render the form/step description with a small, safe subset of inline
+     * formatting so authors can add links and emphasis:
+     *   **bold**            → <strong>
+     *   [label](url)        → <a> (only http/https/mailto; others render as text)
+     *   blank line / \n     → paragraph / line break
+     * HTML is escaped FIRST, so author text can never inject markup — only the
+     * whitelisted patterns above produce tags.
+     */
+    formatDescription(text) {
+        return safeInlineFormat(text);
+    }
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
@@ -770,9 +808,9 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         else if (this.formStyle === 'brand') {
             styleClasses = 'bg-inverse form-brand relative rounded-xs p-32';
         }
-        return (h("form", { key: '5e58460e52950974cdf11001123f9ffb23dc659e', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'ff3a33e3a8d311c86712daa68c80aac767d82a9b', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (h("span", { key: 'b1f363c03074f944a8f60387a40cef6fa791b188', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && h("span", { key: '7a9b5ea5451cf59ac47ec81dd1a44c7c9e6326a3', class: "f-body-02 text-light" }, this.description), h("slot", { key: '1e50a245fa37b73149a22308fda4039051d4639c' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (h("form", { key: '5717a276eb4bcb1b40bb6c3a3d68e2372ccf0b37', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '8e9fec59b6cafccabbb67381a12541f12201cc48', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (h("span", { key: 'f47c68db954de63773257f9c898141be27278a00', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && h("span", { key: '4287bb5f9c31cf5d3953a032de4a8c269e1feb7e', class: "f-body-02 text-light", innerHTML: this.formatDescription(this.description) }), h("slot", { key: 'e9e52696eab6477354ac5ee6cbe08399483b1b37' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '6cd08f342c0f9004d10628827720cb641339fcd5', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { key: 'e8d37bedbd49c9fc94cbd2e2a887448f3764b8f9', class: "mt-32 md:mt-64 flex flex-col items-center md:flex-row-reverse md:justify-between gap-y-16 md:gap-y-0" }, this.formBtn && (h("eds-button", { key: 'ec878c5edaa87cf9bff0424b92e5c82605856e67', intent: this.buttonIntent, pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: 'arrow-right', size: "large", onClick: () => this.handleSubmit() })), this.clearBtn && (h("eds-button", { key: '1158dc2af47f9f523ccd2ee1435a4147fc0a646c', intent: "neutral", pill: true, size: "large", label: this.clearBtnLabel, disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: (e) => this.handleClear(e) }))))));
+            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '22d248217ea85d68e2be652ddcbfd13ed4775934', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { key: '101f9e275d68f59b762938ff3f7d7102660b80f0', class: "mt-32 md:mt-64 flex flex-col items-center md:flex-row-reverse md:justify-between gap-y-16 md:gap-y-0" }, this.formBtn && (h("eds-button", { key: '02d427d951c715634605b6977f61cee67abaa8b0', intent: this.buttonIntent, pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: 'arrow-right', size: "large", onClick: () => this.handleSubmit() })), this.clearBtn && (h("eds-button", { key: 'abf330715df3acf2a4bdc8d4f322fc13c70c267f', intent: "neutral", pill: true, size: "large", label: this.clearBtnLabel, disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: (e) => this.handleClear(e) }))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -811,7 +849,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-form", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-kg-web-services-select", "eds-link", "eds-nps", "eds-rating"];
+    const components = ["eds-form", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-select", "eds-kg-web-services-select", "eds-link", "eds-nps", "eds-rating", "eds-search-select"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-form":
             if (!customElements.get(tagName)) {
@@ -863,32 +901,32 @@ function defineCustomElement$1() {
                 defineCustomElement$8();
             }
             break;
-        case "eds-input-search":
+        case "eds-input-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "eds-input-select":
+        case "eds-kg-web-services-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "eds-kg-web-services-select":
+        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-link":
+        case "eds-nps":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-nps":
+        case "eds-rating":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "eds-rating":
+        case "eds-search-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/eds-frame.js

@@ -76,7 +76,7 @@ const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLE
         }
     }
     render() {
-        return (h("div", { key: '0fa74cf426f9d934a035b5e3f6c9e5722c40beab', class: this.articleClasses() }, h("div", { key: '65ab4084241ce1b5337e9bfaaffb5c2aaceec28e', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'f1cda1a4d61b47550d9d8cd08986f2253710c4ea', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), h("div", { key: 'e02ffe4f38f1375a0694f2acec72406824745437', 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: 'ddbc978054f645eb990cde6bdd26647bd01eeb1a', class: this.articleClasses() }, h("div", { key: '0a16fbd950742b8a75428b3705deaa03ef785a5b', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '0c2a84cae101ec1e5352ed7be7b874b6ec45f37d', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), h("div", { key: 'c001f1b33c5136820155b0299e83b6dc49fbbd43', 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 })))));
     }
     get el() { return this; }
     static get style() { return EdsFrameStyle0; }

package/dist/components/eds-gauge.js

@@ -49,7 +49,7 @@ const EdsGauge$1 = /*@__PURE__*/ proxyCustomElement(class EdsGauge extends HTMLE
         const textStyle = {
             fontSize: `${fontSize}px`
         };
-        return (h("div", { key: 'f5801b63984f42bad206445de4e865c0e161b88e', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: '1a982401ba1853e937dfbb9aeb4736d4665abab1', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '0db002b1a3a3f49fe3fd0f3aa4d3fd0e2ee6a45d', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'a011eaaab9e6f3d15d706bf9309ae7bafa689387', class: "f-body-01 text-default", style: textStyle }, clamped))));
+        return (h("div", { key: '5629f8adbc6f144aad49062883cb85ecf24fc16c', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: 'd668b54b0a5f4bf260a2f1153781c59741bd8694', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: 'f08feba97d30ed893a72a7e07e412aa82ea8cd3d', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '2a8dccde44677d4a4b742cd992144d6cf399ee9b', class: "f-body-01 text-default", style: textStyle }, clamped))));
     }
     static get style() { return EdsGaugeStyle0; }
 }, [1, "eds-gauge", {

package/dist/components/eds-gitlab-contributors.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './eds-img2.js';
 import { d as defineCustomElement$3 } from './eds-link2.js';
 import { d as defineCustomElement$2 } from './eds-spinner2.js';
 
-const edsGitlabContributorsCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.grid{display:grid}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}.p-5{padding:1.25rem;}.p-12{padding:3rem;}.pb-2{padding-bottom:0.25rem;}.pb-4{padding-bottom:1rem;}.mb-6{margin-bottom:1.5rem;}.m-0{margin:0}.mt-auto{margin-top:auto}.w-full{width:100%}.min-w-0{min-width:0}.text-xs{font-size:0.75rem;line-height:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.no-underline{text-decoration:none}.text-gray-600{color:var(--eds-color-gray-600, #4b5563)}.text-gray-900{color:var(--eds-color-gray-900, #111827)}.border-gray-200{border-color:var(--eds-color-gray-200, #e5e7eb)}.bg-white{background-color:var(--eds-color-white, #ffffff)}.text-primary-600{color:var(--eds-color-primary-600, #2563eb)}.hover\\:text-primary-600:hover{color:var(--eds-color-primary-600, #2563eb)}.border-primary-300{border-color:var(--eds-color-primary-300, #93c5fd)}.hover\\:border-primary-300:hover{border-color:var(--eds-color-primary-300, #93c5fd)}.text-success-600{color:var(--eds-color-success-600, #16a34a)}.text-error-600{color:var(--eds-color-error-600, #dc2626)}.border{border-width:1px}.border-b{border-bottom-width:1px}.rounded-lg{border-radius:var(--eds-radius-lg, 0.5rem);}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{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:150ms}.duration-200{transition-duration:200ms}.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.hover\\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.-translate-y-0\\.5{transform:translateY(-0.125rem);}.hover\\:-translate-y-0\\.5:hover{transform:translateY(-0.125rem)}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}@media (min-width: 640px){.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 768px){.md\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}.contributor-card{will-change:transform, box-shadow, border-color}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}";
+const edsGitlabContributorsCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.grid{display:grid}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}.p-5{padding:1.25rem;}.p-12{padding:3rem;}.pb-2{padding-bottom:0.25rem;}.pb-4{padding-bottom:1rem;}.mb-6{margin-bottom:1.5rem;}.m-0{margin:0}.mt-auto{margin-top:auto}.w-full{width:100%}.min-w-0{min-width:0}.text-xs{font-size:0.75rem;line-height:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.no-underline{text-decoration:none}.text-gray-600{color:var(--eds-color-gray-600, #4b5563)}.text-gray-900{color:var(--eds-color-gray-900, #111827)}.border-gray-200{border-color:var(--eds-color-gray-200, #e5e7eb)}.bg-white{background-color:var(--eds-color-white, #ffffff)}.text-primary-600{color:var(--eds-color-primary-600, #2563eb)}.hover\\:text-primary-600:hover{color:var(--eds-color-primary-600, #2563eb)}.border-primary-300{border-color:var(--eds-color-primary-300, #93c5fd)}.hover\\:border-primary-300:hover{border-color:var(--eds-color-primary-300, #93c5fd)}.text-success-600{color:var(--eds-color-success-600, #16a34a)}.text-error-600{color:var(--eds-color-error-600, #dc2626)}.border{border-width:1px}.border-b{border-bottom-width:1px}.rounded-lg{border-radius:var(--eds-radius-lg, 0.5rem);}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{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:150ms}.duration-200{transition-duration:200ms}.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.hover\\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.-translate-y-0\\.5{transform:translateY(-0.125rem);}.hover\\:-translate-y-0\\.5:hover{transform:translateY(-0.125rem)}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}@media (min-width: 640px){.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 768px){.md\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}.contributor-card{will-change:transform, box-shadow, border-color}.loading{position:relative;min-height:8rem;padding:1rem 1.25rem;color:var(--grey-dark, #7A7B7A);font-size:0.9375rem;border:1px solid rgba(0, 0, 0, 0.08);border-radius:0.25rem;background-color:rgba(0, 0, 0, 0.02)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}";
 const EdsGitlabContributorsStyle0 = edsGitlabContributorsCss;
 
 const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlabContributors extends HTMLElement {
@@ -230,7 +230,14 @@ const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlab
     }
     render() {
         if (this.loading) {
-            return (h("div", { class: "flex flex-col items-center justify-center p-12 gap-4" }, h("eds-spinner", { size: "md" }), h("p", { class: "text-base text-gray-600 m-0" }, "Loading contributors...")));
+            // Spinner placeholder mirrors eds-kg-learning-resources exactly —
+            // same `.loading` wrapper (position: relative + min-height so the
+            // absolutely-positioned spinner anchors inside the box instead of
+            // escaping to the page), same eds-spinner props (sm/primary/
+            // transparent + message-as-prop), and the same role+aria-live for
+            // screen-reader announcement. Keep these two components in sync if
+            // the loading affordance ever changes.
+            return (h("div", { class: "loading", role: "status", "aria-live": "polite" }, h("eds-spinner", { size: "sm", variant: "primary", background: "transparent", message: "Loading contributors..." })));
         }
         if (this.error) {
             return (h("eds-alert", { message: "Error loading contributors", intent: "error" }));