@ebrains/components 2.4.1 → 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();
             }
@@ -37,14 +44,13 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
                 action: this.isOpen ? 'expanded' : 'collapsed'
             });
         };
-        this.icon = undefined;
+        this.icon = 'chevron-down';
         this.label = undefined;
-        this.rounded = false;
         this.ariaLabel = 'Open dropdown';
         this.asNav = true;
         this.dropdownPos = 'left';
         this.dropdownOffset = true;
-        this.intent = 'tertiary';
+        this.intent = 'ghost';
         this.autoClose = true;
         this.noCloseSelector = '[data-dropdown-no-close]';
         this.isOpen = false;
@@ -61,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 });
         }
     }
     /**
@@ -69,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();
@@ -86,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;
             }
         }
     }
@@ -153,21 +178,19 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'ffc4915b2104e3d2dd347900acd897f56910a674', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ba48bdd7b75fd230bdc2dd564bd477f0349f5426', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: 'a29b57598a2ed8fcc9593c928df9443fd4449481', 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,
-                'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'ddf003345ef5181b968b4bfd8962805d09d15e89' }))));
+                'right-0': this.dropdownPos === 'right' && !this.dropdownOffset
+            }, 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; }
 }, [1, "eds-dropdown", {
         "icon": [1],
         "label": [1],
-        "rounded": [4],
         "ariaLabel": [1, "aria-label"],
         "asNav": [4, "as-nav"],
         "dropdownPos": [1, "dropdown-pos"],

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: '5405127cfc114d4906617955d7b1069a04ed7b8e', class: "grid inline" }, h(HeadingTag, { key: 'c0a2593d843577323b6a27d0f8fdca3b84063bd5', class: headingClass }, this.label), h("p", { key: '5b7ef9fbd8c5b4a9d3c7c39e3092244d08dde126', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '2de1ad00dd21d987bc4a91438500a58a0bcd63a7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '3de038a0ae8ee334edde65194356f021e14e7cb3', 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,40 +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}.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-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.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(--green-500)}.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%}.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-700)}.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}@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 = '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';
@@ -47,33 +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.`;
-        return (h("footer", { key: 'bf9d98eea0bd151bf87818b770e85fe0cfa1044f' }, 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: 'c0058cd32e2904e4e08ec46b99a0cbbabb5df588', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '4f2993ccded30ca66da34eca632b62abf02e06d5', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '81efd584b5de410522d338bb6ab4b53096a36868', class: "flex items-center gap-x-12" }, h("a", { key: '5a641163b3cb1549ee886e9029b65a012b31cd85', 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: 'ccec5c50780a74912f51a46e79c5064e099cf678', class: "h-auto w-full fill-current", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '8aa7bbb7cd4e3386c11c194af1ee63a19fa9de34', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: 'c5fcce97d10391a07c081558b970175d80da1106', 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: '11168a0466d48398c6e9318317141966b5a2f996' }, h("div", { key: '3728a394fd33133169f17e26ba5135e4c7e28f0a', class: "f-ui-02 text-light" }, h("p", { key: '2329c76b69487d4c4f8fff0b0daa0ab8ce0ea15c' }, this.fundedBy), h("div", { key: 'c9423d9261da2d3f0ff3b5f00fc8e24522733f32', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '3257b0c6f7952e4d70e35fa93ba8e4bae23369b7', 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: '9ef1a84e41dea0dda90a699a9ff8a844e3b6294d', 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: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+        const isInverse = this.variant === 'inverse';
+        // 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": [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;