@ebrains/components 0.9.2-beta → 1.0.0

package/dist/components/eds-modal.js

@@ -0,0 +1,166 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { d as defineCustomElement$3 } from './eds-button2.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+
+const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.z-50{z-index:50}.z-9999999{z-index:9999999}.w-full{width:100%}.min-w-full{min-width:100%}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-0{top:0rem}.left-0{left:0rem}.top-20{top:1.25rem}.bottom-0{bottom:0rem}.bottom-20{bottom:1.25rem}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.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)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.bg-dark{background-color:var(--grey-300)}.bg-strong{background-color:var(--grey-700)}.bg-strongest{background-color:var(--black)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.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}@media (min-width: 750px){.md\\:bottom-20{bottom:1.25rem}.md\\:w-auto{width:auto}.md\\:top-20{top:1.25rem}.md\\:top-1\\/2{top:50%}.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:gap-y-12{row-gap:0.75rem}}";
+const EdsModalStyle0 = edsModalCss;
+
+const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.heading = '';
+        this.truncate = 1;
+        this.position = 'middle';
+        this.inverseHeader = false;
+        this.isOpen = false;
+    }
+    getTruncateClass() {
+        return this.truncate ? `line-clamp-${this.truncate}` : '';
+    }
+    /**
+     * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+     *
+     * @private
+     * @returns {string} The concatenated CSS classes for modal positioning.
+     */
+    getModalPositionClasses() {
+        switch (this.position) {
+            case 'top':
+                return [
+                    // mobile: pinned to top, full-width
+                    'top-0',
+                    'left-0',
+                    'w-full',
+                    // desktop: half-width centred and offset down
+                    'md:left-1/2',
+                    'md:w-auto',
+                    'md:-translate-x-1/2',
+                    'md:top-20'
+                ].join(' ');
+            case 'bottom':
+                return ['bottom-0', 'left-0', 'w-full', 'md:left-1/2', 'md:w-auto', 'md:-translate-x-1/2', 'md:bottom-20'].join(' ');
+            /*case 'left':
+              …
+            case 'right':
+              …*/
+            case 'middle':
+            default:
+                return [
+                    // mobile: full-width, start from top with a little padding
+                    'top-0',
+                    'left-0',
+                    'w-full',
+                    'pt-4',
+                    // desktop: centred both axes
+                    'md:left-1/2',
+                    'md:top-1/2',
+                    'md:w-auto',
+                    'md:-translate-x-1/2',
+                    'md:-translate-y-1/2'
+                ].join(' ');
+        }
+    }
+    /**
+     * Opens the modal.
+     */
+    async open() {
+        var _a;
+        this.isOpen = true;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'opened'
+        });
+    }
+    /**
+     * Closes the modal.
+     */
+    async close() {
+        var _a;
+        this.isOpen = false;
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.heading) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'closed'
+        });
+    }
+    /**
+     * Toggles the modal open or closed.
+     */
+    async toggle() {
+        this.isOpen = !this.isOpen;
+    }
+    /**
+     * Listens for global custom events to open the modal.
+     */
+    handleGlobalOpen() {
+        this.open();
+    }
+    /**
+     * Listens for global custom events to close the modal.
+     */
+    handleGlobalClose() {
+        this.close();
+    }
+    /**
+     * Closes the modal when the Escape key is pressed.
+     */
+    handleKeyDown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
+        }
+    }
+    render() {
+        // Generate a unique id for the title so we can reference it for aria-labelledby.
+        const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
+        return (h("div", { key: '3a2446813eebf215f2c7aafc26d5688f58020c54', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '7081928b01c09e692cac0f61dbc58b4f5578271d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+            ,
+            onClick: () => this.close() })), h("div", { key: '0fc5f4716022cb01c2da9a28738586710625c70f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8e4bdffba2f69b18e8846e4c2709c5c423b0a99e', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '6e0d237fc95c1b74b1b0c0456848684578367302', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '3499de216da4ba38edb66cdcd688872f51b41aaf', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: 'f723dded796961e925cc2b046c31e7345fd3e159', class: "pt-8 px-20 py-20" }, h("slot", { key: 'ffe1213b65e60dfaf7c220e3c7e3dd8495706dcf' })))));
+    }
+    get el() { return this; }
+    static get style() { return EdsModalStyle0; }
+}, [1, "eds-modal", {
+        "heading": [1, "title"],
+        "truncate": [2],
+        "position": [1],
+        "inverseHeader": [4, "inverse-header"],
+        "isOpen": [32],
+        "open": [64],
+        "close": [64],
+        "toggle": [64]
+    }, [[0, "eds-modal-open", "handleGlobalOpen"], [0, "eds-modal-close", "handleGlobalClose"], [8, "keydown", "handleKeyDown"]]]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-modal", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-modal":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsModal$1);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsModal = EdsModal$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsModal, defineCustomElement };

