@ebrains/components 2.4.1 → 3.1.0

package/dist/components/eds-card-feature.js

@@ -0,0 +1,64 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$2 } from './eds-link2.js';
+
+const edsCardFeatureCss = ":host{display:flex;height:100%}.feature-card{height:auto;border-radius:16px;padding:1.5rem;transition:all 0.4s ease;position:relative;overflow:hidden;display:flex;flex-direction:column;flex-grow:1}.feature-card-default{background:var(--brand-black);border:1px solid rgba(0, 0, 0, 0.1)}.feature-card-default:hover{background:var(--brand-black);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.feature-card-default .feature-title{color:var(--white)}.feature-card-default .feature-description{color:var(--grey-light)}.feature-card-inverse{background:var(--white);border:1px solid rgba(0, 0, 0, 0.1)}.feature-card-inverse:hover{background:var(--white);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.feature-card-inverse .feature-title{color:var(--brand-black)}.feature-card-inverse .feature-description{color:var(--grey-dark)}.feature-icon{width:48px;height:48px;display:flex;align-items:center;justify-content:center;background:rgba(0, 255, 157, 0.1);border-radius:12px;color:var(--brand-green);flex-shrink:0}.feature-card-inverse .feature-icon{background:rgba(0, 0, 0, 0.05);color:var(--brand-black)}.feature-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:1.25rem;margin-bottom:0.75rem;line-height:1.4}.feature-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.9375rem;line-height:1.6;flex-grow:1}@media (max-width: 768px){.feature-card{padding:2rem}.feature-icon{width:40px;height:40px;margin-bottom:1.25rem}.feature-title{font-size:1.125rem}}";
+const EdsCardFeatureStyle0 = edsCardFeatureCss;
+
+const EdsCardFeature$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardFeature extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.icon = undefined;
+        this.title = undefined;
+        this.description = undefined;
+        this.url = undefined;
+        this.linkText = 'Learn more';
+        this.variant = 'default';
+    }
+    render() {
+        const cardClasses = [
+            'feature-card',
+            `feature-card-${this.variant}`
+        ].join(' ');
+        return (h("div", { key: 'f76c056bbca7b38892cdecf56291fe3882c9e3bb', class: cardClasses }, this.icon && (h("div", { key: '9e22a5f6c5e30b55c4bac84f5f11f773b1b37ab9', class: "feature-icon" }, h("eds-icon-wrapper", { key: '64154c38f3655cb55f14c2963a62ead699d8a533', name: this.icon, size: 24 }))), h("h3", { key: '99ed95a90796dbb6baa3f73cb2830fcd0954328c', class: "feature-title" }, this.title), h("p", { key: 'f91109a10f62a58d8b650987fbbf1a5a4f68beaa', class: "feature-description" }, this.description), this.url && (h("eds-link", { key: 'b94b57e5385da9db54a3767d0413349000add755', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
+    }
+    get el() { return this; }
+    static get style() { return EdsCardFeatureStyle0; }
+}, [1, "eds-card-feature", {
+        "icon": [1],
+        "title": [1],
+        "description": [1],
+        "url": [1],
+        "linkText": [1, "link-text"],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-feature", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-feature":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardFeature$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardFeature = EdsCardFeature$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardFeature, defineCustomElement };

package/dist/components/eds-card-generic2.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { p as parseData } from './sharedUtils.js';
 import { s as sendAnalytics } from './analytics.js';
-import { d as defineCustomElement$5 } from './eds-avatar2.js';
 import { d as defineCustomElement$4 } from './eds-card-desc2.js';
 import { d as defineCustomElement$3 } from './eds-card-title2.js';
-import { d as defineCustomElement$2 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-tag2.js';
 
-const edsCardGenericCss = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-8{margin-bottom:0.5rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}";
+const edsCardGenericCss = ".h-300{height:300px}.h-auto{height:auto}:host{display:flex;height:100%}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-dark{background-color:var(--grey-light)}.bg-default{background-color:var(--grey-light)}.bg-inverse{background-color:var(--white)}.bg-accent{background-color:var(--brand-green)}.bg-strongest{background-color:var(--brand-black)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.cursor-default{cursor:default}.border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border:1px solid rgba(0, 0, 0, 0.08)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.flex-wrap{flex-wrap:wrap}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.border-2{border-width:1px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-x-4{-moz-column-gap:0.25rem;column-gap:0.25rem}.gap-y-4{row-gap:0.25rem}.gap-y-8{row-gap:0.5rem}.order-first{order:-9999}.mb-8{margin-bottom:0.5rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}.w-full{width:100%}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.overflow-hidden{overflow:hidden}.items-center{align-items:center}.justify-between{justify-content:space-between}.mt-auto{margin-top:auto}.pt-16{padding-top:1rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.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)}.card-icon-wrapper{display:flex;align-items:center;justify-content:center;padding:1.5rem 1rem 0.5rem 1rem}.text-inverse{color:var(--white)}.text-default{color:var(--brand-black)}";
 const EdsCardGenericStyle0 = edsCardGenericCss;
 
 const EdsCardGeneric = /*@__PURE__*/ proxyCustomElement(class EdsCardGeneric extends HTMLElement {
@@ -16,39 +15,16 @@ const EdsCardGeneric = /*@__PURE__*/ proxyCustomElement(class EdsCardGeneric ext
         this.__registerHost();
         this.__attachShadow();
         this.parentContext = null; // Accepts the entire event detail or null
-        this.cardTitle = undefined;
+        this.title = undefined;
         this.url = undefined;
         this.description = undefined;
-        this.image = undefined;
-        this.avatar = undefined;
-        this.shortAbbreviation = undefined;
-        this.headingLevel = 'h3';
         this.tags = [];
-        this.tiny = false;
-        this.bg = true;
-        this.withHover = true;
-        this.hierarchy = true;
-        this.parsedImage = null;
-    }
-    componentWillLoad() {
-        if (this.image) {
-            try {
-                if (typeof this.image === 'object') {
-                    // If image is already an object, assign it directly
-                    this.parsedImage = this.image;
-                }
-                else if (typeof this.image === 'string') {
-                    // If image is a string, try to parse it
-                    this.parsedImage = JSON.parse(this.image);
-                }
-            }
-            catch (error) {
-                // eslint-disable-next-line
-                console.error('Error parsing image prop:', error);
-                this.parsedImage = {}; // Assign a fallback empty object in case of an error
-            }
-        }
+        this.intent = 'secondary';
+        this.icon = undefined;
+        this.titleSize = 'large';
+        this.isHovered = false;
     }
+    componentWillLoad() { }
     handleParentContext(event) {
         if (event.target !== this.el) {
             // Ignore the event if it's not targeted at this specific instance
@@ -67,59 +43,74 @@ const EdsCardGeneric = /*@__PURE__*/ proxyCustomElement(class EdsCardGeneric ext
         return parseData(this.tags);
     }
     articleClasses() {
+        let bgClass = 'bg-strongest';
+        if (this.intent === 'primary') {
+            bgClass = 'bg-accent';
+        }
+        else if (this.intent === 'inverse') {
+            bgClass = 'bg-inverse';
+        }
+        else if (this.intent === 'dark') {
+            bgClass = 'bg-dark';
+        }
+        const interactionClasses = this.url
+            ? 'cursor-pointer effect-shadow hover:shadow-hover'
+            : 'cursor-default';
         return [
-            this.description ? (this.tiny ? 'min-h-120' : 'min-h-156') : 'h-auto',
-            this.bg ? 'bg-inverse' : 'bg-default',
-            this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '',
-            'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'
+            'h-auto',
+            bgClass,
+            interactionClasses,
+            'border-softer effect-focus-within relative flex grow flex-col rounded-sm border-2'
         ].join(' ');
     }
+    getLearnMoreColor() {
+        if (this.intent === 'secondary') {
+            return 'text-inverse';
+        }
+        return 'text-default';
+    }
     handleClick() {
         var _a;
         sendAnalytics({
             category: 'ui-component',
             parentContext: this.parentContext,
             tag: this.el.tagName.toLowerCase(),
-            name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
             action: 'click'
         });
     }
+    handleMouseEnter() {
+        this.isHovered = true;
+    }
+    handleMouseLeave() {
+        this.isHovered = false;
+    }
     render() {
-        return (h("article", { key: '76e77261a0c6e0c506fe7600d31a492808293d27', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: 'ca26508b05a31310df7fc0c3fa5769f7947e80fc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), h("div", { key: '00ba325e6a0093cb2be35854f2bcb579ad4eb35b', class: "mt-8 mb-8" }, this.description && h("eds-card-desc", { key: '2d775f772092b7873dd1eabc7c3e8606dded0c47', "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'e51237f8196212715d1d97ae1e6bfc2625573cb3', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label, size: tag.size })))), ' '));
+        return (h("article", { key: '6efb0c2c0c3d196b9759307bb98f4bf1e12504d5', class: this.articleClasses(), onClick: this.url ? () => this.handleClick() : undefined, onMouseEnter: this.url ? () => this.handleMouseEnter() : undefined, onMouseLeave: this.url ? () => this.handleMouseLeave() : undefined }, this.icon && (h("div", { key: '9c29cae822923b524668da65f3e341f9626d7e95', class: "card-icon-wrapper" }, h("eds-icon-wrapper", { key: '104a3551d3d8b910528dd43e8a12494faf4764a0', name: this.icon, size: 32 }))), h("div", { key: 'cc9d326aa6e55d1ed26b73f46d5fbb8087d55bf0', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: 'f740e184ec400d6083d04e4fa99259aa061c5dbf', class: "flex mb-12 gap-x-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.intent, label: tag.label, size: tag.size }))))), h("eds-card-title", { key: 'e263ce9bd116857648439bf9f356fc110e048547', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (h("div", { key: 'aa6687dc61c548dd52e2d2f3eb9598f85c2af0a5', class: "mt-8" }, this.description && (h("eds-card-desc", { key: '8b82f70b5dc513396d08affc4958d9c1040583d6', "truncate-lines": "3", description: this.description, intent: this.intent })))), h("slot", { key: 'ff4d0ba6184b01b80e44c78a7cccec124f2b1706', name: "card" }), this.url && (h("div", { key: '889b5fbaf026df0e826626020ff201d06f047cc8', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, h("span", { key: '3a5b5d603a7f3d852b5e92ba57f7214f7b9754ec', class: "f-ui-01" }, "Learn more"), h("eds-icon-wrapper", { key: 'de15571bd4892f72646c205b14105f328d5a596d', name: this.isHovered ? 'arrow-right' : 'arrow-up-right', size: 32 }))))));
     }
     get el() { return this; }
     static get style() { return EdsCardGenericStyle0; }
 }, [1, "eds-card-generic", {
-        "cardTitle": [1, "card-title"],
+        "title": [1],
         "url": [1],
         "description": [1],
-        "image": [8],
-        "avatar": [1],
-        "shortAbbreviation": [1, "short-abbreviation"],
-        "headingLevel": [1, "heading-level"],
         "tags": [1],
-        "tiny": [4],
-        "bg": [4],
-        "withHover": [4, "with-hover"],
-        "hierarchy": [4],
-        "parsedImage": [32]
+        "intent": [1],
+        "icon": [1],
+        "titleSize": [1, "title-size"],
+        "isHovered": [32]
     }, [[0, "parentContext", "handleParentContext"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-card-generic", "eds-avatar", "eds-card-desc", "eds-card-title", "eds-img", "eds-tag"];
+    const components = ["eds-card-generic", "eds-card-desc", "eds-card-title", "eds-icon-wrapper", "eds-tag"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-card-generic":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsCardGeneric);
             }
             break;
-        case "eds-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
         case "eds-card-desc":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
@@ -130,7 +121,7 @@ function defineCustomElement() {
                 defineCustomElement$3();
             }
             break;
-        case "eds-img":
+        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/{eds-icon-edit.d.ts → eds-card-hero.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsIconEdit extends Components.EdsIconEdit, HTMLElement {}
-export const EdsIconEdit: {
-    prototype: EdsIconEdit;
-    new (): EdsIconEdit;
+interface EdsCardHero extends Components.EdsCardHero, HTMLElement {}
+export const EdsCardHero: {
+    prototype: EdsCardHero;
+    new (): EdsCardHero;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/eds-card-hero.js

@@ -0,0 +1,75 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
+import { s as sendAnalytics } from './analytics.js';
+
+const edsCardHeroCss = ":host{display:flex;height:100%}.hero-card{height:auto;position:relative;border-radius:16px;backdrop-filter:blur(20px);padding:1.5rem;display:flex;flex-direction:column;flex-grow:1;transition:all 0.5s cubic-bezier(0.4, 0, 0.2, 1)}.hero-card-default{background:var(--brand-black);border:1px solid rgba(0, 0, 0, 0.1)}.hero-card-default:hover{transform:translateY(-8px);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 20px 60px rgba(0, 0, 0, 0.15)}.hero-card-default .card-category{color:var(--grey-dark)}.hero-card-default .card-title{color:var(--white)}.hero-card-default .card-description{color:var(--grey-dark)}.hero-card-default .card-tag{background:rgba(0, 255, 157, 0.15);color:var(--brand-green)}.hero-card-inverse{background:var(--white);border:1px solid rgba(0, 0, 0, 0.1)}.hero-card-inverse:hover{transform:translateY(-8px);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 20px 60px rgba(0, 0, 0, 0.15)}.hero-card-inverse .card-category{color:var(--grey-dark)}.hero-card-inverse .card-title{color:var(--brand-black)}.hero-card-inverse .card-description{color:var(--grey-dark)}.hero-card-inverse .card-tag{background:rgba(0, 255, 157, 0.2);color:var(--brand-black)}.hero-card-clickable{cursor:pointer}.card-category{font-size:0.625rem;text-transform:uppercase;letter-spacing:0.15em;margin-bottom:0.75rem;font-weight:500}.card-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:1.25rem;margin-bottom:0.5rem;line-height:1.3}.card-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.8125rem;line-height:1.5;margin-bottom:1rem}.card-tags{display:flex;gap:0.5rem;flex-wrap:wrap}.card-tag{padding:0.25rem 0.625rem;border-radius:4px;font-family:'IBM Plex Mono', monospace;font-size:0.6875rem;font-weight:500}@media (max-width: 768px){.hero-card{padding:1.25rem}.card-title{font-size:1.125rem}}";
+const EdsCardHeroStyle0 = edsCardHeroCss;
+
+const EdsCardHero$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardHero extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.parentContext = null;
+        this.category = undefined;
+        this.title = undefined;
+        this.description = undefined;
+        this.tags = [];
+        this.url = undefined;
+        this.variant = 'default';
+    }
+    /**
+     * Parse the tags prop into an array
+     */
+    get parsedTags() {
+        return parseData(this.tags);
+    }
+    handleClick() {
+        var _a;
+        if (!this.url)
+            return;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: this.parentContext,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+        window.location.href = this.url;
+    }
+    render() {
+        const cardClasses = [
+            'hero-card',
+            `hero-card-${this.variant}`,
+            this.url ? 'hero-card-clickable' : ''
+        ].filter(Boolean).join(' ');
+        return (h("div", { key: 'c92f2acc8065b4142b28ca213abbb646e61f44fc', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '38b8ec832d05a4891646ac31f24d32f62c5ac2e1', class: "card-category" }, this.category), h("div", { key: 'd356e4651ed9d136c72c519ecb9b484570c9b3be', class: "card-title" }, this.title), this.description && (h("div", { key: '52afdf7988667f73d8725e6a5f5b7816d4b38b30', class: "card-description" }, this.description)), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: 'a50fb41278d3b98da7054e0bee52d2a98ab5d8f3', class: "card-tags" }, this.parsedTags.map((tag, index) => (h("span", { key: index, class: "card-tag" }, tag.label)))))));
+    }
+    get el() { return this; }
+    static get style() { return EdsCardHeroStyle0; }
+}, [1, "eds-card-hero", {
+        "category": [1],
+        "title": [1],
+        "description": [1],
+        "tags": [1],
+        "url": [1],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-hero"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-hero":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardHero$1);
+            }
+            break;
+    } });
+}
+
+const EdsCardHero = EdsCardHero$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardHero, defineCustomElement };

package/dist/components/{eds-icon-copy.d.ts → eds-card-stat.d.ts}

@@ -1,9 +1,9 @@
 import type { Components, JSX } from "../types/components";
 
-interface EdsIconCopy extends Components.EdsIconCopy, HTMLElement {}
-export const EdsIconCopy: {
-    prototype: EdsIconCopy;
-    new (): EdsIconCopy;
+interface EdsCardStat extends Components.EdsCardStat, HTMLElement {}
+export const EdsCardStat: {
+    prototype: EdsCardStat;
+    new (): EdsCardStat;
 };
 /**
  * Used to define this component and all nested components recursively.

package/dist/components/eds-card-stat.js

@@ -0,0 +1,67 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+
+const edsCardStatCss = ":host{display:flex;height:100%}.stat-card{height:auto;border-radius:16px;padding:1.75rem;position:relative;overflow:hidden;display:flex;flex-direction:column;flex-grow:1;transition:all 0.4s ease}.stat-card-default{background:var(--brand-black);border:1px solid rgba(0, 0, 0, 0.1)}.stat-card-default:hover{background:var(--brand-black);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.stat-card-default .stat-number{background:linear-gradient(135deg, var(--brand-green) 0%, var(--white) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-card-default .stat-label{color:var(--white)}.stat-card-default .stat-description{color:var(--grey-dark)}.stat-card-inverse{background:var(--white);border:1px solid rgba(0, 0, 0, 0.1)}.stat-card-inverse:hover{background:var(--white);border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.stat-card-inverse .stat-number{background:linear-gradient(135deg, var(--brand-black) 0%, var(--grey-dark) 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.stat-card-inverse .stat-label{color:var(--brand-black)}.stat-card-inverse .stat-description{color:var(--grey-dark)}.stat-card::before{content:'';position:absolute;top:0;left:0;width:100%;height:2px;background:linear-gradient(90deg, transparent, var(--brand-green), transparent);opacity:0;transition:opacity 0.4s ease}.stat-card:hover::before{opacity:1}.stat-card:hover{transform:translateY(-4px)}.stat-card-clickable{cursor:pointer}.stat-number{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:4rem;line-height:1;margin-bottom:0.5rem}.stat-label{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;margin-bottom:0.5rem;font-weight:400}.stat-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.8125rem;line-height:1.5}@media (max-width: 768px){.stat-card{padding:1.5rem}.stat-number{font-size:2.5rem}}";
+const EdsCardStatStyle0 = edsCardStatCss;
+
+const EdsCardStat$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardStat extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.parentContext = null;
+        this.number = undefined;
+        this.label = undefined;
+        this.description = undefined;
+        this.url = undefined;
+        this.variant = 'default';
+    }
+    handleClick() {
+        var _a;
+        if (!this.url)
+            return;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: this.parentContext,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+        window.location.href = this.url;
+    }
+    render() {
+        const cardClasses = [
+            'stat-card',
+            `stat-card-${this.variant}`,
+            this.url ? 'stat-card-clickable' : ''
+        ].filter(Boolean).join(' ');
+        const content = (h("div", { key: 'f1dadeadd1d893b7a33aa92772baf7245954f6e7', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '6adb8cc68740cd2dabf0bacf0af446e1499171a8', class: "stat-number" }, this.number), h("div", { key: 'adc7a8ffd44bceda51fcb98f68cfc8d7e454db5f', class: "stat-label" }, this.label), this.description && (h("div", { key: 'f70549244277e2c08c7bd94a1d297c00655faff5', class: "stat-description" }, this.description))));
+        return content;
+    }
+    get el() { return this; }
+    static get style() { return EdsCardStatStyle0; }
+}, [1, "eds-card-stat", {
+        "number": [1],
+        "label": [1],
+        "description": [1],
+        "url": [1],
+        "variant": [1]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-stat"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-stat":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardStat$1);
+            }
+            break;
+    } });
+}
+
+const EdsCardStat = EdsCardStat$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardStat, defineCustomElement };

package/dist/components/eds-card-title2.js

@@ -1,6 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 
-const edsCardTitleCss = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}";
+const edsCardTitleCss = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-display-02{font-family:var(--f-display-02-fontFamily);font-weight:var(--f-display-02-fontWeight);font-size:var(--f-display-02-fontSize);line-height:var(--f-display-02-lineHeight);letter-spacing:var(--f-display-02-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.font-semibold{font-weight:600}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.cursor-pointer{cursor:pointer}";
 const EdsCardTitleStyle0 = edsCardTitleCss;
 
 const EdsCardTitle = /*@__PURE__*/ proxyCustomElement(class EdsCardTitle extends HTMLElement {
@@ -9,54 +9,43 @@ const EdsCardTitle = /*@__PURE__*/ proxyCustomElement(class EdsCardTitle extends
         this.__registerHost();
         this.__attachShadow();
         this.url = undefined;
-        this.titleClass = undefined;
-        this.headingLevel = 'h3';
         this.externalLink = false;
-        this.cardTitle = undefined;
-        this.hierarchy = true;
+        this.title = undefined;
+        this.intent = 'secondary';
+        this.size = 'large';
     }
-    /**
-     * Dynamically generate the title class based on the heading level.
-     */
     getTitleClass() {
-        const levelMap = this.hierarchy
-            ? {
-                h1: '05',
-                h2: '05',
-                h3: '05',
-                h4: '05',
-                h5: '05',
-                h6: '06'
-            }
-            : {
-                h1: '01',
-                h2: '02',
-                h3: '03',
-                h4: '04',
-                h5: '05',
-                h6: '06'
-            };
-        return `f-heading-${levelMap[this.headingLevel]}`;
+        switch (this.size) {
+            case 'small':
+                return 'f-heading-05';
+            case 'medium':
+                return 'f-heading-04';
+            case 'xlarge':
+                return 'f-heading-02';
+            case 'display':
+                return 'f-display-02';
+            case 'large':
+            default:
+                return 'f-heading-03';
+        }
     }
-    /*private getTag() {
-      if (this.url) {
-        return 'a';
-      }
-      return 'span';
-    }*/
     render() {
-        //const Tag = this.getTag();
-        const Heading = this.headingLevel;
-        return (h(Heading, { key: '5d356d301cfee459ac142895a042e9b1ccd59367', class: this.getTitleClass() }, h("a", { key: '348fffdd2abccf3b08ecab9481718b4a2aa50807', class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none", href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.cardTitle)));
+        const textColorClass = this.intent === 'secondary' ? 'text-inverse' : 'text-default';
+        const titleClass = this.getTitleClass();
+        // If URL provided, render as clickable link with overlay
+        if (this.url) {
+            return (h("span", { class: titleClass }, h("a", { class: `break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none ${textColorClass} cursor-pointer`, href: this.url, target: this.externalLink ? '_blank' : undefined, rel: this.externalLink ? 'noopener noreferrer' : undefined }, this.title)));
+        }
+        // No URL - render as plain text, no overlay, no pointer cursor
+        return (h("span", { class: `${titleClass} ${textColorClass} break-words` }, this.title));
     }
     static get style() { return EdsCardTitleStyle0; }
 }, [1, "eds-card-title", {
         "url": [1],
-        "titleClass": [1, "title-class"],
-        "headingLevel": [1, "heading-level"],
         "externalLink": [4, "external-link"],
-        "cardTitle": [1, "card-title"],
-        "hierarchy": [4]
+        "title": [1],
+        "intent": [1],
+        "size": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

package/dist/components/eds-code-block2.js

@@ -2406,7 +2406,7 @@ Prism.languages.py = Prism.languages.python;
 
 }(Prism));
 
-const edsCodeBlockCss = ":host{display:block;font-family:var(--font-family, 'Courier New', monospace)}pre[class*=\"language-\"]{white-space:pre-wrap;word-break:break-word;}.language{font-weight:bold;text-transform:uppercase}pre{margin:0;border-radius:8px;color:var(--purple-200);overflow:auto}code{font-family:'Courier New', monospace}.token.keyword{color:var(--purple-500)}.token.string{color:var(--green-500)}.token.function{color:var(--cyan-500)}.token.comment{color:var(--grey-700)}.relative{position:relative}.bg-stronger{background-color:var(--grey-900)}.rounded-sm{border-radius:8px}.rounded-xs{border-radius:4px}.text-inverse{color:var(--white)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.p-0{padding:0rem}.p-12{padding:0.75rem}.p-16{padding:1rem}.p-20{padding:1.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.pl-8{padding-left:0.5rem}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mb-28{margin-bottom:1.75rem}.pb-16{padding-bottom:1rem}.pb-20{padding-bottom:1.25rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.pb-8{padding-bottom:0.5rem}.mt-16{margin-top:1rem}.mt-2{margin-top:0.125rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.w-20{width:1.25rem}.h-20{height:1.25rem}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
+const edsCodeBlockCss = ":host{display:block}.relative{position:relative}.bg-strongest{background-color:#07140D;border:1px solid rgba(255, 255, 255, 0.1)}.rounded-sm{border-radius:12px;overflow:hidden}.text-inverse{color:#E5E7EB}.flex{display:flex}.items-center{align-items:center}.justify-between{justify-content:space-between}.p-8{padding:0.75rem 1rem;background:rgba(255, 255, 255, 0.05);border-bottom:1px solid rgba(255, 255, 255, 0.08)}.f-ui-03{font-family:'IBM Plex Mono', 'Courier New', monospace;font-size:0.6875rem;font-weight:500;text-transform:uppercase;letter-spacing:0.1em;color:#00FF9D;background:rgba(0, 255, 157, 0.1);padding:0.25rem 0.5rem;border-radius:4px;line-height:1.4}.w-20{width:1.25rem}.h-20{height:1.25rem}.mt-8{margin-top:0;cursor:pointer;color:#9CA3AF;transition:color 0.2s ease}.mt-8:hover{color:white}pre{margin:0;color:#D1D5DB;overflow-x:auto}pre[class*=\"language-\"]{white-space:pre-wrap;word-break:break-word}.bg-stronger{background:transparent}.pl-8{padding:1.25rem 1.5rem}.pb-8{padding-bottom:1.25rem}code{font-family:'IBM Plex Mono', 'Courier New', monospace;font-size:0.875rem;line-height:1.7}.token.keyword{color:#ff79c6}.token.string{color:#00FF9D}.token.function{color:#8be9fd}.token.comment{color:#6B7280;font-style:italic}.token.tag{color:#ff79c6}.token.attr-name{color:#8be9fd}.token.attr-value{color:#00FF9D}.token.punctuation{color:#d8d8d8}.token.operator{color:#8be9fd}.token.number{color:#ffb87e}.token.boolean{color:#d18fff}.token.property{color:#8be9fd}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border-width:0}";
 const EdsCodeBlockStyle0 = edsCodeBlockCss;
 
 const EdsCodeBlock = /*@__PURE__*/ proxyCustomElement(class EdsCodeBlock extends HTMLElement {
@@ -2479,7 +2479,7 @@ const EdsCodeBlock = /*@__PURE__*/ proxyCustomElement(class EdsCodeBlock extends
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: 'bc74b6be37bcb24700d17b48b5398077e485abd7', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'db0395bfd55eb3394ab2149c5c436f2a54e8afb0', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '628ad41f15f3a38abe4b7c382074c8f5a8679a8c', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '1c95d57a5d8113d6ab7ebf7da713e058c7cc10f1', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a64b2450b631835b6fc2c15047b09ceea5a9fc95', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '51945cbee1504625b54362505b60f1bd1784bdda', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '55961aa8278177451e13c929ec7f7065afcac93b', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '4d73fa52c489b6995dd8a6d83c05e323bb1f5431', class: "relative bg-strongest rounded-sm" }, h("div", { key: 'c0df3237009310833b417f5ede5b7c204f2752bc', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '016505a0749baaa52c6e4aa77f00b4da31e7ec45', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '21474f1b28af95251aca639c349aaac489d8519b', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '64450529ad3cf3dab7e74f8455307cdb3298bbc4', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'affcb4719ef29d7ed9ed676eab975c98ceca31fa', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '43fa1b80c2e02233076c4da15a5aa04f0b49bfc3', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return this; }
     static get style() { return EdsCodeBlockStyle0; }

package/dist/components/eds-cookies-preference.js

@@ -13,7 +13,7 @@ const EdsCookiesPreference$1 = /*@__PURE__*/ proxyCustomElement(class EdsCookies
         super();
         this.__registerHost();
         this.buttonText = 'Cookies Preferences';
-        this.intent = undefined;
+        this.intent = 'secondary';
         this.showMatomoNotice = false;
         this.noticeKey = 0;
     }
@@ -33,7 +33,7 @@ const EdsCookiesPreference$1 = /*@__PURE__*/ proxyCustomElement(class EdsCookies
         }
     }
     render() {
-        return (h("div", { key: 'daf8dae47d699797488bddeb6be5951647d26a86' }, h("eds-link", { key: 'a07c16a0c89acc9230a3ebebbd4bb4d1993f34ab', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: '0a1f75fe95820dd8f994193f86b52b684f5fd240' }, h("eds-link", { key: 'd3b5740fa53b30a39296b23cd95da1ad2d8d730d', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
     }
     static get style() { return EdsCookiesPreferenceStyle0; }
 }, [0, "eds-cookies-preference", {