@ebrains/components 2.4.1 → 3.1.0

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

@@ -1,78 +1,25 @@
 :host {
   display: block;
-  font-family: var(--font-family, 'Courier New', monospace);
-}
-
-pre[class*="language-"] {
-  white-space: pre-wrap;
-  /* Preserve line breaks */
-  word-break: break-word;
-  /* Prevent horizontal scrolling for long lines */
-}
-
-.language {
-  font-weight: bold;
-  text-transform: uppercase;
-}
-
-pre {
-  margin: 0;
-  border-radius: 8px;
-  color: var(--purple-200);
-  overflow: auto;
-}
-
-code {
-  font-family: 'Courier New', monospace;
-}
-
-/* Example color coding for syntax highlighting */
-.token.keyword {
-  color: var(--purple-500);
-}
-
-.token.string {
-  color: var(--green-500);
-}
-
-.token.function {
-  color: var(--cyan-500);
-}
-
-.token.comment {
-  color: var(--grey-700);
 }
 
+/* Outer container */
 .relative {
   position: relative;
 }
 
-.bg-stronger {
-  background-color: var(--grey-900);
+.bg-strongest {
+  background-color: #07140D;
+  border: 1px solid rgba(255, 255, 255, 0.1);
 }
 
 .rounded-sm {
-  border-radius: 8px;
-}
-
-.rounded-xs {
-  border-radius: 4px;
+  border-radius: 12px;
+  overflow: hidden;
 }
 
+/* Header bar */
 .text-inverse {
-  color: var(--white);
-}
-
-.text-light {
-  color: var(--grey-700);
-}
-
-.text-lighter {
-  color: var(--grey-600);
-}
-
-.text-lightest {
-  color: var(--grey-500);
+  color: #E5E7EB;
 }
 
 .flex {
@@ -83,114 +30,131 @@ code {
   align-items: center;
 }
 
-.justify-center {
-  justify-content: center;
-}
-
 .justify-between {
   justify-content: space-between;
 }
 
-.p-0 {
-  padding: 0rem;
+.p-8 {
+  padding: 0.75rem 1rem;
+  background: rgba(255, 255, 255, 0.05);
+  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
 }
 
-.p-12 {
-  padding: 0.75rem;
+/* Language badge */
+.f-ui-03 {
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-size: 0.6875rem;
+  font-weight: 500;
+  text-transform: uppercase;
+  letter-spacing: 0.1em;
+  color: #00FF9D;
+  background: rgba(0, 255, 157, 0.1);
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  line-height: 1.4;
 }
 
-.p-16 {
-  padding: 1rem;
+/* Copy icon */
+.w-20 {
+  width: 1.25rem;
 }
 
-.p-20 {
-  padding: 1.25rem;
+.h-20 {
+  height: 1.25rem;
 }
 
-.p-6 {
-  padding: 0.375rem;
+.mt-8 {
+  margin-top: 0;
+  cursor: pointer;
+  color: #9CA3AF;
+  transition: color 0.2s ease;
 }
 
-.p-8 {
-  padding: 0.5rem;
+.mt-8:hover {
+  color: white;
 }
 
-.pl-8 {
-  padding-left: 0.5rem;
+/* Code area */
+pre {
+  margin: 0;
+  color: #D1D5DB;
+  overflow-x: auto;
 }
 
-.mb-10 {
-  margin-bottom: 0.625rem;
+pre[class*="language-"] {
+  white-space: pre-wrap;
+  word-break: break-word;
 }
 
-.mb-12 {
-  margin-bottom: 0.75rem;
+.bg-stronger {
+  background: transparent;
 }
 
-.mb-28 {
-  margin-bottom: 1.75rem;
+.pl-8 {
+  padding: 1.25rem 1.5rem;
 }
 
-.pb-16 {
-  padding-bottom: 1rem;
+.pb-8 {
+  padding-bottom: 1.25rem;
 }
 
-.pb-20 {
-  padding-bottom: 1.25rem;
+code {
+  font-family: 'IBM Plex Mono', 'Courier New', monospace;
+  font-size: 0.875rem;
+  line-height: 1.7;
 }
 
-.pb-28 {
-  padding-bottom: 1.75rem;
+/* Syntax highlighting */
+.token.keyword {
+  color: #ff79c6;
 }
 
-.pb-60 {
-  padding-bottom: 3.75rem;
+.token.string {
+  color: #00FF9D;
 }
 
-.pb-8 {
-  padding-bottom: 0.5rem;
+.token.function {
+  color: #8be9fd;
 }
 
-.mt-16 {
-  margin-top: 1rem;
+.token.comment {
+  color: #6B7280;
+  font-style: italic;
 }
 
-.mt-2 {
-  margin-top: 0.125rem;
+.token.tag {
+  color: #ff79c6;
 }
 
-.mt-20 {
-  margin-top: 1.25rem;
+.token.attr-name {
+  color: #8be9fd;
 }
 
-.mt-28 {
-  margin-top: 1.75rem;
+.token.attr-value {
+  color: #00FF9D;
 }
 
-.w-20 {
-  width: 1.25rem;
+.token.punctuation {
+  color: #d8d8d8;
 }
 
-.h-20 {
-  height: 1.25rem;
+.token.operator {
+  color: #8be9fd;
 }
 
-.f-ui-03 {
-  font-family: var(--f-ui-03-fontFamily);
-  font-weight: var(--f-ui-03-fontWeight);
-  font-size: var(--f-ui-03-fontSize);
-  line-height: var(--f-ui-03-lineHeight);
-  letter-spacing: var(--f-ui-03-letterSpacing);
+.token.number {
+  color: #ffb87e;
+}
+
+.token.boolean {
+  color: #d18fff;
 }
 
-.f-ui-03-light {
-  font-family: var(--f-ui-03-light-fontFamily);
-  font-weight: var(--f-ui-03-light-fontWeight);
-  font-size: var(--f-ui-03-light-fontSize);
-  line-height: var(--f-ui-03-light-lineHeight);
-  letter-spacing: var(--f-ui-03-light-letterSpacing);
+.token.property {
+  color: #8be9fd;
 }
 
+/* Screen reader only */
 .sr-only {
   position: absolute;
   width: 1px;
@@ -201,4 +165,4 @@ code {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
-}
+}

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: 'bc74b6be37bcb24700d17b48b5398077e485abd7', class: "relative bg-stronger rounded-sm" }, h("div", { key: 'db0395bfd55eb3394ab2149c5c436f2a54e8afb0', 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: '628ad41f15f3a38abe4b7c382074c8f5a8679a8c', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '1c95d57a5d8113d6ab7ebf7da713e058c7cc10f1', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a64b2450b631835b6fc2c15047b09ceea5a9fc95', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '51945cbee1504625b54362505b60f1bd1784bdda', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '55961aa8278177451e13c929ec7f7065afcac93b', 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();
             }
@@ -50,14 +57,13 @@ export class EdsDropdown {
                 action: this.isOpen ? 'expanded' : 'collapsed'
             });
         };
-        this.icon = undefined;
+        this.icon = 'chevron-down';
         this.label = undefined;
-        this.rounded = false;
         this.ariaLabel = 'Open dropdown';
         this.asNav = true;
         this.dropdownPos = 'left';
         this.dropdownOffset = true;
-        this.intent = 'tertiary';
+        this.intent = 'ghost';
         this.autoClose = true;
         this.noCloseSelector = '[data-dropdown-no-close]';
         this.isOpen = false;
@@ -74,7 +80,6 @@ export class EdsDropdown {
         const path = (e.composedPath && e.composedPath()) || [];
         if (!path.includes(this.host)) {
             this.closeDropdown();
-            this.dropdown.emit({ expanded: false });
         }
     }
     /**
@@ -82,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();
-                    this.dropdown.emit({ expanded: false });
+                    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();
+                    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -99,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;
             }
         }
     }
@@ -166,14 +191,13 @@ export class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: 'ffc4915b2104e3d2dd347900acd897f56910a674', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: 'ba48bdd7b75fd230bdc2dd564bd477f0349f5426', 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: 'a29b57598a2ed8fcc9593c928df9443fd4449481', 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,
-                'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: 'ddf003345ef5181b968b4bfd8962805d09d15e89' }))));
+                'right-0': this.dropdownPos === 'right' && !this.dropdownOffset
+            }, 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"; }
@@ -193,12 +217,18 @@ export class EdsDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "string",
-                    "resolved": "string",
-                    "references": {}
+                    "original": "IconName",
+                    "resolved": "\"copy\" | \"arrow-right\" | \"chevron-right\" | \"chevron-left\" | \"chevron-down\" | \"chevron-up\" | \"arrow-left\" | \"arrow-up-right\" | \"close\" | \"add\" | \"edit\" | \"checkmark\" | \"download\" | \"upload\" | \"view\" | \"exit\" | \"caretSort\" | \"bookmark\" | \"createLink\" | \"activity\" | \"account\" | \"analytics\" | \"template\" | \"documentExport\" | \"documentDownload\" | \"trashCan\" | \"chooseItem\" | \"copyLink\" | \"dragHorizontal\" | \"dragVertical\" | \"login\" | \"logout\" | \"move\" | \"replicate\" | \"sortAscending\" | \"sortDescending\" | \"requestQuote\" | \"reset\" | \"resultDraft\" | \"share\" | \"play\" | \"book\" | \"chatOff\" | \"forum\" | \"shareKnowledge\" | \"time\" | \"help\" | \"customerService\" | \"code\" | \"rocket\" | \"compass\" | \"menu\" | \"search\" | \"settings\" | \"notification\" | \"user\" | \"group\" | \"save\" | \"document\" | \"folder\" | \"image\" | \"calendar\" | \"information\" | \"warning\" | \"error\" | \"checkmark-filled\" | \"star\" | \"thumbs-up\" | \"thumbs-down\" | \"twitter\" | \"linkedin\" | \"facebook\" | \"youtube\" | \"mastodon\" | \"bluesky\"",
+                    "references": {
+                        "IconName": {
+                            "location": "import",
+                            "path": "../../utils/icons",
+                            "id": "../../../packages/components/src/utils/icons.ts::IconName"
+                        }
+                    }
                 },
                 "required": false,
-                "optional": false,
+                "optional": true,
                 "docs": {
                     "tags": [{
                             "name": "type",
@@ -210,7 +240,8 @@ export class EdsDropdown {
                     "text": "Icon displayed on the dropdown button."
                 },
                 "attribute": "icon",
-                "reflect": false
+                "reflect": false,
+                "defaultValue": "'chevron-down'"
             },
             "label": {
                 "type": "string",
@@ -232,30 +263,6 @@ export class EdsDropdown {
                 "attribute": "label",
                 "reflect": false
             },
-            "rounded": {
-                "type": "boolean",
-                "mutable": false,
-                "complexType": {
-                    "original": "boolean",
-                    "resolved": "boolean",
-                    "references": {}
-                },
-                "required": false,
-                "optional": false,
-                "docs": {
-                    "tags": [{
-                            "name": "type",
-                            "text": "{boolean}"
-                        }, {
-                            "name": "default",
-                            "text": "false"
-                        }],
-                    "text": "Whether the dropdown nav list placeholder has rounded (pill) styling."
-                },
-                "attribute": "rounded",
-                "reflect": false,
-                "defaultValue": "false"
-            },
             "ariaLabel": {
                 "type": "string",
                 "mutable": false,
@@ -356,8 +363,8 @@ export class EdsDropdown {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'",
-                    "resolved": "\"ghost\" | \"ghostInverse\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'primary' | 'secondary' | 'brand' | 'ghost' | 'neutral'",
+                    "resolved": "\"brand\" | \"ghost\" | \"neutral\" | \"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
@@ -365,16 +372,16 @@ export class EdsDropdown {
                 "docs": {
                     "tags": [{
                             "name": "type",
-                            "text": "{'primary' | 'secondary' | 'tertiary' | 'ghost' | 'ghostInverse'}"
+                            "text": "{'primary' | 'secondary' }"
                         }, {
                             "name": "default",
                             "text": "'tertiary'"
                         }],
-                    "text": "Visual intent of the dropdown button.\nOptions include: 'primary', 'secondary', 'tertiary', 'ghost', 'ghostInverse'."
+                    "text": "Visual intent of the dropdown button.\nOptions include: 'primary', 'secondary'."
                 },
                 "attribute": "intent",
                 "reflect": false,
-                "defaultValue": "'tertiary'"
+                "defaultValue": "'ghost'"
             },
             "autoClose": {
                 "type": "boolean",

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: '5405127cfc114d4906617955d7b1069a04ed7b8e', class: "grid inline" }, h(HeadingTag, { key: 'c0a2593d843577323b6a27d0f8fdca3b84063bd5', class: headingClass }, this.label), h("p", { key: '5b7ef9fbd8c5b4a9d3c7c39e3092244d08dde126', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '2de1ad00dd21d987bc4a91438500a58a0bcd63a7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: '3de038a0ae8ee334edde65194356f021e14e7cb3', 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"; }

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

@@ -30,7 +30,7 @@ export default {
         }
     },
     args: {
-        headingLevel: 'h1',
+        headingLevel: 'h3',
         type: 'star',
         count: 5,
         label: 'Rate your Experience!',
@@ -55,6 +55,7 @@ export const CustomTextMapping = {
       <eds-feedback
         type="${args.type}"
         count="${args.count}"
+        heading-level="${args.headingLevel}"
         label="${args.label}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
@@ -71,6 +72,7 @@ export const ThumbsUp = {
       <eds-feedback
         type="${args.type}"
         count="${args.count}"
+        heading-level="${args.headingLevel}"
         label="${args.label}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
@@ -87,6 +89,7 @@ export const ThumbsDown = {
       <eds-feedback
         type="${args.type}"
         count="${args.count}"
+        heading-level="${args.headingLevel}"
         label="${args.label}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
@@ -104,6 +107,7 @@ export const TenItems = {
         type="${args.type}"
         count="${args.count}"
         label="${args.label}"
+        heading-level="${args.headingLevel}"
         description="${args.description}"
         text-mapping='${JSON.stringify(args.textMapping)}'
       ></eds-feedback>