package/dist/components/eds-pagination.d.ts

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

package/dist/components/eds-pagination.js

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

package/dist/components/{eds-pagination.entry.js → eds-pagination2.js}

@@ -1,10 +1,15 @@
-import { r as registerInstance, h, g as getElement } from './index-9d277061.js';
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$1 } from './eds-link2.js';
 
 const edsPaginationCss = "ul,menu{list-style:none;margin:0;padding:0}.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)}.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)}.f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.text-lightest{color:var(--grey-500)}.mb-28{margin-bottom:1.75rem}.w-full{width:100%}.w-20{width:1.25rem}.h-20{height:1.25rem}.h-28{height:1.75rem}.h-32{height:2rem}.h-36{height:2.25rem}.text-center{text-align:center}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-x-8{-moz-column-gap:0.5rem;column-gap:0.5rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.\\!p-8{padding:0.5rem !important}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.hidden{display:none}.gap-1{gap:0.0625rem}.py-4{padding-top:0.25rem;padding-bottom:0.25rem}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}@media (min-width: 900px){.lg\\:\\!pr-12{padding-right:0.75rem !important}.lg\\:flex{display:flex}}";
+const EdsPaginationStyle0 = edsPaginationCss;
 
-const EdsPagination = class {
-    constructor(hostRef) {
-        registerInstance(this, hostRef);
+const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
         this.currentPage = undefined;
         this.lastPage = undefined;
         this.perPage = 10;
@@ -167,7 +172,7 @@ const EdsPagination = class {
         }
     }
     render() {
-        return (h("div", { key: 'b33415e05457ccc78ea3744a1baa9affbf38ca4a' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'e555e94a3fd13cf0d57108bd2cca3fb97cd0c688', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'c63f1d5aa6154a23d714c74dcd9a0a75b68df579', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (h("div", { key: '1d53f69179791434224f152503c0b81c4cfc7cd3' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '00ae324b49d62a74feee9d1cde21d67cd726ecf0', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'dedf2ce2700eae9d1386b305ec1d1904b133f992', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'
@@ -200,12 +205,50 @@ const EdsPagination = class {
                 }
             } }))))) : null));
     }
-    get hostEl() { return getElement(this); }
+    get hostEl() { return this; }
     static get watchers() { return {
         "currentPage": ["onPageOrLastPageChange"],
         "lastPage": ["onPageOrLastPageChange"]
     }; }
