@ebrains/components 3.0.0 → 3.1.0

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

@@ -1,3 +1,7 @@
+import { ICONS } from "../../utils/icons";
+// Derived from the single source of truth so the list never drifts.
+// '' = no icon (the render treats it as falsy).
+const ICON_OPTIONS = ['', ...Object.keys(ICONS).sort()];
 export default {
     title: 'Components/Alert',
     component: 'eds-alert',
@@ -17,8 +21,9 @@ export default {
             description: 'Layout direction'
         },
         icon: {
-            control: 'text',
-            description: 'Optional icon name (e.g. information, warning, error, checkmark-filled, rocket). No icon shown by default.'
+            control: { type: 'select' },
+            options: ICON_OPTIONS,
+            description: 'Optional icon name (from the EDS icon set). No icon shown by default.'
         },
         dismissible: {
             control: 'boolean',
@@ -37,9 +42,12 @@ export default {
         message: 'This is an alert message.',
         intent: 'default',
         direction: 'horizontal',
+        icon: 'information',
         dismissible: false
     }
 };
+// Single control-driven story — use the Controls panel to exercise intent,
+// direction, icon, dismissible and the pressable action.
 export const Default = {
     render: (args) => `
     <eds-alert
@@ -53,151 +61,7 @@ export const Default = {
     ></eds-alert>
   `
 };
-export const Warning = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="warning"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Please review your input before proceeding.',
-        icon: 'warning'
-    }
-};
-export const Error = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="error"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'An error occurred while processing your request.',
-        icon: 'error'
-    }
-};
-export const Success = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="success"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Your changes have been saved successfully.',
-        icon: 'checkmark-filled'
-    }
-};
-export const Brand = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="brand"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Welcome to the EBRAINS platform.',
-        icon: 'information'
-    }
-};
-export const WithLink = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="${args.intent}"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      pressable-label="Learn more"
-      pressable-url="https://ebrains.eu"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'A new version is available.',
-        intent: 'default'
-    }
-};
-export const WithButton = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="error"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      pressable-label="Retry"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Failed to load data.',
-        icon: 'error'
-    }
-};
-export const Dismissible = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="warning"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      dismissible="true"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'This alert can be dismissed.',
-        icon: 'warning'
-    }
-};
-export const WithCustomIcon = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="${args.intent}"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Deployment in progress.',
-        intent: 'default',
-        icon: 'rocket'
-    }
-};
-export const NoIcon = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      intent="warning"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'This alert has no icon — just text.'
-    }
-};
-export const Vertical = {
-    render: (args) => `
-    <eds-alert
-      message="${args.message}"
-      intent="warning"
-      direction="vertical"
-      ${args.icon ? `icon="${args.icon}"` : ''}
-      pressable-label="View details"
-      pressable-url="https://ebrains.eu"
-      dismissible="true"
-    ></eds-alert>
-  `,
-    args: {
-        message: 'Your session will expire in 5 minutes.',
-        icon: 'warning'
-    }
-};
-export const SlotContent = {
-    render: () => `
-    <eds-alert intent="default" icon="information">
-      This alert uses <strong>slot content</strong> with <code>HTML markup</code> instead of the message prop.
-    </eds-alert>
-  `
-};
+// Gallery overview of every intent at a glance — not reproducible via Controls.
 export const AllIntents = {
     render: () => `
     <div style="display: flex; flex-direction: column; gap: 1rem;">
@@ -210,3 +74,11 @@ export const AllIntents = {
     </div>
   `
 };
+// Demonstrates slotted HTML content instead of the `message` prop.
+export const SlotContent = {
+    render: () => `
+    <eds-alert intent="default" icon="information">
+      This alert uses <strong>slot content</strong> with <code>HTML markup</code> instead of the message prop.
+    </eds-alert>
+  `
+};

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: '00e163f2dd33c92bdfd8f45b6e2d3384afa32a30', 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: '36f8cb598e0e53793ce8a49e9e2419f41ba8f160', 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-avatar/eds-avatar.stories.js

