@ebrains/components 3.0.0 → 3.2.0

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

@@ -42,15 +42,12 @@ export class EdsCardCta {
         return parseData(this.links);
     }
     render() {
-        const containerClasses = [
-            'cta-container',
-            `cta-container-${this.variant}`
-        ].join(' ');
+        const containerClasses = ['cta-container', `cta-container-${this.variant}`].join(' ');
         // Determine button and link intents based on variant
         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: '6a3ccb2ee1f3ad3cc7c3fc0c54381284a9a5190b', class: containerClasses }, h("div", { key: '2a6ad1f084c3e7afea0a11a35c8b5e20d3a2c7ee', class: "cta-content" }, h("h2", { key: '157f32d98283cf59a16f73def69974238e4dc938', class: "cta-title", innerHTML: this.title }), h("p", { key: '660beebc8c10f93a7052c23e5eacb2481fb3bcd7', class: "cta-description" }, this.description), h("div", { key: 'e7610c3e2738aace2ac921304c6b2a6e5f5a5952', class: "cta-actions" }, h("slot", { key: '75113d5cc2d10aaaa2d6b7b4f0f16ea916a5a1ae', name: "actions" }, h("eds-button", { key: '140823c45ce817555ebe0969f1f07787b5d40819', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (h("eds-button", { key: '8b2cd73793a85d6da3c138459f9ab864e9f2b9ab', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick })))), this.parsedLinks && this.parsedLinks.length > 0 && (h("div", { key: '10f5ebc9ed558a29e166325ff143f79b5324f130', 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-cta/eds-card-cta.stories.js

@@ -50,7 +50,10 @@ export const Inverse = {
     args: {
         title: 'Start Contributing',
         description: 'Help shape the future of EBRAINS documentation and components.',
-        links: [{ label: 'GitLab', url: '#' }, { label: 'Documentation', url: '#' }]
+        links: [
+            { label: 'GitLab', url: '#' },
+            { label: 'Documentation', url: '#' }
+        ]
     }
 };
 export const WithLinks = {

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

@@ -20,11 +20,8 @@ export class EdsCardFeature {
         this.variant = 'default';
     }
     render() {
-        const cardClasses = [
-            '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" }))));
+        const cardClasses = ['feature-card', `feature-card-${this.variant}`].join(' ');
+        return (h("div", { key: '585107ac2cfc2ea55fc560d2da9e6bfc0595b5ad', class: cardClasses }, this.icon && (h("div", { key: '6dd26bd834d446872d0ab27e8a26e08488507686', class: "feature-icon" }, h("eds-icon-wrapper", { key: 'e5502241c155784370a0e5f214b0bfd88aa634a7', name: this.icon, size: 24 }))), h("h3", { key: '974e30754eb9d4aa37beddc7ed065228df704009', class: "feature-title" }, this.title), h("p", { key: '605f476de2001a1b85ec95b5c11eaa8a3cfcb9f3', class: "feature-description" }, this.description), this.url && (h("eds-link", { key: '5ee756a958973fc4f7daf6e0bdad4e42179becb3', 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

@@ -54,9 +54,7 @@ export class EdsCardGeneric {
         else if (this.intent === 'dark') {
             bgClass = 'bg-dark';
         }
-        const interactionClasses = this.url
-            ? 'cursor-pointer effect-shadow hover:shadow-hover'
-            : 'cursor-default';
+        const interactionClasses = this.url ? 'cursor-pointer effect-shadow hover:shadow-hover' : 'cursor-default';
         return [
             'h-auto',
             bgClass,
@@ -87,7 +85,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: '3757ce9c894928dc158e920f10fb5ffdc46a1f8d', 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: '70683a1435c967b26f1d8eae69b1aaccb29e0a75', class: "card-icon-wrapper" }, h("eds-icon-wrapper", { key: '74386a2045b07aa177cd18b6c10f99cca870d228', name: this.icon, size: 32 }))), h("div", { key: '38bfc9f2895eba37ced45b8cb8ec3e65bdae559e', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '33b736039f478cbdffd3322b2d2bb60754318140', 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: '57b16d2c6d579b143bb91af377bf6e8dc161b210', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (h("div", { key: '7fa96262badff009bbeaf21c200a0c49413ec37d', class: "mt-8" }, this.description && (h("eds-card-desc", { key: '2a4381f7f709774591c944308f033ef49d59cf8d', "truncate-lines": "3", description: this.description, intent: this.intent })))), h("slot", { key: 'bba602658c39a0332c9a1cf65b5c3b5f614d7bb5', name: "card" }), this.url && (h("div", { key: 'c14cc16acd3d000cb550a3d8fa01eaf52da70893', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, h("span", { key: '66b50d088e275373a4368962f70396342f0e0353', class: "f-ui-01" }, "Learn more"), h("eds-icon-wrapper", { key: 'f2de3d43d1965815d24455b2c2b0a96f5feb64a1', 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

@@ -32,8 +32,9 @@ export class EdsCardHero {
     }
     handleClick() {
         var _a;
-        if (!this.url)
+        if (!this.url) {
             return;
+        }
         sendAnalytics({
             category: 'ui-component',
             parentContext: this.parentContext,
@@ -44,12 +45,10 @@ export class EdsCardHero {
         window.location.href = this.url;
     }
     render() {
-        const cardClasses = [
-            'hero-card',
-            `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)))))));
+        const cardClasses = ['hero-card', `hero-card-${this.variant}`, this.url ? 'hero-card-clickable' : '']
+            .filter(Boolean)
+            .join(' ');
+        return (h("div", { key: 'c5b0745da99444ae9981161910e7248d50865d6c', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: 'adb890d7bd56faff4bdeaea9a1550209a8e9847f', class: "card-category" }, this.category), h("div", { key: 'c6d68b85a94c753e383f0dc92709cdbb859a9400', class: "card-title" }, this.title), this.description && h("div", { key: '47d880f01f9e0d3feaa46bc3310e1018b71eb5da', class: "card-description" }, this.description), this.parsedTags && this.parsedTags.length > 0 && (h("div", { key: '8f1060a78bebd9def4ac7a1e6ba79a12094363e0', 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

@@ -23,8 +23,9 @@ export class EdsCardStat {
     }
     handleClick() {
         var _a;
-        if (!this.url)
+        if (!this.url) {
             return;
+        }
         sendAnalytics({
             category: 'ui-component',
             parentContext: this.parentContext,
@@ -35,12 +36,10 @@ export class EdsCardStat {
         window.location.href = this.url;
     }
     render() {
-        const cardClasses = [
-            'stat-card',
-            `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 cardClasses = ['stat-card', `stat-card-${this.variant}`, this.url ? 'stat-card-clickable' : '']
+            .filter(Boolean)
+            .join(' ');
+        const content = (h("div", { key: '0c4dcd6130ae23813c7decf3dd6d3ce465a9b743', class: cardClasses, onClick: () => this.handleClick() }, h("div", { key: '8c787c4ed6e96c9c0403a119edc534b8698e4296', class: "stat-number" }, this.number), h("div", { key: '7d86e9731cf43d3ffa923bdf27403ba34ab4dc0a', class: "stat-label" }, this.label), this.description && h("div", { key: 'aaf9942a61087f46dc883d64184e6b33a4cb4d71', 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-charts/eds-pie/eds-pie.js

@@ -213,7 +213,7 @@ EdsPie.PALETTES = {
         '#d8d8d8', // grey-400
         '#9dffb4', // green-300
         '#e6e6e6', // grey-300
-        '#d3ffdc', // green-200
+        '#d3ffdc' // green-200
     ],
     mono: [
         '#666666', // grey-700
@@ -224,6 +224,6 @@ EdsPie.PALETTES = {
         '#6e6e6e', // grey-600
         '#d8d8d8', // grey-400
         '#f2f2f2', // grey-200
-        '#242424', // grey-900
+        '#242424' // grey-900
     ]
 };

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

@@ -2,159 +2,125 @@
   display: block;
 }
 
-/* Outer container */
-.relative {
+/* Dark code card — matches the embed-panel snippet mockup. */
+.codewrap {
   position: relative;
-}
-
-.bg-strongest {
-  background-color: #07140D;
-  border: 1px solid rgba(255, 255, 255, 0.1);
-}
-
-.rounded-sm {
+  background: #08170f;
+  border: 1px solid rgba(255, 255, 255, 0.07);
   border-radius: 12px;
   overflow: hidden;
 }
 
-/* Header bar */
-.text-inverse {
-  color: #E5E7EB;
-}
-
-.flex {
+/* Top bar: language chip (left) + copy button (right). */
+.codetop {
   display: flex;
-}
-
-.items-center {
   align-items: center;
-}
-
-.justify-between {
   justify-content: space-between;
+  padding: 11px 13px;
+  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
 }
 
-.p-8 {
-  padding: 0.75rem 1rem;
-  background: rgba(255, 255, 255, 0.05);
-  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
-}
-
-/* Language badge */
-.f-ui-03 {
-  font-family: 'IBM Plex Mono', 'Courier New', monospace;
-  font-size: 0.6875rem;
-  font-weight: 500;
-  text-transform: uppercase;
+.langchip {
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 9.5px;
   letter-spacing: 0.1em;
-  color: #00FF9D;
+  text-transform: uppercase;
+  color: #00ff9d;
   background: rgba(0, 255, 157, 0.1);
-  padding: 0.25rem 0.5rem;
-  border-radius: 4px;
-  line-height: 1.4;
+  border: 1px solid rgba(0, 255, 157, 0.25);
+  border-radius: 5px;
+  padding: 4px 8px;
+  line-height: 1;
 }
 
-/* Copy icon */
-.w-20 {
-  width: 1.25rem;
-}
-
-.h-20 {
-  height: 1.25rem;
-}
-
-.mt-8 {
-  margin-top: 0;
+.copy {
+  display: inline-flex;
+  align-items: center;
+  gap: 7px;
+  background: transparent;
+  border: none;
   cursor: pointer;
-  color: #9CA3AF;
-  transition: color 0.2s ease;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 10.5px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: rgba(235, 242, 238, 0.62);
+  padding: 5px 7px;
+  border-radius: 6px;
+  transition: color 0.14s, background 0.14s;
 }
-
-.mt-8:hover {
-  color: white;
+.copy:hover {
+  color: #00ff9d;
+  background: rgba(0, 255, 157, 0.08);
+}
+/* The glyph inherits the button's colour (greens on hover). */
+.copy eds-icon-wrapper {
+  color: inherit;
+  display: inline-flex;
 }
 
-/* Code area */
+/* Code area — horizontal scroll on long lines, never wraps mid-tag. */
 pre {
   margin: 0;
-  color: #D1D5DB;
+  padding: 16px 15px;
   overflow-x: auto;
+  white-space: pre;
+  font-family: 'IBM Plex Mono', ui-monospace, monospace;
+  font-size: 12.5px;
+  line-height: 1.75;
+  color: #cfe3d8;
 }
 
-pre[class*="language-"] {
-  white-space: pre-wrap;
-  word-break: break-word;
-}
-
-.bg-stronger {
-  background: transparent;
-}
-
-.pl-8 {
-  padding: 1.25rem 1.5rem;
+code {
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
 }
 
-.pb-8 {
-  padding-bottom: 1.25rem;
+/* Prism token colours mapped to the mockup palette. */
+.token.tag {
+  color: #ff7b9c;
 }
-
-code {
-  font-family: 'IBM Plex Mono', 'Courier New', monospace;
-  font-size: 0.875rem;
-  line-height: 1.7;
+.token.attr-name {
+  color: #9fe8ff;
 }
-
-/* Syntax highlighting */
-.token.keyword {
-  color: #ff79c6;
+.token.attr-value {
+  color: #00ff9d;
 }
-
 .token.string {
-  color: #00FF9D;
+  color: #00ff9d;
 }
-
-.token.function {
-  color: #8be9fd;
+.token.punctuation {
+  color: #6f8579;
+}
+/* Quotes / `=` inside an attribute read as part of the (green) string. */
+.token.attr-value .token.punctuation {
+  color: #00ff9d;
 }
-
 .token.comment {
-  color: #6B7280;
+  color: #6f8579;
   font-style: italic;
 }
-
-.token.tag {
-  color: #ff79c6;
-}
-
-.token.attr-name {
-  color: #8be9fd;
-}
-
-.token.attr-value {
-  color: #00FF9D;
+.token.keyword {
+  color: #ff7b9c;
 }
-
-.token.punctuation {
-  color: #d8d8d8;
+.token.function {
+  color: #9fe8ff;
 }
-
 .token.operator {
-  color: #8be9fd;
+  color: #9fe8ff;
 }
-
 .token.number {
   color: #ffb87e;
 }
-
 .token.boolean {
   color: #d18fff;
 }
-
 .token.property {
-  color: #8be9fd;
+  color: #9fe8ff;
 }
 
-/* Screen reader only */
+/* Screen-reader only */
 .sr-only {
   position: absolute;
   width: 1px;

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: '70292c4efd3cfaa9e825fe5f50ca4c04807bfbf6', class: "codewrap" }, h("div", { key: '8af431690673102d18e43fe225267244ecf7ed1c', class: "codetop" }, h("span", { key: '484e4eb6636cd91314a17a3f048f8486f7dccb0a', class: "langchip" }, this.language ? this.language.toUpperCase() : 'CODE'), h("button", { key: '9a866e116ce719c59985b62850a351a4a87c30a8', type: "button", class: "copy", "aria-label": "Copy code", onClick: () => this.copyToClipboard() }, h("eds-icon-wrapper", { key: 'bfb0c5fe395e5a1f814e32fe21edff4829394225', name: this.copied ? 'checkmark-filled' : 'copy', size: 16 }), this.copied ? 'Copied' : 'Copy')), h("pre", { key: 'cda2b6d9eee175ea01ee99ce68912813efa12a48', class: this.language ? `language-${this.language}` : '', role: "region", "aria-label": this.language ? `Code block in ${this.language}` : 'Code block' }, h("code", { key: '2ebb1b9ac0f24a6c3c82e486745a476a4b4d5b7c', 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"; }