-};
-EdsPagination.style = edsPaginationCss;
+    static get style() { return EdsPaginationStyle0; }
+}, [1, "eds-pagination", {
+        "currentPage": [2, "current-page"],
+        "lastPage": [2, "last-page"],
+        "perPage": [2, "per-page"],
+        "total": [2],
+        "url": [1],
+        "mode": [1],
+        "prevLabel": [1, "prev-label"],
+        "nextLabel": [1, "next-label"],
+        "prevUrl": [1, "prev-url"],
+        "nextUrl": [1, "next-url"],
+        "links": [32]
+    }, undefined, {
+        "currentPage": ["onPageOrLastPageChange"],
+        "lastPage": ["onPageOrLastPageChange"]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-pagination", "eds-icon-wrapper", "eds-link"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-pagination":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsPagination);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
 
-export { EdsPagination as eds_pagination };
+export { EdsPagination as E, defineCustomElement as d };

package/dist/components/eds-pie.d.ts

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

package/dist/components/eds-pie.js

@@ -0,0 +1,127 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+
+const edsPieCss = ".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)}.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)}.text-default{color:var(--black)}.w-8{width:0.5rem}.h-8{height:0.5rem}.mr-4{margin-right:0.25rem}:host{display:block}.wrapper{display:flex;align-items:center;justify-content:center;height:100%}.pie-chart{overflow:visible}.slice-label{font-size:var(--font-size-chart-label);font-weight:var(--font-weight-chart-label);fill:var(--color-text);pointer-events:none}.legend{list-style:none;margin:0;padding:0 0 0 1rem}.legend-item{display:flex;align-items:center;margin-bottom:0.5rem;outline:none}.legend-item:focus{outline:2px dashed var(--color-primary)}.legend-swatch{width:1rem;height:1rem;border-radius:50%;margin-right:0.5rem}.legend-label{font-size:var(--font-size-base);color:var(--color-text)}";
+const EdsPieStyle0 = edsPieCss;
+
+const EdsPie$1 = /*@__PURE__*/ proxyCustomElement(class EdsPie extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.size = 200;
+        this.slices = [];
+        this.thickness = 1;
+        this.display = 'value';
+        this.legend = true;
+        this.colorScheme = 'semantic';
+    }
+    parseSlices() {
+        if (typeof this.slices === 'string') {
+            try {
+                return JSON.parse(this.slices);
+            }
+            catch (_a) {
+                // eslint-disable-next-line
+                console.warn('eds-pie: invalid slices JSON');
+            }
+        }
+        return Array.isArray(this.slices) ? this.slices : [];
+    }
+    polarToCartesian(cx, cy, r, angle) {
+        const rad = (angle - 90) * (Math.PI / 180);
+        return { x: cx + r * Math.cos(rad), y: cy + r * Math.sin(rad) };
+    }
+    describeArc(x, y, r, startAngle, endAngle) {
+        const start = this.polarToCartesian(x, y, r, endAngle);
+        const end = this.polarToCartesian(x, y, r, startAngle);
+        const largeArcFlag = endAngle - startAngle <= 180 ? '0' : '1';
+        return [`M ${start.x} ${start.y}`, `A ${r} ${r} 0 ${largeArcFlag} 0 ${end.x} ${end.y}`, `L ${x} ${y}`, 'Z'].join(' ');
+    }
+    render() {
+        const raw = this.parseSlices();
+        if (raw.length > EdsPie.MAX_SLICES) {
+            // eslint-disable-next-line
+            console.warn(`eds-pie: too many slices (${raw.length}), results may overlap.`);
+        }
+        const total = raw.reduce((sum, s) => sum + s.value, 0) || 1;
+        const palette = [...EdsPie.PALETTES[this.colorScheme]];
+        const sorted = [...raw].sort((a, b) => b.value - a.value);
+        let cumulative = 0;
+        const processed = sorted.map((s) => {
+            const angle = (s.value / total) * 360;
+            const start = cumulative, end = cumulative + angle;
+            cumulative = end;
+            const color = s.color || palette.shift() || 'var(--color-chart-neutral-1)';
+            return Object.assign(Object.assign({}, s), { start, end, color });
+        });
+        const diameter = this.size;
+        const radius = diameter / 2;
+        // clamp into [0.5, 1]
+        const tClamped = Math.min(Math.max(this.thickness, 0.5), 1);
+        const innerRadius = radius * (1 - tClamped);
+        const outerRadius = radius;
+        // **replace** the previous labelRadius line with this:
+        const labelRadius = (radius + innerRadius) / 2;
+        // Build ARIA description
+        const ariaLabel = processed
+            .map((s) => `${s.label}: ${this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : s.value}`)
+            .join(', ');
+        return (h(Host, null, h("div", { class: "wrapper" }, h("svg", { width: diameter, height: diameter, role: "img", "aria-label": `Pie chart: ${ariaLabel}`, class: "pie-chart" }, h("title", null, "Pie chart"), h("g", null, processed.map((s) => (h("path", { key: s.id, d: this.describeArc(radius, radius, outerRadius, s.start, s.end), fill: s.color }))), innerRadius > 0 && h("circle", { cx: radius, cy: radius, r: innerRadius, fill: "var(--white)" }), processed.map((s) => {
+            const midAngle = s.start + (s.end - s.start) / 2;
+            const { x, y } = this.polarToCartesian(radius, radius, labelRadius, midAngle);
+            const text = this.display === 'percent' ? `${Math.round((s.value / total) * 100)}%` : String(s.value);
+            return (h("text", { key: s.id, x: x, y: y, class: "f-ui-02", "text-anchor": "middle", "alignment-baseline": "middle" }, text));
+        }))), this.legend && (h("ul", { class: "legend", role: "list" }, processed.map((s) => (h("li", { key: s.id, role: "listitem", tabindex: "0", class: "legend-item" }, h("span", { class: "legend-swatch", style: { backgroundColor: s.color } }), h("span", { class: "legend-label" }, s.label)))))))));
+    }
+    static get style() { return EdsPieStyle0; }
+}, [1, "eds-pie", {
+        "size": [2],
+        "slices": [1],
+        "thickness": [2],
+        "display": [1],
+        "legend": [4],
+        "colorScheme": [1, "color-scheme"]
+    }]);
+EdsPie$1.MAX_SLICES = 9;
+EdsPie$1.PALETTES = {
+    semantic: [
+        'var(--color-chart-accent)',
+        'var(--color-chart-strong)',
+        'var(--color-chart-accent-dark)',
+        'var(--color-chart-lighter)',
+        'var(--color-chart-accent-light)',
+        'var(--color-chart-lightest)',
+        'var(--color-chart-accent-lighter)',
+        'var(--color-chart-darker)',
+        'var(--color-chart-accent-lightest)'
+    ],
+    mono: [
+        'var(--grey-700)',
+        'var(--grey-500)',
+        'var(--grey-300)',
+        'var(--grey-100)',
+        'var(--grey-800)',
+        'var(--grey-600)',
+        'var(--grey-400)',
+        'var(--grey-200)',
+        'var(--grey-900)'
+    ]
+};
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-pie"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-pie":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsPie$1);
+            }
+            break;
+    } });
+}
+
+const EdsPie = EdsPie$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsPie, defineCustomElement };

