@ebrains/components 3.0.0 → 3.1.0

package/dist/collection/shared-ui/eds-search-select/eds-search-select.stories.js

@@ -0,0 +1,85 @@
+const SAMPLE_OPTIONS = [
+    { label: 'Austria', value: 'AT' },
+    { label: 'Belgium', value: 'BE' },
+    { label: 'France', value: 'FR' },
+    { label: 'Germany', value: 'DE' },
+    { label: 'Greece', value: 'GR' },
+    { label: 'Italy', value: 'IT' },
+    { label: 'Netherlands', value: 'NL' },
+    { label: 'Spain', value: 'ES' },
+    { label: 'Sweden', value: 'SE' },
+    { label: 'Switzerland', value: 'CH' }
+];
+export default {
+    title: 'Components/Inputs/Search Select',
+    component: 'eds-search-select',
+    argTypes: {
+        name: { control: 'text', description: 'Name attribute for form submission.' },
+        label: { control: 'text', description: 'Field label.' },
+        placeholder: { control: 'text', description: 'Placeholder text.' },
+        hint: { control: 'text', description: 'Hint shown next to the label.' },
+        message: { control: 'text', description: 'Message shown below the field.' },
+        required: { control: 'boolean', description: 'If true, the field is required.' },
+        disabled: { control: 'boolean', description: 'If true, the field is disabled.' },
+        error: { control: 'boolean', description: 'Render the field in an error state.' },
+        errorMessage: { control: 'text', description: 'Error message shown when invalid.' },
+        multiple: { control: 'boolean', description: 'Allow selecting multiple values (renders tags).' },
+        options: {
+            control: 'object',
+            description: 'Inline options [{ label, value }]. Provide EITHER this OR `source` (a vetted server dataset name).'
+        },
+        source: {
+            control: 'text',
+            description: 'Named server dataset queried via the datasets API (e.g. "countries", "nationalities"). Requires the unified-api; leave empty to use inline `options`.'
+        }
+    },
+    args: {
+        name: 'country',
+        label: 'Country',
+        placeholder: 'Search…',
+        required: false,
+        disabled: false,
+        error: false,
+        multiple: false,
+        options: SAMPLE_OPTIONS
+    }
+};
+// Build the element imperatively so `options` is assigned as a real array prop.
+const renderSelect = (args) => {
+    const el = document.createElement('eds-search-select');
+    el.name = args.name;
+    if (args.label)
+        el.label = args.label;
+    if (args.placeholder)
+        el.placeholder = args.placeholder;
+    if (args.hint)
+        el.hint = args.hint;
+    if (args.message)
+        el.message = args.message;
+    el.required = !!args.required;
+    el.disabled = !!args.disabled;
+    el.error = !!args.error;
+    if (args.errorMessage)
+        el.errorMessage = args.errorMessage;
+    el.multiple = !!args.multiple;
+    if (args.source) {
+        el.source = args.source;
+    }
+    else if (args.options) {
+        el.options = args.options;
+    }
+    return el;
+};
+/** Single-select with inline options (no backend required). */
+export const Default = {
+    render: renderSelect
+};
+/** Multi-select — selected values render as removable tags. */
+export const Multiple = {
+    render: renderSelect,
+    args: {
+        name: 'countries',
+        label: 'Countries',
+        multiple: true
+    }
+};

package/dist/collection/shared-ui/eds-trl-badge/ebrains-mark.js

