@ebrains/react 0.9.3-beta → 1.1.0

package/eds-gauge.entry.esm.js

@@ -0,0 +1,78 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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) {
+    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 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
+    }, h("div", {
+      key: 'a24d393bfcdbd45019f7a560c4af0330c720af0c',
+      class: "absolute bg-inverse rounded-full",
+      style: maskStyle
+    }), h("div", {
+      key: '712fc9211b6e90afdf7063a4e6a6af74ec88dfdd',
+      class: "absolute inset-0 flex items-center justify-center"
+    }, h("span", {
+      key: '88d3ffc3fea9ff77247b4ecbb4af3a6ac39c1cb4',
+      class: "f-body-01 text-default",
+      style: textStyle
+    }, clamped)));
+  }
+};
+EdsGauge.style = EdsGaugeStyle0;
+
+export { EdsGauge as eds_gauge };

package/eds-icon-arrow-diagonal.entry.esm.js

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

package/eds-icon-arrow-right.entry.esm.js

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

package/eds-icon-bluesky.entry.esm.js

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

package/eds-icon-bookmark.entry.esm.js

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

package/eds-icon-chevron-down.entry.esm.js

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

package/eds-icon-chevron-left.entry.esm.js

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

package/eds-icon-chevron-right.entry.esm.js

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

package/eds-icon-chevron-up.entry.esm.js

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

package/eds-icon-close.entry.esm.js

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

package/eds-icon-copy.entry.esm.js

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

package/eds-icon-eu.entry.esm.js

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

package/eds-icon-external.entry.esm.js

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

package/eds-icon-facebook.entry.esm.js

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

package/eds-icon-gitlab.entry.esm.js

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

package/eds-icon-linkedin.entry.esm.js

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

package/eds-icon-loader.entry.esm.js

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

package/eds-icon-mastodon.entry.esm.js

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

package/eds-icon-menu.entry.esm.js

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

package/eds-icon-minus.entry.esm.js

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

