@ebrains/components 2.0.0 → 2.1.0

package/dist/cjs/token-ratios.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88c8039f.js');
+const index = require('./index-0249a32e.js');
 
 const ratios = {
   '1x1': '1/1',
@@ -18,7 +18,7 @@ const TokenRatios = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: 'be577f9c398a29f5bd996a68d102017488f8ac17', class: "w-full" }, index.h("eds-section-core", { key: '291b8f1692e0ba050c0871af65429db95733990c', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, index.h("ul", { key: '2ac59025091444b8e14b5106d8909c54fa8227aa', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
+        return (index.h("section", { key: '255775984f1d0edd52f48814776dfb5739b4885e', class: "w-full" }, index.h("eds-section-core", { key: '7fd28e74db00800fcaa4adb13dd6b0b9cace371d', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, index.h("ul", { key: '1e4c0af9a699e69c5bc6c86df821c457bb20614a', class: "gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(ratios).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: "container ratio-box flex items-center justify-center text-center border-2 border-soft", style: {
                 aspectRatio: value.replace('/', ':'), // Cast to string to resolve TypeScript error
                 width: '100%', // Full width to show the aspect ratio correctly
                 maxWidth: '300px'

package/dist/cjs/token-spacing.cjs.entry.js

@@ -2,14 +2,14 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88c8039f.js');
+const index = require('./index-0249a32e.js');
 
 const TokenSpacing = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("div", { key: 'ccc58496f0918a9da7f1d4412391613f3f568cc9', class: "w-full" }, index.h("ul", { key: 'e5a8d47319a9c994e7755d3576d71b634ab20063', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '3d0a29e2c91d351ab116ce416e00c42590d035b3', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'd2d85017b45172a0b0b092de400d9151ef539ef8', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '88de94aaba4d635cc525a67542b5d472cd896c5d', class: "spacing-sample m-16 bg-strong" }, index.h("span", { key: 'b59a5fa9df2d4083fa06c9a258ec5ba5ccf60c0a', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), index.h("li", { key: '70767120c9cd4be53f96f375fd329703a963b63a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '855d6bacf1b1423485fbf4a6d57eaae41a7a1444', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '7857867bba76856db7530bacd73f142a2b503c51', class: "spacing-sample ml-64 bg-strong" }, index.h("span", { key: '14b4241fc260b9d6b690dbd141098dc61a5eded9', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: 'fa5b994aab19f80b3fa26393844b0bed46ecfa64', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '3c600983badcd59dcf5735e9a4c42c87a306236b', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '77abcf6391bc3fe5f798a7837e12e9f3581213d0', class: "spacing-sample mt-32 bg-strong" }, index.h("span", { key: 'd4626346b81f99c4690853d00c097d523616db1f', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: '2ce80fc1b53afa0e157f4b185ae70f16779b9f3f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '95f69eac2055d60ae42808fa09f4f6a68bdff4f6', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'e553f7c58b018cba77b7141be6142d3c7b34194a', class: "spacing-sample p-32 bg-strong" }, index.h("span", { key: '13450e5d8c07cbeb640e0b3aea1e526365f0f743', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), index.h("li", { key: 'dce557ae08a4800fd5d98c91b5675d4839da622f', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '9a134b12e3829b5529921ee24ba095231ea9a70f', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '2f30c7339974f96fa881b43f8b7ec9a018c2f372', class: "spacing-sample pt-32 bg-strong" }, index.h("span", { key: '663a2b9a903effbd5eb1988d6803934c41a26b93', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: '363143700c339ab934b466ef9f84f257be3adbbc', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'e72006b92c553dfb7c3df21cbbea3a7234cbf725', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '251e68c910ee1d0485d630fde091e6790183f4f9', class: "spacing-sample pl-32 bg-strong" }, index.h("span", { key: 'cf2f10404629bf2e7ab10d51b2917361cf93279b', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (index.h("div", { key: '9967174337c771b175eb51d9cd77ec227071178e', class: "w-full" }, index.h("ul", { key: 'db8df572ea997ea83600cb522c761ec5c99788bc', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '25a7b31970e56ce8ff62c81a69daac121984d9d6', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '1a1dfa005e39237c2fedb210c0082293770387c6', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '473024ed6927d1a140eee0e021af92790c3ec5b0', class: "spacing-sample m-16 bg-strong" }, index.h("span", { key: '7b691bf830943134160396ddcd8f71e419eb29e2', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), index.h("li", { key: '38f1d4d7e78b1efdbc55cf732b6be2ac3a62b5b7', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '3a0fc8cdfa13bf0998a4829c36a74b17a6ee2314', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'ec730379e1041a68c9d980bb6b5d4b16560debb0', class: "spacing-sample ml-64 bg-strong" }, index.h("span", { key: 'fd6f3ab787f1d43fb0b060e8408a1464eacd9875', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: '60a45420ca9cd7f4dab1524c8d6be31b39295b0c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'ec433621396341959df05dd4becf2844c4266ea5', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'e2ae2d3a3f0eb5226fae09d70eff099ed79ca0e6', class: "spacing-sample mt-32 bg-strong" }, index.h("span", { key: '1da10931bb4dae62a1a1c020c89463634a3c1630', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: 'f2f6ff5c992df7d4d426a3488cb7aa7ad9b7bc85', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '23700500e04f2ec99fb5329092b7e430f7ac4274', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'bc304e082326c02787a62681fa86d20382fbb2d7', class: "spacing-sample p-32 bg-strong" }, index.h("span", { key: '32692a307c58603ac232bb1004b88e0b5bff0c3d', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), index.h("li", { key: '6fc5032427724389d29d200347e3f5de984d6ec5', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'f66687c53866291f4f455153e34813d53bbb6d68', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'c4305cf37d1f08f50be085664d9a4da0c4859805', class: "spacing-sample pt-32 bg-strong" }, index.h("span", { key: '4bd0c2056950a34d119c11ffd04e1dce1b8136c5', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: '67053133a6c121e02b7cab1da4cf4bc025dcc28d', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'dc7c1198e284eb0d71d183017e99fca72c3fb2a7', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '3e69f16b8673007197f18b736e07a9e2c86e7eeb', class: "spacing-sample pl-32 bg-strong" }, index.h("span", { key: '5a112de1bf2ce66ea278da76b8890aff02cce8af', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
     }
 };
 

package/dist/cjs/token-typography.cjs.entry.js

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-88c8039f.js');
+const index = require('./index-0249a32e.js');
 
 const headings = {
   'heading-01': {
@@ -207,7 +207,7 @@ const TokenTypography = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '62bc664d442830ac40bc6aae9a5dbd38f5d18f05', class: "w-full" }, index.h("ul", { key: 'e8a97077420f77631e75ec99e14b22fd77a36c11', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (index.h("section", { key: 'b638ddc335ade66f9eb0af8752f56945270fc5ee', class: "w-full" }, index.h("ul", { key: '40f638bc0eccdcc79aecaf5da8fc9c1332122d49', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
             .filter(([typeKey]) => typeKey !== 'displays') // Exclude "displays"
             .flatMap(([typeKey, typeValues]) => Object.entries(typeValues).map(([size, style]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { class: "w-full p-4 block lg:flex items-center border border-soft rounded" }, index.h("div", { class: "mr-auto hidden lg:block", style: {
                 fontFamily: typography.families.sans,

package/dist/cjs/view-80d5c6c8.js

@@ -0,0 +1,5 @@
+'use strict';
+
+const view = `<svg width="20" height="20" viewBox="-102.4 -102.4 1228.80 1228.80" xmlns="http://www.w3.org/2000/svg" fill="#000000" stroke="#000000" stroke-width="0.01024" transform="matrix(1, 0, 0, 1, 0, 0)rotate(0)"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"><path fill="#000000" d="M512 160c320 0 512 352 512 352S832 864 512 864 0 512 0 512s192-352 512-352zm0 64c-225.28 0-384.128 208.064-436.8 288 52.608 79.872 211.456 288 436.8 288 225.28 0 384.128-208.064 436.8-288-52.608-79.872-211.456-288-436.8-288zm0 64a224 224 0 1 1 0 448 224 224 0 0 1 0-448zm0 64a160.192 160.192 0 0 0-160 160c0 88.192 71.744 160 160 160s160-71.808 160-160-71.744-160-160-160z"></path></g></svg>`;
+
+exports.view = view;

package/dist/collection/collection-manifest.json

@@ -29,6 +29,7 @@
     "components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js",
     "components/eds-icons/eds-icon-bin/eds-icon-bin.js",
     "components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js",
+    "components/eds-icons/eds-icon-clone/eds-icon-clone.js",
     "components/eds-icons/eds-icon-close/eds-icon-close.js",
     "components/eds-icons/eds-icon-copy/eds-icon-copy.js",
     "components/eds-icons/eds-icon-draft/eds-icon-draft.js",
@@ -55,6 +56,7 @@
     "components/eds-icons/eds-icon-unknown/eds-icon-unknown.js",
     "components/eds-icons/eds-icon-updown/eds-icon-updown.js",
     "components/eds-icons/eds-icon-user/eds-icon-user.js",
+    "components/eds-icons/eds-icon-view/eds-icon-view.js",
     "components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js",
     "components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js",
     "components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.js",
@@ -72,6 +74,7 @@
     "components/eds-link/eds-link.js",
     "components/eds-logo/eds-logo.js",
     "components/eds-modal/eds-modal.js",
+    "components/eds-nps/eds-nps.js",
     "components/eds-pagination/eds-pagination.js",
     "components/eds-progress-bar/eds-progress-bar.js",
     "components/eds-rating/eds-rating.js",

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

@@ -87,7 +87,7 @@ export class EdsAccordion {
         return (h("div", { key: '1abfd8bfea763bc10e6f17148dbc252d0c3ffdea', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
           ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
           ${this.switchBg ? 'hover:bg-inverse' : ''}
-          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: '137a3311195d51f46c6677558219828e5f4d06b5', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '0fc6d493fd61726a53a8c4311bd183eb3ad5b270', class: "ml-auto" }, h("eds-button", { key: '61e5e7727de895a9dc9d4a9d909cabea3b82e709', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '659ad4db8fd78dea0604afce003124a7c19987dc', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '0b463bb9d634b9dd1aa6c512e072bf8004e54db5', id: "accordionSection", role: "region", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '7f2eb016e377e3f2c08fd042e903291ad67bd20b', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '25be3a617a42699e2adeb1c9fc711e5a55ce69ea', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: 'de7e5481940295571543c43f4b65f97dc7cec62c' })))))));
+          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: '137a3311195d51f46c6677558219828e5f4d06b5', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '0fc6d493fd61726a53a8c4311bd183eb3ad5b270', class: "ml-auto" }, h("eds-button", { key: 'cb8182e05c5c11950c0e624ce6b11e27a4d506ab', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '084bfb116dcccadf7253ca8ac8de6a1e1d4aa41f', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: 'c332a210fa4ce90f1974098ff790a7600dfb1721', id: "accordionSection", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '842bc3bc7a968ef5a428a97327f38253e8a32888', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '7c8fa8040da18cc2c128b42cdf9e75bfffe4c439', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '852837c0c8c9d8a36f6263f7a943f50d82563a3c' })))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -75,6 +75,11 @@ export class EdsAlert {
         this.withBtn = Boolean(this.pressableLabel);
     }
     componentDidLoad() {
+        // Focus the alert container for immediate screen reader announcement
+        /*if (this.intent === 'error' || this.intent === 'warning') {
+          this.el.shadowRoot?.querySelector('[role="alert"]')?.setAttribute('tabindex', '-1');
+          (this.el.shadowRoot?.querySelector('[role="alert"]') as HTMLElement)?.focus();
+        }*/
         var _a;
         // Query for the 'eds-link' element inside the shadow root.
         const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
@@ -91,14 +96,18 @@ export class EdsAlert {
         });
         linkElement.dispatchEvent(event);
     }
+    handleAction() {
+        // Emit the alertAction event for parent components to handle
+        this.edsalert.emit();
+    }
     render() {
-        return (h("div", { key: '5252aca583e87d8c3249c501e55368e340ef0d64', class: alertStyles({
+        const ariaLabel = this.intent !== 'default' ? `${this.intent} alert` : 'alert';
+        return (h("div", { key: '2d22944e7ae86cf2523c194e20215a3d986083d9', class: alertStyles({
                 intent: this.intent,
                 brd: this.brd,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), role: "alert" }, h("p", { key: 'bb23c94e802ec5e287a2b8619277e83de173b498', class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn &&
-            (this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : null)));
+            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, h("p", { key: 'b6c22446b0d87fb01a3cb882fe205ef48ea60b05', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: '8414820eb7b65c83459cfb90adef3ea696e42444', id: "alert-action" }, this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (h("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
     }
     static get is() { return "eds-alert"; }
     static get encapsulation() { return "shadow"; }
@@ -226,5 +235,23 @@ export class EdsAlert {
             "withBtn": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "edsalert",
+                "name": "edsalert",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the alert action button is clicked (for non-URL actions)."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "el"; }
 }

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

@@ -64,7 +64,7 @@ export class EdsAvatar {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: 'b7eff7ae1a1dea3509041e39316b49b673dbdf17', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (h("div", { key: '34e86e50b1176efd8ae0cd9b30cd3823527d7eee', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
     static get is() { return "eds-avatar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -7,7 +7,7 @@ export class EdsBlockBreak {
         this.inverse = false;
     }
     render() {
-        return h("hr", { key: 'b604a776cae7edeee189e00af6993b42b57203f0', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '688e11c730af1193f28db196cd144c6dd2efc3c6', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
     static get is() { return "eds-block-break"; }
     static get encapsulation() { return "shadow"; }

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

@@ -123,7 +123,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: 'db769320b42e627fffd71676c1e0551646f1de70', "aria-label": "Breadcrumb" }, h("ol", { key: '6cef8ed43cabcee73cb4ad4fb26f809d0690c0ec', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '0625a234ec9f5095abbeaafa11e56bceb0432764', "aria-label": "Breadcrumb" }, h("ol", { key: '3898a4b048eca6c606a6948b26ec25a608cb908e', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);

package/dist/collection/components/eds-button/eds-button.css

@@ -364,6 +364,10 @@ button,
   display: block;
 }
 
+.\!block {
+  display: block !important;
+}
+
 .inline-block {
   display: inline-block;
 }

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 import { sendAnalytics } from "../../utils/analytics";
 import { cva } from "class-variance-authority";
 /**
@@ -30,7 +30,7 @@ export class EdsButton {
                     secondary: 'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',
                     tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
                     ghost: 'border-inside hover:bg-darker',
-                    ghostInverse: 'border-inside hover:bg-dark'
+                    ghostInverse: 'border-inside text-lightest hover:bg-dark'
                 },
                 loading: {
                     true: 'pointer-events-none',
@@ -140,8 +140,7 @@ export class EdsButton {
     }
     handleClick(event) {
         var _a, _b;
-        if (this.disabled) {
-            // Prevent navigation if the link is disabled
+        if (this.disabled || this.loading) {
             event.preventDefault();
             return;
         }
@@ -157,6 +156,16 @@ export class EdsButton {
             this.triggerClick(); // Trigger the passed-in function
         }
     }
+    handleKeyDown(event) {
+        if (this.disabled || this.loading) {
+            // Fix: check loading too
+            return;
+        }
+        if (event.key === 'Enter' || (this.elementType === 'a' && event.key === ' ')) {
+            event.preventDefault();
+            this.handleClick(event);
+        }
+    }
     render() {
         const classes = this.button({
             intent: this.intent,
@@ -168,16 +177,18 @@ export class EdsButton {
             iconSmall: this.iconSmall
         });
         const ElementType = this.elementType;
-        return (h(ElementType, { key: 'ecdd901c70578c07ef094aadbcd287588d4ba705', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: 'af8d0ca1c5c3e54f9db3066931a69d3a5a812666', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '29b72c15e80f46e023f829568f58d8a8dca82b78', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'bad8bd059b1312ca3f5ab173b1203eb395e9bbd8', class: "loader", style: {
+        const isInteractive = !this.disabled && !this.loading;
+        return (h(Host, { key: '835cc81d3563abf1b5cb4c21165de1ef726d1e43' }, h(ElementType, { key: 'df05b2b2152e707e5fdd6028c5f557097d7e2b04', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '27c7473403e7c1bfd3dfc270151d44dbb639ceb3', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: 'f52496884816bc299fb76c1afae5e4798bf642d2', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'd42bf2c229f6956a1e0dbe64aa6c79ad5608ca5c', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
             } }))), this.icon ? (h("eds-icon-wrapper", { class: `
-              flex inline-flex items-center justify-center
-              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
-            `, icon: this.icon })) : null));
+                flex inline-flex items-center justify-center
+                ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
+              `, icon: this.icon, "aria-hidden": "true" })) : null)));
     }
     static get is() { return "eds-button"; }
     static get encapsulation() { return "shadow"; }
+    static get delegatesFocus() { return true; }
     static get originalStyleUrls() {
         return {
             "$": ["eds-button.css"]

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js

@@ -20,7 +20,7 @@ export class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: '2421ea469339e3d56fc5c0ebbec213eeb1a2a9cf', class: "text-light f-ui-03-light" }, h("span", { key: 'd024adda16a85bf2913803c06eb05af3b4af6bb9', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: '302734334d08002f94c269977ebda7762fd19843', class: "text-light f-ui-03-light" }, h("span", { key: '925f6cea41068b62d22902f33d80d700d0975f39', class: this.getTruncateClass() }, this.description)));
     }
     static get is() { return "eds-card-desc"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js

@@ -8,7 +8,7 @@ export class EdsCardTags {
         this.tags = [];
     }
     render() {
-        return (h("div", { key: '5da9fcbc472476a7b438451e563586643a818bc0', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+        return (h("div", { key: '2acec4bb37d05bb40910cdd198e2ffac9f16610d', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
     }
     static get is() { return "eds-card-tags"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js

@@ -43,7 +43,7 @@ export class EdsCardTitle {
     render() {
         //const Tag = this.getTag();
         const Heading = this.headingLevel;
-        return (h(Heading, { key: '494d8b7ea90ccb93cf0395374951e90c89a59d3a', class: this.getTitleClass() }, 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)));
+        return (h(Heading, { key: 'f3a72db6143e59ef04e589397126dcbf5b4d2d47', class: this.getTitleClass() }, h("a", { key: '4fe1c9af922959b26824f01a0e5b52137c3854f2', 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)));
     }
     static get is() { return "eds-card-title"; }
     static get encapsulation() { return "shadow"; }

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

@@ -55,7 +55,7 @@ export class EdsCardProject {
             this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'
         ].join(' ');
         const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
-        return (h("article", { key: '021f5e4d88bb987811ea169880cd327e996e36e9', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '5f1a3d00b03e6cc19023ee437a7bd2bf6b52d77a', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '6e42bcbdbe5ba666eae942a7c4e354627f019c6a', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '12884d77432d8cc6021f9432538f1beacf3190f3', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '4f604d61c3a1a2405bfaf6407a893015c68f6f35', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '8d767d7ac9c069412b64869a03eae8ccf4b513ad', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: '2a488d291c1f3e10b8ed36aa61e04ecf5299b320', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '9d4fa14e0e56d8db8c1747b477cd77e4b7281f8c', class: imageClasses }, h("div", { key: '627f549786c9a1674349b851704690fdb597391e', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: 'a4eeb6a0d7f725d8c706e98c57f492e94c9c7b4b', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: 'b4587158532ddc495a1cda29941b69934b93c7d3', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '96ab6c6b9f5e89db0ca29c678c0ff3d7643976de', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '6b1e39c1b3445c2eff43f03efc0d14307e044428', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'a5a2c5916c35dec35d261da0bf10a3905ce0452e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '65f034e9ae8f7abbc37fb8fc3b03a440467c33f5', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '690f9157169e6344af51407fca8c25f7cf35ac74', class: "mt-auto flex items-center gap-x-12 pt-12" }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", { key: '651b1f0424b45348c854b7ec98e4dae1e4952bbd', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: 'b761288da975f05bb558b0e60767292c20e767e8', class: imageClasses }, h("div", { key: 'bf027b4359774454d9f866f4bb17872a1c0ba724', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '19b4c37dcbe7c463afd3ece46d5c348c681771c8', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     static get is() { return "eds-card-project"; }
     static get properties() {

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

@@ -64,7 +64,7 @@ export class EdsCardTool {
         });
     }
     render() {
-        return (h("article", { key: '465a4593a4d28c5bfcef7325be7674b6301bc275', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, 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 && (h("eds-card-desc", { key: '4872956b7d97e222abd8e429c73a7e97fe1f7a06', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '10c20ab24e836c06ba2da070cbcf21cf11537e17', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+        return (h("article", { key: '2ae8e814b1509d167912424bb5093dba780f70e7', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '1d0e4312589a917bc96b2c2dd3455ad0edc54b25', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '70b074fa7755e20627c50383e1a04a684dd1bab6', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'eb5b236057ef9044701d9662cdc2fa359d5c8053', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
     }
     static get is() { return "eds-card-tool"; }
     static get encapsulation() { return "shadow"; }

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

@@ -43,7 +43,7 @@ export class EdsGauge {
         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))));
+        return (h("div", { key: '798a7345ee5c3eeb59b5fe29a39827ce347dc756', 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: 'f255f7036a5b11de88fbb32648388905932eb56e', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '2a6dd1d88b32cb2c534f253703a8caa0099f2a43', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'ccbf1852d2f43b925f565c7117aca4a878e7f636', class: "f-body-01 text-default", style: textStyle }, clamped))));
     }
     static get is() { return "eds-gauge"; }
     static get encapsulation() { return "shadow"; }

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: '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() })))));
+        return (h("div", { key: '3cfaec27c58d05868313150f1a358ff64c8eafbd', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'ed91821385f30305348750dbfffec5fdd7b4dbb8', 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: '3e419585214883c878a8e84c440dbd29d590002d', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '051fa9c714d5c077d5d96ec9b92f8a744ec123bc', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '707950ce89cb0c24b1afac42a8801d13659b6bab', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '59923dd4c16cfecafffa2edaaac5ef7579c3f128', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '8c708992c04029d71685ad8922383ecdda05ac3c', 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: '14f31163cc0fb25c3d531632ae36e01d8759567d', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '748413032b87b13290743f5bb9822cb84c1d0cf9', 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: '1a8f28c02b0782569228f75e030483439374baed', role: "menu", class: {
+        return (h("div", { key: '31e8b1fd4e146cbcad4d74bd78dff1cd1e1950bd', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '7021a0b0ff66780a324d7d9d1f6cff250ab64178', 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: '904fd2a7f727a8b3966eab6cf9ebdb0efa474ae0', 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: '31189866f6e1779a5fd5e1b8f3c33d8a0074410b' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'b416621930c7117775fef2ee91bdca0f660302f5' }))));
     }
     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: 'fa8022d27b91e909d4cd5522c6d0406be698a412', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: '5547e9d98f781dc03e88a014f726b3a402e6425d', 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: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: '49925425ac1fd676eb96b973b1419f1f2aec1c81', 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: 'f770cd9151077e8708c76d2082613c65a20c420f', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: 'e9abd378d28d9e2251e530f97a11973ea558fbe2', 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: '40d18a840277f2aba5d314a36fca5c1f8fd99cc6', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: 'f81db967bf78d75a4a8e572cda6427046603f0a6', 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: 'd178d36fd0888a40da0873bfd8abe862770e06e9', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: 'ef60986a4391dffcbb2a66109f217f3cec95a5fc', 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: '4a2b33b86753acab8270a45c7b250603b128bc88', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '02288b13fa941076a5cc73fd3821bd78e206b2b3', class: this.class, innerHTML: arrowRight });
     }
     static get is() { return "eds-icon-arrow-right"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsIconBin {
         this.class = '';
     }
     render() {
-        return h("span", { key: '03c42ca4aa5cb15952f58adb016924fdb5f006ef', class: this.class, innerHTML: bin });
+        return h("span", { key: '5f314df297274d153638c96027c23632f47f6a3a', class: this.class, innerHTML: bin });
     }
     static get is() { return "eds-icon-bin"; }
     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: '789b6624c429ae6bffdec4b264a94a2a97cd1962', class: this.class, innerHTML: bookmark });
+        return h("span", { key: 'b7c85131bafc5d7d3fcf8fde09cf646b4dd3fdab', class: this.class, innerHTML: bookmark });
     }
     static get is() { return "eds-icon-bookmark"; }
     static get properties() {

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

@@ -0,0 +1,36 @@
+import { clone } from "../../../../../../../../packages/svgs/src/index";
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsIconClone {
+    constructor() {
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: 'ebbda9e150151cc6e6d2677307287f2d2f1ab4db', class: this.class, innerHTML: clone });
+    }
+    static get is() { return "eds-icon-clone"; }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional CSS classes to be applied to the icon for styling."
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}

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: '3343580d13358aa90c00dae55b6821c461ba5183', class: this.class, innerHTML: close });
+        return h("span", { key: '91f33941205260a787d69146e390fa970a1c0d72', 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: '9d15be28017eb074a69846a2a639861de997130b', class: this.class, innerHTML: copy });
+        return h("span", { key: 'dd9df55fa03c1b27f2f931c7d07ccc69ee940ff4', class: this.class, innerHTML: copy });
     }
     static get is() { return "eds-icon-copy"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsIconDraft {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'ebbda9e150151cc6e6d2677307287f2d2f1ab4db', class: this.class, innerHTML: draft });
+        return h("span", { key: '13898eb065f5a243104bc79293a5e6afcd276230', class: this.class, innerHTML: draft });
     }
     static get is() { return "eds-icon-draft"; }
     static get properties() {

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

@@ -8,7 +8,7 @@ export class EdsIconEdit {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'c1ff641313e9c0d7160464d7497a2d27de5cbef4', class: this.class, innerHTML: edit });
+        return h("span", { key: '1758d925314772dc29c4349f71f186ba775d2b41', class: this.class, innerHTML: edit });
     }
     static get is() { return "eds-icon-edit"; }
     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: 'f285a58f6160d72d82781e80c710ac262af20b89', class: this.class, innerHTML: euSvg });
+        return h("span", { key: 'ac8c58eacb11b11be7928d7799a3eb6c8063597f', 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: 'd1cee641d0c95e84d9dc805b46aa8d83874b87ee', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: 'e24ee8e9243fa2dcbe8df4fa9d84db5bbc136ec4', 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: '5366b40ab629556c1c68128a216aec5a0bdf6974', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: 'e6ce69e460242b20779766f62a3c7d23dad345d1', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     static get properties() {