package/dist/components/eds-progress-bar.d.ts

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

package/dist/components/eds-progress-bar.js

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

package/dist/components/eds-progress-bar2.js

@@ -0,0 +1,71 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+
+const edsProgressBarCss = ".w-full{width:100%}.h-full{height:100%}.bg-default{background-color:var(--grey-200)}.rounded-lg{border-radius:16px}.h-24{height:1.5rem}.border{border-width:1px}.border-softer{border:2px solid rgba(0, 0, 0, .1)}.overflow-hidden{overflow:hidden}.bg-accent{background-color:var(--green-500)}.bg-\\[\\#0034CB\\]{--tw-text-opacity:1;background-color:rgb(0 52 203 / var(--tw-text-opacity))}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-300{transition-duration:300ms}.flex{display:flex}.items-center{align-items:center}.justify-center{justify-content:center}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.absolute{position:absolute}.relative{position:relative}.z-0{z-index:0}.z-10{z-index:10}.inset-0{inset:0rem}.pointer-events-none{pointer-events:none}";
+const EdsProgressBarStyle0 = edsProgressBarCss;
+
+const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.value = 0;
+        this.rounded = true;
+    }
+    /**
+     * Method to update the progress value externally.
+     * @param newValue The new progress value (0-100).
+     */
+    async updateValue(newValue) {
+        this.value = Math.min(100, Math.max(0, newValue)); // Clamp 0–100
+    }
+    render() {
+        const progressValue = Math.min(100, Math.max(0, this.value));
+        // Outer container classes (conditionally rounded)
+        const outerClasses = [
+            'outer',
+            'w-full',
+            'h-24',
+            'bg-default',
+            'border',
+            'border-softer',
+            'overflow-hidden',
+            this.rounded ? 'rounded-lg' : '',
+            'relative'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        // Fill bar classes (conditionally rounded only when >0)
+        const fillClasses = [
+            'inner',
+            'h-full',
+            'transition-all',
+            'duration-300',
+            'bg-accent',
+            progressValue > 0 && this.rounded ? 'rounded-lg' : '',
+            'z-0'
+        ]
+            .filter(Boolean)
+            .join(' ');
+        return (h("div", { key: '8760afff9f85f05fec52b0a7fb668661e49dc06f', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '06165b69fe7e170f4f61d9f95b5a44342d4ee67a', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '0c48e65c5a6cb0b4dff7a7e3e248052cdc29957d', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'fc6f7396cf741ba18d1b5d065bdd1b7bfff12abe', class: "text-default f-body-02" }, progressValue, "%"))));
+    }
+    static get style() { return EdsProgressBarStyle0; }
+}, [1, "eds-progress-bar", {
+        "value": [1026],
+        "rounded": [4],
+        "updateValue": [64]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-progress-bar"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-progress-bar":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsProgressBar);
+            }
+            break;
+    } });
+}
+
+export { EdsProgressBar as E, defineCustomElement as d };

