@ebrains/components 3.0.0 → 3.1.0

package/dist/types/components.d.ts

@@ -10,6 +10,7 @@ import { AppTag } from "./components/eds-cards/eds-card-app/eds-card-app";
 import { CtaLink } from "./components/eds-cards/eds-card-cta/eds-card-cta";
 import { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 import { HeroTag } from "./components/eds-cards/eds-card-hero/eds-card-hero";
+import { EdsFooterColumn } from "./components/eds-footer/eds-footer";
 import { Event, VNode } from "./stencil-public-runtime";
 import { SidebarItem } from "./components/eds-sidebar/eds-sidebar";
 import { Step } from "./components/eds-steps/eds-steps";
@@ -20,6 +21,7 @@ export { AppTag } from "./components/eds-cards/eds-card-app/eds-card-app";
 export { CtaLink } from "./components/eds-cards/eds-card-cta/eds-card-cta";
 export { Tag } from "./components/eds-cards/eds-card-generic/eds-card-generic";
 export { HeroTag } from "./components/eds-cards/eds-card-hero/eds-card-hero";
+export { EdsFooterColumn } from "./components/eds-footer/eds-footer";
 export { Event, VNode } from "./stencil-public-runtime";
 export { SidebarItem } from "./components/eds-sidebar/eds-sidebar";
 export { Step } from "./components/eds-steps/eds-steps";
@@ -241,7 +243,7 @@ export namespace Components {
         /**
           * The visual intent or style of the button. - 'primary': Brand black background with white text - 'secondary': Transparent/white background with black border and text - 'secondaryInverse': Transparent background with white border and white text (for dark backgrounds) - 'brand': Brand green background with black text (CTA style) - 'cta': CTA link style with monospace font (gray text that turns green on hover) - 'cta-brand': CTA link style with monospace font (always green)
          */
-        "intent": 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand';
+        "intent": 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandLight' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand';
         /**
           * The label text to be displayed inside the button.
          */
@@ -648,56 +650,60 @@ export namespace Components {
         "type": 'star' | 'thumbs-up' | 'thumbs-down';
     }
     /**
-     * `EdsFooter` is a footer component designed for the EBRAINS platform, featuring social links,
-     * legal information, and an optional cookie preferences button. It includes a "Back to top"
-     * button and displays an acknowledgment for Horizon Europe funding.
-     * Key Features:
-     * - Social Network Links: Optionally display a section for social media links.
-     * - Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
-     * - Cookie Preferences: Optionally display a "Cookies Preferences" button.
-     * - Back to Top Button: Smoothly scrolls the page back to the top when clicked.
-     * This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements
-     * across the EBRAINS platform, with options for social links and a "Back to top" button.
+     * `EdsFooter` is the EBRAINS-wide footer component.
+     * Renders a 4-column layout matching the eds-docs landing footer:
+     *   [ Brand (EU flag + funding text + copyright)  |  Resources  |  Community  |  Legal ]
+     * Defaults are designed so a consumer that writes `<eds-footer></eds-footer>`
+     * with no props gets the full canonical EBRAINS footer rendered — same
+     * brand block, same link columns, same dark theme as the eds-docs
+     * landing page. The previous minimal-strip footer is replaced; consumers
+     * that need different link content pass the `columns` prop (array or
+     * JSON-stringified array for HTML attribute use).
+     * Configurability without breakage:
+     * - All previous props remain (`social`, `variant`, `fundedBy`,
+     *   `rightsReserved`, `enableScrollTop`, `enableCookiesSettings`,
+     *   `cookiesPreferences`, `backToTopAriaLabel`). Their meanings are
+     *   preserved.
+     * - New `columns` prop is optional — omit it for the defaults.
+     * - The `enableCookiesSettings` toggle now decides whether any column
+     *   link with `action: 'cookies'` is rendered (default false; pass
+     *   true to surface the Cookie Preferences entry in the Legal column).
      */
     interface EdsFooter {
         /**
-          * Controls the display of the "Back to Top" aria label text.
-          * @type {string}
+          * ARIA label for the "Back to top" floating button.
          */
         "backToTopAriaLabel": string;
         /**
-          * Controls the display of the "Cookies preferences" text.
-          * @type {string}
+          * Custom link columns. Accepts an array (Vue/React/JS bindings) OR a JSON-stringified array (HTML attribute use). When omitted, the canonical EBRAINS-wide columns above are used.  Shape: see EdsFooterColumn / EdsFooterLink at the top of this file.
+         */
+        "columns"?: EdsFooterColumn[] | string;
+        /**
+          * Label used for any link with `action: 'cookies'` — overrides the column's `label`.
          */
         "cookiesPreferences": string;
         /**
-          * Controls the display of the "Cookies preferences" link.
-          * @type {string}
+          * When false, any column link with `action: 'cookies'` is hidden. Default false so adding the footer to a page without a Matomo notice / cookie banner doesn't surface a non-functional link. Set true once you've also mounted `<eds-matomo-notice>` on the page.
          */
         "enableCookiesSettings": boolean;
         /**
-          * Controls the display of the "Back to Top" button. When true, the button appears in the footer.
-          * @type {boolean}
+          * Float a "Back to top" button at the top-right of the footer.
          */
         "enableScrollTop": boolean;
         /**
-          * Controls the display of the "Founded By" text.
-          * @type {string}
+          * "EBRAINS is funded by…" line shown next to the EU flag in the brand column.
          */
         "fundedBy": string;
         /**
-          * Controls the display of the "Rights Reserved" text.
-          * @type {string}
+          * "© {year} EBRAINS. All rights reserved." line shown below the funding text.
          */
         "rightsReserved": string;
         /**
-          * Determines if the social network section should be displayed. Adds top padding when true.
-          * @type {boolean}
+          * Show the eds-social-networks section above the main grid.
          */
         "social": boolean;
         /**
-          * Controls the visual variant of the footer. - 'default': Light background with dark text - 'inverse': Dark/black background with white text
-          * @type {'default' | 'inverse'}
+          * Theme variant. Defaults to `inverse` (dark) because the canonical EBRAINS footer design uses a dark backdrop with light text. Pass `variant="default"` for the light-on-light treatment if an app's page palette demands it.
          */
         "variant": 'default' | 'inverse';
     }
@@ -922,6 +928,10 @@ export namespace Components {
           * Placeholder text for the input
          */
         "placeholder": string;
+        /**
+          * Visual theme of the search pill. - "gray"  (default): light grey surface (matches the EBRAINS header mockup) - "white": white surface with a 1px border (use when sitting on a coloured nav) - "black": brand-black surface with white text (use on dark backgrounds)
+         */
+        "variant": 'gray' | 'white' | 'black';
     }
     /**
      * `EdsHeader` is a header component designed for the EBRAINS platform.
@@ -995,6 +1005,10 @@ export namespace Components {
         "class": string;
     }
     interface EdsIconWrapper {
+        /**
+          * Accessible label for the icon. Set this when the icon conveys meaning on its own (e.g. a standalone status/action icon) — it is exposed as `role="img"` + `aria-label`. When omitted, the icon is treated as decorative and hidden from assistive technology (`aria-hidden`), which is correct when it sits next to a text label that already describes it.
+         */
+        "label"?: string;
         "name": IconName;
         "size": 16 | 20 | 24 | 32;
     }
@@ -1066,6 +1080,10 @@ export namespace Components {
         "hasMessage": boolean;
         "icon"?: IconName;
         "inputId"?: string;
+        /**
+          * Explicit tabindex for the native input. Radio/checkbox groups inside the `eds-input-field` shadow root (delegatesFocus) get skipped by sequential keyboard navigation unless each input is explicitly in the tab order.
+         */
+        "inputTabIndex"?: number;
         "max"?: number;
         "maxLength"?: number;
         "min"?: number;
@@ -1394,6 +1412,28 @@ export namespace Components {
          */
         "value"?: string | number;
     }
+    interface EdsKgLearningResources {
+        /**
+          * API endpoint for fetching learning resources
+         */
+        "apiEndpoint": string;
+        /**
+          * Component heading
+         */
+        "heading": string;
+        /**
+          * Whether to resolve software names
+         */
+        "resolveNames": boolean;
+        /**
+          * Max resources to fetch
+         */
+        "size": number;
+        /**
+          * Visual variant for accordions and cards
+         */
+        "variant": 'default' | 'inverse';
+    }
     interface EdsKgWebServicesSelect {
         /**
           * API endpoint for fetching web services Defaults to cached endpoint for better performance
@@ -1741,6 +1781,67 @@ export namespace Components {
          */
         "selectedRating": number;
     }
+    /**
+     * Searchable, source-agnostic select for HUGE option lists (countries,
+     * currencies, nationalities, …) — the generalised sibling of
+     * eds-kg-web-services-select.
+     * It never talks to an external API directly. It either filters an inline
+     * `options` array client-side, or queries a VETTED, NAMED `source` through our
+     * own datasets registry (`/api/v1/datasets/<source>/search`), which returns the
+     * one normalised shape `{ items: [{label, value}], total, nextOffset }`. Any
+     * messy upstream schema is flattened server-side by an adapter — the component
+     * stays dumb.
+     * Rendering is result-capped (we render at most `maxVisible` rows and tell the
+     * user to keep typing) so a 5,000-item source never blows up the DOM. Remote
+     * sources are additionally bounded by the server's page `limit`.
+     */
+    interface EdsSearchSelect {
+        /**
+          * Base path for the datasets API.
+         */
+        "apiBase": string;
+        /**
+          * Debounce (ms) before a remote search fires.
+         */
+        "debounceMs": number;
+        "disabled": boolean;
+        "error": boolean;
+        "errorMessage"?: string;
+        "hint"?: string;
+        "label"?: string;
+        /**
+          * Server page size for remote sources.
+         */
+        "limit": number;
+        /**
+          * Max rows rendered at once (DOM cap).
+         */
+        "maxVisible": number;
+        "message"?: string;
+        /**
+          * Allow selecting multiple values — selections render as removable tags.
+         */
+        "multiple": boolean;
+        "name": string;
+        /**
+          * Inline options: an array or a JSON string of [{label, value}].
+         */
+        "options"?: Option[] | string;
+        "placeholder": string;
+        "required": boolean;
+        /**
+          * Query param name the search term is sent as.
+         */
+        "searchParam": string;
+        /**
+          * A vetted registry source key, e.g. "countries" / "currencies".
+         */
+        "source"?: string;
+        /**
+          * Selected value. A single value string in single-select mode, or an array of values in multi-select mode. v-model friendly.
+         */
+        "value"?: string | string[];
+    }
     interface EdsSectionCore {
         /**
           * The heading level for the section title, such as 'h1', 'h2', etc. Default is 'h2'.
@@ -1975,10 +2076,6 @@ export namespace Components {
           * Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.  Each action object may include:  - `name`       (string; required)  — unique action key, e.g. `"view"`, `"delete"`.  - `label`      (string; required)  — text shown on the button, or used as the tooltip/aria-label when icon-only.  - `type`       ("button" | "checkbox"; optional) — whether to render a standard button (default) or a checkbox.  - `icon`       (string; optional)  — name of the icon to display in icon-only mode.  - `field`      (string; optional)  — for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).  - `showLabel`  (boolean; optional) — if `true`, render the full `label` instead of an icon + tooltip.  - `intent`     ("brand" | "primary" | "secondary" | "neutral" | "ghost" | "brandInverse" | "secondaryInverse" | "ghostInverse"; optional) — button intent/style.  When you pass JSON, make sure field names match exactly: ```html actions='[   { "name":"view",  "label":"View",  "icon":"eye", "intent":"brand" },   { "name":"edit",  "label":"Edit",  "icon":"pencil", "showLabel":true, "intent":"primary" },   { "name":"del",   "label":"Delete","type":"checkbox", "field":"selected" } ]' ```
          */
         "actions": string | TableAction[];
-        /**
-          * Optional property to control the column sizing mode. - 'default' uses containerWidth / visibleColumns. - 'medium' divides that result by 2. - 'large' divides that result by 4.
-         */
-        "columnSize"?: 'default' | 'medium' | 'large';
         /**
           * Config object to hide or format columns
          */
@@ -2015,9 +2112,9 @@ export namespace Components {
          */
         "sortingEnabled": boolean;
         /**
-          * Theme for table styling: - 'default': Simple rows with no background - 'color': Alternating row colors - 'brand': Modern brand styling with hover effects and green accents
+          * Theme for table styling.  The 'default' (no background) and 'color' (alternating rows) themes are DISABLED — the table now always renders the EBRAINS 'brand' theme (modern styling, hover, green accents). The prop is kept for API compatibility but is coerced to 'brand' in componentWillLoad(), so any value a consumer passes is ignored.
          */
-        "theme": 'default' | 'color' | 'brand';
+        "theme": 'brand';
         /**
           * View mode for displaying data: - 'table': Traditional table layout (default) - 'card': Card grid layout
          */
@@ -2102,6 +2199,58 @@ export namespace Components {
         "content"?: string;
         "position": 'top' | 'bottom';
     }
+    /**
+     * `EdsTrlBadge` — public EBRAINS TRL badge, aligned with the EBRAINS visual
+     * system (Black `#07140D`, Green `#00FF9D`, Dark Green `#00C87B`, Grey
+     * `#7A7B7A`, IBM Plex Mono) and using the **official EBRAINS sphere mark**.
+     * Renders a self-contained inline `<svg>` (same markup the server-side
+     * `badge.svg` endpoint emits), so it embeds anywhere and stays crisp.
+     * Variants:
+     * - `tone`     — CI-style label + value pill (dark or light `theme`).
+     * - `full`     — single bar with the full string.
+     * - `pill`     — compact rounded "TRL 7".
+     * - `outline`  — thin border, transparent fill, mono caps (dark or light).
+     * - `scale`    — nine readiness pips showing position on the 1–9 scale.
+     * The value/pip colour encodes maturity within the brand palette:
+     * TRL 7–9 → green, 4–6 → dark green, 1–3 → grey.
+     * @example <eds-trl-badge level={7} assessed="2026-06" methodology="v8.2"></eds-trl-badge>
+     * <eds-trl-badge level={7} variant="outline" theme="light"></eds-trl-badge>
+     * <eds-trl-badge level={7} variant="scale" size={32}></eds-trl-badge>
+     */
+    interface EdsTrlBadge {
+        /**
+          * Assessment month, e.g. "2026-06".
+         */
+        "assessed"?: string;
+        /**
+          * Optional link (methodology or service page).
+         */
+        "href"?: string;
+        /**
+          * Left-segment / leading label.
+         */
+        "label": string;
+        /**
+          * TRL level, 1–9.
+         */
+        "level": number;
+        /**
+          * Methodology version, e.g. "v8.2".
+         */
+        "methodology"?: string;
+        /**
+          * Rendered height in px. Scales the whole badge crisply (viewBox is fixed).
+         */
+        "size"?: number;
+        /**
+          * Colour theme for the `tone` / `outline` / `scale` variants.
+         */
+        "theme": 'dark' | 'light';
+        /**
+          * 'tone' | 'full' | 'pill' | 'outline' | 'scale'.
+         */
+        "variant": 'tone' | 'full' | 'pill' | 'outline' | 'scale';
+    }
     /**
      * `EdsUser` is a user component for managing and displaying
      * the user's auth information. Displays a user dropdown menu when authenticated.
@@ -2238,6 +2387,10 @@ export interface EdsRatingCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsRatingElement;
 }
+export interface EdsSearchSelectCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLEdsSearchSelectElement;
+}
 export interface EdsSidebarCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLEdsSidebarElement;
@@ -2619,16 +2772,24 @@ declare global {
         "cookies": any;
     }
     /**
-     * `EdsFooter` is a footer component designed for the EBRAINS platform, featuring social links,
-     * legal information, and an optional cookie preferences button. It includes a "Back to top"
-     * button and displays an acknowledgment for Horizon Europe funding.
-     * Key Features:
-     * - Social Network Links: Optionally display a section for social media links.
-     * - Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
-     * - Cookie Preferences: Optionally display a "Cookies Preferences" button.
-     * - Back to Top Button: Smoothly scrolls the page back to the top when clicked.
-     * This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements
-     * across the EBRAINS platform, with options for social links and a "Back to top" button.
+     * `EdsFooter` is the EBRAINS-wide footer component.
+     * Renders a 4-column layout matching the eds-docs landing footer:
+     *   [ Brand (EU flag + funding text + copyright)  |  Resources  |  Community  |  Legal ]
+     * Defaults are designed so a consumer that writes `<eds-footer></eds-footer>`
+     * with no props gets the full canonical EBRAINS footer rendered — same
+     * brand block, same link columns, same dark theme as the eds-docs
+     * landing page. The previous minimal-strip footer is replaced; consumers
+     * that need different link content pass the `columns` prop (array or
+     * JSON-stringified array for HTML attribute use).
+     * Configurability without breakage:
+     * - All previous props remain (`social`, `variant`, `fundedBy`,
+     *   `rightsReserved`, `enableScrollTop`, `enableCookiesSettings`,
+     *   `cookiesPreferences`, `backToTopAriaLabel`). Their meanings are
+     *   preserved.
+     * - New `columns` prop is optional — omit it for the defaults.
+     * - The `enableCookiesSettings` toggle now decides whether any column
+     *   link with `action: 'cookies'` is rendered (default false; pass
+     *   true to surface the Cookie Preferences entry in the Legal column).
      */
     interface HTMLEdsFooterElement extends Components.EdsFooter, HTMLStencilElement {
         addEventListener<K extends keyof HTMLEdsFooterElementEventMap>(type: K, listener: (this: HTMLEdsFooterElement, ev: EdsFooterCustomEvent<HTMLEdsFooterElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
@@ -2969,6 +3130,12 @@ declare global {
         prototype: HTMLEdsInputSelectElement;
         new (): HTMLEdsInputSelectElement;
     };
+    interface HTMLEdsKgLearningResourcesElement extends Components.EdsKgLearningResources, HTMLStencilElement {
+    }
+    var HTMLEdsKgLearningResourcesElement: {
+        prototype: HTMLEdsKgLearningResourcesElement;
+        new (): HTMLEdsKgLearningResourcesElement;
+    };
     interface HTMLEdsKgWebServicesSelectElementEventMap {
         "edsinput": { value: string | boolean | string[] };
         "edschange": { value: string | boolean | string[] };
@@ -3114,6 +3281,38 @@ declare global {
         prototype: HTMLEdsRatingElement;
         new (): HTMLEdsRatingElement;
     };
+    interface HTMLEdsSearchSelectElementEventMap {
+        "edsinput": { value: string | boolean | string[] };
+        "edschange": { value: string | boolean | string[] };
+    }
+    /**
+     * Searchable, source-agnostic select for HUGE option lists (countries,
+     * currencies, nationalities, …) — the generalised sibling of
+     * eds-kg-web-services-select.
+     * It never talks to an external API directly. It either filters an inline
+     * `options` array client-side, or queries a VETTED, NAMED `source` through our
+     * own datasets registry (`/api/v1/datasets/<source>/search`), which returns the
+     * one normalised shape `{ items: [{label, value}], total, nextOffset }`. Any
+     * messy upstream schema is flattened server-side by an adapter — the component
+     * stays dumb.
+     * Rendering is result-capped (we render at most `maxVisible` rows and tell the
+     * user to keep typing) so a 5,000-item source never blows up the DOM. Remote
+     * sources are additionally bounded by the server's page `limit`.
+     */
+    interface HTMLEdsSearchSelectElement extends Components.EdsSearchSelect, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLEdsSearchSelectElementEventMap>(type: K, listener: (this: HTMLEdsSearchSelectElement, ev: EdsSearchSelectCustomEvent<HTMLEdsSearchSelectElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLEdsSearchSelectElementEventMap>(type: K, listener: (this: HTMLEdsSearchSelectElement, ev: EdsSearchSelectCustomEvent<HTMLEdsSearchSelectElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLEdsSearchSelectElement: {
+        prototype: HTMLEdsSearchSelectElement;
+        new (): HTMLEdsSearchSelectElement;
+    };
     interface HTMLEdsSectionCoreElement extends Components.EdsSectionCore, HTMLStencilElement {
     }
     var HTMLEdsSectionCoreElement: {
@@ -3345,6 +3544,30 @@ declare global {
         prototype: HTMLEdsTooltipElement;
         new (): HTMLEdsTooltipElement;
     };
+    /**
+     * `EdsTrlBadge` — public EBRAINS TRL badge, aligned with the EBRAINS visual
+     * system (Black `#07140D`, Green `#00FF9D`, Dark Green `#00C87B`, Grey
+     * `#7A7B7A`, IBM Plex Mono) and using the **official EBRAINS sphere mark**.
+     * Renders a self-contained inline `<svg>` (same markup the server-side
+     * `badge.svg` endpoint emits), so it embeds anywhere and stays crisp.
+     * Variants:
+     * - `tone`     — CI-style label + value pill (dark or light `theme`).
+     * - `full`     — single bar with the full string.
+     * - `pill`     — compact rounded "TRL 7".
+     * - `outline`  — thin border, transparent fill, mono caps (dark or light).
+     * - `scale`    — nine readiness pips showing position on the 1–9 scale.
+     * The value/pip colour encodes maturity within the brand palette:
+     * TRL 7–9 → green, 4–6 → dark green, 1–3 → grey.
+     * @example <eds-trl-badge level={7} assessed="2026-06" methodology="v8.2"></eds-trl-badge>
+     * <eds-trl-badge level={7} variant="outline" theme="light"></eds-trl-badge>
+     * <eds-trl-badge level={7} variant="scale" size={32}></eds-trl-badge>
+     */
+    interface HTMLEdsTrlBadgeElement extends Components.EdsTrlBadge, HTMLStencilElement {
+    }
+    var HTMLEdsTrlBadgeElement: {
+        prototype: HTMLEdsTrlBadgeElement;
+        new (): HTMLEdsTrlBadgeElement;
+    };
     /**
      * `EdsUser` is a user component for managing and displaying
      * the user's auth information. Displays a user dropdown menu when authenticated.
@@ -3506,6 +3729,7 @@ declare global {
         "eds-input-range": HTMLEdsInputRangeElement;
         "eds-input-search": HTMLEdsInputSearchElement;
         "eds-input-select": HTMLEdsInputSelectElement;
+        "eds-kg-learning-resources": HTMLEdsKgLearningResourcesElement;
         "eds-kg-web-services-select": HTMLEdsKgWebServicesSelectElement;
         "eds-link": HTMLEdsLinkElement;
         "eds-logo": HTMLEdsLogoElement;
@@ -3516,6 +3740,7 @@ declare global {
         "eds-pie": HTMLEdsPieElement;
         "eds-progress-bar": HTMLEdsProgressBarElement;
         "eds-rating": HTMLEdsRatingElement;
+        "eds-search-select": HTMLEdsSearchSelectElement;
         "eds-section-core": HTMLEdsSectionCoreElement;
         "eds-section-heading": HTMLEdsSectionHeadingElement;
         "eds-sidebar": HTMLEdsSidebarElement;
@@ -3532,6 +3757,7 @@ declare global {
         "eds-toast": HTMLEdsToastElement;
         "eds-toast-manager": HTMLEdsToastManagerElement;
         "eds-tooltip": HTMLEdsTooltipElement;
+        "eds-trl-badge": HTMLEdsTrlBadgeElement;
         "eds-user": HTMLEdsUserElement;
         "gradient-primary-palette": HTMLGradientPrimaryPaletteElement;
         "gradient-secondary-palette": HTMLGradientSecondaryPaletteElement;
@@ -3779,7 +4005,7 @@ declare namespace LocalJSX {
         /**
           * The visual intent or style of the button. - 'primary': Brand black background with white text - 'secondary': Transparent/white background with black border and text - 'secondaryInverse': Transparent background with white border and white text (for dark backgrounds) - 'brand': Brand green background with black text (CTA style) - 'cta': CTA link style with monospace font (gray text that turns green on hover) - 'cta-brand': CTA link style with monospace font (always green)
          */
-        "intent"?: 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand';
+        "intent"?: 'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandLight' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand';
         /**
           * The label text to be displayed inside the button.
          */
@@ -4193,57 +4419,61 @@ declare namespace LocalJSX {
         "type"?: 'star' | 'thumbs-up' | 'thumbs-down';
     }
     /**
-     * `EdsFooter` is a footer component designed for the EBRAINS platform, featuring social links,
-     * legal information, and an optional cookie preferences button. It includes a "Back to top"
-     * button and displays an acknowledgment for Horizon Europe funding.
-     * Key Features:
-     * - Social Network Links: Optionally display a section for social media links.
-     * - Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
-     * - Cookie Preferences: Optionally display a "Cookies Preferences" button.
-     * - Back to Top Button: Smoothly scrolls the page back to the top when clicked.
-     * This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements
-     * across the EBRAINS platform, with options for social links and a "Back to top" button.
+     * `EdsFooter` is the EBRAINS-wide footer component.
+     * Renders a 4-column layout matching the eds-docs landing footer:
+     *   [ Brand (EU flag + funding text + copyright)  |  Resources  |  Community  |  Legal ]
+     * Defaults are designed so a consumer that writes `<eds-footer></eds-footer>`
+     * with no props gets the full canonical EBRAINS footer rendered — same
+     * brand block, same link columns, same dark theme as the eds-docs
+     * landing page. The previous minimal-strip footer is replaced; consumers
+     * that need different link content pass the `columns` prop (array or
+     * JSON-stringified array for HTML attribute use).
+     * Configurability without breakage:
+     * - All previous props remain (`social`, `variant`, `fundedBy`,
+     *   `rightsReserved`, `enableScrollTop`, `enableCookiesSettings`,
+     *   `cookiesPreferences`, `backToTopAriaLabel`). Their meanings are
+     *   preserved.
+     * - New `columns` prop is optional — omit it for the defaults.
+     * - The `enableCookiesSettings` toggle now decides whether any column
+     *   link with `action: 'cookies'` is rendered (default false; pass
+     *   true to surface the Cookie Preferences entry in the Legal column).
      */
     interface EdsFooter {
         /**
-          * Controls the display of the "Back to Top" aria label text.
-          * @type {string}
+          * ARIA label for the "Back to top" floating button.
          */
         "backToTopAriaLabel"?: string;
         /**
-          * Controls the display of the "Cookies preferences" text.
-          * @type {string}
+          * Custom link columns. Accepts an array (Vue/React/JS bindings) OR a JSON-stringified array (HTML attribute use). When omitted, the canonical EBRAINS-wide columns above are used.  Shape: see EdsFooterColumn / EdsFooterLink at the top of this file.
+         */
+        "columns"?: EdsFooterColumn[] | string;
+        /**
+          * Label used for any link with `action: 'cookies'` — overrides the column's `label`.
          */
         "cookiesPreferences"?: string;
         /**
-          * Controls the display of the "Cookies preferences" link.
-          * @type {string}
+          * When false, any column link with `action: 'cookies'` is hidden. Default false so adding the footer to a page without a Matomo notice / cookie banner doesn't surface a non-functional link. Set true once you've also mounted `<eds-matomo-notice>` on the page.
          */
         "enableCookiesSettings"?: boolean;
         /**
-          * Controls the display of the "Back to Top" button. When true, the button appears in the footer.
-          * @type {boolean}
+          * Float a "Back to top" button at the top-right of the footer.
          */
         "enableScrollTop"?: boolean;
         /**
-          * Controls the display of the "Founded By" text.
-          * @type {string}
+          * "EBRAINS is funded by…" line shown next to the EU flag in the brand column.
          */
         "fundedBy"?: string;
         "onCookies"?: (event: EdsFooterCustomEvent<any>) => void;
         /**
-          * Controls the display of the "Rights Reserved" text.
-          * @type {string}
+          * "© {year} EBRAINS. All rights reserved." line shown below the funding text.
          */
         "rightsReserved"?: string;
         /**
-          * Determines if the social network section should be displayed. Adds top padding when true.
-          * @type {boolean}
+          * Show the eds-social-networks section above the main grid.
          */
         "social"?: boolean;
         /**
-          * Controls the visual variant of the footer. - 'default': Light background with dark text - 'inverse': Dark/black background with white text
-          * @type {'default' | 'inverse'}
+          * Theme variant. Defaults to `inverse` (dark) because the canonical EBRAINS footer design uses a dark backdrop with light text. Pass `variant="default"` for the light-on-light treatment if an app's page palette demands it.
          */
         "variant"?: 'default' | 'inverse';
     }
@@ -4495,6 +4725,10 @@ declare namespace LocalJSX {
           * Placeholder text for the input
          */
         "placeholder"?: string;
+        /**
+          * Visual theme of the search pill. - "gray"  (default): light grey surface (matches the EBRAINS header mockup) - "white": white surface with a 1px border (use when sitting on a coloured nav) - "black": brand-black surface with white text (use on dark backgrounds)
+         */
+        "variant"?: 'gray' | 'white' | 'black';
     }
     /**
      * `EdsHeader` is a header component designed for the EBRAINS platform.
@@ -4572,6 +4806,10 @@ declare namespace LocalJSX {
         "class"?: string;
     }
     interface EdsIconWrapper {
+        /**
+          * Accessible label for the icon. Set this when the icon conveys meaning on its own (e.g. a standalone status/action icon) — it is exposed as `role="img"` + `aria-label`. When omitted, the icon is treated as decorative and hidden from assistive technology (`aria-hidden`), which is correct when it sits next to a text label that already describes it.
+         */
+        "label"?: string;
         "name": IconName;
         "size"?: 16 | 20 | 24 | 32;
     }
@@ -4643,6 +4881,10 @@ declare namespace LocalJSX {
         "hasMessage"?: boolean;
         "icon"?: IconName;
         "inputId"?: string;
+        /**
+          * Explicit tabindex for the native input. Radio/checkbox groups inside the `eds-input-field` shadow root (delegatesFocus) get skipped by sequential keyboard navigation unless each input is explicitly in the tab order.
+         */
+        "inputTabIndex"?: number;
         "max"?: number;
         "maxLength"?: number;
         "min"?: number;
@@ -4997,6 +5239,28 @@ declare namespace LocalJSX {
          */
         "value"?: string | number;
     }
+    interface EdsKgLearningResources {
+        /**
+          * API endpoint for fetching learning resources
+         */
+        "apiEndpoint"?: string;
+        /**
+          * Component heading
+         */
+        "heading"?: string;
+        /**
+          * Whether to resolve software names
+         */
+        "resolveNames"?: boolean;
+        /**
+          * Max resources to fetch
+         */
+        "size"?: number;
+        /**
+          * Visual variant for accordions and cards
+         */
+        "variant"?: 'default' | 'inverse';
+    }
     interface EdsKgWebServicesSelect {
         /**
           * API endpoint for fetching web services Defaults to cached endpoint for better performance
@@ -5344,6 +5608,69 @@ declare namespace LocalJSX {
          */
         "selectedRating"?: number;
     }
+    /**
+     * Searchable, source-agnostic select for HUGE option lists (countries,
+     * currencies, nationalities, …) — the generalised sibling of
+     * eds-kg-web-services-select.
+     * It never talks to an external API directly. It either filters an inline
+     * `options` array client-side, or queries a VETTED, NAMED `source` through our
+     * own datasets registry (`/api/v1/datasets/<source>/search`), which returns the
+     * one normalised shape `{ items: [{label, value}], total, nextOffset }`. Any
+     * messy upstream schema is flattened server-side by an adapter — the component
+     * stays dumb.
+     * Rendering is result-capped (we render at most `maxVisible` rows and tell the
+     * user to keep typing) so a 5,000-item source never blows up the DOM. Remote
+     * sources are additionally bounded by the server's page `limit`.
+     */
+    interface EdsSearchSelect {
+        /**
+          * Base path for the datasets API.
+         */
+        "apiBase"?: string;
+        /**
+          * Debounce (ms) before a remote search fires.
+         */
+        "debounceMs"?: number;
+        "disabled"?: boolean;
+        "error"?: boolean;
+        "errorMessage"?: string;
+        "hint"?: string;
+        "label"?: string;
+        /**
+          * Server page size for remote sources.
+         */
+        "limit"?: number;
+        /**
+          * Max rows rendered at once (DOM cap).
+         */
+        "maxVisible"?: number;
+        "message"?: string;
+        /**
+          * Allow selecting multiple values — selections render as removable tags.
+         */
+        "multiple"?: boolean;
+        "name": string;
+        "onEdschange"?: (event: EdsSearchSelectCustomEvent<{ value: string | boolean | string[] }>) => void;
+        "onEdsinput"?: (event: EdsSearchSelectCustomEvent<{ value: string | boolean | string[] }>) => void;
+        /**
+          * Inline options: an array or a JSON string of [{label, value}].
+         */
+        "options"?: Option[] | string;
+        "placeholder"?: string;
+        "required"?: boolean;
+        /**
+          * Query param name the search term is sent as.
+         */
+        "searchParam"?: string;
+        /**
+          * A vetted registry source key, e.g. "countries" / "currencies".
+         */
+        "source"?: string;
+        /**
+          * Selected value. A single value string in single-select mode, or an array of values in multi-select mode. v-model friendly.
+         */
+        "value"?: string | string[];
+    }
     interface EdsSectionCore {
         /**
           * The heading level for the section title, such as 'h1', 'h2', etc. Default is 'h2'.
@@ -5610,10 +5937,6 @@ declare namespace LocalJSX {
           * Array of actions to render in each row. Can be passed as a JSON string or as a `TableAction[]`.  Each action object may include:  - `name`       (string; required)  — unique action key, e.g. `"view"`, `"delete"`.  - `label`      (string; required)  — text shown on the button, or used as the tooltip/aria-label when icon-only.  - `type`       ("button" | "checkbox"; optional) — whether to render a standard button (default) or a checkbox.  - `icon`       (string; optional)  — name of the icon to display in icon-only mode.  - `field`      (string; optional)  — for checkboxes, the row field whose truthiness binds the checked state (defaults to `name`).  - `showLabel`  (boolean; optional) — if `true`, render the full `label` instead of an icon + tooltip.  - `intent`     ("brand" | "primary" | "secondary" | "neutral" | "ghost" | "brandInverse" | "secondaryInverse" | "ghostInverse"; optional) — button intent/style.  When you pass JSON, make sure field names match exactly: ```html actions='[   { "name":"view",  "label":"View",  "icon":"eye", "intent":"brand" },   { "name":"edit",  "label":"Edit",  "icon":"pencil", "showLabel":true, "intent":"primary" },   { "name":"del",   "label":"Delete","type":"checkbox", "field":"selected" } ]' ```
          */
         "actions"?: string | TableAction[];
-        /**
-          * Optional property to control the column sizing mode. - 'default' uses containerWidth / visibleColumns. - 'medium' divides that result by 2. - 'large' divides that result by 4.
-         */
-        "columnSize"?: 'default' | 'medium' | 'large';
         /**
           * Config object to hide or format columns
          */
@@ -5658,9 +5981,9 @@ declare namespace LocalJSX {
          */
         "sortingEnabled"?: boolean;
         /**
-          * Theme for table styling: - 'default': Simple rows with no background - 'color': Alternating row colors - 'brand': Modern brand styling with hover effects and green accents
+          * Theme for table styling.  The 'default' (no background) and 'color' (alternating rows) themes are DISABLED — the table now always renders the EBRAINS 'brand' theme (modern styling, hover, green accents). The prop is kept for API compatibility but is coerced to 'brand' in componentWillLoad(), so any value a consumer passes is ignored.
          */
-        "theme"?: 'default' | 'color' | 'brand';
+        "theme"?: 'brand';
         /**
           * View mode for displaying data: - 'table': Traditional table layout (default) - 'card': Card grid layout
          */
@@ -5751,6 +6074,58 @@ declare namespace LocalJSX {
         "content"?: string;
         "position"?: 'top' | 'bottom';
     }
+    /**
+     * `EdsTrlBadge` — public EBRAINS TRL badge, aligned with the EBRAINS visual
+     * system (Black `#07140D`, Green `#00FF9D`, Dark Green `#00C87B`, Grey
+     * `#7A7B7A`, IBM Plex Mono) and using the **official EBRAINS sphere mark**.
+     * Renders a self-contained inline `<svg>` (same markup the server-side
+     * `badge.svg` endpoint emits), so it embeds anywhere and stays crisp.
+     * Variants:
+     * - `tone`     — CI-style label + value pill (dark or light `theme`).
+     * - `full`     — single bar with the full string.
+     * - `pill`     — compact rounded "TRL 7".
+     * - `outline`  — thin border, transparent fill, mono caps (dark or light).
+     * - `scale`    — nine readiness pips showing position on the 1–9 scale.
+     * The value/pip colour encodes maturity within the brand palette:
+     * TRL 7–9 → green, 4–6 → dark green, 1–3 → grey.
+     * @example <eds-trl-badge level={7} assessed="2026-06" methodology="v8.2"></eds-trl-badge>
+     * <eds-trl-badge level={7} variant="outline" theme="light"></eds-trl-badge>
+     * <eds-trl-badge level={7} variant="scale" size={32}></eds-trl-badge>
+     */
+    interface EdsTrlBadge {
+        /**
+          * Assessment month, e.g. "2026-06".
+         */
+        "assessed"?: string;
+        /**
+          * Optional link (methodology or service page).
+         */
+        "href"?: string;
+        /**
+          * Left-segment / leading label.
+         */
+        "label"?: string;
+        /**
+          * TRL level, 1–9.
+         */
+        "level": number;
+        /**
+          * Methodology version, e.g. "v8.2".
+         */
+        "methodology"?: string;
+        /**
+          * Rendered height in px. Scales the whole badge crisply (viewBox is fixed).
+         */
+        "size"?: number;
+        /**
+          * Colour theme for the `tone` / `outline` / `scale` variants.
+         */
+        "theme"?: 'dark' | 'light';
+        /**
+          * 'tone' | 'full' | 'pill' | 'outline' | 'scale'.
+         */
+        "variant"?: 'tone' | 'full' | 'pill' | 'outline' | 'scale';
+    }
     /**
      * `EdsUser` is a user component for managing and displaying
      * the user's auth information. Displays a user dropdown menu when authenticated.
@@ -5863,6 +6238,7 @@ declare namespace LocalJSX {
         "eds-input-range": EdsInputRange;
         "eds-input-search": EdsInputSearch;
         "eds-input-select": EdsInputSelect;
+        "eds-kg-learning-resources": EdsKgLearningResources;
         "eds-kg-web-services-select": EdsKgWebServicesSelect;
         "eds-link": EdsLink;
         "eds-logo": EdsLogo;
@@ -5873,6 +6249,7 @@ declare namespace LocalJSX {
         "eds-pie": EdsPie;
         "eds-progress-bar": EdsProgressBar;
         "eds-rating": EdsRating;
+        "eds-search-select": EdsSearchSelect;
         "eds-section-core": EdsSectionCore;
         "eds-section-heading": EdsSectionHeading;
         "eds-sidebar": EdsSidebar;
@@ -5889,6 +6266,7 @@ declare namespace LocalJSX {
         "eds-toast": EdsToast;
         "eds-toast-manager": EdsToastManager;
         "eds-tooltip": EdsTooltip;
+        "eds-trl-badge": EdsTrlBadge;
         "eds-user": EdsUser;
         "gradient-primary-palette": GradientPrimaryPalette;
         "gradient-secondary-palette": GradientSecondaryPalette;
@@ -6082,16 +6460,24 @@ declare module "@stencil/core" {
             "eds-dropdown": LocalJSX.EdsDropdown & JSXBase.HTMLAttributes<HTMLEdsDropdownElement>;
             "eds-feedback": LocalJSX.EdsFeedback & JSXBase.HTMLAttributes<HTMLEdsFeedbackElement>;
             /**
-             * `EdsFooter` is a footer component designed for the EBRAINS platform, featuring social links,
-             * legal information, and an optional cookie preferences button. It includes a "Back to top"
-             * button and displays an acknowledgment for Horizon Europe funding.
-             * Key Features:
-             * - Social Network Links: Optionally display a section for social media links.
-             * - Legal and Funding Information: Includes text for legal disclaimers and funding acknowledgments.
-             * - Cookie Preferences: Optionally display a "Cookies Preferences" button.
-             * - Back to Top Button: Smoothly scrolls the page back to the top when clicked.
-             * This component is ideal for maintaining consistent branding, legal disclaimers, and navigational elements
-             * across the EBRAINS platform, with options for social links and a "Back to top" button.
+             * `EdsFooter` is the EBRAINS-wide footer component.
+             * Renders a 4-column layout matching the eds-docs landing footer:
+             *   [ Brand (EU flag + funding text + copyright)  |  Resources  |  Community  |  Legal ]
+             * Defaults are designed so a consumer that writes `<eds-footer></eds-footer>`
+             * with no props gets the full canonical EBRAINS footer rendered — same
+             * brand block, same link columns, same dark theme as the eds-docs
+             * landing page. The previous minimal-strip footer is replaced; consumers
+             * that need different link content pass the `columns` prop (array or
+             * JSON-stringified array for HTML attribute use).
+             * Configurability without breakage:
+             * - All previous props remain (`social`, `variant`, `fundedBy`,
+             *   `rightsReserved`, `enableScrollTop`, `enableCookiesSettings`,
+             *   `cookiesPreferences`, `backToTopAriaLabel`). Their meanings are
+             *   preserved.
+             * - New `columns` prop is optional — omit it for the defaults.
+             * - The `enableCookiesSettings` toggle now decides whether any column
+             *   link with `action: 'cookies'` is rendered (default false; pass
+             *   true to surface the Cookie Preferences entry in the Legal column).
              */
             "eds-footer": LocalJSX.EdsFooter & JSXBase.HTMLAttributes<HTMLEdsFooterElement>;
             /**
@@ -6157,6 +6543,7 @@ declare module "@stencil/core" {
             "eds-input-range": LocalJSX.EdsInputRange & JSXBase.HTMLAttributes<HTMLEdsInputRangeElement>;
             "eds-input-search": LocalJSX.EdsInputSearch & JSXBase.HTMLAttributes<HTMLEdsInputSearchElement>;
             "eds-input-select": LocalJSX.EdsInputSelect & JSXBase.HTMLAttributes<HTMLEdsInputSelectElement>;
+            "eds-kg-learning-resources": LocalJSX.EdsKgLearningResources & JSXBase.HTMLAttributes<HTMLEdsKgLearningResourcesElement>;
             "eds-kg-web-services-select": LocalJSX.EdsKgWebServicesSelect & JSXBase.HTMLAttributes<HTMLEdsKgWebServicesSelectElement>;
             /**
              * `EdsLink` is a versatile link component offering different styles and behaviors.
@@ -6207,6 +6594,21 @@ declare module "@stencil/core" {
             "eds-pie": LocalJSX.EdsPie & JSXBase.HTMLAttributes<HTMLEdsPieElement>;
             "eds-progress-bar": LocalJSX.EdsProgressBar & JSXBase.HTMLAttributes<HTMLEdsProgressBarElement>;
             "eds-rating": LocalJSX.EdsRating & JSXBase.HTMLAttributes<HTMLEdsRatingElement>;
+            /**
+             * Searchable, source-agnostic select for HUGE option lists (countries,
+             * currencies, nationalities, …) — the generalised sibling of
+             * eds-kg-web-services-select.
+             * It never talks to an external API directly. It either filters an inline
+             * `options` array client-side, or queries a VETTED, NAMED `source` through our
+             * own datasets registry (`/api/v1/datasets/<source>/search`), which returns the
+             * one normalised shape `{ items: [{label, value}], total, nextOffset }`. Any
+             * messy upstream schema is flattened server-side by an adapter — the component
+             * stays dumb.
+             * Rendering is result-capped (we render at most `maxVisible` rows and tell the
+             * user to keep typing) so a 5,000-item source never blows up the DOM. Remote
+             * sources are additionally bounded by the server's page `limit`.
+             */
+            "eds-search-select": LocalJSX.EdsSearchSelect & JSXBase.HTMLAttributes<HTMLEdsSearchSelectElement>;
             "eds-section-core": LocalJSX.EdsSectionCore & JSXBase.HTMLAttributes<HTMLEdsSectionCoreElement>;
             "eds-section-heading": LocalJSX.EdsSectionHeading & JSXBase.HTMLAttributes<HTMLEdsSectionHeadingElement>;
             "eds-sidebar": LocalJSX.EdsSidebar & JSXBase.HTMLAttributes<HTMLEdsSidebarElement>;
@@ -6259,6 +6661,25 @@ declare module "@stencil/core" {
              * `EdsTooltip` dynamically positions a tooltip centered above the slotted element.
              */
             "eds-tooltip": LocalJSX.EdsTooltip & JSXBase.HTMLAttributes<HTMLEdsTooltipElement>;
+            /**
+             * `EdsTrlBadge` — public EBRAINS TRL badge, aligned with the EBRAINS visual
+             * system (Black `#07140D`, Green `#00FF9D`, Dark Green `#00C87B`, Grey
+             * `#7A7B7A`, IBM Plex Mono) and using the **official EBRAINS sphere mark**.
+             * Renders a self-contained inline `<svg>` (same markup the server-side
+             * `badge.svg` endpoint emits), so it embeds anywhere and stays crisp.
+             * Variants:
+             * - `tone`     — CI-style label + value pill (dark or light `theme`).
+             * - `full`     — single bar with the full string.
+             * - `pill`     — compact rounded "TRL 7".
+             * - `outline`  — thin border, transparent fill, mono caps (dark or light).
+             * - `scale`    — nine readiness pips showing position on the 1–9 scale.
+             * The value/pip colour encodes maturity within the brand palette:
+             * TRL 7–9 → green, 4–6 → dark green, 1–3 → grey.
+             * @example <eds-trl-badge level={7} assessed="2026-06" methodology="v8.2"></eds-trl-badge>
+             * <eds-trl-badge level={7} variant="outline" theme="light"></eds-trl-badge>
+             * <eds-trl-badge level={7} variant="scale" size={32}></eds-trl-badge>
+             */
+            "eds-trl-badge": LocalJSX.EdsTrlBadge & JSXBase.HTMLAttributes<HTMLEdsTrlBadgeElement>;
             /**
              * `EdsUser` is a user component for managing and displaying
              * the user's auth information. Displays a user dropdown menu when authenticated.