@ebrains/components 3.0.0 → 3.2.0

package/dist/components/eds-toast2.js

@@ -3,7 +3,7 @@ import { c as cva } from './index2.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsToastCss = ".relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n        0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-light)}.bg-success{background-color:var(--brand-green)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-dark)}.text-current{color:currentColor}.text-default{color:var(--brand-black)}.text-accent{color:var(--brand-green)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--brand-black)}.border-l-\\[3px\\]{border-left-width:3px}.border-accent{border-color:var(--brand-green)}.py-16{padding-top:1rem;padding-bottom:1rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.rounded-r-4{border-top-right-radius:4px;border-bottom-right-radius:4px}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.opacity-50{opacity:0.5}.hover\\:opacity-100:hover{opacity:1}";
+const edsToastCss = ":host{display:block}.relative{position:relative}.right-4{right:0.25rem}.bottom-4{bottom:0.25rem}.w-auto{width:auto}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-4{gap:0.25rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-8{margin-left:0.5rem}.p-12{padding:0.75rem}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.rounded-lg{border-radius:16px}.shadow-md{--tw-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 4px 6px -1px var(--tw-shadow-color),\n        0 2px 4px -2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000),\n        var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-dark{background-color:var(--grey-light)}.bg-success{background-color:var(--brand-green)}.bg-error{background-color:var(--red-200)}.bg-warning{background-color:var(--yellow-200)}.text-light{color:var(--grey-dark)}.text-current{color:currentColor}.text-default{color:var(--brand-black)}.text-accent{color:var(--brand-green)}.bg-inverse{background-color:var(--white)}.bg-strongest{background-color:var(--brand-black)}.border-l-\\[3px\\]{border-left-width:3px}.border-accent{border-color:var(--brand-green)}.py-16{padding-top:1rem;padding-bottom:1rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.rounded-r-4{border-top-right-radius:4px;border-bottom-right-radius:4px}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.opacity-50{opacity:0.5}.hover\\:opacity-100:hover{opacity:1}.banner{--rail:#7a7b7a;--surface:#ffffff;--line:#e2e2e2;--icon-bg:#f0f0f0;--icon-fg:#5a5f5c;--title:#07140d;--msg:#8a8c8a;display:flex;flex-wrap:wrap;align-items:center;gap:14px;background:var(--surface);border:1px solid var(--line);border-left:3px solid var(--rail);border-radius:12px;padding:15px 18px}.banner--brand,.banner--info{--rail:var(--brand-green, #00ff9d);--icon-bg:rgba(0, 255, 157, 0.12);--icon-fg:var(--green-d, #00c87b);--title:var(--brand-black, #07140d);--msg:#8a8c8a}.banner--success{--rail:var(--green-d, #00c87b);--surface:#f0fbf6;--line:#cdeede;--icon-bg:rgba(0, 200, 123, 0.12);--icon-fg:var(--green-d, #00c87b);--title:#0a6b46;--msg:#5a7a6c}.banner--warning{--rail:#b26b00;--surface:#fff6e6;--line:#f0dcb4;--icon-bg:rgba(178, 107, 0, 0.12);--icon-fg:#b26b00;--title:#b26b00;--msg:#8a6a2a}.banner--error{--rail:#c0392b;--surface:#fdf0ee;--line:#f2cfc9;--icon-bg:rgba(192, 57, 43, 0.1);--icon-fg:#c0392b;--title:#c0392b;--msg:#8d5049}.banner-ic{flex:0 0 auto;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;background:var(--icon-bg);color:var(--icon-fg)}.banner-copy{flex:1 1 auto;min-width:0}.banner-title{font-family:var(--sans, 'IBM Plex Sans', system-ui, sans-serif);font-size:14.5px;font-weight:600;color:var(--title)}.banner-msg{font-family:var(--mono, 'IBM Plex Mono', ui-monospace, monospace);font-size:10.5px;letter-spacing:0.04em;color:var(--msg);line-height:1.45;margin-top:3px}.banner-title+.banner-msg{margin-top:3px}.banner-actions{flex:0 0 auto;display:flex;align-items:center;gap:16px}.banner-x{flex:0 0 auto;border:none;background:transparent;color:var(--msg);cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:4px;border-radius:6px;opacity:0.6;transition:opacity 0.14s, background 0.14s}.banner-x:hover{opacity:1;background:rgba(0, 0, 0, 0.05)}@media (max-width: 1024px){.banner-actions{gap:12px}}";
 const EdsToastStyle0 = edsToastCss;
 
 const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
