@ebrains/components 0.9.3-beta → 1.1.0

package/dist/collection/components/eds-charts/eds-pie/eds-pie.css

@@ -0,0 +1,135 @@
+.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;
+}
+
+
+/* src/components/eds-pie/eds-pie.css */
+
+: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);
+}

package/dist/collection/components/eds-charts/eds-pie/eds-pie.js

@@ -0,0 +1,229 @@
+// src/components/eds-pie/eds-pie.tsx
+import { h, Host } from "@stencil/core";
+export class EdsPie {
+    constructor() {
+        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 is() { return "eds-pie"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["eds-pie.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["eds-pie.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "size": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Diameter in pixels"
+                },
+                "attribute": "size",
+                "reflect": false,
+                "defaultValue": "200"
+            },
+            "slices": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "PieSlice[] | string",
+                    "resolved": "PieSlice[] | string",
+                    "references": {
+                        "PieSlice": {
+                            "location": "global",
+                            "id": "global::PieSlice"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array or JSON string of slices"
+                },
+                "attribute": "slices",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "thickness": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Inner-radius fraction (always 0.5-1)"
+                },
+                "attribute": "thickness",
+                "reflect": false,
+                "defaultValue": "1"
+            },
+            "display": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "DisplayMode",
+                    "resolved": "\"percent\" | \"value\"",
+                    "references": {
+                        "DisplayMode": {
+                            "location": "global",
+                            "id": "global::DisplayMode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show raw value or percentage"
+                },
+                "attribute": "display",
+                "reflect": false,
+                "defaultValue": "'value'"
+            },
+            "legend": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Show legend"
+                },
+                "attribute": "legend",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "colorScheme": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'semantic' | 'mono'",
+                    "resolved": "\"mono\" | \"semantic\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Color scheme: semantic, brand, or mono"
+                },
+                "attribute": "color-scheme",
+                "reflect": false,
+                "defaultValue": "'semantic'"
+            }
+        };
+    }
+}
+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)'
+    ]
+};

package/dist/collection/components/eds-charts/eds-pie/eds-pie.stories.js

@@ -0,0 +1,76 @@
+export default {
+    title: 'Charts/Pie',
+    component: 'eds-pie',
+    argTypes: {
+        size: {
+            control: 'number',
+            description: 'Diameter of the pie chart (in pixels)'
+        },
+        slices: {
+            control: 'object',
+            description: 'Array of slice objects or JSON string representation'
+        },
+        thickness: {
+            control: { type: 'range', min: 0.5, max: 1, step: 0.01 },
+            description: 'Inner mask thickness as fraction of radius (0.5–1)'
+        },
+        display: {
+            control: 'select',
+            options: ['value', 'percent'],
+            description: 'Show raw values or percentages in slice labels'
+        },
+        legend: {
+            control: 'boolean',
+            description: 'Toggle the legend display'
+        },
+        colorScheme: {
+            control: 'select',
+            options: ['semantic', 'mono'],
+            description: 'Color scheme: semantic or mono'
+        }
+    },
+    args: {
+        size: 300,
+        slices: [
+            { id: 'a', value: 10, label: 'Series A' },
+            { id: 'b', value: 20, label: 'Series B' },
+            { id: 'c', value: 30, label: 'Series C' }
+        ],
+        thickness: 1,
+        display: 'value',
+        legend: true,
+        colorScheme: 'semantic'
+    }
+};
+export const Default = {
+    render: (args) => `
+    <div class="flex items-center justify-center">
+      <eds-pie
+        size="${args.size}"
+        thickness="${args.thickness}"
+        display="${args.display}"
+        legend="${args.legend}"
+        color-scheme="${args.colorScheme}"
+        slices='${JSON.stringify(args.slices)}'
+      ></eds-pie>
+    </div>
+  `
+};
+export const Thickness = {
+    render: (args) => `
+    <div class="flex items-center justify-center">
+      <eds-pie
+        size="${args.size}"
+        thickness="${args.thickness}"
+        display="${args.display}"
+        legend="${args.legend}"
+        color-scheme="${args.colorScheme}"
+        slices='${JSON.stringify(args.slices)}'
+      ></eds-pie>
+    </div>
+  `,
+    args: {
+        size: 200,
+        thickness: 0.5
+    }
+};

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

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

