@ebrains/components 2.2.0 → 2.3.1

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: 'e01032fc0640d466fbf25d52c786c2ad09282deb', class: "w-full" }, index.h("ul", { key: '067499a0d422c6759393a729018a0e428ac5bb73', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '18811cd88f3627f824c09ed57522b624c905704a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '6f810ada1266d71181c85ae01f6d0f03d74c5d62', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'be8c8193dd759eb651230904f482bdd29ece17d9', class: "spacing-sample m-16 bg-strong" }, index.h("span", { key: '3275ae8d2dcc26a097fcec9e47e865d122e8a7a0', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), index.h("li", { key: '1501280856acd0f86ed6d18deb2994e2b938d550', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '9c6bd09fb408bf28e1ff7259ee82858657055d53', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '66ce0e318e1ef01c95634678d8dad929261c3559', class: "spacing-sample ml-64 bg-strong" }, index.h("span", { key: '746c47d3d838c4a2afc3e33f97ea92e4152505a4', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: '1e743a6b9907f8d533b6bb0e47204ca9f2ac1540', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '9b127a0fc072a67d2a03af42718407f7c570981c', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '603d387bfc95e7eaaa688d9bed69d17dcdbeb023', class: "spacing-sample mt-32 bg-strong" }, index.h("span", { key: '19105f04e3571991899dcd237a2e88285200fa2a', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: 'a4bba328ebdb74767c06aed1ddf90251ff53c774', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '8c0ddf065902880ea676a0178d8d384696d11d44', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'c73eb82ac1b447d2441be39f1e07e4864bba2a49', class: "spacing-sample p-32 bg-strong" }, index.h("span", { key: '6c76e373c0827ed4449abfd0fa1b69db2e02ef10', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), index.h("li", { key: '23699817570e914c03849e8bc5ab3c72b732470c', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '253d94e4ddabd622302bbc38a5e866b9a9dc8826', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'c366056f299a7fd53eb589cedbf8f40aa996d032', class: "spacing-sample pt-32 bg-strong" }, index.h("span", { key: '22b94a1f3f4605af8f11dcd10b03f112ad426798', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: '18418c7ea84aaaefe187e484774e96d5233946ab', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '953b9ebfb47560f768bdf606fdc455eae18fa351', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '1ee32fc2918a078e421e0641c84e76c2bf48e839', class: "spacing-sample pl-32 bg-strong" }, index.h("span", { key: '15f50b76c805eb9fc1610d8027cd710f6c8c89b4', class: "f-body-01 text-inverse" }, "Padding Left: 2rem / pl-32")))))));
+        return (index.h("div", { key: 'e6d23c9b0eecdbb9551da827e84b536c237c3fa2', class: "w-full" }, index.h("ul", { key: 'f8c8ea13fd5f36050858e813f3300c12c9ed8a93', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, index.h("li", { key: '9473a1f844d1d6e4cfd2aaf6e8ec8587ebbc8f46', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '86f5d11b9f24a78c2d000a487402ea203663472d', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '2aa3f316b2a8b9f75403bc148f1e0f2c5b008760', class: "spacing-sample m-16 bg-strong" }, index.h("span", { key: '178bcea91ee96b6ba7d7f35d3129ba0365103a51', class: "f-body-01 text-inverse" }, "Margin: 1rem / m-16")))), index.h("li", { key: '3bea85f0dabe95c77f1f7efa20868e05dbe8ac29', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '5500ec5a1b8a408ace5f6b74a09af135953508b9', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '4fe620bb9f4e246aac4093a3bceeb504a91f7347', class: "spacing-sample ml-64 bg-strong" }, index.h("span", { key: '8043e928ce06e7eb4f9a980523b85bc1aeacce23', class: "f-body-01 text-inverse" }, "Margin Left: 4rem / ml-64")))), index.h("li", { key: '3909330218202d18909ece6bb6c24209cdf89737', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'eddaed5ba95dcff41b807123719b86a2e109f199', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '9d4ab0bce204ed45ec8a35079213a3663dff2e70', class: "spacing-sample mt-32 bg-strong" }, index.h("span", { key: '95a3e2eddf9d5b5659ee455de56815e83c873d22', class: "f-body-01 text-inverse" }, "Margin Top: 2rem / mt-32")))), index.h("li", { key: '3dfe973b5081f9c209386a0b090703c5d9ee9286', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'a82ec5b68b327c2d6c73109170babaa42866a7bb', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'bf446dc3468e554be2419cd4f86a9e015f36e027', class: "spacing-sample p-32 bg-strong" }, index.h("span", { key: '5569dc17bfd58e125651fa8bb7ff3c510e5a11c8', class: "f-body-01 text-inverse" }, "Padding: 2rem / p-32")))), index.h("li", { key: '2bd50606ad35620c512c764008e1ebae74b7eb5a', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: '6d3172e3d9db2aca2d44112795e030cbe8764327', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: '7abece54dfbf26fa0f441079192e3de3d1924897', class: "spacing-sample pt-32 bg-strong" }, index.h("span", { key: 'dce98a63280c8b9e8a691074e7727a02c8683290', class: "f-body-01 text-inverse" }, "Padding Top: 2rem / pt-32")))), index.h("li", { key: '2330aed59c3748951cd1b99bec3324554b81f51b', class: "grid-col-span-12 md:grid-col-span-4 flex flex-col items-center mt-16" }, index.h("div", { key: 'f17b856f30a3ddaabc9d7dcc4438cde42f49956d', class: "container p-8 item-center border-2 border-soft" }, index.h("div", { key: 'fb0907d427077e137a878adcb54b1e9b0cdf368e', class: "spacing-sample pl-32 bg-strong" }, index.h("span", { key: 'e5f919cc44e91ce7eb887bc0419f998039c95fa6', 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: 'a50023eb5ce02aebb63994e4319450f3a330617d', class: "w-full" }, index.h("ul", { key: '757a1845f16da440eaa8ba332b39f62ccb69ed89', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (index.h("section", { key: '234d2f000995c4dbd180a2c80d4ead037c8f76ad', class: "w-full" }, index.h("ul", { key: '7a4b29e3ecbb07c04c401fdbb473a4b122440e24', 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

@@ -1,9 +1,9 @@
 {
   "entries": [
     "components/eds-cards/eds-card-generic/eds-card-generic.js",
-    "shared-ui/eds-card-section/eds-card-section.js",
-    "shared-ui/eds-steps/eds-steps.js",
-    "shared-ui/eds-steps-v2/eds-steps-v2.js",
+    "components/eds-cards/eds-card-section/eds-card-section.js",
+    "components/eds-steps/eds-steps.js",
+    "components/eds-steps-v2/eds-steps-v2.js",
     "components/eds-table/eds-table.js",
     "components/eds-accordion/eds-accordion.js",
     "components/eds-alert/eds-alert.js",
@@ -20,6 +20,12 @@
     "components/eds-charts/eds-pie/eds-pie.js",
     "components/eds-code-block/eds-code-block.js",
     "components/eds-dropdown/eds-dropdown.js",
+    "components/eds-feedback/eds-feedback.js",
+    "components/eds-footer/eds-footer.js",
+    "components/eds-form/eds-form.js",
+    "components/eds-frame/eds-frame.js",
+    "components/eds-fullscreen-menu/eds-fullscreen-menu.js",
+    "components/eds-header/eds-header.js",
     "components/eds-icon-wrapper/eds-icon-wrapper.js",
     "components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.js",
     "components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.js",
@@ -81,13 +87,18 @@
     "components/eds-rating/eds-rating.js",
     "components/eds-section/eds-section-core/eds-section-core.js",
     "components/eds-section/eds-section-heading/eds-section-heading.js",
+    "components/eds-social-networks/eds-social-networks.js",
     "components/eds-spinner/eds-spinner.js",
+    "components/eds-splash-screen/eds-splash-screen.js",
     "components/eds-switch/eds-switch.js",
+    "components/eds-tabs/eds-tabs.js",
     "components/eds-tag/eds-tag.js",
     "components/eds-timeline/eds-timeline.js",
     "components/eds-toast/eds-toast.js",
+    "components/eds-toast-manager/eds-toast-manager.js",
     "components/eds-tooltip/eds-tooltip.js",
     "components/eds-trl/eds-trl.js",
+    "components/eds-user/eds-user.js",
     "eds-docs-ui/colors/color-palette/primary.js",
     "eds-docs-ui/colors/color-palette/secondary.js",
     "eds-docs-ui/colors/color-palette/support.js",
@@ -112,18 +123,8 @@
     "eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.js",
     "eds-docs-ui/svg-repository/svg-repository.js",
     "shared-ui/eds-cookies-preference/eds-cookies-preference.js",
-    "shared-ui/eds-feedback/eds-feedback.js",
-    "shared-ui/eds-footer/eds-footer.js",
-    "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-header/eds-header.js",
+    "shared-ui/eds-global-search/eds-global-search.js",
     "shared-ui/eds-matomo-notice/eds-matomo-notice.js",
-    "shared-ui/eds-social-networks/eds-social-networks.js",
-    "shared-ui/eds-splash-screen/eds-splash-screen.js",
-    "shared-ui/eds-tabs/eds-tabs.js",
-    "shared-ui/eds-toast-manager/eds-toast-manager.js",
-    "shared-ui/eds-user/eds-user.js",
     "shared-ui/examples/eds-app-root/eds-app-root.js"
   ],
   "compiler": {

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/{shared-ui → components/eds-cards}/eds-card-section/eds-card-section.js

@@ -1,5 +1,5 @@
 import { h } from "@stencil/core";
-import { parseData } from "../../utils/sharedUtils";
+import { parseData } from "../../../utils/sharedUtils";
 /**
  * `EdsCardSection` is a component that renders a section of cards in a customizable grid layout of 4 columns (grid-cols-4).
  * Each card within the section can display various properties such as title, description, avatar, and additional content.
@@ -32,7 +32,7 @@ export class EdsCardSection {
      * @returns {JSX.Element} The rendered section containing a list of cards.
      */
     render() {
-        return (h("section", { key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8', class: "w-full" }, h("ul", { key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
+        return (h("section", { key: '4b30b9eb2585350196efa901f5b36d903e43af4d', class: "w-full" }, h("ul", { key: 'ab51c67c0f4095e70be1b1c2fdf9975726b50760', class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16" }, this.parsedCards.map((card) => (h("li", { class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col` }, h("eds-card-generic", { cardTitle: card.title, description: card.description, avatar: card.avatar, headingLevel: card.headingLevel, tags: card.tags, url: card.url, bg: card.bg, tiny: card.tiny, image: card.image, withHover: card.withHover })))))));
     }
     static get is() { return "eds-card-section"; }
     static get encapsulation() { return "shadow"; }
@@ -57,8 +57,8 @@ export class EdsCardSection {
                     "references": {
                         "Card": {
                             "location": "local",
-                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/shared-ui/eds-card-section/eds-card-section.tsx",
-                            "id": "../../../packages/components/src/shared-ui/eds-card-section/eds-card-section.tsx::Card"
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-cards/eds-card-section/eds-card-section.tsx",
+                            "id": "../../../packages/components/src/components/eds-cards/eds-card-section/eds-card-section.tsx::Card"
                         }
                     }
                 },

package/dist/collection/{shared-ui → components/eds-cards}/eds-card-section/eds-card-section.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared UI/Card Section',
+    title: 'Components/Cards/Card Section',
     component: 'eds-card-section',
     argTypes: {
         cards: {

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/{shared-ui → components}/eds-feedback/eds-feedback.js

@@ -52,7 +52,7 @@ export class EdsFeedback {
         const HeadingTag = this.headingLevel;
         const levelNum = this.headingLevel.replace('h', '');
         const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
-        return (h("div", { key: '58d69e0acbaca740439666bb9da015eaa81d160a', class: "grid inline" }, h(HeadingTag, { key: 'f7b066a56636e6555ace1b4947e00c293961b4ca', class: headingClass }, this.label), h("p", { key: '9bfb1903e25ba6c1d53849874f3309845c1b86dc', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '785ea01ac3d2f40bb148d52c9c18698c89424175', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '16d5b1ab0ab56a5e320a878f8259dc643b533e16', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: 'ddf3974682322578e0fe0b0405ac4ebf2e0f25c1', class: "grid inline" }, h(HeadingTag, { key: '64ef135208df2903c342a8feaafa49d27eb22250', class: headingClass }, this.label), h("p", { key: '95d46d464035e393d80ae259f4232bebf47453ce', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'd390733041689a17937f31dbf07050571997ced2', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '61cedb8ba0a5269ac0112dc9a6d91b92e1f0b200', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/{shared-ui → components}/eds-feedback/eds-feedback.stories.js

@@ -1,5 +1,5 @@
 export default {
-    title: 'Shared Ui/Feedback',
+    title: 'Components/Feedback',
     component: 'eds-feedback',
     argTypes: {
         headingLevel: {