@@ -31,8 +31,8 @@ export const Default = {
     
     <div class="mt-32">
       <span>To try out the picture field use this example:</span>
-      <eds-code-block 
-        code="https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200" 
+      <eds-code-block
+        code="https://randomuser.me/api/portraits/women/44.jpg"
         language="url"
       ></eds-code-block>
     </div>`,

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: '7b472ce3dcecc7a0c061d336c4edb1bec098c113', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '2531c44fa20745f7860e4647f77ffa038a56d832', 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: 'a068d2deb011c0a303e5a4320f4f5913bfc36d4a', "aria-label": "Breadcrumb" }, h("ol", { key: '63ab81ece8ff48546875320f4fd346638fac3bdc', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '95c13ac07de20bc04fb57ee990e5d21f928f3a86', "aria-label": "Breadcrumb" }, h("ol", { key: '2a03ff53ac27eaa5e37ddfef32e9a4fe322755dd', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
             const isLast = index === itemsToRender.length - 1;
             return (h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);

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

@@ -466,6 +466,17 @@ button,
   height: 2.75rem;
 }
 
+/* Min-height variants — used for button sizing so a label that wraps to
+   two lines grows (with its py-12 padding) instead of being clipped at a
+   fixed height. Single-line buttons keep the same height. */
+.min-h-36 {
+  min-height: 2.25rem;
+}
+
+.min-h-44 {
+  min-height: 2.75rem;
+}
+
 .h-48 {
   height: 3rem;
 }
@@ -663,6 +674,10 @@ button,
   background-color: var(--brand-green); /* NEW: #00FF9D */
 }
 
+.bg-brand-light {
+  background-color: var(--green-200); /* light brand tint #d3ffdc — brandLight intent */
+}
+
 .bg-accent-dark {
   background-color: var(--brand-green-dark); /* NEW: #00C87B */
 }

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

@@ -23,7 +23,10 @@ import { cva } from "class-variance-authority";
 export class EdsButton {
     constructor() {
         this.button = cva([
-            'relative items-center py-12 cursor-pointer',
+            'relative items-center cursor-pointer',
+            // Brand-green focus-visible outline (rules live in eds-button.css);
+            // without this class keyboard focus falls back to the browser ring.
+            'effect-focus',
             'aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed',
             'disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'
         ], {
@@ -35,6 +38,10 @@ export class EdsButton {
                     ghost: '',
                     ghostInverse: 'text-inverse',
                     brand: 'bg-accent text-default hover:bg-strongest hover:text-inverse aria-disabled:shadow-none',
+                    // Light-green tint with brand-black text — an on-brand "unselected"
+                    // state (e.g. eds-rating / eds-nps) that brightens to solid brand on
+                    // hover/selection. Lives start-to-finish in the brand palette.
+                    brandLight: 'bg-brand-light text-default hover:bg-accent hover:text-default aria-disabled:shadow-none',
                     brandInverse: 'bg-accent text-default hover:bg-inverse hover:text-default aria-disabled:shadow-none',
                     neutral: 'bg-darker after:border-softest bg-inverse hover:bg-dark hover:text-light text-inverse aria-disabled:shadow-none',
                     cta: [
@@ -53,8 +60,8 @@ export class EdsButton {
                     true: ''
                 },
                 size: {
-                    small: 'h-36 f-ui-02',
-                    large: 'h-44 f-ui-01'
+                    small: 'min-h-36 f-ui-02 py-8',
+                    large: 'min-h-44 f-ui-01 py-12'
                 },
                 hasIcon: {
                     true: '',
@@ -227,7 +234,7 @@ export class EdsButton {
         const loaderBottomColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
             ? '#FFFFFF' // White for dark backgrounds
             : '#07140D'; // Brand-black for light backgrounds (secondary, brand, etc.)
-        return (h(Host, { key: '6f955c89a01cf823ff8fc34bfa92df85a3aa8327' }, h(ElementType, { key: 'fabf5842d4c9583c7ff9e4415697c62c111dce68', 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 || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '746feb603fd83b54bab92e62ab9aefcd6a232f54', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && (this.intent !== 'cta' && this.intent !== 'cta-brand') ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: 'e0f54e409080548687304bae2f5d3e1b56863318', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'c2472f5d2730ef850a076471fa00c9db91496db7', class: "loader", style: {
+        return (h(Host, { key: '263f3fd25c17d5f9d8ddcfcc57848d6c8e729994' }, h(ElementType, { key: '9c9f68e332ca6fe14387fc239e880069596b0072', 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 || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '285a0b07089eb7ebab3bd439000ea89c454164d0', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && (this.intent !== 'cta' && this.intent !== 'cta-brand') ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: '36da873de3be79f2cfc3e4851dadd953e17109dc', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: '961913b2c22e6bd803c6639e617129843c877bfe', class: "loader", style: {
                 border: `3px solid ${loaderBorderColor}`,
                 borderBottomColor: loaderBottomColor
             } }))), this.icon ? (h("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true" })) : null)));
@@ -304,8 +311,8 @@ export class EdsButton {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand'",
-                    "resolved": "\"brand\" | \"brandInverse\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"ghostInverse\" | \"neutral\" | \"primary\" | \"secondary\" | \"secondaryInverse\"",
+                    "original": "'primary' | 'secondary' | 'secondaryInverse' | 'ghost' | 'ghostInverse' | 'brand' | 'brandLight' | 'brandInverse' | 'neutral' | 'cta' | 'cta-brand'",
+                    "resolved": "\"brand\" | \"brandInverse\" | \"brandLight\" | \"cta\" | \"cta-brand\" | \"ghost\" | \"ghostInverse\" | \"neutral\" | \"primary\" | \"secondary\" | \"secondaryInverse\"",
                     "references": {}
                 },
                 "required": false,

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

@@ -21,7 +21,7 @@ export class EdsCardDesc {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: 'c018c6b42e709c9e5df23ba9a999955ee4da1fdd', class: `f-body-02 ${this.intent === 'secondary' ? 'text-inverse' : 'text-default'}` }, h("span", { key: 'bcfb43e3940a31dc4c0ec18904e4448eb27d0580', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: 'd7d9f5d40d82700388753a165a998574bd69e674', class: `f-body-02 ${this.intent === 'secondary' ? 'text-inverse' : 'text-default'}` }, h("span", { key: 'bff2551896e726ce02a78b448a0e3f2a3df0c697', 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-cta/eds-card-cta.css

@@ -14,7 +14,9 @@
   display: flex;
   flex-direction: column;
   flex-grow: 1;
-  justify-content: center;
+  /* Top-align the content so titles line up across equal-height cards in a
+     grid (centering made titles drift when descriptions differed in length). */
+  justify-content: flex-start;
 }
 
 /* Default variant - dark background with white text */
@@ -79,6 +81,11 @@
   position: relative;
   z-index: 1;
   width: 100%;
+  /* Fill the card so actions can pin to the bottom (buttons line up across
+     cards regardless of description length). */
+  flex-grow: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .cta-title {
@@ -103,6 +110,8 @@
   justify-content: center;
   margin-bottom: 1.5rem;
   flex-wrap: wrap;
+  /* Push actions to the bottom of the card so they align across the row. */
+  margin-top: auto;
 }
 
 .cta-links {

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

@@ -50,7 +50,7 @@ export class EdsCardCta {
         const primaryButtonIntent = this.variant === 'default' ? 'brandInverse' : 'brand';
         const secondaryButtonIntent = this.variant === 'default' ? 'secondaryInverse' : 'secondary';
         const linkIntent = this.variant === 'default' ? 'cta' : 'underline';
-        return (h("div", { key: 'ee2163e6096ad05dc55ac40c6626236723a23b72', class: containerClasses }, h("div", { key: 'f51481133015ef5eafce48bab525cf166c000e3a', class: "cta-content" }, h("h2", { key: '577441d8bc7cb4c906408faf995e106ef2779e8b', class: "cta-title", innerHTML: this.title }), h("p", { key: 'b8cbcf891b95f82c3dd57f1db9335f55c1d7162c', class: "cta-description" }, this.description), h("div", { key: 'f167262a521b9e15176a4fc65e3e45a8cf24feb1', class: "cta-actions" }, h("eds-button", { key: 'f2c092d340996c87864677f94d979fe6317ef6d7', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (h("eds-button", { key: 'de0fe98dab48b2ab4b78a637915df48c930c4b54', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick }))), this.parsedLinks && this.parsedLinks.length > 0 && (h("div", { key: '842a6e794364fb50829ad422fc7699527b17e918', class: "cta-links" }, this.parsedLinks.map((link, index) => (h("eds-link", { key: index, label: link.label, url: link.url, intent: linkIntent }))))))));
+        return (h("div", { key: 'ee2163e6096ad05dc55ac40c6626236723a23b72', class: containerClasses }, h("div", { key: 'f51481133015ef5eafce48bab525cf166c000e3a', class: "cta-content" }, h("h2", { key: '577441d8bc7cb4c906408faf995e106ef2779e8b', class: "cta-title", innerHTML: this.title }), h("p", { key: 'b8cbcf891b95f82c3dd57f1db9335f55c1d7162c', class: "cta-description" }, this.description), h("div", { key: 'f167262a521b9e15176a4fc65e3e45a8cf24feb1', class: "cta-actions" }, h("slot", { key: 'c114de9b72bf56a2bda67d21aab0a1a24efba2e4', name: "actions" }, h("eds-button", { key: '75c4508fad3377ae1788bca7cda5f8315c8301a3', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (h("eds-button", { key: '2c6de6b1032c62619b7225d3f7cbc04617fca465', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick })))), this.parsedLinks && this.parsedLinks.length > 0 && (h("div", { key: 'a78f81632c85cb729d738b0bb533d260bc7e3727', class: "cta-links" }, this.parsedLinks.map((link, index) => (h("eds-link", { key: index, label: link.label, url: link.url, intent: linkIntent }))))))));
     }
     static get is() { return "eds-card-cta"; }
     static get encapsulation() { return "shadow"; }

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

@@ -24,7 +24,7 @@ export class EdsCardFeature {
             'feature-card',
             `feature-card-${this.variant}`
         ].join(' ');
-        return (h("div", { key: '315904b024e86403b00c9f0e3ebb93dafba08fa8', class: cardClasses }, this.icon && (h("div", { key: 'e0891b38e8321130471ae1422c96fbfe7662b01f', class: "feature-icon" }, h("eds-icon-wrapper", { key: '768b355daebf53d69a54166525c193505dc44d67', name: this.icon, size: 24 }))), h("h3", { key: 'e2486793198e51e518f24beab609a3d0186902d4', class: "feature-title" }, this.title), h("p", { key: '4d66d673b5733c96312cde5e1c3fd64cced5d95a', class: "feature-description" }, this.description), this.url && (h("eds-link", { key: 'e9123234265f259fb9b61172f2e79c7aba5f82b4', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
+        return (h("div", { key: 'f76c056bbca7b38892cdecf56291fe3882c9e3bb', class: cardClasses }, this.icon && (h("div", { key: '9e22a5f6c5e30b55c4bac84f5f11f773b1b37ab9', class: "feature-icon" }, h("eds-icon-wrapper", { key: '64154c38f3655cb55f14c2963a62ead699d8a533', name: this.icon, size: 24 }))), h("h3", { key: '99ed95a90796dbb6baa3f73cb2830fcd0954328c', class: "feature-title" }, this.title), h("p", { key: 'f91109a10f62a58d8b650987fbbf1a5a4f68beaa', class: "feature-description" }, this.description), this.url && (h("eds-link", { key: 'b94b57e5385da9db54a3767d0413349000add755', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
     }
     static get is() { return "eds-card-feature"; }
     static get encapsulation() { return "shadow"; }

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

@@ -87,7 +87,7 @@ export class EdsCardGeneric {
         this.isHovered = false;
     }
     render() {
-        return (h("article", { key: 'eb4b42dccca0fb46bc8e51e1b6873e118796647b', class: this.articleClasses(), onClick: this.url ? () => this.handleClick() : undefined, onMouseEnter: this.url ? () => this.handleMouseEnter() : undefined, onMouseLeave: this.url ? () => this.handleMouseLeave() : undefined }, this.icon && (h("div", { key: '229f7daab8d8560092eb94e664c73c306b2fec19', class: "card-icon-wrapper" }, h("eds-icon-wrapper", { key: 'c4b76bdff72dcbe7d98a7dfea71ca8693c00094e', name: this.icon, size: 32 }))), h("div", { key: '45d3a9d83cf92137485bae5248c55edb56c58671', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '101676ed06f29e985c6bf11620a56660360ace57', class: "flex mb-12 gap-x-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.intent, label: tag.label, size: tag.size }))))), h("eds-card-title", { key: 'c901580eca3a3b8ce4c26e1c9ce5d0f9b7a11ed6', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (h("div", { key: '618be209087536eee2fdfd3eaa1595c6fe6d0176', class: "mt-8" }, this.description && (h("eds-card-desc", { key: '1aa3ea97c4371ea7510ad47e364cea27e1de0482', "truncate-lines": "3", description: this.description, intent: this.intent })))), h("slot", { key: '3086eeeeb29bb82d927ab82e6ce98664118b0193', name: "card" }), this.url && (h("div", { key: 'f1f73a07002f7d82daa0b68b15d7c5cddba9c730', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, h("span", { key: '86fd1e428f6553b74aa634359fad7ba3ce590844', class: "f-ui-01" }, "Learn more"), h("eds-icon-wrapper", { key: 'f955e10355e2726052cd2d34d888ea0effd2b362', name: this.isHovered ? 'arrow-right' : 'arrow-up-right', size: 32 }))))));
+        return (h("article", { key: '6efb0c2c0c3d196b9759307bb98f4bf1e12504d5', class: this.articleClasses(), onClick: this.url ? () => this.handleClick() : undefined, onMouseEnter: this.url ? () => this.handleMouseEnter() : undefined, onMouseLeave: this.url ? () => this.handleMouseLeave() : undefined }, this.icon && (h("div", { key: '9c29cae822923b524668da65f3e341f9626d7e95', class: "card-icon-wrapper" }, h("eds-icon-wrapper", { key: '104a3551d3d8b910528dd43e8a12494faf4764a0', name: this.icon, size: 32 }))), h("div", { key: 'cc9d326aa6e55d1ed26b73f46d5fbb8087d55bf0', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: 'f740e184ec400d6083d04e4fa99259aa061c5dbf', class: "flex mb-12 gap-x-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.intent, label: tag.label, size: tag.size }))))), h("eds-card-title", { key: 'e263ce9bd116857648439bf9f356fc110e048547', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (h("div", { key: 'aa6687dc61c548dd52e2d2f3eb9598f85c2af0a5', class: "mt-8" }, this.description && (h("eds-card-desc", { key: '8b82f70b5dc513396d08affc4958d9c1040583d6', "truncate-lines": "3", description: this.description, intent: this.intent })))), h("slot", { key: 'ff4d0ba6184b01b80e44c78a7cccec124f2b1706', name: "card" }), this.url && (h("div", { key: '889b5fbaf026df0e826626020ff201d06f047cc8', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, h("span", { key: '3a5b5d603a7f3d852b5e92ba57f7214f7b9754ec', class: "f-ui-01" }, "Learn more"), h("eds-icon-wrapper", { key: 'de15571bd4892f72646c205b14105f328d5a596d', name: this.isHovered ? 'arrow-right' : 'arrow-up-right', size: 32 }))))));
     }
     static get is() { return "eds-card-generic"; }
     static get encapsulation() { return "shadow"; }

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

@@ -49,7 +49,7 @@ export class EdsCardHero {
             `hero-card-${this.variant}`,
             this.url ? 'hero-card-clickable' : ''
         ].filter(Boolean).join(' ');
-        return (h("div", { key: '8f7c9c98becb22586f308b0065c3f9cd515a7860', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '6d99fd528b9611573a5ad3548e04914f532cfa21', class: "card-category" }, this.category), h("div", { key: 'f117842619c7fa91b088a72d3e5405843f9b0b3f', class: "card-title" }, this.title), this.description && (h("div", { key: '25a110fe2f58cb77051a8a5b37ee43e616e516fd', class: "card-description" }, this.description)), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: 'd0ef732bf246460affb697d71496ae5ee284ff48', class: "card-tags" }, this.parsedTags.map((tag, index) => (h("span", { key: index, class: "card-tag" }, tag.label)))))));
+        return (h("div", { key: 'c92f2acc8065b4142b28ca213abbb646e61f44fc', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '38b8ec832d05a4891646ac31f24d32f62c5ac2e1', class: "card-category" }, this.category), h("div", { key: 'd356e4651ed9d136c72c519ecb9b484570c9b3be', class: "card-title" }, this.title), this.description && (h("div", { key: '52afdf7988667f73d8725e6a5f5b7816d4b38b30', class: "card-description" }, this.description)), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: 'a50fb41278d3b98da7054e0bee52d2a98ab5d8f3', class: "card-tags" }, this.parsedTags.map((tag, index) => (h("span", { key: index, class: "card-tag" }, tag.label)))))));
     }
     static get is() { return "eds-card-hero"; }
     static get encapsulation() { return "shadow"; }

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

@@ -40,7 +40,7 @@ export class EdsCardStat {
             `stat-card-${this.variant}`,
             this.url ? 'stat-card-clickable' : ''
         ].filter(Boolean).join(' ');
-        const content = (h("div", { key: '9934fb7c9f9014293fc4190e83b658151c8ce5a1', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '22b26775310db09da96fe0d793362ff8691da554', class: "stat-number" }, this.number), h("div", { key: '59e5a6f0851ac2d133cdfa7fdbb160401c60ba92', class: "stat-label" }, this.label), this.description && (h("div", { key: '916007f86e7de06b8e7cec79fc92b422a2c66db0', class: "stat-description" }, this.description))));
+        const content = (h("div", { key: 'f1dadeadd1d893b7a33aa92772baf7245954f6e7', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '6adb8cc68740cd2dabf0bacf0af446e1499171a8', class: "stat-number" }, this.number), h("div", { key: 'adc7a8ffd44bceda51fcb98f68cfc8d7e454db5f', class: "stat-label" }, this.label), this.description && (h("div", { key: 'f70549244277e2c08c7bd94a1d297c00655faff5', class: "stat-description" }, this.description))));
         return content;
     }
     static get is() { return "eds-card-stat"; }

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

@@ -42,7 +42,7 @@ export class EdsGauge {
         const textStyle = {
             fontSize: `${fontSize}px`
         };
-        return (h("div", { key: 'f5801b63984f42bad206445de4e865c0e161b88e', 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: '1a982401ba1853e937dfbb9aeb4736d4665abab1', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '0db002b1a3a3f49fe3fd0f3aa4d3fd0e2ee6a45d', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'a011eaaab9e6f3d15d706bf9309ae7bafa689387', class: "f-body-01 text-default", style: textStyle }, clamped))));
+        return (h("div", { key: '5629f8adbc6f144aad49062883cb85ecf24fc16c', 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: 'd668b54b0a5f4bf260a2f1153781c59741bd8694', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: 'f08feba97d30ed893a72a7e07e412aa82ea8cd3d', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '2a8dccde44677d4a4b742cd992144d6cf399ee9b', 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: '16c785c0fbac538fb0e20c42ed613f5211bea089', class: "relative bg-strongest rounded-sm" }, h("div", { key: '24967e8c714dc62c2366cae6bf6a19566fdeedbf', 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: 'd84c547a7fda762a51279462e6c33642d3ed93b1', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: 'e784206acb815fdb2df3f7013b32e18b42f47e0d', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '8f68b5adda295c370cfff19602cb8cc140d9a10d', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'a3c42360f4a5026d8e6f5328f5ed5d8ca724c3ca', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '96ce7f1cf1cee401bd1a90368c56934116d97d29', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '4d73fa52c489b6995dd8a6d83c05e323bb1f5431', class: "relative bg-strongest rounded-sm" }, h("div", { key: 'c0df3237009310833b417f5ede5b7c204f2752bc', 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: '016505a0749baaa52c6e4aa77f00b4da31e7ec45', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '21474f1b28af95251aca639c349aaac489d8519b', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '64450529ad3cf3dab7e74f8455307cdb3298bbc4', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'affcb4719ef29d7ed9ed676eab975c98ceca31fa', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '43fa1b80c2e02233076c4da15a5aa04f0b49bfc3', innerHTML: this.getHighlightedCode() })))));
     }
     static get is() { return "eds-code-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -35,6 +35,13 @@ export class EdsDropdown {
             if (this.isOpen) {
                 // 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"]')) || []);
+                // The panel declares role="menu"; slotted links/buttons need
+                // role="menuitem" or screen readers announce an empty menu.
+                this.focusableItems.forEach((item) => {
+                    if (!item.hasAttribute('role')) {
+                        item.setAttribute('role', 'menuitem');
+                    }
+                });
                 this.focusIndex = this.focusableItems.length ? 0 : -1;
                 this.focusItem();
             }
@@ -73,7 +80,6 @@ export class EdsDropdown {
         const path = (e.composedPath && e.composedPath()) || [];
         if (!path.includes(this.host)) {
             this.closeDropdown();
-            this.dropdown.emit({ expanded: false });
         }
     }
     /**
@@ -81,12 +87,22 @@ export class EdsDropdown {
      * @param {KeyboardEvent} event - The keyboard event.
      */
     handleKeyDown(event) {
+        var _a;
         if (this.isOpen) {
             const key = event.key;
             switch (key) {
                 case 'Tab':
+                    // ARIA menu pattern: Tab does not walk the items — it closes
+                    // the menu and lets focus continue to the next element on the
+                    // page (no preventDefault on purpose).
+                    this.closeDropdown();
+                    break;
+                case 'Escape':
+                    // Close and hand focus back to the trigger so keyboard users
+                    // can back out without committing to a Tab.
+                    event.preventDefault();
                     this.closeDropdown();
-                    this.dropdown.emit({ expanded: false });
+                    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -98,6 +114,16 @@ export class EdsDropdown {
                     this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length;
                     this.focusItem();
                     break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusIndex = this.focusableItems.length ? 0 : -1;
+                    this.focusItem();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusIndex = this.focusableItems.length - 1;
+                    this.focusItem();
+                    break;
             }
         }
     }
@@ -165,13 +191,13 @@ export class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: '52f349afae529afc12461642abf17fcf4870ca6f', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ed1f3366306f7e3d708473e14fc8de5723dba03f', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), h("nav", { key: 'fb9a559a97ad866b62d4cb2a0f7f828548e24c75', ref: (el) => (this.panelEl = el), role: "menu", class: {
+        return (h("div", { key: '1ce4926a15ac67d653ef03de877e64be83f61b4e', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '8b45fc57c018dd620701b2b9db5403c30f88a6ed', ref: (el) => (this.buttonEl = el), label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), h("nav", { key: '35854d55ea595e35513348bf36145794b2c57007', 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
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '6205de74b039cb784bf9b104edfd6f7a03cc5ed1' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'd6b153bb5968fa958be4d96d60cce774a9a0713c' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/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: '7d01b8aef2854cfdb739553e7f43ed9516199e1e', class: "grid inline" }, h(HeadingTag, { key: 'a0c4a4f93598b955e90416d50260aaa3f644615a', class: headingClass }, this.label), h("p", { key: 'acb2db8fc209faf2d39622e2e858fa1e7403e1b4', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'b0db57c9e3539a5edfecf67cc3a12dd87d74fad9', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '8d6bf62a18fdb12dddba932be9a5115396fdfd6f', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        return (h("div", { key: '5eddbd664389530e209698e5e435c853c8f50b9f', class: "grid inline" }, h(HeadingTag, { key: '22d1d4a44a116f78bbfa66946d8b7a9f95779524', class: headingClass }, this.label), h("p", { key: 'd3e5abefa5d0e1e32281b5088251fb9c304b8d2a', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '65f1e772ac885d20f46e147aedeb55ab2ec871fe', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'f660ceb9889d560ec1687c6f17bdbbe6a89f90ee', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     static get is() { return "eds-feedback"; }
     static get encapsulation() { return "shadow"; }