@@ -13,6 +13,8 @@ const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
             success: 'bg-success text-dark',
             error: 'bg-error text-dark',
             warning: 'bg-warning text-dark',
+            info: 'bg-dark text-dark',
+            neutral: 'bg-dark text-dark',
             brand: 'bg-strongest text-accent',
             brandInverse: 'bg-inverse text-default'
         }
@@ -21,6 +23,16 @@ const toastStyles = cva(['relative bottom-4 w-auto rounded-xs p-12'], {
         intent: 'default'
     }
 });
+/** Fallback leading icon per intent for the `banner` variant. */
+const DEFAULT_BANNER_ICON = {
+    default: 'information',
+    neutral: 'information',
+    info: 'information',
+    brand: 'information',
+    success: 'checkmark',
+    warning: 'warning',
+    error: 'warning'
+};
 const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLElement {
     constructor() {
         super();
@@ -36,12 +48,23 @@ const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLEle
         };
         this.message = undefined;
         this.intent = 'default';
+        this.variant = 'toast';
+        this.heading = undefined;
+        this.icon = undefined;
+        this.dismissible = false;
         this.duration = undefined;
         this.visible = true;
+        this.hasActions = false;
+    }
+    componentWillLoad() {
+        // Slotted actions live in light DOM (children with slot="actions").
+        this.hasActions = !!this.el.querySelector('[slot="actions"]');
     }
     componentDidLoad() {
         const btn = this.el.shadowRoot.querySelector('eds-button');
-        this.emitContext(btn);
+        if (btn) {
+            this.emitContext(btn);
+        }
     }
     /**
      * Emits a custom event called `parentContext` for a given button element.
@@ -67,10 +90,18 @@ const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLEle
         // Clear the timeout when the component is removed
         clearTimeout(this.dismissTimeout);
     }
+    renderBanner() {
+        const iconName = this.icon || DEFAULT_BANNER_ICON[this.intent] || 'information';
+        const showClose = this.dismissible || (this.duration && this.duration > 0);
+        return (h("div", { class: `banner banner--${this.intent}`, role: "status", "aria-live": "polite" }, h("span", { class: "banner-ic", "aria-hidden": "true" }, h("eds-icon-wrapper", { name: iconName, size: 20 })), h("div", { class: "banner-copy" }, this.heading && h("div", { class: "banner-title" }, this.heading), h("div", { class: "banner-msg" }, this.message)), this.hasActions && (h("div", { class: "banner-actions" }, h("slot", { name: "actions" }))), showClose && (h("button", { type: "button", class: "banner-x", "aria-label": "Dismiss", onClick: () => this.dismissToast() }, h("eds-icon-wrapper", { name: "close", size: 16 })))));
+    }
     render() {
         if (!this.visible) {
             return null;
         }
+        if (this.variant === 'banner') {
+            return this.renderBanner();
+        }
         const classes = toastStyles({ intent: this.intent });
         return (h("div", { class: classes, role: "alert", "aria-live": "assertive" }, h("div", { class: "flex items-center justify-between gap-4" }, h("span", { class: "f-ui-02" }, this.message), h("eds-button", { intent: "ghost", size: "large", icon: "close", "aria-label": "Close Toast", onClick: () => this.dismissToast(), "extra-class": "ml-8" }))));
     }
@@ -79,8 +110,13 @@ const EdsToast = /*@__PURE__*/ proxyCustomElement(class EdsToast extends HTMLEle
 }, [1, "eds-toast", {
         "message": [1],
         "intent": [1],
+        "variant": [1],
+        "heading": [1],
+        "icon": [1],
+        "dismissible": [4],
         "duration": [2],
-        "visible": [32]
+        "visible": [32],
+        "hasActions": [32]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-tooltip2.js

@@ -23,7 +23,7 @@ const EdsTooltip = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends HTM
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: '240956acf8218cb0b36254aecd629058ad39f4eb', class: "relative w-full inline-block group" }, h("slot", { key: '4424c8de31fd4e2aa702369314cf0819447ca364' }), h("div", { key: 'f260ef6ee9700231dc77ddc9debc7f5b92f546c6', class: `absolute ${positionClass}
+        return (h("div", { key: '70fac9a2e9d60c2dd24961d162c5230dcf5d6232', class: "relative w-full inline-block group" }, h("slot", { key: '02e4f975a0b23905883663f773a221c747906a11' }), h("div", { key: 'cff74243e3b7bd0111bb0e6023367ac88b50c379', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out

package/dist/components/eds-trl-badge.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsTrlBadge extends Components.EdsTrlBadge, HTMLElement {}
+export const EdsTrlBadge: {
+    prototype: EdsTrlBadge;
+    new (): EdsTrlBadge;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-trl-badge.js

@@ -0,0 +1,207 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+/* 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`. */
+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.
+ */
+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>`;
+}
+
+const edsTrlBadgeCss = ":host{display:inline-block;line-height:0;}.link{display:inline-block;line-height:0;text-decoration:none;color:inherit}.link svg{display:block}";
+const EdsTrlBadgeStyle0 = edsTrlBadgeCss;
+
+let _uid = 0;
+const EdsTrlBadge$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrlBadge extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        /** 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: '8da5cadf8dc1cef28dd16902013905bfefdd67aa' }, this.href ? (h("a", { class: "link", href: this.href, "aria-label": this.fullText(), innerHTML: svg })) : (h("span", { class: "link", innerHTML: svg }))));
+    }
+    static get style() { return EdsTrlBadgeStyle0; }
+}, [1, "eds-trl-badge", {
+        "level": [2],
+        "assessed": [1],
+        "methodology": [1],
+        "theme": [1],
+        "variant": [1],
+        "size": [2],
+        "label": [1],
+        "href": [1]
+    }]);
+// IBM Plex Mono advance width at 11px (used to size segments to the text).
+EdsTrlBadge$1.CW = 6.8;
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-trl-badge"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-trl-badge":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTrlBadge$1);
+            }
+            break;
+    } });
+}
+
+const EdsTrlBadge = EdsTrlBadge$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsTrlBadge, defineCustomElement };

package/dist/components/eds-user.js

@@ -20,7 +20,6 @@ const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLEle
         this.intent = 'ghost';
         this.dropdownLabel = 'Account';
         this.expanded = false;
-        this.shortMode = false;
     }
     /**
      * Helper getter to ensure we work with a User object.
@@ -37,7 +36,6 @@ const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLEle
         }
         return this.user;
     }
-    async componentWillLoad() { }
     get initials() {
         var _a, _b, _c, _d;
         const user = this.parsedUser;
@@ -52,7 +50,7 @@ const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLEle
     render() {
         const user = this.parsedUser;
         //const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (h("div", { key: 'd23f741600ca86103642bfe17058e8e966ed00e0', class: "block" }, h("div", { key: 'cf73f261fdd219f236a93b4162656ef3178ca419', class: "flex items-center" }, h("eds-dropdown", { key: 'c69a3c95348c765d893aa01d5631d122de428970', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: 'f142afdf77953f791ca0478af862934d0904dabb', class: "min-w-[280px] p-8" }, h("div", { key: '7ee37a9f2175e626c278071a409a5c26f4331c8a', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '7248877a0579d8d15dec94b994af5150c9dbf2c2', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '1766fb5e2613b434c8de825c90141b4f95be00e1', class: "max-w-full" }, user.name && h("p", { key: 'd36907607f575eeb5425c1f2e32e91034fad6dde', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '73e02010d3d54151252903071bbe30168ea7d64a', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'eb522e6c95f15ef0584c7a90c20bb815ccc5d1a1', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: 'c4284f4dba1964a949380aa0154419e3215daac4', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '6476e03cf61ad7517e9742e67b44b9c917d9f329' })))))));
+        return (h("div", { key: '680e43b28d6f449f1bc527a205bc8cb1593c2e3b', class: "block" }, h("div", { key: '472e128751bbd16584d2c17a0f05de9ce39b3618', class: "flex items-center" }, h("eds-dropdown", { key: 'b8e77167f98bcc07280a440ab8c086ab72650866', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: 'd55809a0ab5387f867d27669198c7e9bfc206383', class: "min-w-[280px] p-8" }, h("div", { key: 'e703e71577d4d1e78664fa807de67551483069c1', class: "flex gap-x-16", "data-dropdown-no-close": true }, h("eds-avatar", { key: '7672f9a4f84bc13ab079a7e6185eff87aa15a1f7', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: 'ac9e6e17465d52a247b289224ce3ea473989c1ee', class: "max-w-full" }, user.name && h("p", { key: 'caab9568a17e0bbc68c418f070b93ae6f21fad21', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '0ba0fbec86e6600ee4eb0e0827a78e7292808ab1', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'a3f8870af9bdd001cf5e894b71f8403bff639608', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: 'd230d82178d53043406e26f264c3fe26d7a87211', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '5d28ca2126fbd735560e6034ea1c24e225bf2ee5' })))))));
     }
     get hostEl() { return this; }
     static get style() { return EdsUserStyle0; }
@@ -61,7 +59,6 @@ const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLEle
         "intent": [1],
         "dropdownLabel": [1, "dropdown-label"],
         "expanded": [32],
-        "shortMode": [32],
         "closeDropdown": [64]
     }]);
 function defineCustomElement$1() {

package/dist/components/incorrect-use-of-colors.js

@@ -44,7 +44,7 @@ const IncorrectUseOfColors$1 = /*@__PURE__*/ proxyCustomElement(class IncorrectU
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: '424c9b01d69068fa058b25dd89df08154912dfe7', class: "container" }, h("div", { key: '5a9dae817344c3c92b8bdb55b806b1f96e26496d', class: "mb-8" }, h("eds-alert", { key: 'afeaa6e5320151800d31c3fecb85669000409a14', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '87241b25b9f9e326183ba4496983d93bef766380', class: "flex" }, h("div", { key: 'c018e1fffc8198b3e48e1df6b1e8d560e1c7b84a', class: "w-full" }, h("ul", { key: '97845ca2dfe71ac0feb27762c4b3c71c80ca626c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '05adf9099f1b043d08577cf1f233551d83fc4242', class: "w-full" }, h("ul", { key: '55792bcf3ecb93df6884d7366aa8c7f2c3cf5ad5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: 'a6d5c05544bb0af37aeec022d53c9ebd64e891cc', class: "container" }, h("div", { key: '058290373f57f7f887f79a41d0441f0791037220', class: "mb-8" }, h("eds-alert", { key: 'f6168be82e7a540a1940314134c9eb57dbd1fae4', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'c05365d2dcdce23a750c752cef81a7843fe9b54f', class: "flex" }, h("div", { key: '16ca87385a2e3a8fc108df30d628f78534a1b057', class: "w-full" }, h("ul", { key: 'f8c62eec7f63fb153c1785ede3a2cf535dfad6e5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '9c918b52798d9a50a4b4171dd3d2df0ff276a8fa', class: "w-full" }, h("ul", { key: 'f93524796d29dfc7d85da5a86a937519df10cdd3', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 }, [0, "incorrect-use-of-colors"]);
 function defineCustomElement$1() {

package/dist/components/logo-space.js

@@ -1,14 +1,13 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$i } from './eds-button2.js';
-import { d as defineCustomElement$h } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$g } from './eds-input2.js';
-import { d as defineCustomElement$f } from './eds-input-dropzone2.js';
-import { d as defineCustomElement$e } from './eds-input-field2.js';
-import { d as defineCustomElement$d } from './eds-input-file2.js';
-import { d as defineCustomElement$c } from './eds-input-footer2.js';
-import { d as defineCustomElement$b } from './eds-input-label2.js';
-import { d as defineCustomElement$a } from './eds-input-range2.js';
-import { d as defineCustomElement$9 } from './eds-input-search2.js';
+import { d as defineCustomElement$h } from './eds-button2.js';
+import { d as defineCustomElement$g } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$f } from './eds-input2.js';
+import { d as defineCustomElement$e } from './eds-input-dropzone2.js';
+import { d as defineCustomElement$d } from './eds-input-field2.js';
+import { d as defineCustomElement$c } from './eds-input-file2.js';
+import { d as defineCustomElement$b } from './eds-input-footer2.js';
+import { d as defineCustomElement$a } from './eds-input-label2.js';
+import { d as defineCustomElement$9 } from './eds-input-range2.js';
 import { d as defineCustomElement$8 } from './eds-input-select2.js';
 import { d as defineCustomElement$7 } from './eds-link2.js';
 import { d as defineCustomElement$6 } from './eds-logo2.js';
@@ -27,7 +26,64 @@ const LogoSpace$1 = /*@__PURE__*/ proxyCustomElement(class LogoSpace extends HTM
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'afaefa486624790c61ec7be56d25e8214e692f80', class: "container" }, h("ul", { key: '20a3d543d1bb3027cf12ea20d64bfc263c1e911f', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '02e87b7c3b1acf86fe4aba6eb3fcda5cf0737d73', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'cb6614645cfdac9e07fb08a843a1171a60d2cae9', class: "logo-clear-space mx-auto", style: { position: 'relative', padding: '2.5rem', background: '#f5f5f5', borderRadius: '8px' } }, h("div", { key: 'bda137ca9589342b6483262df1429e64eb3785ee', style: { position: 'absolute', top: '0', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("span", { key: 'd6f5fe1d1b006baf25cfb4b20613d92bace337ce', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E"), h("div", { key: '97ff118cab9d1ebdb1abc7f4c253cab3c1bd9965', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } })), h("div", { key: 'a538f0751fe79c94d90e33325ff1be2e5feebc5c', style: { position: 'absolute', bottom: '0', left: '50%', transform: 'translateX(-50%)', display: 'flex', flexDirection: 'column', alignItems: 'center' } }, h("div", { key: '500d0e1d35fbfb8df0af72cd6019e3ef673ce8f5', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } }), h("span", { key: 'a02e8d7742fed312d090f00213a07774fe1a196f', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E")), h("div", { key: '00ec1e2a973bb99fadb6d73a9af41862c09dd05d', style: { position: 'absolute', left: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' } }, h("span", { key: 'd792490e3d3e52895eb19ea489153bd4d37556ed', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E"), h("div", { key: 'da0320e4a4c3e0b6cf5dae32507c488a1698885c', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } })), h("div", { key: '2c01f062de36831c794f1a9defe7b044d28ad9ad', style: { position: 'absolute', right: '4px', top: '50%', transform: 'translateY(-50%)', display: 'flex', alignItems: 'center' } }, h("div", { key: '68e5e2bb4f52a4c6ac003aa1deccfe721a948a92', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } }), h("span", { key: '6e753f8d2513ef86efd3c4b7e4ebf187ec5bf122', style: { fontSize: '11px', fontWeight: '600', color: '#00C87B', fontFamily: 'IBM Plex Mono, monospace' } }, "E")), h("div", { key: 'f4a83531bfbbce8e3e89565be7f1c8d0320ea504', style: { border: '1px dashed rgba(0, 200, 123, 0.5)', borderRadius: '4px', padding: '1rem', display: 'flex', alignItems: 'center', justifyContent: 'center' } }, h("eds-logo", { key: '135977a942f8d9c8817bd866ea21a2597860e7b6', variant: "positive", href: "#", style: { display: 'block', width: '250px' } })))), h("li", { key: '2d2d834f16263bb4d95cc0c945af2aa0a53c7dd8', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'b6b7f75960412d0232e417406158b56e3d1946e2', class: "text-center mt-16" }, h("p", { key: '43f97699ab3f882863b9e181e3b31cc576b1e411', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '62c49c7c7675d876bd11feb480836fe344f0f3a1', data: '[\n                  { "Media": "Print", "Min Size": "0.75 cm" },\n                  { "Media": "Web", "Min Size": "29 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))))));
+        return (h("div", { key: 'd8adaf2c085aef0029453aef21a527c8e2677ca5', class: "container" }, h("ul", { key: 'f9919afa9a7788769934fa408e3647f409ad436b', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '4defd03de432869a1acd5735011b6dbbbb18b6a8', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'fa018de1f0dcbfc32dc6ed5e00618bf238c7e928', class: "logo-clear-space mx-auto", style: { position: 'relative', padding: '2.5rem', background: '#f5f5f5', borderRadius: '8px' } }, h("div", { key: 'd275d9edb872b43a183e8a76b1c9531d981d585c', style: {
+                position: 'absolute',
+                top: '0',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center'
+            } }, h("span", { key: '11163f214005427e024b04ce1df24f41b8145f57', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E"), h("div", { key: 'ef4d8d4f7318eba7a9e4cfc8f32119d2c9e23477', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } })), h("div", { key: 'ffe1a1ae439d3fd9b129acd336e75aa19624c2b6', style: {
+                position: 'absolute',
+                bottom: '0',
+                left: '50%',
+                transform: 'translateX(-50%)',
+                display: 'flex',
+                flexDirection: 'column',
+                alignItems: 'center'
+            } }, h("div", { key: '7b8342fd5b5202dfaa6da0665d91bcd3a47f79a7', style: { width: '1px', height: '12px', borderLeft: '1px dashed #00C87B' } }), h("span", { key: '4efc55d4f8a642acfb77a571694ea05460d12594', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E")), h("div", { key: '70eb593013f530ef57f9794266ec8909d6f6bbd8', style: {
+                position: 'absolute',
+                left: '4px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                alignItems: 'center'
+            } }, h("span", { key: 'eeaf30fd53b36844e52b2e92142b8f8adbaacca2', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E"), h("div", { key: '27682de58b8ac8bf1d7f17d25ab4e2429e7c5897', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } })), h("div", { key: 'ced953919078e5ddd4b5c70d750693b89e4d8cbc', style: {
+                position: 'absolute',
+                right: '4px',
+                top: '50%',
+                transform: 'translateY(-50%)',
+                display: 'flex',
+                alignItems: 'center'
+            } }, h("div", { key: '4fe3e43ca20645c3631119cf089aa9f3d83be1f4', style: { height: '1px', width: '12px', borderTop: '1px dashed #00C87B' } }), h("span", { key: '27ca09a454a253730b7cb1ac4246b36c54748745', style: {
+                fontSize: '11px',
+                fontWeight: '600',
+                color: '#00C87B',
+                fontFamily: 'IBM Plex Mono, monospace'
+            } }, "E")), h("div", { key: 'df5159d9341ceebeaca350e5589a59c5f14c8b9a', style: {
+                border: '1px dashed rgba(0, 200, 123, 0.5)',
+                borderRadius: '4px',
+                padding: '1rem',
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center'
+            } }, h("eds-logo", { key: '1fe938ec424cf65abffa2b1421f9e5ad5fd7f29a', variant: "positive", href: "#", style: { display: 'block', width: '250px' } })))), h("li", { key: '7db8f82af5f6231048d040d8d96c6c8aabada665', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '8912e3482e1590b4f0cbcf1a8d3a02492b24c2f1', class: "text-center mt-16" }, h("p", { key: '94c6b05c888b177afcce6f0eb8ee2c8b0328a89d', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: 'b02c7b046b2b11effc65ff9c889a962b3b6bd2f5', data: '[\n                  { "Media": "Print", "Min Size": "0.75 cm" },\n                  { "Media": "Web", "Min Size": "29 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))))));
     }
     static get style() { return LogoSpaceStyle0; }
 }, [1, "logo-space"]);
@@ -35,7 +91,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["logo-space", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-logo", "eds-pagination", "eds-switch", "eds-table", "eds-tooltip"];
+    const components = ["logo-space", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-select", "eds-link", "eds-logo", "eds-pagination", "eds-switch", "eds-table", "eds-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "logo-space":
             if (!customElements.get(tagName)) {
@@ -43,51 +99,46 @@ function defineCustomElement$1() {
             }
             break;
         case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$i();
-            }
-            break;
-        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$h();
             }
             break;
-        case "eds-input":
+        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$g();
             }
             break;
-        case "eds-input-dropzone":
+        case "eds-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$f();
             }
             break;
-        case "eds-input-field":
+        case "eds-input-dropzone":
             if (!customElements.get(tagName)) {
                 defineCustomElement$e();
             }
             break;
-        case "eds-input-file":
+        case "eds-input-field":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();
             }
             break;
-        case "eds-input-footer":
+        case "eds-input-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();
             }
             break;
-        case "eds-input-label":
+        case "eds-input-footer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$b();
             }
             break;
-        case "eds-input-range":
+        case "eds-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "eds-input-search":
+        case "eds-input-range":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }

package/dist/components/logo-variations-horizontal2.js

@@ -11,7 +11,7 @@ const LogoVariationsHorizontal = /*@__PURE__*/ proxyCustomElement(class LogoVari
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'a7b635b81f06347ecf026f5102fff854275cd0a1', class: "container" }, h("ul", { key: '4d2289f7a8136374bf6cf876f1c7eba0ec2a9422', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'e8d3dc755e9923ef57d4cb32876874c84d406620', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'd51a85c405e5c75f4184d72a81bd3b8e001293aa', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: 'fd20af4231cf1e7ddf3878e1cd11aa2fcbdc36a3', class: "coloured" }, h("eds-logo", { key: 'be23d497a621c1b133521a365df483d0a753b4d7', variant: "positive", href: "#" }))), h("li", { key: '6a330cea74757c1e3f6db14ef1c3ee6e8f998e23', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '87016c5c2d861900ed0bd2f0302e5969ee23822b', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: 'd592916a66379e9dcafbd39ae6f0393207893e3a', class: "bg-default" }, h("eds-logo", { key: '78b0f667deb8e789166b7b9243d4ac246dd9b9ac', variant: "negative", href: "#" }))))));
+        return (h("div", { key: '5011adf9e8af3aac24dca24120996b52643e601b', class: "container" }, h("ul", { key: '2b8d7d8ea5c09140279d199372dd06e336e78bc1', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'eaeac5d7de69e2b8a745d4961fb26cf411f4cf91', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '44c29035848feb5380b5efb20b37e5f86d65314f', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: 'b438024e4b9fe2ede6e1d8193d5021f84d78baeb', class: "coloured" }, h("eds-logo", { key: '196ccaa50454d4b26c14d7187736fec16f89349a', variant: "positive", href: "#" }))), h("li", { key: '9eb5bbaf4081f2265ea60d2d2099ca039f190389', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '9b95ee3022aafc4c68ea8bed146dd3780b9ef4f2', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '137e1f0451b41bb66c36151e6967e14002bde4ac', class: "bg-default" }, h("eds-logo", { key: '9d97fade01d3e8b59e69d4ba6758ee41f84ef571', variant: "negative", href: "#" }))))));
     }
     static get style() { return LogoVariationsHorizontalStyle0; }
 }, [1, "logo-variations-horizontal"]);

package/dist/components/logo-variations-tabs.js

@@ -20,7 +20,7 @@ const LogoVariationsTabs$1 = /*@__PURE__*/ proxyCustomElement(class LogoVariatio
         }
     }
     render() {
-        return h("div", { key: '744c1ba1e806d2659fa2d409c2e2314d02c5d911', class: "container" }, this.renderContent());
+        return h("div", { key: '5be7df6877ce83e4cdf3652b6e66640e90fb3081', class: "container" }, this.renderContent());
     }
 }, [0, "logo-variations-tabs", {
         "tabIndex": [2, "tab-index"]

package/dist/components/logo-variations-vertical2.js

@@ -13,7 +13,7 @@ const LogoVariationsVertical = /*@__PURE__*/ proxyCustomElement(class LogoVariat
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: '87d5bf852fe573878eabdd768aaf979de16c226e', class: "container" }, h("ul", { key: 'd9e47765d5e27f53dc8ced19fa954cd573e76856', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6b7ac8948438ede5dc01365511244e9858b2848b', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'e4fce7db514e0741507b6a37cb7bf47d89047929', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: '787af1c40ebac015c1a57391ab3959e691bd8dd3', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '0e0d4dcea468625e374959d5c2762d8f7ce19e70', orientation: "vertical", variant: "positive", href: "#" }))), h("li", { key: '77860d576cac3f5e71d728dee804c812fe6e430d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'f598d729ae5436b5777df79135d585378e5e7725', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '860b8539372eebd327c56b5d127203b93a7ae3b8', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: '6bc89e4a6fc56125b14dec7079108eef51c961a7', orientation: "vertical", variant: "negative", href: "#" }))))));
+        return (h("div", { key: '67acdc82a0e7dbc0aa07e6607d31c81939ee5d7a', class: "container" }, h("ul", { key: '8c7eb2ee978a402cd85c570e61eb523721dffdd9', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'f6620aaf501e6dc5168e5d0d2baa238ce82680fa', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'abeb6b64713250a61476e2947dae5490ca18afea', class: "f-body-01 text-center my-4" }, "#1 Positive"), h("div", { key: '825f3020ce0e73ac80b78e2bbb898c26cb1d2190', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '6aaa41b6beaf9fbcdcce1c6f3130a4db3c97afb4', variant: "positive", href: "#" }))), h("li", { key: '91db370167cecb19689bc2b13d7155a906d14a12', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'b44bf3c628adf0d1f5ca3c1e9dc48e5a6b09a9ee', class: "f-body-01 text-center my-4" }, "#2 Negative"), h("div", { key: '3e9ffec9903d8cfdb38ca64c8a69c201024f593d', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'cfb79e36eb78bd046c783cc4f210febfe30e28e9', variant: "negative", href: "#" }))))));
     }
     static get style() { return LogoVariationsVerticalStyle0; }
 }, [1, "logo-variations-vertical", {