package/dist/collection/components/eds-dropdown/eds-dropdown.js

@@ -113,14 +113,14 @@ export class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'c7044a1dabb4f65fe143ac3202dd0d1af4e706c2', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'fa5812e59ea886a0adcba75576f07e94e7b0f713', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: 'c0daa734601dbfcd290d5db8cc25fcd4b82dfdad', role: "menu", class: {
+        return (h("div", { key: 'eb48745937126e580737c1da6787c3f16c06ba9e', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '3af6863201b1c25ad66e9f8c52d9e13505d742a3', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: 'c225074b3fbee543966523f8cd1c146485bc04bd', role: "menu", class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
                 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
                 'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '6ca4e774160924fa248db790f33b81e374653569' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '6a7ba94045d366d20c6618845692d977f20437e3' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.js

@@ -8,7 +8,7 @@ export class EdsIconChevronDown {
         this.class = '';
     }
     render() {
-        return h("span", { key: '6c98bd673a1562fda009e95e4e4562d1e7f0ccfd', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: 'fa8022d27b91e909d4cd5522c6d0406be698a412', class: this.class, innerHTML: chevronDown });
     }
     static get is() { return "eds-icon-chevron-down"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.js

@@ -8,7 +8,7 @@ export class EdsIconChevronLeft {
         this.class = '';
     }
     render() {
-        return h("span", { key: '8a2d0acc90ce3515e059818d704d7ce427cdd56e', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronLeft });
     }
     static get is() { return "eds-icon-chevron-left"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-right/eds-icon-chevron-right.js

@@ -8,7 +8,7 @@ export class EdsIconChevronRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: '8632a351612a4be6e47d4ff483717a2bda99a008', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: 'f770cd9151077e8708c76d2082613c65a20c420f', class: this.class, innerHTML: chevronRight });
     }
     static get is() { return "eds-icon-chevron-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.js

@@ -8,7 +8,7 @@ export class EdsIconChevronUp {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'cc552d780188b225d16fd18ec33a22b0fbbd9660', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: '40d18a840277f2aba5d314a36fca5c1f8fd99cc6', class: this.class, innerHTML: chevronUp });
     }
     static get is() { return "eds-icon-chevron-up"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.js

@@ -8,7 +8,7 @@ export class EdsIconArrowDiagonal {
         this.class = '';
     }
     render() {
-        return h("span", { key: '1c7405c12d1741c3dcfe117a04ea4ef5af200590', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: 'd178d36fd0888a40da0873bfd8abe862770e06e9', class: this.class, innerHTML: arrowDiagonal });
     }
     static get is() { return "eds-icon-arrow-diagonal"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js

@@ -8,7 +8,7 @@ export class EdsIconArrowRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: '557b38fd6253b4a29c4cf2ec2b9f79355ceca358', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '4a2b33b86753acab8270a45c7b250603b128bc88', class: this.class, innerHTML: arrowRight });
     }
     static get is() { return "eds-icon-arrow-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js

@@ -8,7 +8,7 @@ export class EdsIconBookmark {
         this.class = '';
     }
     render() {
-        return h("span", { key: '5978393f7c5bdc6a1a23b85ded49503dacab3ff2', class: this.class, innerHTML: bookmark });
+        return h("span", { key: '61dd6e752db1c28d082d80aba71267f4e971492d', class: this.class, innerHTML: bookmark });
     }
     static get is() { return "eds-icon-bookmark"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-close/eds-icon-close.js

@@ -8,7 +8,7 @@ export class EdsIconClose {
         this.class = '';
     }
     render() {
-        return h("span", { key: '907eaa5d70add8ad62e9f071aacce359682969fe', class: this.class, innerHTML: close });
+        return h("span", { key: '8e4dedef0fe684fdd6078db8005661e49207da55', class: this.class, innerHTML: close });
     }
     static get is() { return "eds-icon-close"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-copy/eds-icon-copy.js

@@ -8,7 +8,7 @@ export class EdsIconCopy {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e31c2cd317654999670526469111fff23f66a6b4', class: this.class, innerHTML: copy });
+        return h("span", { key: 'ff014a9761d8380a9fd8c97d3dd483b8d6fc786c', class: this.class, innerHTML: copy });
     }
     static get is() { return "eds-icon-copy"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-eu/eds-icon-eu.js

@@ -8,7 +8,7 @@ export class EdsIconEu {
         this.class = '';
     }
     render() {
-        return h("span", { key: '94c3dbf77824b2e51627b8e2a2de9b7cfb1f24e0', class: this.class, innerHTML: euSvg });
+        return h("span", { key: '3888f0338df2496c334d95dbcb52a0e39906362d', class: this.class, innerHTML: euSvg });
     }
     static get is() { return "eds-icon-eu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-external/eds-icon-external.js

@@ -8,7 +8,7 @@ export class EdsIconExternal {
         this.class = '';
     }
     render() {
-        return h("span", { key: '099d0118c7a4bfa2d8b5c21f45162080b31a2f7c', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: '58d51f84a7b6326ef117a905f2c50d4fff6369c5', class: this.class, innerHTML: arrowDiagonal });
     }
     static get is() { return "eds-icon-external"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js

@@ -8,7 +8,7 @@ export class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return h("span", { key: '280eb778fd7028ef60305eee614213f8a39a35f2', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: 'a2f423ed9227463e27c0c698e6b4bba44cdc6263', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-loader/eds-icon-loader.js

@@ -8,7 +8,7 @@ export class EdsIconLoader {
         this.class = '';
     }
     render() {
-        return h("span", { key: '808ce738f7812024a52b4875ae3d9070bc75c02d', class: this.class, innerHTML: loader });
+        return h("span", { key: '283c8842f0f755074521fdcbae46969d87b86312', class: this.class, innerHTML: loader });
     }
     static get is() { return "eds-icon-loader"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-menu/eds-icon-menu.js

@@ -8,7 +8,7 @@ export class EdsIconMenu {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f9dcfa2e4c9cc938f3fd994ca3637c80f0495028', class: this.class, innerHTML: menu });
+        return h("span", { key: 'dc06f1a54b9542cb2c0165fb3bdff960ecd81cc0', class: this.class, innerHTML: menu });
     }
     static get is() { return "eds-icon-menu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-minus/eds-icon-minus.js

@@ -8,7 +8,7 @@ export class EdsIconMinus {
         this.class = '';
     }
     render() {
-        return h("span", { key: '76fe78207051b486030fc1ef778d55ecfec2c3d2', class: this.class, innerHTML: minus });
+        return h("span", { key: 'e76f56aaba4a67096e6314e61d53bc2512941552', class: this.class, innerHTML: minus });
     }
     static get is() { return "eds-icon-minus"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-more/eds-icon-more.js

@@ -8,7 +8,7 @@ export class EdsIconMore {
         this.class = '';
     }
     render() {
-        return h("span", { key: '546f5d7c76d57c07c34b6455cb1df4fea6c57302', class: this.class, innerHTML: more });
+        return h("span", { key: 'cb31d12146ff577195650b502f51005092404a30', class: this.class, innerHTML: more });
     }
     static get is() { return "eds-icon-more"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-paper/eds-icon-paper.js

@@ -8,7 +8,7 @@ export class EdsIconPaper {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'e9baa8e9d467104fdeac600678b800787ef7d736', class: this.class, innerHTML: paper });
+        return h("span", { key: 'abc728a23571f7cc24f6d9d1dc5c72c397983aa3', class: this.class, innerHTML: paper });
     }
     static get is() { return "eds-icon-paper"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-plus/eds-icon-plus.js

@@ -8,7 +8,7 @@ export class EdsIconPlus {
         this.class = '';
     }
     render() {
-        return h("span", { key: '7510fb2b948a83c216a375f2a84a16b10b38054e', class: this.class, innerHTML: plus });
+        return h("span", { key: '35d8e069fbb1bdb01ae6f068c28edd19d299c7c3', class: this.class, innerHTML: plus });
     }
     static get is() { return "eds-icon-plus"; }
     static get properties() {