@@ -0,0 +1,26 @@
+/* eslint-disable */
+/**
+ * Official EBRAINS sphere mark, extracted from
+ * packages/assets/EBRAINS_logo_25/new_ebrains_logo_rgb/250901_new_ebrains_logo_rgb_positive.svg
+ * (the gradient-filled wave segments only — wordmark dropped).
+ *
+ * Gradient ids carry a `__UID__` placeholder so each badge instance can
+ * namespace them (no <defs> collisions when several badges share a page).
+ * Gradient template inheritance uses SVG2 `href` (no xlink namespace needed).
+ * Use markDefs() inside the badge <defs> and markGroup() in the body.
+ */
+const MARK_DEFS = `<linearGradient id="__UID__Unbenannter_Verlauf_29" x1="-26.7" y1="64.8" x2="155" y2="-19.9" gradientUnits="userSpaceOnUse"> <stop offset="0" stop-color="#03a98f"/> <stop offset=".1" stop-color="#10a97b"/> <stop offset=".3" stop-color="#23aa5f"/> <stop offset="1" stop-color="#00ff9d"/> </linearGradient><linearGradient id="__UID__Unbenannter_Verlauf_291" x1="38.6" y1="205" x2="220.3" y2="120.2" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_292" x1="33" y1="193" x2="214.8" y2="108.3" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_293" x1="-3.5" y1="114.7" x2="178.3" y2="30" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_294" x1="4.5" y1="131.8" x2="186.2" y2="47.1" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_295" x1="28.6" y1="183.6" x2="210.4" y2="98.9" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_296" x1="3.8" y1="130.3" x2="185.5" y2="45.5" href="#__UID__Unbenannter_Verlauf_29"/><linearGradient id="__UID__Unbenannter_Verlauf_297" x1="18" y1="160.6" x2="199.7" y2="75.9" href="#__UID__Unbenannter_Verlauf_29"/>`;
+const MARK_PATHS = `<path fill="url(#__UID__Unbenannter_Verlauf_29)" d="M67.3,19.9c11.2-2.3,22.5-1,32.1,1.5.8.2,1.2-.8.5-1.3-11.6-7.3-20.9-11.4-26.6-13.5l-18.3,4.9c-3.4.9-6.4,2.7-8.9,5.1l-29.6,29.6c-2.5,2.5-4.2,5.5-5.1,8.9l-.7,2.6c1.7-1.5,3.4-3.2,5.2-4.9,12.6-12,29.9-28.4,51.3-32.9Z"/><path fill="url(#__UID__Unbenannter_Verlauf_291)" d="M33.8,172.2l12.3,12.3c2.5,2.5,5.5,4.2,8.9,5.1l40.4,10.8c3.4.9,6.9.9,10.2,0l40.4-10.8c3.4-.9,6.4-2.7,8.9-5.1l2.8-2.8c-80-32.2-119-12.3-123.9-9.5Z"/><path fill="url(#__UID__Unbenannter_Verlauf_292)" d="M97.7,137.4c-25.1.2-51.1.4-78.8,19.8l10.5,10.5h.1c2-1.5,42.4-27.9,132.8,9.1h.2c0,.1,18.6-18.4,18.6-18.4-7.8-2.8-58.6-21-83.1-21h-.3Z"/><path fill="url(#__UID__Unbenannter_Verlauf_293)" d="M137.2,41h0c2.6,2.4,5.3,5,8,7.7,26.3,26.3,43.8,37.2,53.9,41.8l-9.5-35.5c-.9-3.4-2.7-6.4-5.1-8.9l-29.6-29.6c-2.5-2.5-5.5-4.2-8.9-5.1L105.7.7c-3.4-.9-6.9-.9-10.2,0l-12.1,3.2c12.4,5.6,31.5,16.5,53.7,37,0,0,.1.1.2.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_294)" d="M132.7,86.1c4.9,1.6,26.3,12,26.3,12,1.7.7,7.3,3.3,8.9,4.1.7.3,1.3-.6.8-1.1-1.5-1.4-5.8-5-10.9-8.6,0,0-21.8-15.4-27.2-18.5-7.8-4.3-47.4-26.7-81.3-10C25.8,75.6,8,89.7.6,96c-.8,3.2-.7,6.5.1,9.7l3.4,12.8c7.2-6.7,20.2-17.2,40.4-28.2,35.4-19.2,61.9-12.8,88.2-4.2Z"/><path fill="url(#__UID__Unbenannter_Verlauf_295)" d="M55.9,128c-3.1,1.7-17.5,10.3-17.5,10.3,0,0-4.9,3-.2,1.9,2-.5,7.8-3.1,9.7-3.6,0,0,19.1-7,49.8-5.4.1,0,.2,0,.4,0,27.6,0,84.2,21,86.6,21.9l1.1.5c1.8-2.2,3.2-4.7,3.9-7.5l2.7-10.2c-14.1-5.9-55.1-22.3-81-22.3s-55.3,14.3-55.5,14.4Z"/><path fill="url(#__UID__Unbenannter_Verlauf_296)" d="M131.7,44.5c-2-1.7-4.9-3.9-8.5-6.3-1.8-1.3-3.6-2.3-5.4-3.2-8.1-4.1-29.1-13.1-49.2-9-19.7,4.1-35.5,19.2-48.2,31.3-4.7,4.5-8.7,8.3-12.4,11.1l-4.6,17.2c9.4-7.4,24.4-18,43.2-27.2,36.9-18.1,79.2,5.4,87.3,10.3,12.1,7.3,47.9,34.4,64,46.8l2.6-9.8c.7-2.5.8-5,.5-7.5-10.4-3.8-29.7-14.5-60.2-45-3.1-3.1-6.1-5.9-9.1-8.6Z"/><path fill="url(#__UID__Unbenannter_Verlauf_297)" d="M47.5,95.8c-22.1,12-35.5,23.6-41.5,29.6l5.5,20.7c.3,1.2.8,2.4,1.4,3.5,9.5-9.3,38.6-26.3,39.8-27,1-.6,25.6-15.3,58.7-15.3s67.5,16,82.6,22.4l1.1-4.2c-9.9-6.7-37.4-24.5-64.4-33.5-24.9-8.3-50-14.3-83.2,3.8Z"/>`;
+/** Gradient <defs> for the mark, namespaced with `uid`. */
+export function markDefs(uid) {
+    return MARK_DEFS.replace(/__UID__/g, uid);
+}
+/**
+ * The mark paths wrapped in a positioned, scaled group.
+ * The source artwork lives in a ~201×201 canvas; `size` is the rendered px.
+ */
+export function markGroup(uid, x, y, size = 16) {
+    const s = (size / 201.1).toFixed(4);
+    const paths = MARK_PATHS.replace(/__UID__/g, uid);
+    return `<g transform="translate(${x},${y}) scale(${s})">${paths}</g>`;
+}

