@ebrains/components 0.9.2-beta → 1.0.0

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

@@ -0,0 +1,238 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { c as cva } from './index2.js';
+import { d as defineCustomElement$4 } from './eds-card-title2.js';
+import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const GRADIANT_TOKENS = ['green', 'yellow', 'among-blue', 'purple'];
+const gradientBGColorVariants = cva([], {
+    variants: {
+        color: GRADIANT_TOKENS.reduce((acc, token) => (Object.assign(Object.assign({}, acc), { [token]: '' })), {}),
+        direction: {
+            top: '',
+            bottom: ''
+        },
+        pseudo: {
+            true: 'before:effect-opacity effect-bg-behind',
+            false: ''
+        },
+        hover: {
+            true: 'before:opacity-0 hover:before:opacity-100',
+            false: ''
+        }
+    },
+    compoundVariants: [
+        // region GREEN
+        {
+            color: 'green',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-01-top'
+        },
+        {
+            color: 'green',
+            pseudo: true,
+            direction: 'bottom',
+            class: 'before:bg-gradient-01-bottom'
+        },
+        {
+            color: 'green',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-01-top'
+        },
+        {
+            color: 'green',
+            pseudo: false,
+            direction: 'bottom',
+            class: 'bg-gradient-01-bottom'
+        },
+        // endregion
+        // region YELLOW
+        {
+            color: 'yellow',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-02-top'
+        },
+        {
+            color: 'yellow',
+            direction: 'bottom',
+            pseudo: true,
+            class: 'before:bg-gradient-02-bottom'
+        },
+        {
+            color: 'yellow',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-02-top'
+        },
+        {
+            color: 'yellow',
+            direction: 'bottom',
+            pseudo: false,
+            class: 'bg-gradient-02-bottom'
+        },
+        // endregion
+        // region PURPLE
+        {
+            color: 'purple',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-03-top'
+        },
+        {
+            color: 'purple',
+            direction: 'bottom',
+            pseudo: true,
+            class: 'before:bg-gradient-03-bottom'
+        },
+        {
+            color: 'purple',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-03-top'
+        },
+        {
+            color: 'purple',
+            direction: 'bottom',
+            pseudo: false,
+            class: 'bg-gradient-03-bottom'
+        },
+        // endregion
+        // region AMONG-BLUE
+        {
+            color: 'among-blue',
+            direction: 'top',
+            pseudo: true,
+            class: 'before:bg-gradient-04-top'
+        },
+        {
+            color: 'among-blue',
+            direction: 'bottom',
+            pseudo: true,
+            class: 'before:bg-gradient-04-bottom'
+        },
+        {
+            color: 'among-blue',
+            direction: 'top',
+            pseudo: false,
+            class: 'bg-gradient-04-top'
+        },
+        {
+            color: 'among-blue',
+            direction: 'bottom',
+            pseudo: false,
+            class: 'bg-gradient-04-bottom'
+        }
+        // endregion
+    ],
+    defaultVariants: {
+        direction: 'top',
+        pseudo: true
+    }
+});
+
+const EdsCardProject$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardProject extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.image = undefined;
+        this.editorialTitle = undefined;
+        this.headingLevel = 'h3';
+        this.categoryTitle = undefined;
+        this.color = undefined;
+        this.bgOnHover = false;
+        this.vertical = false;
+        this.titleProject = undefined;
+        this.url = undefined;
+        this.parsedImage = null;
+    }
+    componentWillLoad() {
+        // Parse the image prop if it's provided
+        if (this.image) {
+            try {
+                this.parsedImage = JSON.parse(this.image);
+                //console.log(this.parsedImage);
+            }
+            catch (error) {
+                //console.error('Error parsing image prop:', error);
+            }
+        }
+    }
+    handleClick(event) {
+        var _a;
+        event.preventDefault();
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.titleProject) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        var _a;
+        const cardClasses = [
+            'min-h-156 border-inside after:border-softest @container overflow-hidden border-0 after:rounded-lg',
+            this.color
+                ? gradientBGColorVariants({
+                    color: this.color,
+                    hover: this.bgOnHover,
+                    class: 'before:border-2 before:rounded-lg before:border-softest'
+                })
+                : 'bg-default',
+            this.bgOnHover && this.color
+                ? 'effect-background bg-default focus-within:bg-transparent hover:bg-transparent'
+                : 'effect-background hover:bg-default',
+            this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'
+        ].join(' ');
+        const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
+        return (h("article", { key: '7a69b9f5fc30ce389267a064e82aa2cf78b676d1', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '8495c7b6655418741b1d208f06f003d4ec2eaf79', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '803b274d099072e055c484e818732a48ff27ebab', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '18b1d058c9d92e3df264c5f60cec0adc8f14f19e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '1854001686cae69c50a97ed50534ae4329d3017a', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'a5e741ce22ace338988a1a0d6f0d5c2740eb685b', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: 'c1136aef565b3a35bee7d7c254434b6c06f3cf65', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '531cb24eafadd52397a138735436e0501b45cf76', class: imageClasses }, h("div", { key: 'c692a10bfa0032d4e43fe35090e38dde3e0401f3', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '490983736b4cd9de3b2cfbafe11be15802746afe', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+    }
+    get el() { return this; }
+}, [0, "eds-card-project", {
+        "image": [8],
+        "editorialTitle": [1, "editorial-title"],
+        "headingLevel": [1, "heading-level"],
+        "categoryTitle": [1, "category-title"],
+        "color": [1],
+        "bgOnHover": [4, "bg-on-hover"],
+        "vertical": [4],
+        "titleProject": [1, "title-project"],
+        "url": [1],
+        "parsedImage": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-project", "eds-card-title", "eds-img", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-project":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardProject$1);
+            }
+            break;
+        case "eds-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardProject = EdsCardProject$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardProject, defineCustomElement };

package/dist/components/eds-card-section.d.ts

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

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

@@ -0,0 +1,92 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { p as parseData } from './sharedUtils.js';
+import { d as defineCustomElement$7 } from './eds-avatar2.js';
+import { d as defineCustomElement$6 } from './eds-card-desc2.js';
+import { d as defineCustomElement$5 } from './eds-card-generic2.js';
+import { d as defineCustomElement$4 } from './eds-card-title2.js';
+import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const edsCardSectionCss = "ol,ul,menu{list-style:none;margin:0;padding:0}.w-full{width:100%}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-4[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1)::before{inset-inline-start:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+4)::before{inset-inline-end:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1):nth-last-child(-n+4)::before{border-bottom-width:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1):nth-last-child(-n+4)~*::before{border-bottom-width:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+4)::after{border-inline-end-width:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+4)::after{top:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+1):nth-last-child(-n+4)::after{bottom:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+1):nth-last-child(-n+4)~li::after{bottom:0}.grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.gap-y-4{row-gap:0.25rem}.gap-y-8{row-gap:0.5rem}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 750px){.md\\:grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.md\\:grid-col-span-2{--container-grid-columns:2;grid-column:span 2 / span 2}.md\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.md\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-8-cols>*{--container-grid-columns:8}.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:block{display:block}.lg\\:flex{display:flex}.lg\\:hidden{display:none}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}";
+const EdsCardSectionStyle0 = edsCardSectionCss;
+
+const EdsCardSection$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardSection extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.cards = [];
+        this.occupyCols = 1;
+    }
+    /**
+     * Parses the `cards` JSON string prop into an array of card objects.
+     * If parsing fails, returns an empty array.
+     *
+     * @returns {any[]} An array of parsed card objects.
+     */
+    get parsedCards() {
+        return parseData(this.cards);
+    }
+    /**
+     * Renders the card section as a grid layout.
+     * Each parsed card object is mapped to an `<eds-card-generic>` component,
+     * displaying card details such as title, description, avatar, etc.
+     *
+     * @returns {JSX.Element} The rendered section containing a list of cards.
+     */
+    render() {
+        return (h("section", { key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8', class: "w-full" }, h("ul", { key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+    }
+    static get style() { return EdsCardSectionStyle0; }
+}, [1, "eds-card-section", {
+        "cards": [1],
+        "occupyCols": [2, "occupy-cols"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-section", "eds-avatar", "eds-card-desc", "eds-card-generic", "eds-card-title", "eds-img", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-section":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardSection$1);
+            }
+            break;
+        case "eds-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-card-desc":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-card-generic":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardSection = EdsCardSection$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardSection, defineCustomElement };

package/dist/components/eds-card-tags.d.ts

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

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

@@ -0,0 +1,45 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const edsCardTagsCss = ".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}";
+const EdsCardTagsStyle0 = edsCardTagsCss;
+
+const EdsCardTags$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardTags extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.accent = false;
+        this.tags = [];
+    }
+    render() {
+        return (h("div", { key: '7547e8ffafc22884fb26e7b5cd1da49e588fc590', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+    }
+    static get style() { return EdsCardTagsStyle0; }
+}, [1, "eds-card-tags", {
+        "accent": [4],
+        "tags": [16]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-tags", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-tags":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardTags$1);
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardTags = EdsCardTags$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardTags, defineCustomElement };

package/dist/components/eds-card-title.d.ts

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

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

@@ -0,0 +1,6 @@
+import { E as EdsCardTitle$1, d as defineCustomElement$1 } from './eds-card-title2.js';
+
+const EdsCardTitle = EdsCardTitle$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardTitle, defineCustomElement };

package/dist/components/{eds-card-title.entry.js → eds-card-title2.js}

@@ -1,10 +1,13 @@
-import { r as registerInstance, h } from './index-9d277061.js';
+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 EdsCardTitleStyle0 = edsCardTitleCss;
 
-const EdsCardTitle = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsCardTitle = /*@__PURE__*/ proxyCustomElement(class EdsCardTitle extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.url = undefined;
         this.titleClass = undefined;
         this.headingLevel = 'h3';
@@ -44,9 +47,29 @@ const EdsCardTitle = class {
     render() {
         //const Tag = this.getTag();
         const Heading = this.headingLevel;
-        return (h(Heading, { key: '57ce97f35ee52623d32fac0b6b1a576ca8b5aa70', class: this.getTitleClass() }, h("a", { key: '60fb313d2b8753974658f73aaddd359a63548a79', 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)));
+        return (h(Heading, { key: '9914950b1581456a3a875ed7383975710c05fa7f', class: this.getTitleClass() }, h("a", { key: '9b3298d8bacd8fbaecd8c714329ef5e6ac7192c7', 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)));
     }
-};
-EdsCardTitle.style = edsCardTitleCss;
+    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]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-title"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-title":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardTitle);
+            }
+            break;
+    } });
+}
 
-export { EdsCardTitle as eds_card_title };
+export { EdsCardTitle as E, defineCustomElement as d };

package/dist/components/eds-card-tool.d.ts

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

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

@@ -0,0 +1,137 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { d as defineCustomElement$6 } from './eds-avatar2.js';
+import { d as defineCustomElement$5 } from './eds-card-desc2.js';
+import { d as defineCustomElement$4 } from './eds-card-title2.js';
+import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+const edsCardToolCss = ".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}.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-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
+const EdsCardToolStyle0 = edsCardToolCss;
+
+const EdsCardTool$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardTool extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.cardTitle = undefined;
+        this.url = undefined;
+        this.description = undefined;
+        this.image = undefined;
+        this.avatar = undefined;
+        this.shortAbbreviation = undefined;
+        this.headingLevel = 'h5';
+        this.tags = '';
+        this.tiny = false;
+        this.bg = true;
+        this.withHover = true;
+        this.external = false;
+        this.hierarchy = true;
+    }
+    /**
+     * Parses the `tags` prop into an array of link objects.
+     * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+     *
+     * @returns {any[]} Array of parsed link objects
+     */
+    get parsedTags() {
+        if (typeof this.tags === 'object') {
+            return this.tags;
+        }
+        else if (typeof this.tags === 'string') {
+            try {
+                return JSON.parse(this.tags);
+            }
+            catch (e) {
+                // eslint-disable-next-line
+                console.error('Error parsing links prop:', e);
+                return [];
+            }
+        }
+        return [];
+    }
+    componentWillLoad() { }
+    parseTags() {
+        return this.tags.split(',');
+    }
+    articleClasses() {
+        return [
+            this.tiny ? 'min-h-120' : 'min-h-156',
+            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'
+        ].join(' ');
+    }
+    handleClick() {
+        var _a;
+        //event.preventDefault();
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (h("article", { key: 'b3f0c0f3588304fb36f1c395b69b723edbfa8c95', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '12f9d1363b3d171912eb00117d99056065fbcb33', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '780c4b035e0fff1911ee4b8b04a0729cd182d877', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'a6878ba6bb2086a334282b10750234f4251c6334', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+    }
+    get el() { return this; }
+    static get style() { return EdsCardToolStyle0; }
+}, [1, "eds-card-tool", {
+        "cardTitle": [1, "card-title"],
+        "url": [1],
+        "description": [1],
+        "image": [8],
+        "avatar": [1],
+        "shortAbbreviation": [1, "short-abbreviation"],
+        "headingLevel": [1, "heading-level"],
+        "tags": [8],
+        "tiny": [4],
+        "bg": [4],
+        "withHover": [4, "with-hover"],
+        "external": [4],
+        "hierarchy": [4]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-card-tool", "eds-avatar", "eds-card-desc", "eds-card-title", "eds-img", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-card-tool":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsCardTool$1);
+            }
+            break;
+        case "eds-avatar":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-card-desc":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-card-title":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-img":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsCardTool = EdsCardTool$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCardTool, defineCustomElement };

package/dist/components/eds-code-block.d.ts

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

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

@@ -0,0 +1,6 @@
+import { E as EdsCodeBlock$1, d as defineCustomElement$1 } from './eds-code-block2.js';
+
+const EdsCodeBlock = EdsCodeBlock$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsCodeBlock, defineCustomElement };