package/dist/components/eds-rating.d.ts

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

package/dist/components/eds-rating.js

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

package/dist/components/eds-rating2.js

@@ -0,0 +1,91 @@
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$2 } from './eds-button2.js';
+import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
+
+const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--green-500);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
+const EdsRatingStyle0 = edsRatingCss;
+
+const EdsRating = /*@__PURE__*/ proxyCustomElement(class EdsRating extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.rating = createEvent(this, "rating", 7);
+        this.ratingType = 'star';
+        this.ratingCount = 5;
+        this.selectedRating = 0;
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
+        btns.forEach((btn) => {
+            this.emitContext(btn);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param btnElement - The link element to which the event will be dispatched.
+     */
+    emitContext(btnElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: this.selectedRating
+            }
+        });
+        btnElement.dispatchEvent(event);
+    }
+    /**
+     * Handles the click event on a star.
+     * @param rating - The selected rating value.
+     */
+    handleClick(rating) {
+        this.selectedRating = rating;
+        this.rating.emit(rating);
+    }
+    render() {
+        return (h("div", { key: '685ac01e4db577b07d00030b0c25e10b9b0defa8', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+            const starRating = index + 1;
+            const isSelected = starRating <= this.selectedRating;
+            // Use the mapping text if available; otherwise, fall back to a generic label.
+            return (h("eds-button", { icon: this.ratingType, role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": this.ratingType, onClick: () => this.handleClick(starRating), tabIndex: this.selectedRating === 0 && index === 0 ? 0 : isSelected ? 0 : -1, intent: isSelected ? 'primary' : 'ghost', size: "large", "extra-class": "p-2" // Optional padding or styling for the star button
+            }));
+        })));
+    }
+    get el() { return this; }
+    static get style() { return EdsRatingStyle0; }
+}, [1, "eds-rating", {
+        "ratingType": [1, "rating-type"],
+        "ratingCount": [2, "rating-count"],
+        "selectedRating": [32]
+    }]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-rating", "eds-button", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-rating":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsRating);
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$1();
+            }
+            break;
+    } });
+}
+
+export { EdsRating as E, defineCustomElement as d };

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

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

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

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