@ebrains/components 2.4.0 → 3.0.0

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: 'eb4b42dccca0fb46bc8e51e1b6873e118796647b', 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: '229f7daab8d8560092eb94e664c73c306b2fec19', class: "card-icon-wrapper" }, h("eds-icon-wrapper", { key: 'c4b76bdff72dcbe7d98a7dfea71ca8693c00094e', name: this.icon, size: 32 }))), h("div", { key: '45d3a9d83cf92137485bae5248c55edb56c58671', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '101676ed06f29e985c6bf11620a56660360ace57', 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: 'c901580eca3a3b8ce4c26e1c9ce5d0f9b7a11ed6', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (h("div", { key: '618be209087536eee2fdfd3eaa1595c6fe6d0176', class: "mt-8" }, this.description && (h("eds-card-desc", { key: '1aa3ea97c4371ea7510ad47e364cea27e1de0482', "truncate-lines": "3", description: this.description, intent: this.intent })))), h("slot", { key: '3086eeeeb29bb82d927ab82e6ce98664118b0193', name: "card" }), this.url && (h("div", { key: 'f1f73a07002f7d82daa0b68b15d7c5cddba9c730', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, h("span", { key: '86fd1e428f6553b74aa634359fad7ba3ce590844', class: "f-ui-01" }, "Learn more"), h("eds-icon-wrapper", { key: 'f955e10355e2726052cd2d34d888ea0effd2b362', 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: '8f7c9c98becb22586f308b0065c3f9cd515a7860', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '6d99fd528b9611573a5ad3548e04914f532cfa21', class: "card-category" }, this.category), h("div", { key: 'f117842619c7fa91b088a72d3e5405843f9b0b3f', class: "card-title" }, this.title), this.description && (h("div", { key: '25a110fe2f58cb77051a8a5b37ee43e616e516fd', class: "card-description" }, this.description)), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: 'd0ef732bf246460affb697d71496ae5ee284ff48', 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: '9934fb7c9f9014293fc4190e83b658151c8ce5a1', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '22b26775310db09da96fe0d793362ff8691da554', class: "stat-number" }, this.number), h("div", { key: '59e5a6f0851ac2d133cdfa7fdbb160401c60ba92', class: "stat-label" }, this.label), this.description && (h("div", { key: '916007f86e7de06b8e7cec79fc92b422a2c66db0', 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: '16c785c0fbac538fb0e20c42ed613f5211bea089', class: "relative bg-strongest rounded-sm" }, h("div", { key: '24967e8c714dc62c2366cae6bf6a19566fdeedbf', 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: 'd84c547a7fda762a51279462e6c33642d3ed93b1', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'e784206acb815fdb2df3f7013b32e18b42f47e0d', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '8f68b5adda295c370cfff19602cb8cc140d9a10d', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'a3c42360f4a5026d8e6f5328f5ed5d8ca724c3ca', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '96ce7f1cf1cee401bd1a90368c56934116d97d29', 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: 'c1754394ac9c249ef4c5959ed0b6a74d8ec365ab' }, h("eds-link", { key: '4bb5d796d14dc242024df4681dea493d4511a8b6', 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: '3926e6e4972c901880f57859280330ad315dc263' }, h("eds-link", { key: '8c513565cb94589c1d441aa4b0badf79ab464169', 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", {

package/dist/components/eds-dropdown2.js

@@ -37,14 +37,13 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
                 action: this.isOpen ? 'expanded' : 'collapsed'
             });
         };
-        this.icon = undefined;
+        this.icon = 'chevron-down';
         this.label = undefined;
-        this.rounded = false;
         this.ariaLabel = 'Open dropdown';
         this.asNav = true;
         this.dropdownPos = 'left';
         this.dropdownOffset = true;
-        this.intent = 'tertiary';
+        this.intent = 'ghost';
         this.autoClose = true;
         this.noCloseSelector = '[data-dropdown-no-close]';
         this.isOpen = false;
@@ -153,21 +152,19 @@ const EdsDropdown = /*@__PURE__*/ proxyCustomElement(class EdsDropdown extends H
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'ffc4915b2104e3d2dd347900acd897f56910a674', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ba48bdd7b75fd230bdc2dd564bd477f0349f5426', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: 'a29b57598a2ed8fcc9593c928df9443fd4449481', ref: (el) => (this.panelEl = el), role: "menu", class: {
+        return (h("div", { key: '52f349afae529afc12461642abf17fcf4870ca6f', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ed1f3366306f7e3d708473e14fc8de5723dba03f', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), h("nav", { key: 'fb9a559a97ad866b62d4cb2a0f7f828548e24c75', ref: (el) => (this.panelEl = el), role: "menu", class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
-                'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
-                'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'ddf003345ef5181b968b4bfd8962805d09d15e89' }))));
+                'right-0': this.dropdownPos === 'right' && !this.dropdownOffset
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '6205de74b039cb784bf9b104edfd6f7a03cc5ed1' }))));
     }
     get host() { return this; }
     static get style() { return EdsDropdownStyle0; }
 }, [1, "eds-dropdown", {
         "icon": [1],
         "label": [1],
-        "rounded": [4],
         "ariaLabel": [1, "aria-label"],
         "asNav": [4, "as-nav"],
         "dropdownPos": [1, "dropdown-pos"],

package/dist/components/eds-feedback.js

@@ -63,7 +63,7 @@ const EdsFeedback$1 = /*@__PURE__*/ proxyCustomElement(class EdsFeedback extends
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (h("div", { key: '5405127cfc114d4906617955d7b1069a04ed7b8e', class: "grid inline" }, h(HeadingTag, { key: 'c0a2593d843577323b6a27d0f8fdca3b84063bd5', class: headingClass }, this.label), h("p", { key: '5b7ef9fbd8c5b4a9d3c7c39e3092244d08dde126', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '2de1ad00dd21d987bc4a91438500a58a0bcd63a7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '3de038a0ae8ee334edde65194356f021e14e7cb3', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '7d01b8aef2854cfdb739553e7f43ed9516199e1e', class: "grid inline" }, h(HeadingTag, { key: 'a0c4a4f93598b955e90416d50260aaa3f644615a', class: headingClass }, this.label), h("p", { key: 'acb2db8fc209faf2d39622e2e858fa1e7403e1b4', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'b0db57c9e3539a5edfecf67cc3a12dd87d74fad9', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '8d6bf62a18fdb12dddba932be9a5115396fdfd6f', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     get el() { return this; }
     static get style() { return EdsFeedbackStyle0; }