@ebrains/components 1.0.0 → 1.1.0

package/dist/cjs/eds-breadcrumb.cjs.entry.js

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88c8039f.js');
+const sharedUtils = require('./sharedUtils-8e287250.js');
+
+const edsBreadcrumbCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";
+const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
+
+const EdsBreadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Updates the maximum number of visible items and tracks if the screen is small.
+         */
+        this.updateScreenSize = () => {
+            const width = window.innerWidth;
+            if (width < 769) {
+                this.maxVisibleItems = 3;
+            }
+            else if (width <= 1024) {
+                this.maxVisibleItems = 3;
+            }
+            else if (width <= 1280) {
+                this.maxVisibleItems = 3;
+            }
+            else if (width <= 2200) {
+                this.maxVisibleItems = 4;
+            }
+            else {
+                this.maxVisibleItems = 6;
+            }
+        };
+        this.items = [];
+        this.intent = 'ghost';
+        this.parsedItems = [];
+        this.isSmallScreen = false;
+        this.maxVisibleItems = 6;
+    }
+    /**
+     * Watches for changes to the `items` prop and parses it.
+     */
+    parseItems(newValue) {
+        this.parsedItems = sharedUtils.parseData(newValue);
+    }
+    /**
+     * Lifecycle method that runs when the component is about to be loaded.
+     * It parses the initial `items` prop value.
+     */
+    componentWillLoad() {
+        this.parseItems(this.items);
+        this.updateScreenSize();
+        window.addEventListener('resize', this.updateScreenSize);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateScreenSize);
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        var _a;
+        const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
+        links === null || links === void 0 ? void 0 : links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    /**
+     * Returns breadcrumb items with potential truncation if there are too many.
+     * It inserts an ellipsis item where necessary.
+     */
+    getTruncatedItems() {
+        const totalItems = this.parsedItems.length;
+        const ellipsis = { label: '...', url: '', isHidden: true };
+        if (totalItems > this.maxVisibleItems) {
+            const firstItem = this.parsedItems[0];
+            const lastItems = this.parsedItems.slice(-2);
+            if (this.maxVisibleItems === 3) {
+                return [firstItem, ellipsis, ...lastItems];
+            }
+            else if (this.maxVisibleItems === 4) {
+                const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
+                return [firstItem, middleItem, ellipsis, ...lastItems];
+            }
+        }
+        return this.parsedItems;
+    }
+    /**
+     * Helper to determine the display label and full label.
+     * If the label is longer than 15 characters and the item is not the current (last) item,
+     * we display a truncated version but use the full label for aria attributes.
+     */
+    getLabels(item, isCurrent) {
+        if (!isCurrent && item.label.length > 15) {
+            return { displayLabel: `${item.label.slice(0, 15)}...`, fullLabel: item.label };
+        }
+        return { displayLabel: item.label, fullLabel: item.label };
+    }
+    /**
+     * Render method for the breadcrumb component.
+     * It creates a navigation element with an ordered list of breadcrumb links.
+     * The last link is marked as the current page.
+     */
+    render() {
+        const itemsToRender = this.getTruncatedItems();
+        return (index.h("nav", { key: 'db769320b42e627fffd71676c1e0551646f1de70', "aria-label": "Breadcrumb" }, index.h("ol", { key: '6cef8ed43cabcee73cb4ad4fb26f809d0690c0ec', class: "flex items-center space-x-2" }, itemsToRender.map((item, index$1) => {
+            const isLast = index$1 === itemsToRender.length - 1;
+            return (index.h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
+                const { fullLabel } = this.getLabels(item, isLast);
+                const linkIntent = isLast
+                    ? this.intent === 'strong'
+                        ? 'weak'
+                        : this.intent === 'weak'
+                            ? 'strong'
+                            : this.intent
+                    : this.intent;
+                return (index.h("eds-link", Object.assign({ label: fullLabel, url: item.url, intent: linkIntent, disabled: isLast, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
+            })()) : (index.h("eds-link", { label: "...", url: "#", intent: "strong", current: false, "aria-label": "...", size: "small", "icon-small": "false", icon: "chevron-right" })), !isLast && !item.isHidden && (index.h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+        }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["parseItems"]
+    }; }
+};
+EdsBreadcrumb.style = EdsBreadcrumbStyle0;
+
+exports.eds_breadcrumb = EdsBreadcrumb;

package/dist/cjs/eds-card-desc_2.cjs.entry.js

@@ -0,0 +1,77 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88c8039f.js');
+
+const edsCardDescCss = ".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)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
+const EdsCardDescStyle0 = edsCardDescCss;
+
+const EdsCardDesc = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.description = undefined;
+        this.truncate = true;
+        this.truncateLines = '3';
+    }
+    getTruncateClass() {
+        return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+    }
+    render() {
+        return (index.h("p", { key: '2421ea469339e3d56fc5c0ebbec213eeb1a2a9cf', class: "text-light f-ui-03-light" }, index.h("span", { key: 'd024adda16a85bf2913803c06eb05af3b4af6bb9', class: this.getTruncateClass() }, this.description)));
+    }
+};
+EdsCardDesc.style = EdsCardDescStyle0;
+
+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) {
+        index.registerInstance(this, hostRef);
+        this.url = undefined;
+        this.titleClass = undefined;
+        this.headingLevel = 'h3';
+        this.externalLink = false;
+        this.cardTitle = undefined;
+        this.hierarchy = true;
+    }
+    /**
+     * 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]}`;
+    }
+    /*private getTag() {
+      if (this.url) {
+        return 'a';
+      }
+      return 'span';
+    }*/
+    render() {
+        //const Tag = this.getTag();
+        const Heading = this.headingLevel;
+        return (index.h(Heading, { key: '494d8b7ea90ccb93cf0395374951e90c89a59d3a', class: this.getTitleClass() }, index.h("a", { key: 'ab739472fd796767cd6e7ab4f4c09bcf24ec200a', 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 = EdsCardTitleStyle0;
+
+exports.eds_card_desc = EdsCardDesc;
+exports.eds_card_title = EdsCardTitle;

package/dist/cjs/eds-card-generic.cjs.entry.js

@@ -0,0 +1,92 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88c8039f.js');
+const sharedUtils = require('./sharedUtils-8e287250.js');
+const analytics = require('./analytics-28713bf7.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}.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-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}";
+const EdsCardGenericStyle0 = edsCardGenericCss;
+
+const EdsCardGeneric = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.parentContext = null; // Accepts the entire event detail or null
+        this.cardTitle = 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
+            }
+        }
+    }
+    handleParentContext(event) {
+        if (event.target !== this.el) {
+            // Ignore the event if it's not targeted at this specific instance
+            return;
+        }
+        //console.log(event.detail);
+        this.parentContext = event.detail;
+        event.stopPropagation();
+    }
+    /**
+     * 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() {
+        return sharedUtils.parseData(this.tags);
+    }
+    articleClasses() {
+        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'
+        ].join(' ');
+    }
+    handleClick() {
+        var _a;
+        analytics.sendAnalytics({
+            category: 'ui-component',
+            parentContext: this.parentContext,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'click'
+        });
+    }
+    render() {
+        return (index.h("article", { key: '440a448c841370838c0c66610bd1266b46f66541', class: this.articleClasses(), onClick: () => this.handleClick() }, index.h("eds-card-title", { key: '292d93a9a993c6dcbfd276097a21d3984b1794c4', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (index.h("eds-card-desc", { key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (index.h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (index.h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, index.h("div", { key: '40388913b1abb9308f42469956342efdbb48d508', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: tag.style, label: tag.label })))), ' '));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsCardGeneric.style = EdsCardGenericStyle0;
+
+exports.eds_card_generic = EdsCardGeneric;

package/dist/cjs/eds-card-project.cjs.entry.js

@@ -188,7 +188,7 @@ const EdsCardProject = class {
             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 (index$1.h("article", { key: '7a69b9f5fc30ce389267a064e82aa2cf78b676d1', class: cardClasses, onClick: (event) => this.handleClick(event) }, index$1.h("div", { key: '8495c7b6655418741b1d208f06f003d4ec2eaf79', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, index$1.h("div", { key: '803b274d099072e055c484e818732a48ff27ebab', class: "lg:max-w-[720px]" }, index$1.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 && (index$1.h("span", { key: '1854001686cae69c50a97ed50534ae4329d3017a', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (index$1.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) && index$1.h("eds-tag", { key: 'c1136aef565b3a35bee7d7c254434b6c06f3cf65', label: this.categoryTitle })))), this.parsedImage && (index$1.h("div", { key: '531cb24eafadd52397a138735436e0501b45cf76', class: imageClasses }, index$1.h("div", { key: 'c692a10bfa0032d4e43fe35090e38dde3e0401f3', class: "aspect-1x1 w-full" }, index$1.h("eds-img", Object.assign({ key: '490983736b4cd9de3b2cfbafe11be15802746afe', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (index$1.h("article", { key: '8b4707ad7689824c50db3112b5844e28beb31533', class: cardClasses, onClick: (event) => this.handleClick(event) }, index$1.h("div", { key: '5cb7673378ab23826202b34034247145b7289bda', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, index$1.h("div", { key: '8111b523840c8b363bbb422c1f314ce07057ea92', class: "lg:max-w-[720px]" }, index$1.h("eds-card-title", { key: 'a326e1384873edb9bfc86c33e3abeb95064cc8db', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (index$1.h("span", { key: '5e2de62642363533a950f3e923e3f4dfc64c56c1', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (index$1.h("div", { key: '424fed86ec4e714dc5f3644d85e5670d8be56d7f', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && index$1.h("eds-tag", { key: 'b6961cc23835a9b3d1abae47e1c4224a29255164', label: this.categoryTitle })))), this.parsedImage && (index$1.h("div", { key: '69564e0c65f6422a6ccc3957a8080e7e494461bb', class: imageClasses }, index$1.h("div", { key: 'e47a21a5356459936b6f528a3aba50240851fcf2', class: "aspect-1x1 w-full" }, index$1.h("eds-img", Object.assign({ key: 'f64af6387cdef28619aa8a0465d4a50ec3a95007', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return index$1.getElement(this); }
 };

package/dist/cjs/eds-card-tags.cjs.entry.js

@@ -14,7 +14,7 @@ const EdsCardTags = class {
         this.tags = [];
     }
     render() {
-        return (index.h("div", { key: '7547e8ffafc22884fb26e7b5cd1da49e588fc590', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: this.accent ? 'accent' : 'default', label: tag })))));
+        return (index.h("div", { key: '5da9fcbc472476a7b438451e563586643a818bc0', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: this.accent ? 'accent' : 'default', label: tag })))));
     }
 };
 EdsCardTags.style = EdsCardTagsStyle0;

package/dist/cjs/eds-card-tool.cjs.entry.js

@@ -70,7 +70,7 @@ const EdsCardTool = class {
         });
     }
     render() {
-        return (index.h("article", { key: 'b3f0c0f3588304fb36f1c395b69b723edbfa8c95', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, index.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 && (index.h("eds-card-desc", { key: '780c4b035e0fff1911ee4b8b04a0729cd182d877', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (index.h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (index.h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, index.h("div", { key: 'a6878ba6bb2086a334282b10750234f4251c6334', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: tag.style, label: tag.label }))))));
+        return (index.h("article", { key: '465a4593a4d28c5bfcef7325be7674b6301bc275', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, index.h("eds-card-title", { key: '5d6c13f582bd89f03d95aa9027b83d8d4c4184ca', "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 && (index.h("eds-card-desc", { key: '4872956b7d97e222abd8e429c73a7e97fe1f7a06', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (index.h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (index.h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, index.h("div", { key: '10c20ab24e836c06ba2da070cbcf21cf11537e17', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: tag.style, label: tag.label }))))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/eds-code-block.cjs.entry.js

@@ -2480,7 +2480,7 @@ const EdsCodeBlock = class {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (index.h("div", { key: '6c1a418d4cf1d02ea9216f9196cbbdbfdf7f7315', class: "relative bg-stronger rounded-sm" }, index.h("div", { key: '118cfa439e27f3b6c8ed7f3308535a744c1fac29', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (index.h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (index.h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, index.h("code", { innerHTML: this.getHighlightedCode() }))), index.h("span", { key: '5c557849fb320c69ec830f7028f9e0ee7099d5f1', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, index.h("eds-icon-wrapper", { key: 'c11a154a82a8b3eaff418f235a7820209579554b', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), index.h("span", { key: '9537d56544ca139ea847d34091c093c7f852f12c', class: "sr-only" }, "Copy Code")), this.language && (index.h("pre", { key: '8cc48bb7da216db0e181587a33c25dc88b91bbbc', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, index.h("code", { key: '7fd391c14a4344fd7e98ad5d32283a498085064d', innerHTML: this.getHighlightedCode() })))));
+        return (index.h("div", { key: '7550f1c5e29a9be39614404d51dfec9a7aa194a9', class: "relative bg-stronger rounded-sm" }, index.h("div", { key: '8e654051ec6105e051af723e056b4151afc4305c', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (index.h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (index.h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, index.h("code", { innerHTML: this.getHighlightedCode() }))), index.h("span", { key: '1f558301727adb451524850b352844d7658f33a8', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, index.h("eds-icon-wrapper", { key: '7def1f38f949c32d6138d88a0a7edf9655852491', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), index.h("span", { key: '9eabcd54f3bcdc1c4627a7ca7e22fd38e9755ca6', class: "sr-only" }, "Copy Code")), this.language && (index.h("pre", { key: 'd15dce4b1692bf1956e1b3cb3586dde4d9561f1b', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, index.h("code", { key: 'ad7eb7b40aaab69b6bc929c632ce4736fe3c39a5', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return index.getElement(this); }
 };

package/dist/cjs/eds-gauge.cjs.entry.js

@@ -0,0 +1,60 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-88c8039f.js');
+
+const edsGaugeCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-full{border-radius:9999px}.overflow-hidden{overflow:hidden}.bg-inverse{background-color:var(--white)}.bg-current{background-color:currentColor}.bg-dark{background-color:var(--grey-300)}.bg-darker{background-color:var(--grey-400)}.bg-default{background-color:var(--grey-200)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.inset-0{inset:0rem}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.text-default{color:var(--black)}";
+const EdsGaugeStyle0 = edsGaugeCss;
+
+const BACKGROUND_VARIANTS = {
+    default: '#f2f2f2',
+    dark: '#d8d8d8',
+    strong: '#666666',
+    black: '#000000'
+};
+const EdsGauge = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.size = 100;
+        this.valueMin = 0;
+        this.valueMax = 100;
+        this.value = 60;
+        this.thickness = 0.1;
+        this.variant = 'default';
+    }
+    render() {
+        // Clamp thickness to [0,1]
+        const thicknessClamped = Math.min(Math.max(this.thickness, 0.1), 0.2);
+        // Normalize value within [valueMin, valueMax]
+        const clamped = Math.min(Math.max(this.value, this.valueMin), this.valueMax);
+        const range = this.valueMax - this.valueMin || 1;
+        const ratio = (clamped - this.valueMin) / range;
+        // Use the smaller of width/height as diameter
+        const diameter = this.size;
+        const angle = ratio * 360;
+        const ringThickness = thicknessClamped * diameter;
+        const innerDiameter = diameter - ringThickness * 2;
+        const fontSize = diameter * 0.2;
+        // Determine background color for empty portion
+        const emptyColor = BACKGROUND_VARIANTS[this.variant] || BACKGROUND_VARIANTS.default;
+        const containerStyle = {
+            width: `${diameter}px`,
+            height: `${diameter}px`,
+            background: `conic-gradient(#00e766 0deg ${angle}deg, ${emptyColor} ${angle}deg 360deg)`
+        };
+        const maskStyle = {
+            width: `${innerDiameter}px`,
+            height: `${innerDiameter}px`,
+            top: `${ringThickness}px`,
+            left: `${ringThickness}px`
+        };
+        const textStyle = {
+            fontSize: `${fontSize}px`
+        };
+        return (index.h("div", { key: '2918e034b24749fd1fcad84f4a8614043c6a9ea2', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, index.h("div", { key: 'a24d393bfcdbd45019f7a560c4af0330c720af0c', class: "absolute bg-inverse rounded-full", style: maskStyle }), index.h("div", { key: '712fc9211b6e90afdf7063a4e6a6af74ec88dfdd', class: "absolute inset-0 flex items-center justify-center" }, index.h("span", { key: '88d3ffc3fea9ff77247b4ecbb4af3a6ac39c1cb4', class: "f-body-01 text-default", style: textStyle }, clamped))));
+    }
+};
+EdsGauge.style = EdsGaugeStyle0;
+
+exports.eds_gauge = EdsGauge;

package/dist/cjs/eds-icon-arrow-diagonal.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconArrowDiagonal = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '1c7405c12d1741c3dcfe117a04ea4ef5af200590', class: this.class, innerHTML: arrowDiagonalBlack.arrowDiagonal });
+        return index.h("span", { key: 'd178d36fd0888a40da0873bfd8abe862770e06e9', class: this.class, innerHTML: arrowDiagonalBlack.arrowDiagonal });
     }
 };
 

package/dist/cjs/eds-icon-arrow-right.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconArrowRight = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '557b38fd6253b4a29c4cf2ec2b9f79355ceca358', class: this.class, innerHTML: arrowRight.arrowRight });
+        return index.h("span", { key: '4a2b33b86753acab8270a45c7b250603b128bc88', class: this.class, innerHTML: arrowRight.arrowRight });
     }
 };
 

package/dist/cjs/eds-icon-bluesky.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconBluesky = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '4eba69bfec926b7a3490feee15b5947a8ab8a7b9', class: this.class, innerHTML: bluesky.bluesky });
+        return index.h("span", { key: '68917ac759cd684a6f3f3f67cb174d7291841070', class: this.class, innerHTML: bluesky.bluesky });
     }
 };
 

package/dist/cjs/eds-icon-bookmark.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconBookmark = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '5978393f7c5bdc6a1a23b85ded49503dacab3ff2', class: this.class, innerHTML: bookmark.bookmark });
+        return index.h("span", { key: '61dd6e752db1c28d082d80aba71267f4e971492d', class: this.class, innerHTML: bookmark.bookmark });
     }
 };
 

package/dist/cjs/eds-icon-chevron-down.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconChevronDown = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '6c98bd673a1562fda009e95e4e4562d1e7f0ccfd', class: this.class, innerHTML: chevronDown.chevronDown });
+        return index.h("span", { key: 'fa8022d27b91e909d4cd5522c6d0406be698a412', class: this.class, innerHTML: chevronDown.chevronDown });
     }
 };
 

package/dist/cjs/eds-icon-chevron-left.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconChevronLeft = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '8a2d0acc90ce3515e059818d704d7ce427cdd56e', class: this.class, innerHTML: chevronLeft.chevronLeft });
+        return index.h("span", { key: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronLeft.chevronLeft });
     }
 };
 

package/dist/cjs/eds-icon-chevron-right.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconChevronRight = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '8632a351612a4be6e47d4ff483717a2bda99a008', class: this.class, innerHTML: chevronRight.chevronRight });
+        return index.h("span", { key: 'f770cd9151077e8708c76d2082613c65a20c420f', class: this.class, innerHTML: chevronRight.chevronRight });
     }
 };
 

package/dist/cjs/eds-icon-chevron-up.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconChevronUp = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: 'cc552d780188b225d16fd18ec33a22b0fbbd9660', class: this.class, innerHTML: chevronUp.chevronUp });
+        return index.h("span", { key: '40d18a840277f2aba5d314a36fca5c1f8fd99cc6', class: this.class, innerHTML: chevronUp.chevronUp });
     }
 };
 

package/dist/cjs/eds-icon-close.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconClose = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '907eaa5d70add8ad62e9f071aacce359682969fe', class: this.class, innerHTML: close.close });
+        return index.h("span", { key: '8e4dedef0fe684fdd6078db8005661e49207da55', class: this.class, innerHTML: close.close });
     }
 };
 

package/dist/cjs/eds-icon-copy.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconCopy = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: 'e31c2cd317654999670526469111fff23f66a6b4', class: this.class, innerHTML: copy.copy });
+        return index.h("span", { key: 'ff014a9761d8380a9fd8c97d3dd483b8d6fc786c', class: this.class, innerHTML: copy.copy });
     }
 };
 

package/dist/cjs/eds-icon-eu.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconEu = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '94c3dbf77824b2e51627b8e2a2de9b7cfb1f24e0', class: this.class, innerHTML: eu.euSvg });
+        return index.h("span", { key: '3888f0338df2496c334d95dbcb52a0e39906362d', class: this.class, innerHTML: eu.euSvg });
     }
 };
 

package/dist/cjs/eds-icon-external.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconExternal = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '099d0118c7a4bfa2d8b5c21f45162080b31a2f7c', class: this.class, innerHTML: arrowDiagonalBlack.arrowDiagonal });
+        return index.h("span", { key: '58d51f84a7b6326ef117a905f2c50d4fff6369c5', class: this.class, innerHTML: arrowDiagonalBlack.arrowDiagonal });
     }
 };
 

package/dist/cjs/eds-icon-facebook.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconFacebook = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '72eb0709ccbfc7830ab146f936a2587407feb0bb', class: this.class, innerHTML: facebook.facebook });
+        return index.h("span", { key: '3ea80799436c93b1c02ad177bd48910409aebf51', class: this.class, innerHTML: facebook.facebook });
     }
 };
 

package/dist/cjs/eds-icon-gitlab.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconGitlab = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '280eb778fd7028ef60305eee614213f8a39a35f2', class: this.class, innerHTML: mono.gitlabBlack });
+        return index.h("span", { key: 'a2f423ed9227463e27c0c698e6b4bba44cdc6263', class: this.class, innerHTML: mono.gitlabBlack });
     }
 };
 

package/dist/cjs/eds-icon-linkedin.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconLinkedin = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '5388b5cef5d643984157e0bed9263e83934dc7e3', class: this.class, innerHTML: linkedin.linkedin });
+        return index.h("span", { key: '88852ca054a7e637efc7fe5b01f343a9b1798e41', class: this.class, innerHTML: linkedin.linkedin });
     }
 };
 

package/dist/cjs/eds-icon-loader.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconLoader = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '808ce738f7812024a52b4875ae3d9070bc75c02d', class: this.class, innerHTML: loader.loader });
+        return index.h("span", { key: '283c8842f0f755074521fdcbae46969d87b86312', class: this.class, innerHTML: loader.loader });
     }
 };
 

package/dist/cjs/eds-icon-mastodon.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconMastodon = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: 'b998a568e6f0f7811a4984817177c76842127298', class: this.class, innerHTML: mastodon.mastodon });
+        return index.h("span", { key: '5a5a90094c1f974dc7932654e97de04975e675bb', class: this.class, innerHTML: mastodon.mastodon });
     }
 };
 

package/dist/cjs/eds-icon-menu.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconMenu = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: 'f9dcfa2e4c9cc938f3fd994ca3637c80f0495028', class: this.class, innerHTML: menu.menu });
+        return index.h("span", { key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0', class: this.class, innerHTML: menu.menu });
     }
 };
 

package/dist/cjs/eds-icon-minus.cjs.entry.js

@@ -11,7 +11,7 @@ const EdsIconMinus = class {
         this.class = '';
     }
     render() {
-        return index.h("span", { key: '76fe78207051b486030fc1ef778d55ecfec2c3d2', class: this.class, innerHTML: minus.minus });
+        return index.h("span", { key: 'e76f56aaba4a67096e6314e61d53bc2512941552', class: this.class, innerHTML: minus.minus });
     }
 };