@ebrains/components 2.1.0 → 2.3.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0249a32e.js');
+const index = require('./index-50bc1aa4.js');
 
 const colors = {
   tokens: {
@@ -244,7 +244,7 @@ const TokenList = class {
     render() {
         // Check if `show` prop is provided; if not, display all sections
         const sectionsToDisplay = this.show ? { [this.show]: colors[this.show] } : colors;
-        return (index.h("section", { key: 'b8b778fe87179f77bb71705d89026c500b0293fb', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
+        return (index.h("section", { key: 'db196307702df28bf9e2f7fb0b87298bf84baabb', class: "w-full mt-28" }, Object.entries(sectionsToDisplay).map(([sectionName, sectionContent]) => 
         // Only render sections that exist in `colors`
         sectionContent ? this.renderSection(sectionName, sectionContent) : null)));
     }
@@ -264,7 +264,7 @@ const TokenRadii = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '584f5f90e1e3813692870fbd8fd382956729dbf1', class: "w-full mt-28" }, index.h("ul", { key: '81786b7835d62739d6ec034609e77209e15e3b38', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).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: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, index.h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), index.h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
+        return (index.h("section", { key: 'bdd584d53625299e4faa9a28f6f259bc5587b125', class: "w-full mt-28" }, index.h("ul", { key: '3076e4efcca5749cc07e69df70ce2658d6186ec6', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(radii).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: `w-full p-16 block lg:flex items-center justify-center text-center border-3 border-soft rounded-${key}` }, index.h("eds-code-block", { language: "Utility Class", code: `rounded-${key}`, class: "mx-auto min-w-[200px] sm:mb-4 sm:max-w-[200px] mr-auto" }), index.h("eds-code-block", { code: `border-radius:${value}`, language: "css", class: "mx-auto min-w-[200px] sm:max-w-[200px] ml-auto" }))))))));
     }
 };
 