package/eds-icon-more.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconMore = class {
   }
   render() {
     return h("span", {
-      key: '546f5d7c76d57c07c34b6455cb1df4fea6c57302',
+      key: 'cb31d12146ff577195650b502f51005092404a30',
       class: this.class,
       innerHTML: more
     });

package/eds-icon-paper.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconPaper = class {
   }
   render() {
     return h("span", {
-      key: 'e9baa8e9d467104fdeac600678b800787ef7d736',
+      key: 'abc728a23571f7cc24f6d9d1dc5c72c397983aa3',
       class: this.class,
       innerHTML: paper
     });

package/eds-icon-plus.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconPlus = class {
   }
   render() {
     return h("span", {
-      key: '7510fb2b948a83c216a375f2a84a16b10b38054e',
+      key: '35d8e069fbb1bdb01ae6f068c28edd19d299c7c3',
       class: this.class,
       innerHTML: plus
     });

package/eds-icon-portal.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconPortal = class {
   }
   render() {
     return h("span", {
-      key: 'c9f384bf790dd2eef9b84e757403106209f05c04',
+      key: '9383784da3e52d22395288f8eba5b6f4ee826aa5',
       class: this.class,
       innerHTML: portal
     });

package/eds-icon-private.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconPrivate = class {
   }
   render() {
     return h("span", {
-      key: 'd03d51d5aee837edab83aa71cf82fd415a8c71c3',
+      key: '9466d1ce37e58f512579d63ec5049cc58e8b9836',
       class: this.class,
       innerHTML: privat
     });

package/eds-icon-public.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconPublic = class {
   }
   render() {
     return h("span", {
-      key: '94970e6d7f414cde04a3dae305f3dda43f477e55',
+      key: 'e4815b72c160ae98d66dbfa877f82f1d2f7c50b3',
       class: this.class,
       innerHTML: pub
     });

package/eds-icon-search.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconSearch = class {
   }
   render() {
     return h("span", {
-      key: '2c35a35b31a988ffa690816a8699d2aac43dd916',
+      key: '6a35ea0c0de4916a867f760eb058a3cbb1bc218e',
       class: this.class,
       innerHTML: search
     });

package/eds-icon-star.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconStar = class {
   }
   render() {
     return h("span", {
-      key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0',
+      key: 'f7ebc68658fcf8c0df627871481cce90cd7800fb',
       class: this.class,
       innerHTML: star
     });

package/eds-icon-success.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconSuccess = class {
   }
   render() {
     return h("span", {
-      key: '8b5d4cfeedf6d7e9bea48d7ba892527d484c858d',
+      key: 'd78b06493302958306d408d823f4a7703d9b9adc',
       class: this.class,
       innerHTML: success
     });

package/eds-icon-thumbs-down.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconThumbsDown = class {
   }
   render() {
     return h("span", {
-      key: 'c60c3e5180cd900ce290448563fc476264ba1fe5',
+      key: '84e6d8cff80004a650c6d0fc6b9702cf1ca85ba2',
       class: this.class,
       innerHTML: thumbsDown
     });

package/eds-icon-thumbs-up.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconThumbsUp = class {
   }
   render() {
     return h("span", {
-      key: 'eee2fdd0cdf1e9735e90f34c6bb090f3df67eb49',
+      key: '5f5198ad92684dc173d603499b485e7d0ca8811b',
       class: this.class,
       innerHTML: thumbsUp
     });

package/eds-icon-tutorial.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconTutorial = class {
   }
   render() {
     return h("span", {
-      key: '0e47e2af80487a28c96e8830dda102c23bff9e5c',
+      key: '8be08569144889cca6f801cdd31e4cc31fdc11e5',
       class: this.class,
       innerHTML: tutorial
     });

package/eds-icon-twitter.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconTwitter = class {
   }
   render() {
     return h("span", {
-      key: '1a7ad8d7cbef70822ebda2f152d8b537df1eaf27',
+      key: 'c2ee643b5da517a53bd97ec6263161927ad229a7',
       class: this.class,
       innerHTML: twitter
     });

package/eds-icon-unknown.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconUnknown = class {
   }
   render() {
     return h("span", {
-      key: 'a9145c4e133746c314a1ee34d36a5f19f3686565',
+      key: '449cd62f697607ebb17bed06835ee9529d7e8999',
       class: this.class,
       innerHTML: unknown
     });

package/eds-icon-updown.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconUpdown = class {
   }
   render() {
     return h("span", {
-      key: 'b97da1b406718c7611d1e17d7a9c6b4670600740',
+      key: '5b0e914205c9f3fb5e216e0ccb16e350a4449c02',
       class: this.class,
       innerHTML: upDonw
     });

package/eds-icon-user.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconUser = class {
   }
   render() {
     return h("span", {
-      key: '4322703c9e449819dc30946118893d365fa20124',
+      key: '297e73664320032b2f78dd3c43aa0852545c0723',
       class: this.class,
       innerHTML: user
     });

package/eds-icon-youtube.entry.esm.js

@@ -11,7 +11,7 @@ const EdsIconYoutube = class {
   }
   render() {
     return h("span", {
-      key: '2236f8f5ede15d7eef54f2fd4fe6ca81c996166f',
+      key: '0a6abd6b62e24c07b4338f0f1f6febbec876791f',
       class: this.class,
       innerHTML: youtube
     });

package/eds-matomo-notice.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, c as createEvent, h, g as getElement } from './index.esm2.js';
-import { m as matomoOptIn, a as matomoOptOut } from './analytics-44b1416b.esm.js';
+import { m as matomoOptIn, a as matomoOptOut } from './analytics-d99780e3.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -92,14 +92,16 @@ const EdsMatomoNotice = class {
     this.consent.emit('out');
   }
   noThanks() {
+    matomoOptOut();
     localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
     this.hideNotice();
+    this.consent.emit('out');
   }
-  deferDecision() {
+  /*private deferDecision() {
     sessionStorage.setItem(this.getStorageKey(), 'true');
     this.hideNotice();
     this.consent.emit('defer');
-  }
+  }*/
   keepMeIn() {
     this.hideNotice();
   }
@@ -146,11 +148,6 @@ const EdsMatomoNotice = class {
       label: "No, thanks",
       "aria-label": "Opt-out from analytics",
       onClick: () => this.noThanks()
-    }), h("eds-button", {
-      intent: "ghost",
-      label: "Ask me later",
-      "aria-label": "Defer analytics decision",
-      onClick: () => this.deferDecision()
     }))));
   }
   get el() {

package/eds-pie.entry.esm.js

@@ -0,0 +1,131 @@
+import { r as registerInstance, h, H as Host } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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 = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    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))))));
+  }
+};
+EdsPie.MAX_SLICES = 9;
+EdsPie.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)']
+};
+EdsPie.style = EdsPieStyle0;
+
+export { EdsPie as eds_pie };