@ebrains/components 0.6.0-alpha.0 → 0.7.0-alpha.0

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

@@ -2,7 +2,7 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
-const index = require('./index-f08e4f5c.js');
+const index = require('./index-2f63169d.js');
 
 const headings = {
   'heading-01': {
@@ -207,7 +207,7 @@ const TokenTypography = class {
         index.registerInstance(this, hostRef);
     }
     render() {
-        return (index.h("section", { key: 'b831c9707b00d17768f585e2015de8a7289b11d2', class: "w-full" }, index.h("ul", { key: '472e46f2c903597d24e8f24cf28b6f475c7d7a82', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, Object.entries(typography.typesets)
+        return (index.h("section", { key: 'a3e3710a2d2f37c3da3e6c1d17565ba8a2324843', class: "w-full" }, index.h("ul", { key: '74e72785acae0c6f507d64f5121fee1ffdab7f49', 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

@@ -18,7 +18,7 @@
     "components/eds-code-block/eds-code-block.js",
     "components/eds-dropdown/eds-dropdown.js",
     "components/eds-form/eds-form.js",
-    "components/eds-frame/eds-frame.js",
+    "components/eds-form-v2/eds-form-v2.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",
@@ -34,7 +34,10 @@
     "components/eds-icons/eds-icon-menu/eds-icon-menu.js",
     "components/eds-icons/eds-icon-more/eds-icon-more.js",
     "components/eds-icons/eds-icon-search/eds-icon-search.js",
+    "components/eds-icons/eds-icon-star/eds-icon-star.js",
     "components/eds-icons/eds-icon-success/eds-icon-success.js",
+    "components/eds-icons/eds-icon-thumbs-down/eds-icon-thumbs-down.js",
+    "components/eds-icons/eds-icon-thumbs-up/eds-icon-thumbs-up.js",
     "components/eds-icons/eds-icon-user/eds-icon-user.js",
     "components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js",
     "components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js",
@@ -52,17 +55,15 @@
     "components/eds-input-field/eds-input-field.js",
     "components/eds-link/eds-link.js",
     "components/eds-logo/eds-logo.js",
-    "components/eds-matomo-notice/eds-matomo-notice.js",
     "components/eds-modal/eds-modal.js",
-    "components/eds-navigator/eds-navigator.js",
     "components/eds-pagination/eds-pagination.js",
     "components/eds-progress-bar/eds-progress-bar.js",
     "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-spinner/eds-spinner.js",
     "components/eds-steps/eds-vertical-stepper.js",
     "components/eds-switch/eds-switch.js",
-    "components/eds-tab/eds-tab.js",
     "components/eds-table/eds-table.js",
     "components/eds-tag/eds-tag.js",
     "components/eds-timeline/eds-timeline.js",
@@ -86,6 +87,7 @@
     "eds-docs-ui/eds-components-section/eds-components-section.js",
     "eds-docs-ui/eds-docs-palettes/eds-docs-palettes.js",
     "eds-docs-ui/eds-docs-tokens/eds-docs-tokens.js",
+    "eds-docs-ui/eds-frame/eds-frame.js",
     "eds-docs-ui/eds-logo-variations/eds-logo-variations.js",
     "eds-docs-ui/eds-svg-repository/eds-svg-repository.js",
     "eds-docs-ui/logo/logo-space/logo-space.js",
@@ -93,16 +95,18 @@
     "eds-docs-ui/logo/logo-variations/vertical/logo-variations-vertical.js",
     "eds-docs-ui/logo/logo-wrong-usage/logo-wrong-usage.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-fullscreen-menu/eds-fullscreen-menu.js",
     "shared-ui/eds-header/eds-header.js",
     "shared-ui/eds-login/eds-login.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-tabs-content/eds-tabs-content.js",
     "shared-ui/eds-toast-manager/eds-toast-manager.js",
     "shared-ui/eds-user/eds-user.js",
-    "shared-ui/eds-user-modal/eds-user-modal.js"
+    "shared-ui/examples/eds-app-root/eds-app-root.js"
   ],
   "compiler": {
     "name": "@stencil/core",

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

@@ -8,7 +8,7 @@ import { h } from "@stencil/core";
  *
  * It includes an optional button or link element within the header, which can be customized for additional interactions.
  *
- * The `accordionChange` event is emitted when the accordion's expanded state changes, allowing parent components
+ * The `accordion` event is emitted when the accordion's expanded state changes, allowing parent components
  * to track its open/close status.
  *
  * Key features include:
@@ -23,12 +23,12 @@ export class EdsAccordion {
     constructor() {
         /**
          * Handles the click event on the accordion header to toggle expansion.
-         * Toggles the `isExpanded` state and emits the `accordionChange` event.
+         * Toggles the `isExpanded` state and emits the `accordion` event.
          */
         this.handleClick = () => {
             var _a;
             this.isExpanded = !this.isExpanded;
-            this.accordionChange.emit(this.isExpanded);
+            this.accordion.emit(this.isExpanded);
             this.setPanelHeight();
             sendAnalytics({
                 category: 'ui-component',
@@ -81,10 +81,10 @@ export class EdsAccordion {
      */
     render() {
         const minHeightContentClass = this.minHeightContent ? 'min-h-56' : '';
-        return (h("div", { key: '119e170f4a94d2fa476ba1ddd94bcad78bde347a', 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: '93d8b1af3a97c6d35d05a3f910f220f59aa74b01', 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' : ''} 
-          ${minHeightContentClass}` }, h("h3", { key: 'c93f007091b7e48cc5ba327b02ce30929c945be0', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), h("div", { key: '464f2e58964cd96a276fcec54fb951d6f5c8aa14', class: "ml-auto" }, h("eds-button", { key: '5d2867854444e860f32a0a5e06c582aa5337c3c9', id: "toggleAccordion", intent: "tertiary", "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 outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '5a19c1fb7eccb4453343d098d12f25ede1e6548e', class: `w-full` }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '472253d4ec57f79252bf435aedd721e943766a43', id: "accordionSection", role: "region", "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: '3033975fb22d5a23fb9d058e89698f375afabb49', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, h("span", { key: 'd75abb7f99d2e0c539625852dffc42790226b5b6', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '472d88604a37dc8e061e657f83851515234ea760' })))))));
+          ${minHeightContentClass}` }, h("h3", { key: '0bbf1f73305a708b59faf3f792c2e215b5681f9e', class: "mr-auto f-heading-06 text-left absolute inset-x-16 top-16 line-clamp-1" }, this.title), h("div", { key: 'b721809100038d658cc186a08363faad034967de', class: "ml-auto" }, h("eds-button", { key: 'b7b600d0a0b91121916c25dd7c03b415072098c1', id: "toggleAccordion", intent: "tertiary", "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 outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '53054fe651ca9857ec9c2ca2d06546d6a56ceb64', class: `w-full` }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: 'ca71d4a2733f3eb1df78cf570c24b8b0b1d8841b', id: "accordionSection", role: "region", "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: '9a4a1d9fbd2c42f574f093ec679044f5ad9c17c8', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-20`, "aria-hidden": !this.isExpanded }, h("span", { key: '9e293b9e6980a06db2aeb73f5c718c2e8b49da61', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: 'fa467b088ab28100ebf8acc86bf2ebf7886eab8e' })))))));
     }
     static get is() { return "eds-accordion"; }
     static get encapsulation() { return "shadow"; }
@@ -217,8 +217,8 @@ export class EdsAccordion {
     }
     static get events() {
         return [{
-                "method": "accordionChange",
-                "name": "accordionChange",
+                "method": "accordion",
+                "name": "accordion",
                 "bubbles": true,
                 "cancelable": true,
                 "composed": true,

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

@@ -64,12 +64,12 @@ export const SlotComponent = {
       title="${args.title}"
       description="${args.description}"
       switch-bg="${args.switchBg}"
-      expanded="${args.expanded}"
+      expanded="true"
       clamp-text="${args.clampText}"
       min-height-content="${args.minHeightContent}"
     >
       <eds-alert
-        message="This is a default informational alert."
+        message="This is a slot <eds-alert> component"
         intent="warning"
         pressableLabel="Press Me"
         pressableUrl="https://ebrains.eu"

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

@@ -1,4 +1,5 @@
 import { h } from "@stencil/core";
+import { parseData } from "../../utils/sharedUtils";
 /**
  * `EdsBreadcrumb` is a navigational component that displays the user's current location within a hierarchy of pages.
  * This component is especially useful for providing context and enhancing user navigation experiences.
@@ -41,22 +42,7 @@ export class EdsBreadcrumb {
      * Watches for changes to the `items` prop and parses it.
      */
     parseItems(newValue) {
-        if (typeof newValue === 'string') {
-            try {
-                const parsed = JSON.parse(newValue);
-                this.parsedItems = Array.isArray(parsed) ? parsed : [];
-            }
-            catch (e) {
-                //console.error('Error parsing breadcrumb items:', e);
-                this.parsedItems = [];
-            }
-        }
-        else if (Array.isArray(newValue)) {
-            this.parsedItems = newValue;
-        }
-        else {
-            this.parsedItems = [];
-        }
+        this.parsedItems = parseData(newValue);
     }
     /**
      * Lifecycle method that runs when the component is about to be loaded.
@@ -134,7 +120,7 @@ export class EdsBreadcrumb {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (h("nav", { key: 'd177957e1b3218c21991bbdc9636a8e32befe990', "aria-label": "Breadcrumb" }, h("ol", { key: 'd10336ddee99b9fb84d17e53093c57c6a025982f', class: "flex items-center space-x-2" }, itemsToRender.map((item, index) => {
+        return (h("nav", { key: '02537ec4208124f8a5ba564f7487f6fad552f7da', "aria-label": "Breadcrumb" }, h("ol", { key: 'ac6e2ecd59a8ddef52e004d95fbb492f78a9b248', 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 { displayLabel, fullLabel } = this.getLabels(item, isLast);

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

@@ -1,22 +1,4 @@
-@font-face {
-    font-family: "Inter";
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: normal;
-    src: url("../fonts/Inter.var.woff2") format("woff2-variations"),
-    url("../fonts/Inter.var.woff2") format("woff2");
-    src: url("../fonts/Inter.var.woff2") format("woff2") tech("variations");
-  }
-  @font-face {
-    font-family: "Inter";
-    font-weight: 100 900;
-    font-display: swap;
-    font-style: italic;
-    src: url("../fonts/Inter-Italic.var.woff2") format("woff2-variations"),
-    url("../fonts/Inter-Italic.var.woff2") format("woff2");
-    src: url("../fonts/Inter-Italic.var.woff2") format("woff2") tech("variations");
-  }
-  :root {
+:root {
     font-optical-sizing: auto;
   }
   html,

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

@@ -1,3 +1,4 @@
+import { parseData } from "../../../utils/sharedUtils";
 import { sendAnalytics } from "../../../utils/analytics";
 import { h } from "@stencil/core";
 /**
@@ -64,20 +65,7 @@ export class EdsCardGeneric {
      * @returns {any[]} Array of parsed link objects
      */
     get parsedTags() {
-        if (typeof this.tags === 'object') {
-            return this.tags;
-        }
-        else if (typeof this.tags === 'string') {
-            try {
-                return JSON.parse(this.tags);
-            }
-            catch (e) {
-                // eslint-disable-next-line
-                console.error('Error parsing tags prop:', e);
-                return [];
-            }
-        }
-        return [];
+        return parseData(this.tags);
     }
     articleClasses() {
         return [
@@ -98,7 +86,7 @@ export class EdsCardGeneric {
         });
     }
     render() {
-        return (h("article", { key: 'dcb7cea87bfb52f8886f7ee3dbc3484d615bc00c', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '94dd6ff2679ce9ac4d25ec921cd1162b1584e4fd', "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: '433c4fe3a518153d89d48af54455286fa415a688', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '97b75afb4b8de1183d4b212054ff556ba3db8fcb', 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: '440a448c841370838c0c66610bd1266b46f66541', class: this.articleClasses(), onClick: () => this.handleClick() }, h("eds-card-title", { key: '292d93a9a993c6dcbfd276097a21d3984b1794c4', "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: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7', class: "mt-8", "truncate-lines": "3", description: this.description })), this.parsedImage ? (h("eds-img", Object.assign({ class: "mt-8" }, this.parsedImage))) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'cb5c191f6c190fb6edb46446187dbf6b8c1b778b', 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-generic"; }
     static get encapsulation() { return "shadow"; }

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

@@ -29,6 +29,7 @@ export class EdsDropdown {
             else {
                 this.closeDropdown();
             }
+            this.dropdown.emit({ expanded: this.isOpen });
             sendAnalytics({
                 category: 'ui-component',
                 parentContext: null,
@@ -55,6 +56,7 @@ export class EdsDropdown {
     handleWindowClick(e) {
         if (!this.host.contains(e.target)) {
             this.closeDropdown();
+            this.dropdown.emit({ expanded: false });
         }
     }
     /**
@@ -67,6 +69,7 @@ export class EdsDropdown {
             switch (key) {
                 case 'Tab':
                     this.closeDropdown();
+                    this.dropdown.emit({ expanded: false });
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -87,6 +90,7 @@ export class EdsDropdown {
     closeDropdown() {
         this.isOpen = false;
         this.focusIndex = -1;
+        this.dropdown.emit({ expanded: false });
     }
     /**
      * Sets focus on the currently selected item in the dropdown.
@@ -108,14 +112,14 @@ export class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: '84f4cea78ea1c40c7897a356fe03ac83922fccb8', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '99dc51632dc82830054502a2d6d77d9fcefe9337', 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: 'a63613a7ecf709fd1d22d77da4b2d286905fef3e', role: "menu", class: {
+        return (h("div", { key: '3edd3453afbd52ee9e3c4d925baa46e07cfdbfc0', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '7c69acb6d6213af2cec8c1e00c68d83a5d23d676', 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: '5048b1c3cb42418736d471c2331330afef49cbc5', 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: 'dda70b865ed03dc7ad36a32934587bbcb0a16c1b' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '842f316e9a7910aa8b34823e883c54c1979668d1' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }
@@ -327,6 +331,24 @@ export class EdsDropdown {
             "focusIndex": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "dropdown",
+                "name": "dropdown",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Event emitted when the dropdown toggles, indicating the new expanded/collapsed state"
+                },
+                "complexType": {
+                    "original": "{ expanded: boolean }",
+                    "resolved": "{ expanded: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "host"; }
     static get listeners() {
         return [{