@@ -291,7 +291,7 @@ const TokenShadows = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: '8ca055cb3616c9bc3f6e8c1032671ff53a540156', class: "w-full mt-28" }, index.h("ul", { key: '7b72868285aaffe0f31628b5ab142e39aaccd964', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, index.h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, index.h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), index.h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
+        return (index.h("section", { key: 'a2fbc57c2153391bc53b47a263488118ca3aa01a', class: "w-full mt-28" }, index.h("ul", { key: 'e4e2d6cbc8d1510ede2b678b24ce8b34b838888f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(shadowTokens).map(([category, tokens]) => Object.entries(tokens).map(([key, value]) => (index.h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col items-center mt-16" }, index.h("div", { class: "w-full p-16 block lg:flex items-center justify-center text-center border-2 border-soft", style: { boxShadow: value } }, index.h("eds-code-block", { code: `${category}-${key}`, language: "Utility Class", class: "mr-auto sm:mb-4 min-w-[200px]" }), index.h("eds-code-block", { code: `${value}`, language: "css", class: "ml-auto min-w-[200px]" })))))))));
     }
 };
 

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-0249a32e.js');
+const index = require('./index-50bc1aa4.js');
 
 const ratios = {
   '1x1': '1/1',
@@ -18,7 +18,7 @@ const TokenRatios = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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: {
+        return (index.h("section", { key: '83fc87fd64531611114fe47d977dc54b6af1d327', class: "w-full" }, index.h("eds-section-core", { key: 'b0b72d4f387cd48f4905c68b9f05ac3058d359c1', tag: "div", "section-title": "Aspect Ratios", "heading-level": "h3" }, index.h("ul", { key: 'af5677bb15a4ffb008fd90bdfdfb1b757a36e138', 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-0249a32e.js');
+const index = require('./index-50bc1aa4.js');
 
 const TokenSpacing = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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")))))));
+        return (index.h("div", { key: '46cb6fe655e9f8b8688f44e2351f3992e8011b2a', class: "w-full" }, index.h("ul", { key: '9d7205ee2e0b3b0386284dc282fcc5375c43ec26', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: 'b3e9d62bb934c1b413712b182cfdf015484db525', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '78c8a23dcacfd216a6159da8af3809607ef29702', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '92a2938c5bdcb38456d96077f78993c711bc789f', class: "spacing-sample m-16 bg-strong" }, index.h("span", { key: '7738363bee7cc25863bec922f55224044af61b6e', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), index.h("li", { key: '96c1f622b7e4136cebd53862b79bbc17ad484a25', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'ff4357650e10f9e7a61903c3c9f6a4f4d60d8c73', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'cd07be06a51604f81f2868786028066f834cd87d', class: "spacing-sample ml-64 bg-strong" }, index.h("span", { key: 'ded579013d8765c7802862b57cf2bf7ae03f1b99', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: 'a8e244c95f027993755fa567d900ff88ed08669b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'e3662c064d089089ebb796aadede38bbd7ebe69d', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'f168cbeaec417b0eccd66ed60f2776bdffdb7bfb', class: "spacing-sample mt-32 bg-strong" }, index.h("span", { key: '696ec848f217896ae3fc06bf07546fe735d6ccd8', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: '5e5d4a63fd7e28114a87dfa5789f5213b6c057f3', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '14cb262cc18f340e72a922dc793244c17fa9fb05', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '791781717dc851f2e174277c557212e7e5c15b7a', class: "spacing-sample p-32 bg-strong" }, index.h("span", { key: 'd1df2d8f2520746e49ec9c85d8e17cf5569c4bc5', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), index.h("li", { key: '312e2c71672a05cc54cd492297a1cdcb2b11a395', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '8cd16bfafd2345b68e50a46c08c7a8f2430ee6ef', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '8f7e910d8fc43b596b35f3e72a48646e9550e8ba', class: "spacing-sample pt-32 bg-strong" }, index.h("span", { key: '509c712085a239a435fc11f8ea7a6c9c788be60c', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: 'b99c86cd7dd23e7c091dd2c70ec42133d9d2e2ef', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '0e61fb5d7bf779eddc16c9627d6ca0ff6cf702e1', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'e65eb20ca88e563ae43eb0c208feacf7e310870f', class: "spacing-sample pl-32 bg-strong" }, index.h("span", { key: '2a40e6977caccb37173f60de613c1a72b02f6d3e', 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-0249a32e.js');
+const index = require('./index-50bc1aa4.js');
 
 const headings = {
   'heading-01': {
@@ -207,7 +207,7 @@ const TokenTypography = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        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)
+        return (index.h("section", { key: 'ff15f73114d16107a766fe6fe8342315cf2fa542', class: "w-full" }, index.h("ul", { key: '22e8e89e792fee03f1957e5705fca1938771b9ac', 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/collection/collection-manifest.json

@@ -32,6 +32,7 @@
     "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-download/eds-icon-download.js",
     "components/eds-icons/eds-icon-draft/eds-icon-draft.js",
     "components/eds-icons/eds-icon-edit/eds-icon-edit.js",
     "components/eds-icons/eds-icon-eu/eds-icon-eu.js",
@@ -116,6 +117,7 @@
     "shared-ui/eds-form/eds-form.js",
     "shared-ui/eds-frame/eds-frame.js",
     "shared-ui/eds-fullscreen-menu/eds-fullscreen-menu.js",
+    "shared-ui/eds-global-search/eds-global-search.js",
     "shared-ui/eds-header/eds-header.js",
     "shared-ui/eds-matomo-notice/eds-matomo-notice.js",
     "shared-ui/eds-social-networks/eds-social-networks.js",

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

@@ -84,10 +84,10 @@ export class EdsAccordion {
      * Adjusts styles based on `switchBg`, `tiny`, `clampText`, and other props.
      */
     render() {
-        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 
+        return (h("div", { key: 'd162692cb9a99b6a1b9b736b828214c9d425046e', 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: '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' })))))));
+          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: '3770e241daa7e4696c5481c97965fb2ebe0b17f9', 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: '56b7b70d16cf3f944bf3cec878bd15c3e18b399b', class: "ml-auto" }, h("eds-button", { key: '4b770831f155f7e77a424b9dd3ec0a8708a0859f', 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: 'c75c4d840bc8be25ee7590d90e3290faf090fdf0', 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: 'b78b8f7fa93a85c886136cac8119d7b94de2a129', 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: '75ba9a9a7082b4ded3dacd6cbaa9ceb3688c5045', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: 'e08cefc1d6fe7f3d162de86a17646d88a8686d83', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '77d3a7fb997a9f313e3013a17f87c28f7ff8adad' })))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }

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

@@ -102,12 +102,12 @@ export class EdsAlert {
     }
     render() {
         const ariaLabel = this.intent !== 'default' ? `${this.intent} alert` : 'alert';
-        return (h("div", { key: '2d22944e7ae86cf2523c194e20215a3d986083d9', class: alertStyles({
+        return (h("div", { key: '33781ae5fb8504158e8fe780a76d89566a39e914', class: alertStyles({
                 intent: this.intent,
                 brd: this.brd,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), 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() }))))));
+            }), 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: 'fb3a1d216279b4076b09ef9544d37c5229b4d706', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: 'a5edd833ae3924f41edb17068090eeeb4e9f9cfd', 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"; }

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: '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))));
+        return (h("div", { key: 'd29c110e340567236716e77c4f003bec5c70ee63', 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: '688e11c730af1193f28db196cd144c6dd2efc3c6', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '0e2ec4b9c8b70ff9b65e6c4f2af42f198b1eb7d0', 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: '0625a234ec9f5095abbeaafa11e56bceb0432764', "aria-label": "Breadcrumb" }, h("ol", { key: '3898a4b048eca6c606a6948b26ec25a608cb908e', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '27ddf744a07f1b697e549cdc6d2a66f65ebe6386', "aria-label": "Breadcrumb" }, h("ol", { key: '43ac089290c0a6f9b3c5cd629def8540966637b8', 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.js

@@ -178,7 +178,7 @@ export class EdsButton {
         });
         const ElementType = this.elementType;
         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: {
+        return (h(Host, { key: 'fe91be3eb9c2a3ece800097392462b3bd76f1264' }, h(ElementType, { key: 'aa1d4e0544beff8759d232d0e897ffdbcd584ea5', 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: '2b55edc1b986950ba03a759cffd7346c8611ac0a', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: '5b035b8ef848cde63af9a2cc4a3ed72c68e1e03d', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: '2746ef996f0835c76c4ef2cbd39103ad4d07c21f', 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: `

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: '302734334d08002f94c269977ebda7762fd19843', class: "text-light f-ui-03-light" }, h("span", { key: '925f6cea41068b62d22902f33d80d700d0975f39', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: '1e2ae9b46a477adb8a249a0a06c963d3e44ff297', class: "text-light f-ui-03-light" }, h("span", { key: '072222b2b2249a772c1e26f566d7ac863dd6a1dd', 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: '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 })))));
+        return (h("div", { key: 'dc4a5cdabd7ab34e3c2c67b9a166ae8bc15a9861', 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: '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)));
+        return (h(Heading, { key: '1fd3f080c09f94d7b7175d51b9d8e38bb0b76286', class: this.getTitleClass() }, h("a", { key: 'dd06cbecbc9eaef8052f34eae28ae17c5f92c918', 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-generic/eds-card-generic.css

@@ -81,6 +81,10 @@
   display: flex;
 }
 
+.flex-wrap {
+  flex-wrap: wrap;
+}
+
 .inline-flex {
   display: inline-flex;
 }
@@ -130,6 +134,10 @@
   order: -9999;
 }
 
+.mb-8 {
+  margin-bottom: 0.5rem;
+}
+
 .mb-10 {
   margin-bottom: 0.625rem;
 }

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

@@ -85,7 +85,7 @@ export class EdsCardGeneric {
         });
     }
     render() {
-        return (h("article", { key: '0d0a2bfb5ab1f08cdada2180977ff7bd77594030', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '4c262de23e15ee9112b8562d22fb5a35cf59938f', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '867cbc0ee0b24aa3acbfed5d7efbffc11ea85ccd', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '66fe518e05e4fcaf99ea815b0c2f3d525a2a9989', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label })))), ' '));
+        return (h("article", { key: '76e77261a0c6e0c506fe7600d31a492808293d27', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: 'ca26508b05a31310df7fc0c3fa5769f7947e80fc', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, hierarchy: this.hierarchy }), h("div", { key: '00ba325e6a0093cb2be35854f2bcb579ad4eb35b', class: "mt-8 mb-8" }, this.description && (h("eds-card-desc", { key: '7f8b687ac2c2f334549b5d9d438aab5c62a6fcc0', "truncate-lines": "3", description: this.description }))), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8 block mx-auto" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '63cc046648dbf7d56909b2478d6c15b14e8d9ae4', class: "flex flex-wrap gap-y-4 gap-x-1" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label, size: tag.size })))), ' '));
     }
     static get is() { return "eds-card-generic"; }
     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: '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)))))));
+        return (h("article", { key: '65af57bfbe558b895f74dd4d088c243a25c7265d', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: 'cf0e9f71cd617a44facf7e35cdf78774e41b3eb1', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '82870bbaf7203ac92f25ca241186ba7a32b784d5', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '0f0356d2e4a7af3a5d50c66382ff5d3f70298e8c', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '3586446f9ad1bb190c93cd54d7e53d6e835b8e37', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '750c707f04d12ddd1d38aa0377b47f8804070535', 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: '01fbeebd88ee60feede3b21db177b3691ffc2808', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: 'c61baca9d015c9bfb7ec6ce3ec4ea2e41d8ac513', class: imageClasses }, h("div", { key: '04d4828b6648470543ddde09d935aaa7c6133d7e', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: 'cde6eb483641c02abb6c229470f07aa5b08fbf9b', 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: '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 }))))));
+        return (h("article", { key: '00f417ee065537f8b30bc73e5ad9ca0d69b3aed3', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '9d8156f655c9344c872631b75cfcaf52fdf23347', "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: 'da7aa3d0d9f7995a824fd7720342e6dd4d94224f', 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: '3e3001ec404a0bbca84deafc89de6aab8bf2fe45', 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: '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))));
+        return (h("div", { key: '8834b0fc3cb78c0e7926392d04229d67d8deab90', 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: 'f9ad68bd6bf19bceb46df1cfe16cdbbc2375099c', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '64a2ba3ba2f104fa018f81949cdabc0fc53eea42', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'ae66f977802793f4e10210e75ddfa53839a9ff6e', 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: '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() })))));
+        return (h("div", { key: '2c5addd195dc8d930db643e95ecc52410dd94052', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'aea2d891f9e5d57d4b8390cff4597cb8edd163a1', 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: '41e2d463bde145f901eae42dda68091a9a42e3ef', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '7285b81dd936c770b09b4a36bed8c8ba2a87da99', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a12d74735064478480544cc4b5cf14d7b028b1a8', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '2fcde4f271059ac98cb3b1b6bffbf4564ccf795b', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '68a8b83f492e7b0eb2916a063e28a4293e6a988f', innerHTML: this.getHighlightedCode() })))));
     }
     static get is() { return "eds-code-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -3,13 +3,23 @@ import { h } from "@stencil/core";
 /**
  * `EdsDropdown` is a versatile dropdown component that provides a list of items
  * that appear upon clicking the dropdown button. It supports various customization options,
- * such as positioning, styling, and keyboard accessibility.
+ * such as positioning, styling, keyboard accessibility, and automatic closing behavior.
  *
- * Key features include:
- * - Configurable dropdown position (left or right) and offset.
- * - Customizable intent styles (e.g., primary, secondary).
- * - Keyboard navigation with support for up and down arrow keys.
- * - Option to use as a navigation menu or standard dropdown.
+ * ## Key Features:
+ * - Configurable dropdown position (left or right) and offset
+ * - Customizable intent styles (e.g., primary, secondary)
+ * - Keyboard navigation with support for up and down arrow keys
+ * - Automatic closing on clicks inside the dropdown panel
+ * - Flexible opt-in/opt-out mechanisms for closing behavior
+ * - Option to use as a navigation menu or standard dropdown
+ *
+ * ## Auto-Close Behavior:
+ * By default (`autoClose: true`), the dropdown closes when any element inside the panel is clicked.
+ * This includes links, buttons, custom elements, or any other clickable content.
+ *
+ * ## Data Attributes:
+ * - `data-dropdown-close`: Force close dropdown when clicked (works regardless of autoClose setting)
+ * - `data-dropdown-no-close`: Prevent dropdown from closing when this element or its children are clicked
  *
  * This component is well-suited for use in menus, navigational elements, and other interactive UI patterns.
  */
@@ -20,10 +30,12 @@ export class EdsDropdown {
          * Toggles the visibility of the dropdown and manages focus.
          */
         this.handleClick = () => {
-            var _a;
+            var _a, _b;
             this.isOpen = !this.isOpen;
             if (this.isOpen) {
-                this.focusIndex = 0;
+                // refresh focusables each open in case slot changed
+                this.focusableItems = Array.from(((_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, [role="menuitem"]')) || []);
+                this.focusIndex = this.focusableItems.length ? 0 : -1;
                 this.focusItem();
             }
             else {
@@ -34,7 +46,7 @@ export class EdsDropdown {
                 category: 'ui-component',
                 parentContext: null,
                 tag: this.host.tagName.toLowerCase(),
-                name: ((_a = this.label) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+                name: ((_b = this.label) === null || _b === void 0 ? void 0 : _b.toLowerCase()) || '',
                 action: this.isOpen ? 'expanded' : 'collapsed'
             });
         };
@@ -46,9 +58,14 @@ export class EdsDropdown {
         this.dropdownPos = 'left';
         this.dropdownOffset = true;
         this.intent = 'tertiary';
+        this.autoClose = true;
+        this.noCloseSelector = '[data-dropdown-no-close]';
         this.isOpen = false;
         this.focusIndex = -1;
     }
+    async close() {
+        this.closeDropdown();
+    }
     /**
      * Closes the dropdown when a click occurs outside of it.
      * @param {Event} e - The click event.
@@ -108,19 +125,55 @@ export class EdsDropdown {
         var _a;
         this.focusableItems = Array.from(((_a = this.dropdownContent) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button')) || []);
     }
+    handleHostInternalClick(ev) {
+        var _a;
+        if (!this.isOpen || !this.panelEl) {
+            return;
+        }
+        const path = (((_a = ev.composedPath) === null || _a === void 0 ? void 0 : _a.call(ev)) || []);
+        const clickedInsidePanel = path.includes(this.panelEl);
+        if (!clickedInsidePanel) {
+            return;
+        }
+        // Check if element has explicit close attribute
+        const hasCloseAttribute = path.some((t) => {
+            var _a;
+            const n = t;
+            return (_a = n === null || n === void 0 ? void 0 : n.closest) === null || _a === void 0 ? void 0 : _a.call(n, '[data-dropdown-close]');
+        });
+        // If element has data-dropdown-close, always close regardless of autoClose setting
+        if (hasCloseAttribute) {
+            setTimeout(() => this.closeDropdown(), 0);
+            return;
+        }
+        // If autoClose is disabled and no explicit close attribute, don't close
+        if (!this.autoClose) {
+            return;
+        }
+        // Auto-close mode: close unless clicked element opts out
+        const shouldNotClose = path.some((t) => {
+            var _a;
+            const n = t;
+            return (_a = n === null || n === void 0 ? void 0 : n.closest) === null || _a === void 0 ? void 0 : _a.call(n, this.noCloseSelector);
+        });
+        if (!shouldNotClose) {
+            // Defer to allow the item's own click (e.g., router navigation) to run first
+            setTimeout(() => this.closeDropdown(), 0);
+        }
+    }
     /**
      * Renders the dropdown component and displays its content when open.
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        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: {
+        return (h("div", { key: 'e31acbda3428f47fe32cfe550cf00c53374da215', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ce3e11ecee4f603c3ba0e003fccf3fe81289f4c8', 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: '59f8533409171401ed73eac8d307e4eafbde9209', ref: (el) => (this.panelEl = el), 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: 'b416621930c7117775fef2ee91bdca0f660302f5' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '675839893bf667a7a05a63e552935bb1a5874b73' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -322,6 +375,42 @@ export class EdsDropdown {
                 "attribute": "intent",
                 "reflect": false,
                 "defaultValue": "'tertiary'"
+            },
+            "autoClose": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Auto-close dropdown prop - when true, any click inside the panel closes the dropdown"
+                },
+                "attribute": "auto-close",
+                "reflect": false,
+                "defaultValue": "true"
+            },
+            "noCloseSelector": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Opt-out attribute - elements with this attribute won't trigger auto-close"
+                },
+                "attribute": "no-close-selector",
+                "reflect": false,
+                "defaultValue": "'[data-dropdown-no-close]'"
             }
         };
     }
@@ -349,6 +438,27 @@ export class EdsDropdown {
                 }
             }];
     }
+    static get methods() {
+        return {
+            "close": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{
@@ -363,6 +473,12 @@ export class EdsDropdown {
                 "target": "window",
                 "capture": false,
                 "passive": false
+            }, {
+                "name": "click",
+                "method": "handleHostInternalClick",
+                "target": undefined,
+                "capture": false,
+                "passive": false
             }];
     }
 }

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: '5547e9d98f781dc03e88a014f726b3a402e6425d', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: '49925425ac1fd676eb96b973b1419f1f2aec1c81', 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: '49925425ac1fd676eb96b973b1419f1f2aec1c81', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: '38d849e3d7e2b2f5e7df8a5624bcf988b3046b11', 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: 'e9abd378d28d9e2251e530f97a11973ea558fbe2', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: '5368c37dc49fa654d75f42a774a9a3ad93db5261', 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: 'f81db967bf78d75a4a8e572cda6427046603f0a6', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: '6479f32960c973174c4577beef2f7df7b0baebd4', 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: 'ef60986a4391dffcbb2a66109f217f3cec95a5fc', class: this.class, innerHTML: arrowDiagonal });
+        return h("span", { key: 'f638b55d0ab199bbd7a52d099aa1242410ae1892', class: this.class, innerHTML: arrowDiagonal });
     }
     static get is() { return "eds-icon-arrow-diagonal"; }
     static get properties() {