package/dist/collection/shared-ui/eds-trl-badge/eds-trl-badge.css

@@ -0,0 +1,22 @@
+/* ============================================
+   EDS TRL BADGE — EBRAINS visual system
+   Renders a self-contained inline SVG (colours/fonts baked into the
+   markup so it embeds identically anywhere). The host only handles
+   layout + the optional link wrapper.
+   ============================================ */
+
+:host {
+  display: inline-block;
+  line-height: 0; /* no descender gap under the inline SVG */
+}
+
+.link {
+  display: inline-block;
+  line-height: 0;
+  text-decoration: none;
+  color: inherit;
+}
+
+.link svg {
+  display: block;
+}

package/dist/collection/shared-ui/eds-trl-badge/eds-trl-badge.js

@@ -0,0 +1,321 @@
+import { h, Host } from "@stencil/core";
+import { markDefs, markGroup } from "./ebrains-mark";
+let _uid = 0;
+/**
+ * `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>
+ */
+export class EdsTrlBadge {
+    constructor() {
+        /** Per-instance suffix so the mark's gradient ids never collide. */
+        this.uid = `trl${++_uid}-`;
+        this.level = undefined;
+        this.assessed = undefined;
+        this.methodology = undefined;
+        this.theme = 'dark';
+        this.variant = 'tone';
+        this.size = undefined;
+        this.label = 'EBRAINS TRL';
+        this.href = undefined;
+    }
+    esc(s) {
+        return String(s).replace(/&/g, '&amp;').replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;').replace(/"/g, '&quot;');
+    }
+    /** Maturity tier → value/pip colour (brand palette). */
+    levelColor() {
+        const n = Number(this.level);
+        if (n >= 7)
+            return '#00FF9D';
+        if (n >= 4)
+            return '#00C87B';
+        return '#7A7B7A';
+    }
+    /** Readable value text on a coloured segment (black on green, light on grey). */
+    valueText() {
+        return Number(this.level) >= 4 ? '#07140D' : '#ECECEC';
+    }
+    fullText() {
+        const parts = [`${this.label} ${this.level}`];
+        if (this.assessed)
+            parts.push(`assessed ${this.assessed}`);
+        if (this.methodology)
+            parts.push(`methodology ${this.methodology}`);
+        return parts.join(' · ');
+    }
+    /** Build the inner markup + intrinsic dimensions for the chosen variant. */
+    build() {
+        const CW = EdsTrlBadge.CW;
+        const uid = this.uid;
+        const clip = `${uid}clip`;
+        const valColor = this.levelColor();
+        const logoSpace = 28; // 8 margin + ~16 mark + 4 gap
+        const mono = `font-family="'IBM Plex Mono',monospace"`;
+        const lvl = this.esc(String(this.level));
+        if (this.variant === 'full') {
+            const tail = (this.assessed ? ` · assessed ${this.esc(this.assessed)}` : '') +
+                (this.methodology ? ` · methodology ${this.esc(this.methodology)}` : '');
+            const w = Math.ceil(logoSpace + this.fullText().length * CW + 10);
+            const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` +
+                `<g clip-path="url(#${clip})"><rect width="${w}" height="24" fill="#07140D"/></g>${markGroup(uid, 8, 4, 16)}` +
+                `<text x="30" y="15.5" ${mono} font-size="11" letter-spacing=".2">` +
+                `<tspan fill="#ECECEC">${this.esc(this.label)} </tspan>` +
+                `<tspan fill="${valColor}" font-weight="600">${lvl}</tspan>` +
+                `<tspan fill="#7A7B7A">${this.esc(tail)}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'pill') {
+            const txt = `TRL ${this.level}`;
+            const w = Math.ceil(logoSpace + txt.length * CW + 14);
+            const tx = logoSpace + (w - logoSpace) / 2 - 4;
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect width="${w}" height="24" rx="12" fill="#07140D"/>${markGroup(uid, 7, 4, 16)}` +
+                `<text x="${tx}" y="16" ${mono} font-size="11" font-weight="500" letter-spacing=".5" text-anchor="middle">` +
+                `<tspan fill="#ECECEC">TRL </tspan><tspan fill="${valColor}" font-weight="600">${lvl}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'outline') {
+            const dark = this.theme !== 'light';
+            const bg = dark ? '#0c1c14' : '#ffffff';
+            const stroke = dark ? '#34473d' : '#07140D';
+            const labelColor = dark ? '#ECECEC' : '#07140D';
+            const sep = dark ? '#5a6b62' : '#9aa39d';
+            const value = dark ? valColor : (Number(this.level) >= 4 ? '#00966a' : '#7A7B7A');
+            const w = Math.ceil(logoSpace + (this.label + ' · ' + this.level).length * CW + 12);
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect x=".5" y=".5" width="${w - 1}" height="23" rx="6" fill="${bg}" stroke="${stroke}"/>${markGroup(uid, 8, 4, 16)}` +
+                `<text x="30" y="16" ${mono} font-size="11" letter-spacing=".3">` +
+                `<tspan fill="${labelColor}">${this.esc(this.label)} </tspan>` +
+                `<tspan fill="${sep}">· </tspan>` +
+                `<tspan fill="${value}" font-weight="600">${lvl}</tspan></text>`;
+            return { w, h: 24, inner };
+        }
+        if (this.variant === 'scale') {
+            const dark = this.theme !== 'light';
+            const bg = dark ? '#07140D' : '#ECECEC';
+            const labelColor = dark ? '#ECECEC' : '#07140D';
+            const emptyPip = dark ? '#2f4339' : '#c4ccc7';
+            const sep = dark ? '#5a6b62' : '#9aa39d';
+            const n = Math.max(0, Math.min(9, Number(this.level) || 0));
+            const pipStart = Math.ceil(30 + this.label.length * CW + 12);
+            const pipStep = 9, pipW = 6, pipH = 8, pipY = 9;
+            let pips = '';
+            for (let i = 0; i < 9; i++) {
+                const x = pipStart + i * pipStep;
+                pips += `<rect x="${x}" y="${pipY}" width="${pipW}" height="${pipH}" rx="1" fill="${i < n ? valColor : emptyPip}"/>`;
+            }
+            const valueX = pipStart + 9 * pipStep + 5;
+            const w = Math.ceil(valueX + `${this.level}/9`.length * CW + 8);
+            const inner = `<defs>${markDefs(uid)}</defs>` +
+                `<rect width="${w}" height="26" rx="6" fill="${bg}"/>${markGroup(uid, 8, 5, 16)}` +
+                `<text x="30" y="17" ${mono} font-size="11" letter-spacing=".3" fill="${labelColor}">${this.esc(this.label)}</text>` +
+                `<g>${pips}</g>` +
+                `<text x="${valueX}" y="17" ${mono} font-size="11" font-weight="500">` +
+                `<tspan fill="${valColor}">${lvl}</tspan><tspan fill="${sep}">/9</tspan></text>`;
+            return { w, h: 26, inner };
+        }
+        // tone (default) — dark or light theme
+        const dark = this.theme !== 'light';
+        const labelBg = dark ? '#07140D' : '#ECECEC';
+        const labelTextColor = dark ? '#ECECEC' : '#07140D';
+        const valTextColor = dark ? this.valueText() : '#07140D';
+        const labelSegW = Math.ceil(logoSpace + this.label.length * CW + 12);
+        const valSegW = Math.ceil(12 + String(this.level).length * CW + 12);
+        const w = labelSegW + valSegW;
+        const inner = `<defs><clipPath id="${clip}"><rect width="${w}" height="24" rx="6"/></clipPath>${markDefs(uid)}</defs>` +
+            `<g clip-path="url(#${clip})"><rect width="${labelSegW}" height="24" fill="${labelBg}"/>` +
+            `<rect x="${labelSegW}" width="${valSegW}" height="24" fill="${valColor}"/></g>${markGroup(uid, 8, 4, 16)}` +
+            `<text x="${logoSpace + (labelSegW - logoSpace) / 2}" y="16" ${mono} font-size="11" letter-spacing=".4" fill="${labelTextColor}" text-anchor="middle">${this.esc(this.label)}</text>` +
+            `<text x="${labelSegW + valSegW / 2}" y="16" ${mono} font-size="11" font-weight="600" fill="${valTextColor}" text-anchor="middle">${lvl}</text>`;
+        return { w, h: 24, inner };
+    }
+    buildSvg() {
+        const { w, h, inner } = this.build();
+        const aria = this.esc(this.fullText());
+        const k = this.size ? this.size / h : 1;
+        const outW = Math.round(w * k);
+        const outH = Math.round(h * k);
+        return `<svg xmlns="http://www.w3.org/2000/svg" width="${outW}" height="${outH}" ` +
+            `viewBox="0 0 ${w} ${h}" role="img" aria-label="${aria}"><title>${aria}</title>${inner}</svg>`;
+    }
+    render() {
+        const svg = this.buildSvg();
+        return (h(Host, { key: 'eddfb49f35ff9771d76eef13a024b840b3a24cca' }, this.href ? (h("a", { class: "link", href: this.href, "aria-label": this.fullText(), innerHTML: svg })) : (h("span", { class: "link", innerHTML: svg }))));
+    }
+    static get is() { return "eds-trl-badge"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-trl-badge.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-trl-badge.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "level": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": true,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "TRL level, 1\u20139."
+                },
+                "attribute": "level",
+                "reflect": false
+            },
+            "assessed": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Assessment month, e.g. \"2026-06\"."
+                },
+                "attribute": "assessed",
+                "reflect": false
+            },
+            "methodology": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Methodology version, e.g. \"v8.2\"."
+                },
+                "attribute": "methodology",
+                "reflect": false
+            },
+            "theme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'dark' | 'light'",
+                    "resolved": "\"dark\" | \"light\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Colour theme for the `tone` / `outline` / `scale` variants."
+                },
+                "attribute": "theme",
+                "reflect": false,
+                "defaultValue": "'dark'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'tone' | 'full' | 'pill' | 'outline' | 'scale'",
+                    "resolved": "\"full\" | \"outline\" | \"pill\" | \"scale\" | \"tone\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "'tone' | 'full' | 'pill' | 'outline' | 'scale'."
+                },
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'tone'"
+            },
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Rendered height in px. Scales the whole badge crisply (viewBox is fixed)."
+                },
+                "attribute": "size",
+                "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Left-segment / leading label."
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'EBRAINS TRL'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional link (methodology or service page)."
+                },
+                "attribute": "href",
+                "reflect": false
+            }
+        };
+    }
+}
+// IBM Plex Mono advance width at 11px (used to size segments to the text).
+EdsTrlBadge.CW = 6.8;

package/dist/collection/shared-ui/eds-trl-badge/eds-trl-badge.stories.js

@@ -0,0 +1,96 @@
+export default {
+    title: 'Shared UI/TRL Badge',
+    component: 'eds-trl-badge',
+    argTypes: {
+        level: { control: { type: 'number', min: 1, max: 9 }, description: 'TRL level (1–9).' },
+        assessed: { control: 'text', description: 'Assessment month, e.g. "2026-06".' },
+        methodology: { control: 'text', description: 'Methodology version, e.g. "v8.2".' },
+        theme: { control: 'select', options: ['dark', 'light'], description: 'Theme (tone/outline/scale).' },
+        variant: { control: 'select', options: ['tone', 'full', 'pill', 'outline', 'scale'], description: 'Badge shape.' },
+        size: { control: { type: 'number', min: 16, max: 96 }, description: 'Rendered height in px (scales the whole badge).' },
+        href: { control: 'text', description: 'Optional link.' },
+        label: { control: 'text', description: 'Leading label.' }
+    },
+    args: {
+        level: 7,
+        assessed: '2026-06',
+        methodology: 'v8.2',
+        theme: 'dark',
+        variant: 'tone',
+        size: undefined,
+        href: '',
+        label: 'EBRAINS TRL'
+    }
+};
+const render = (args) => `
+  <eds-trl-badge
+    level="${args.level}"
+    assessed="${args.assessed || ''}"
+    methodology="${args.methodology || ''}"
+    theme="${args.theme}"
+    variant="${args.variant}"
+    ${args.size ? `size="${args.size}"` : ''}
+    href="${args.href || ''}"
+    label="${args.label}">
+  </eds-trl-badge>`;
+export const ToneDark = { render };
+export const ToneLight = { args: { theme: 'light' }, render };
+export const FullMetadata = { args: { variant: 'full' }, render };
+export const Pill = { args: { variant: 'pill' }, render };
+export const OutlineDark = { args: { variant: 'outline' }, render };
+export const OutlineLight = { args: { variant: 'outline', theme: 'light' }, render };
+export const ReadinessScale = { args: { variant: 'scale' }, render };
+export const Sized = { args: { variant: 'scale', size: 40 }, render };
+export const MaturityTiers = {
+    render: () => `
+    <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:#07140D; padding:20px; border-radius:12px;">
+      <eds-trl-badge level="9" variant="scale"></eds-trl-badge>
+      <eds-trl-badge level="5" variant="scale"></eds-trl-badge>
+      <eds-trl-badge level="2" variant="scale"></eds-trl-badge>
+    </div>`
+};
+export const AllStories = {
+    render: () => `
+    <div style="display:flex; flex-wrap:wrap; gap:24px; padding:20px;">
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Tone Dark</p>
+        <eds-trl-badge level="7" assessed="2026-06" methodology="v8.2" theme="dark" variant="tone" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Tone Light</p>
+        <eds-trl-badge level="7" assessed="2026-06" methodology="v8.2" theme="light" variant="tone" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Full Metadata</p>
+        <eds-trl-badge level="7" assessed="2026-06" theme="dark" variant="full" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Pill</p>
+        <eds-trl-badge level="7" assessed="2026-06" methodology="v8.2" theme="dark" variant="pill" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Outline Dark</p>
+        <eds-trl-badge level="7" assessed="2026-06" methodology="v8.2" theme="dark" variant="outline" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Outline Light</p>
+        <eds-trl-badge level="7" assessed="2026-06" methodology="v8.2" theme="light" variant="outline" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Readiness Scale</p>
+        <eds-trl-badge level="7" assessed="2026-06" methodology="v8.2" theme="dark" variant="scale" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Sized</p>
+        <eds-trl-badge level="7" assessed="2026-06" methodology="v8.2" theme="dark" variant="scale" size="40" label="EBRAINS TRL"></eds-trl-badge>
+      </div>
+      <div style="display:flex; flex-direction:column; gap:8px; min-width:220px;">
+        <p style="margin:0; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.04em; color:#5b6b62;">Maturity Tiers</p>
+        <div style="display:flex; gap:12px; align-items:center; flex-wrap:wrap; background:#07140D; padding:20px; border-radius:12px;">
+          <eds-trl-badge level="9" variant="scale"></eds-trl-badge>
+          <eds-trl-badge level="5" variant="scale"></eds-trl-badge>
+          <eds-trl-badge level="2" variant="scale"></eds-trl-badge>
+        </div>
+      </div>
+    </div>`
+};

package/dist/collection/shared-ui/examples/eds-app-root/eds-app-root.js

@@ -27,7 +27,7 @@ export class EdsAppRoot {
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (h("div", { key: '10a75e7e117b2f3ab3d0ba8f2a26c122b2e0eed4' }, h("eds-splash-screen", { key: 'ab527af22c9a9fe861bbed4759946428e3e7fdf0', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '78e7face11e06df76b9dd29e99b7d968cc2cf32e', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '30f463e667ccc25062bbf2764fdabc8937b6097c' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
+        return (h("div", { key: 'c9192fb7e315fa8fe41c9ee512f4573951865208' }, h("eds-splash-screen", { key: 'e3d413597cc370692c593abd4017d97e1c172219', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '2821e64738053db4809663aa918f98c4df358201', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: '4680b74ec0f74b8060b020f726f6696b41b43a9e' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
     }
     static get is() { return "eds-app-root"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/utils/eds-form/formValidators.js

@@ -43,7 +43,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);

package/dist/collection/utils/eds-form/safeFormat.js

@@ -0,0 +1,39 @@
+/**
+ * safeInlineFormat — the single, audited text→HTML formatter used everywhere a
+ * form renders author-supplied text via innerHTML (form/step description, Text
+ * Blocks, and field messages).
+ *
+ * SECURITY: escape-first, then a tiny whitelisted inline subset. Because all of
+ * &, <, >, " are turned into entities BEFORE any markup is generated, author
+ * text can never inject a tag or attribute — the only HTML produced is the
+ * <strong>, <a> and <br> emitted here. Links are restricted to http/https/mailto
+ * (others fall back to plain text), URLs cannot contain whitespace or a quote,
+ * and external links get rel="noopener noreferrer".
+ *
+ * DO NOT reorder: escaping MUST happen before tag generation, or the guarantee
+ * breaks. Keep this in sync with the JS mirror in
+ * apps/live/forms-app/src/utils/descriptionFormat.ts.
+ *
+ *   **bold**       → <strong>bold</strong>
+ *   [label](url)   → <a href="url" …>label</a>   (http/https/mailto only)
+ *   newline        → <br>
+ */
+export function safeInlineFormat(text) {
+    if (!text) {
+        return '';
+    }
+    let s = String(text)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    // bold
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    // links — safe schemes only; otherwise drop to the plain label
+    s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, label, url) => /^(https?:|mailto:)/i.test(url)
+        ? `<a href="${url}" target="_blank" rel="noopener noreferrer" class="eds-desc-link">${label}</a>`
+        : label);
+    // newlines → line breaks
+    s = s.replace(/\n/g, '<br>');
+    return s;
+}

package/dist/components/components-section.js

@@ -150,7 +150,7 @@ const ComponentsSection$1 = /*@__PURE__*/ proxyCustomElement(class ComponentsSec
         }
     }
     render() {
-        return h("div", { key: '9664cd887a7ac8a2a80f32e501cac7230620052e', class: "container" }, this.renderContent());
+        return h("div", { key: '8d781f8e27f93eb003bd4390da57503dc17a945b', class: "container" }, this.renderContent());
     }
 }, [0, "components-section", {
         "tabIndex": [2, "tab-index"]

package/dist/components/components.css

@@ -6848,6 +6848,9 @@ input[type="range"]::-webkit-slider-thumb {
 .flex-shrink-0 {
   flex-shrink: 0;
 }
+.shrink {
+  flex-shrink: 1;
+}
 .grow {
   flex-grow: 1;
 }
@@ -7425,10 +7428,6 @@ input[type="range"]::-webkit-slider-thumb {
   font-size: 1.5rem;
   line-height: 2rem;
 }
-.text-base {
-  font-size: 1rem;
-  line-height: 1.5rem;
-}
 .text-sm {
   font-size: 0.875rem;
   line-height: 1.25rem;