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

package/dist/cjs/eds-alert.cjs.entry.js

@@ -0,0 +1,97 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+const index$1 = require('./index-ab9fbefe.js');
+
+const edsAlertCss = ":root {\n  font-optical-sizing: auto;\n}\nhtml,\nbody {\n  -webkit-font-smoothing: antialiased;\n  -moz-osx-font-smoothing: grayscale;\n}\n/*\n:focus[data-focus-method=\"mouse\"],\n:focus[data-focus-method=\"touch\"] {\n  outline: none !important;\n}\n*/\n/*FADE*/\n/*FADE TRANSLATE Y*/\n/*SLIDE LEFT*/\n/*SLIDE BOTTOM*/\n/*COLLAPSE Y*/\n*, ::before, ::after {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n::backdrop {\n  --tw-ring-offset-shadow: 0 0 #0000;\n  --tw-ring-shadow: 0 0 #0000;\n  --tw-shadow: 0 0 #0000;\n}\n/*\n! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com\n*/\n/*\n1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)\n2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)\n*/\n*,\n::before,\n::after {\n  box-sizing: border-box; /* 1 */\n  border-width: 0; /* 2 */\n  border-style: solid; /* 2 */\n  border-color: currentColor; /* 2 */\n}\n::before,\n::after {\n}\n/*\n1. Use a consistent sensible line-height in all browsers.\n2. Prevent adjustments of font size after orientation changes in iOS.\n3. Use a more readable tab size.\n4. Use the user's configured `sans` font-family by default.\n5. Use the user's configured `sans` font-feature-settings by default.\n6. Use the user's configured `sans` font-variation-settings by default.\n7. Disable tap highlights on iOS\n*/\nhtml {\n  line-height: 1.5; /* 1 */\n  -webkit-text-size-adjust: 100%; /* 2 */\n  -moz-tab-size: 4; /* 3 */\n  -o-tab-size: 4;\n     tab-size: 4; /* 3 */\n  font-family: ui-sans-serif, system-ui, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"; /* 4 */\n  font-feature-settings: normal; /* 5 */\n  font-variation-settings: normal; /* 6 */\n  -webkit-tap-highlight-color: transparent; /* 7 */\n}\n/*\n1. Remove the margin in all browsers.\n2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.\n*/\nbody {\n  margin: 0; /* 1 */\n  line-height: inherit; /* 2 */\n}\n/*\n1. Add the correct height in Firefox.\n2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)\n3. Ensure horizontal rules are visible by default.\n*/\nhr {\n  height: 0; /* 1 */\n  color: inherit; /* 2 */\n  border-top-width: 1px; /* 3 */\n}\n/*\nAdd the correct text decoration in Chrome, Edge, and Safari.\n*/\nabbr:where([title]) {\n  -webkit-text-decoration: underline dotted;\n          text-decoration: underline dotted;\n}\n/*\nRemove the default font size and weight for headings.\n*/\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n  font-size: inherit;\n  font-weight: inherit;\n}\n/*\nReset links to optimize for opt-in styling instead of opt-out.\n*/\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n/*\nAdd the correct font weight in Edge and Safari.\n*/\nb,\nstrong {\n  font-weight: bolder;\n}\n/*\n1. Use the user's configured `mono` font-family by default.\n2. Use the user's configured `mono` font-feature-settings by default.\n3. Use the user's configured `mono` font-variation-settings by default.\n4. Correct the odd `em` font sizing in all browsers.\n*/\ncode,\npre {\n  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace; /* 1 */\n  font-feature-settings: normal; /* 2 */\n  font-variation-settings: normal; /* 3 */\n  font-size: 1em; /* 4 */\n}\n/*\nAdd the correct font size in all browsers.\n*/\nsmall {\n  font-size: 80%;\n}\n/*\nPrevent `sub` and `sup` elements from affecting the line height in all browsers.\n*/\nsub {\n  font-size: 75%;\n  line-height: 0;\n  position: relative;\n  vertical-align: baseline;\n}\nsub {\n  bottom: -0.25em;\n}\n/*\n1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)\n2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)\n3. Remove gaps between table borders by default.\n*/\ntable {\n  text-indent: 0; /* 1 */\n  border-color: inherit; /* 2 */\n  border-collapse: collapse; /* 3 */\n}\n/*\n1. Change the font styles in all browsers.\n2. Remove the margin in Firefox and Safari.\n3. Remove default padding in all browsers.\n*/\nbutton,\ninput,\nselect,\ntextarea {\n  font-family: inherit; /* 1 */\n  font-feature-settings: inherit; /* 1 */\n  font-variation-settings: inherit; /* 1 */\n  font-size: 100%; /* 1 */\n  font-weight: inherit; /* 1 */\n  line-height: inherit; /* 1 */\n  letter-spacing: inherit; /* 1 */\n  color: inherit; /* 1 */\n  margin: 0; /* 2 */\n  padding: 0; /* 3 */\n}\n/*\nRemove the inheritance of text transform in Edge and Firefox.\n*/\nbutton,\nselect {\n  text-transform: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Remove default button styles.\n*/\nbutton,\ninput:where([type='button']),\ninput:where([type='submit']) {\n  -webkit-appearance: button; /* 1 */\n  background-color: transparent; /* 2 */\n  background-image: none; /* 2 */\n}\n/*\nUse the modern Firefox focus style for all focusable elements.\n*/\n/*\nRemove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)\n*/\n/*\nAdd the correct vertical alignment in Chrome and Firefox.\n*/\n/*\nCorrect the cursor style of increment and decrement buttons in Safari.\n*/\n::-webkit-inner-spin-button,\n::-webkit-outer-spin-button {\n  height: auto;\n}\n/*\n1. Correct the odd appearance in Chrome and Safari.\n2. Correct the outline style in Safari.\n*/\n[type='search'] {\n  -webkit-appearance: textfield; /* 1 */\n  outline-offset: -2px; /* 2 */\n}\n/*\nRemove the inner padding in Chrome and Safari on macOS.\n*/\n::-webkit-search-decoration {\n  -webkit-appearance: none;\n}\n/*\n1. Correct the inability to style clickable types in iOS and Safari.\n2. Change font properties to `inherit` in Safari.\n*/\n::-webkit-file-upload-button {\n  -webkit-appearance: button; /* 1 */\n  font: inherit; /* 2 */\n}\n/*\nAdd the correct display in Chrome and Safari.\n*/\n/*\nRemoves the default spacing and border for appropriate elements.\n*/\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6,\nhr,\np,\npre {\n  margin: 0;\n}\nfieldset {\n  margin: 0;\n  padding: 0;\n}\nol,\nul,\nmenu {\n  list-style: none;\n  margin: 0;\n  padding: 0;\n}\n/*\nReset default styling for dialogs.\n*/\ndialog {\n  padding: 0;\n}\n/*\nPrevent resizing textareas horizontally by default.\n*/\ntextarea {\n  resize: vertical;\n}\n/*\n1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)\n2. Set the default placeholder color to the user's configured gray 400 color.\n*/\ninput::-moz-placeholder, textarea::-moz-placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\ninput::placeholder,\ntextarea::placeholder {\n  opacity: 1; /* 1 */\n  color: #9ca3af; /* 2 */\n}\n/*\nSet the default cursor for buttons.\n*/\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n/*\nMake sure disabled buttons don't get the pointer cursor.\n*/\n/*\n1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)\n2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)\n   This can trigger a poorly considered lint error in some tools but is included by design.\n*/\nimg,\niframe,\nobject {\n  display: block; /* 1 */\n  vertical-align: middle; /* 2 */\n}\n/*\nConstrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)\n*/\nimg {\n  max-width: 100%;\n  height: auto;\n}\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n:root {\n  --inner-gutter: 8px;\n}\n@media (min-width: 750px) {\n  :root {\n    --inner-gutter: 12px;\n  }\n}\n@media (min-width: 900px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 1024px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 1280px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n@media (min-width: 2200px) {\n  :root {\n    --inner-gutter: 16px;\n  }\n}\n:root {\n}\n@media (min-width: 900px) {\n  :root {\n}\n}\n:root {\n  --sans: Inter, Helvetica, Arial, sans-serif;\n  --f-ui-01-fontFamily: var(--sans);\n  --f-ui-01-fontWeight: 800;\n  --f-ui-01-fontSize: 18px;\n  --f-ui-01-lineHeight: 110%;\n  --f-ui-01-letterSpacing: -0.01em;\n}\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n@media (min-width: 750px) {\n  :root {\n}\n}\n@media (min-width: 900px) {\n  :root {\n}\n}\n@media (min-width: 1024px) {\n  :root {\n}\n}\n.f-ui-01 b, .f-ui-01 strong {\n  font-weight: var(--f-ui-01---bold-weight, bold);\n}\n:root {\n  --grey-300: #e6e6e6;\n  --green-200: #d3ffdc;\n  --yellow-200: #ffffcb;\n  --red-200: #ffe0e1;\n}\n@media (min-width: 750px) {\n  .md\\:grid-line-x > *::before {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .md\\:grid-line-xfull > *::before {\n    content: attr(👻);\n    inset-inline-start: calc(var(--inner-gutter) / -2);\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .md\\:grid-line-x-0 > *::before {\n    content: none;\n  }\n  .md\\:grid-line-y > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .md\\:grid-line-yfull > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: calc(var(--inner-gutter) / -1);\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .md\\:grid-line-y-0 > *::after {\n    content: none;\n  }\n}\n@media (min-width: 900px) {\n  .lg\\:grid-line-x > *::before {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: 0;\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .lg\\:grid-line-xfull > *::before {\n    content: attr(👻);\n    inset-inline-start: calc(var(--inner-gutter) / -2);\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: calc(var(--inner-gutter) / -2);\n    border-top: 0 solid transparent;\n    border-bottom: 0 solid transparent;\n  }\n  .lg\\:grid-line-x-0 > *::before {\n    content: none;\n  }\n  .lg\\:grid-line-y > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: 0;\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .lg\\:grid-line-yfull > *::after {\n    content: attr(👻);\n    inset-inline-start: 0;\n    inset-inline-end: calc(var(--inner-gutter) / -2);\n    top: calc(var(--inner-gutter) / -1);\n    bottom: 0;\n    border-inline-start: 0 solid transparent;\n    border-inline-end: 0 solid transparent;\n  }\n  .lg\\:grid-line-y-0 > *::after {\n    content: none;\n  }\n}\n.border-inside {\n  position: relative;\n\n    &::after {\n    pointer-events: none;\n  }\n\n    &::after {\n    position: absolute;\n  }\n\n    &::after {\n    inset: 0rem;\n  }\n\n    &::after {\n    z-index: 1;\n  }\n\n    &::after {\n    border-radius: 8px;\n  }\n\n    &::after {\n    border-width: 1px;\n  }\n\n    &::after {\n    border-width: 2px;\n  }\n\n    &::after {\n    border-color: rgba(0, 0, 0, .1 );\n  }\n\n    &::after {\n      content: '';\n    }\n}\n/** region TRANSITIONS */\n/** endregion */\n/* region FOCUS */\n/* endregion */\n/* region BG */\n/* endregion */\n/*region shadow*/\n/*endregion*/\n.flex {\n  display: flex;\n}\n.w-full {\n  width: 100%;\n}\n.flex-row {\n  flex-direction: row;\n}\n.items-center {\n  align-items: center;\n}\n.justify-between {\n  justify-content: space-between;\n}\n.gap-x-12 {\n  -moz-column-gap: 0.75rem;\n       column-gap: 0.75rem;\n}\n.space-y-12 > :not([hidden]) ~ :not([hidden]) {\n  --tw-space-y-reverse: 0;\n  margin-top: calc(0.75rem * calc(1 - var(--tw-space-y-reverse)));\n  margin-bottom: calc(0.75rem * var(--tw-space-y-reverse));\n}\n.rounded-lg {\n  border-radius: 16px;\n}\n.bg-dark {\n  background-color: var(--grey-300);\n}\n.bg-error {\n  background-color: var(--red-200);\n}\n.bg-success {\n  background-color: var(--green-200);\n}\n.bg-warning {\n  background-color: var(--yellow-200);\n}\n.p-16 {\n  padding: 1rem;\n}\n.p-20 {\n  padding: 1.25rem;\n}\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n.px-20 {\n  padding-left: 1.25rem;\n  padding-right: 1.25rem;\n}\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n.py-20 {\n  padding-top: 1.25rem;\n  padding-bottom: 1.25rem;\n}\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n.pr-12 {\n  padding-right: 0.75rem;\n}\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n[class*=underline-] {\n  text-decoration-line: underline;\n}\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05 );\n}\n";
+const EdsAlertStyle0 = edsAlertCss;
+
+const alertStyles = index$1.cva(['w-full bg-dark rounded-lg border-inside after:border-softest after:rounded-lg'], {
+    variants: {
+        intent: {
+            default: '',
+            warning: 'bg-warning',
+            error: 'bg-error',
+            success: 'bg-success'
+        },
+        direction: {
+            vertical: 'space-y-12',
+            horizontal: 'flex flex-row items-center justify-between gap-x-12'
+        },
+        withBtn: {
+            false: '',
+            true: ''
+        }
+    },
+    compoundVariants: [
+        {
+            direction: 'horizontal',
+            withBtn: true,
+            class: 'px-20 pr-12 py-12'
+        },
+        {
+            direction: 'horizontal',
+            withBtn: false,
+            class: 'p-20'
+        },
+        {
+            direction: 'vertical',
+            withBtn: true,
+            class: 'p-16'
+        },
+        {
+            direction: 'vertical',
+            withBtn: false,
+            class: 'px-12 py-20'
+        }
+    ],
+    defaultVariants: {
+        intent: 'default',
+        direction: 'horizontal'
+    }
+});
+const EdsAlert = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.message = undefined;
+        this.pressableLabel = undefined;
+        this.pressableUrl = undefined;
+        this.direction = 'horizontal';
+        this.intent = 'default';
+        this.withBtn = false;
+    }
+    componentWillLoad() {
+        this.withBtn = Boolean(this.pressableLabel);
+    }
+    componentDidLoad() {
+        var _a;
+        // Query for the 'eds-link' element inside the shadow root.
+        const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
+        if (lnk) {
+            this.emitContext(lnk);
+        }
+    }
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    render() {
+        return (index.h("div", { key: '519742081f681d6d67bc1b42c89fe1b6d005fe0f', class: alertStyles({
+                intent: this.intent,
+                direction: this.direction,
+                withBtn: this.withBtn
+            }), role: "alert" }, index.h("p", { key: '6a5d11fdc2a975512b12c307286b0a8b06998bec', class: "f-ui-01 py-8" }, this.message), this.withBtn &&
+            (this.pressableUrl ? (index.h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : null)));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsAlert.style = EdsAlertStyle0;
+
+exports.eds_alert = EdsAlert;

package/dist/cjs/eds-block-break.cjs.entry.js

@@ -0,0 +1,21 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+
+const edsBlockBreakCss = ".border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-softest{border-color:rgba(0, 0, 0, .05)}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.w-full{width:100%}.border-t-2{border-top-width:2px}";
+const EdsBlockBreakStyle0 = edsBlockBreakCss;
+
+const EdsBlockBreak = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.extraClass = '';
+    }
+    render() {
+        return index.h("hr", { key: '8cb39dda5d7f909b459390fe7e3f86dfd147ba98', class: `border-softer my-20 inline-block w-full border-t-2 ${this.extraClass}` });
+    }
+};
+EdsBlockBreak.style = EdsBlockBreakStyle0;
+
+exports.eds_block_break = EdsBlockBreak;

package/dist/cjs/eds-breadcrumb.cjs.entry.js

@@ -0,0 +1,149 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+
+const edsBreadcrumbCss = "blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}fieldset{margin:0;padding:0}legend{padding:0}ol,ul,menu{list-style:none;margin:0;padding:0}.hidden{display:none}.block{display:block}.inline-block{display:inline-block}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.space-x-2>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.125rem * var(--tw-space-x-reverse));margin-left:calc(0.125rem * calc(1 - var(--tw-space-x-reverse)))}.px-2{padding-left:0.125rem;padding-right:0.125rem}.w-20{width:1.25rem}.w-28{width:1.75rem}.w-32{width:2rem}.w-44{width:2.75rem}.h-20{height:1.25rem}.h-24{height:1.5rem}.h-28{height:1.75rem}.h-32{height:2rem}@media (min-width: 750px){.md\\:block{display:block}}";
+const EdsBreadcrumbStyle0 = edsBreadcrumbCss;
+
+const EdsBreadcrumb = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Updates the maximum number of visible items and tracks if the screen is small.
+         */
+        this.updateScreenSize = () => {
+            const width = window.innerWidth;
+            if (width < 769) {
+                this.maxVisibleItems = 3;
+                this.isSmallScreen = true;
+            }
+            else if (width <= 1024) {
+                this.maxVisibleItems = 4;
+                this.isSmallScreen = true;
+            }
+            else {
+                this.maxVisibleItems = 6;
+                this.isSmallScreen = false;
+            }
+        };
+        this.items = [];
+        this.intent = 'ghost';
+        this.parsedItems = [];
+        this.isSmallScreen = false;
+        this.maxVisibleItems = 6;
+    }
+    /**
+     * 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 = [];
+        }
+    }
+    /**
+     * Lifecycle method that runs when the component is about to be loaded.
+     * It parses the initial `items` prop value.
+     */
+    componentWillLoad() {
+        this.parseItems(this.items);
+        this.updateScreenSize();
+        window.addEventListener('resize', this.updateScreenSize);
+    }
+    disconnectedCallback() {
+        window.removeEventListener('resize', this.updateScreenSize);
+    }
+    /**
+     * Lifecycle method that runs when the component has fully loaded.
+     * It emits a custom event for each `eds-link` element contained within the breadcrumb.
+     */
+    componentDidLoad() {
+        var _a;
+        const links = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-link');
+        links === null || links === void 0 ? void 0 : links.forEach((link) => {
+            this.emitContext(link);
+        });
+    }
+    /**
+     * Emits a custom event called `parentContext` for a given link element.
+     * This event provides context information about the breadcrumb component.
+     *
+     * @param linkElement - The link element to which the event will be dispatched.
+     */
+    emitContext(linkElement) {
+        const event = new CustomEvent('parentContext', {
+            detail: {
+                componentName: this.el.tagName.toLowerCase(),
+                identifier: null
+            }
+        });
+        linkElement.dispatchEvent(event);
+    }
+    /**
+     * Returns breadcrumb items with potential truncation if there are too many.
+     * It inserts an ellipsis item where necessary.
+     */
+    getTruncatedItems() {
+        const totalItems = this.parsedItems.length;
+        const ellipsis = { label: '...', url: '', isHidden: true };
+        if (totalItems > this.maxVisibleItems) {
+            const firstItem = this.parsedItems[0];
+            const lastItems = this.parsedItems.slice(-2);
+            if (this.maxVisibleItems === 3) {
+                return [firstItem, ellipsis, ...lastItems];
+            }
+            else if (this.maxVisibleItems === 4) {
+                const middleItem = this.parsedItems[Math.floor(totalItems / 2)];
+                return [firstItem, middleItem, ellipsis, ...lastItems];
+            }
+        }
+        return this.parsedItems;
+    }
+    /**
+     * Helper to determine the display label and full label.
+     * If the label is longer than 15 characters and the item is not the current (last) item,
+     * we display a truncated version but use the full label for aria attributes.
+     */
+    getLabels(item, isCurrent) {
+        if (!isCurrent && item.label.length > 15) {
+            return { displayLabel: `${item.label.slice(0, 15)}...`, fullLabel: item.label };
+        }
+        return { displayLabel: item.label, fullLabel: item.label };
+    }
+    /**
+     * Render method for the breadcrumb component.
+     * It creates a navigation element with an ordered list of breadcrumb links.
+     * The last link is marked as the current page.
+     */
+    render() {
+        const itemsToRender = this.getTruncatedItems();
+        return (index.h("nav", { key: 'd177957e1b3218c21991bbdc9636a8e32befe990', "aria-label": "Breadcrumb" }, index.h("ol", { key: 'd10336ddee99b9fb84d17e53093c57c6a025982f', class: "flex items-center space-x-2" }, itemsToRender.map((item, index$1) => {
+            const isLast = index$1 === itemsToRender.length - 1;
+            return (index.h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
+                const { displayLabel, fullLabel } = this.getLabels(item, isLast);
+                return (index.h("eds-link", Object.assign({ label: displayLabel, url: item.url, intent: this.intent, current: isLast, "aria-label": fullLabel, size: "small", "icon-small": "false" }, (isLast ? { 'aria-current': 'page' } : {}))));
+            })()) : (index.h("span", { class: "truncate px-2", "aria-hidden": "true" }, "...")), !isLast && !item.isHidden && (index.h("eds-icon-wrapper", { icon: "chevron-right", class: "w-20 h-20" }))));
+        }))));
+    }
+    get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "items": ["parseItems"]
+    }; }
+};
+EdsBreadcrumb.style = EdsBreadcrumbStyle0;
+
+exports.eds_breadcrumb = EdsBreadcrumb;

package/dist/cjs/eds-card-project.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const analytics = require('./analytics-223ea8e5.js');
+const analytics = require('./analytics-d8fb3fdd.js');
 const color = require('./color-c00146a8.js');
 require('./index-ab9fbefe.js');
 

package/dist/cjs/eds-card-tool.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const analytics = require('./analytics-223ea8e5.js');
+const analytics = require('./analytics-d8fb3fdd.js');
 
 const edsCardToolCss = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
 const EdsCardToolStyle0 = edsCardToolCss;

package/dist/cjs/eds-cookies-preference.cjs.entry.js

@@ -0,0 +1,39 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+
+const edsCookiesPreferenceCss = "";
+const EdsCookiesPreferenceStyle0 = edsCookiesPreferenceCss;
+
+const EdsCookiesPreference = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.buttonText = 'Cookies Preferences';
+        this.intent = undefined;
+        this.showMatomoNotice = false;
+        this.noticeKey = 0;
+    }
+    /**
+     * Always shows the eds-matomo-notice popup.
+     * Every click removes the "matomo-deferred" key and forces a remount.
+     */
+    toggleCookiesPopup() {
+        // Remove the key from session storage so that the notice will run its checks (or be forced to show)
+        sessionStorage.removeItem('matomo-deferred');
+        if (this.showMatomoNotice) {
+            // Force a remount by changing the key
+            this.noticeKey = this.noticeKey + 1;
+        }
+        else {
+            this.showMatomoNotice = true;
+        }
+    }
+    render() {
+        return (index.h("div", { key: 'ca5d44522f94e9ea009c657c5eae6e357cd0d13a' }, index.h("eds-link", { key: '563a369e2ed44d08a6dd47922c1c1c888e81543a', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && index.h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+    }
+};
+EdsCookiesPreference.style = EdsCookiesPreferenceStyle0;
+
+exports.eds_cookies_preference = EdsCookiesPreference;

package/dist/cjs/eds-dropdown_2.cjs.entry.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 const index = require('./index-f08e4f5c.js');
-const analytics = require('./analytics-223ea8e5.js');
+const analytics = require('./analytics-d8fb3fdd.js');
 
 const edsDropdownCss = ".z-focus{z-index:99}.relative{position:relative}.shadow-small{--tw-shadow:0px 1.5px 2px rgba(0, 0, 0, 0.1);--tw-shadow-colored:0px 1.5px 2px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.bg-inverse{background-color:var(--white)}.border-softest{border:2px solid rgba(0, 0, 0, .05)}.z-10{z-index:10}.z-on-top{z-index:99999}.absolute{position:absolute}.top-full{top:100%}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.gap-y-4{row-gap:0.25rem}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-8{padding:0.5rem}.left-0{left:0rem}.left-1\\/2{left:50%}.left-4{left:0.25rem}.left-\\[4px\\]{left:4px}.right-0{right:0rem}.right-4{right:0.25rem}.right-8{right:0.5rem}";
 const EdsDropdownStyle0 = edsDropdownCss;
@@ -146,7 +146,7 @@ const EdsUserModal = class {
     }
     render() {
         var _a, _b, _c, _d, _e;
-        return (index.h("div", { key: '4a80335b6a59b9653130ca75a6e42c04fce68f4f', class: "min-w-[280px] p-8" }, index.h("div", { key: '9c97f6be46216587692d4852174cecfaacb70593', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, index.h("eds-avatar", { key: 'c778f6bdfb21068ca7c2deff6e298f61af6dbc67', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), index.h("div", { key: '7f453546c9cc54597069abb3e4b50312fe7bf364', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (index.h("p", { key: '34e080ef159535820c09378701de0e6f4fd96009', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && index.h("p", { key: '2f85764e7d015dc3f3b22ca8a07126f8f57216ef', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && index.h("p", { key: '002dec51e979c29f2343f55e004449e4cee4075c', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), index.h("div", { key: '740b78c504257fb755ba7ba04dd25f023d37ed33', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, index.h("div", { key: 'ac307937bdd3fc86cce502e5eeb3e922d931f418', class: "border-softer mb-10 border-b-2 pb-16" }, index.h("eds-link", { key: 'bdd0f1ef62ac78ffb1b40ed6873475df360cec66', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), index.h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (index.h("eds-link", { key: 'd73016ad71f3b356b7fb7d0a2a84124eabb05da5', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
+        return (index.h("div", { key: '866e4e08b5a5330d341845c7cd68f18845732bb6', class: "min-w-[280px] p-8" }, index.h("div", { key: 'c3c0c56a0ba0bb035efbc474dacc69454f2f9831', class: "flex gap-x-16 pb-16 border-b-2 border-softer" }, index.h("eds-avatar", { key: '053e545eb7b8f66b9b9463f77ac89083b2bc87a4', "first-name": (_a = this.parsedUser) === null || _a === void 0 ? void 0 : _a.firstname, "last-name": (_b = this.parsedUser) === null || _b === void 0 ? void 0 : _b.lastname, initials: this.initials, color: "grey", rounded: true, "initials-strong": true }), index.h("div", { key: 'c2d3a51f5aa92dda20058b51aaab3405a85dfbc0', class: "max-w-full" }, ((_c = this.parsedUser) === null || _c === void 0 ? void 0 : _c.fullname) && (index.h("p", { key: 'fcc11680037eb282316cfde3988beb7550a51059', class: "f-ui-01 text-default w-full text-ellipsis" }, this.parsedUser.fullname)), ((_d = this.parsedUser) === null || _d === void 0 ? void 0 : _d.username) && index.h("p", { key: '2f6aac63baecb3da750f3eb9a09f8793120d8977', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.username), ((_e = this.parsedUser) === null || _e === void 0 ? void 0 : _e.email) && index.h("p", { key: '04f3cf2dab10351bc52c94f53c6e9b75d3d34fe7', class: "f-ui-03-light text-light mt-4" }, this.parsedUser.email))), index.h("div", { key: 'b5bb3171c338891669251b8cde0cdbc810562065', class: "text-default mt-16 flex w-full flex-col gap-y-8" }, index.h("div", { key: '7020f1d94ad9ed10d8b1e1fce88837c70ef310b8', class: "border-softer mb-10 border-b-2 pb-16" }, index.h("eds-link", { key: '26946fa26bd53953e99f2f61b4d9f47e60f5dc6f', label: "My EBRAINS", "aria-label": "My EBRAINS", url: "https://www.ebrains.eu/dashboard", intent: "primary", "extra-class": "w-full", external: true })), index.h("eds-link", { key: 1, label: "Account Settings", url: "https://iam.ebrains.eu/auth/realms/hbp/account/", intent: "secondary", icon: "arrow-diagonal", external: true, "extra-class": "w-full" }), this.hasLogout && (index.h("eds-link", { key: 'e53f2b7588fea91fd16c0effe81609e1ded97304', label: "Sign out", intent: "tertiary", "extra-class": "w-full justify-center", onClick: () => this.onLogout && this.onLogout() })))));
     }
     static get watchers() { return {
         "user": ["parseUserProp"],

package/dist/cjs/eds-footer.cjs.entry.js

@@ -0,0 +1,41 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+const index = require('./index-f08e4f5c.js');
+
+const edsFooterCss = "";
+const EdsFooterStyle0 = edsFooterCss;
+
+const EdsFooter = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        /**
+         * Scrolls the page smoothly back to the top.
+         * Called when the "Back to top" button is clicked.
+         * @private
+         */
+        this.backToTop = () => {
+            window.scrollTo({ top: 0, behavior: 'smooth' });
+        };
+        this.extraClass = '';
+        this.social = false;
+        this.enableScrollTop = false;
+        this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
+        this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
+        this.showMatomoNotice = false;
+    }
+    /**
+     * Renders the footer component with optional sections and elements,
+     * including social network links, a Horizon Europe funding acknowledgment, and
+     * legal links such as "Cookies Preferences" and copyright information.
+     *
+     * @returns {JSX.Element} The rendered JSX for the footer component.
+     */
+    render() {
+        return (index.h("footer", { key: '9a7256325386a5072e9f1e391d838bb38458d99f', class: `${this.extraClass} pb-banner` }, this.social ? (index.h("div", { class: "border-softest border-t-2 pt-20 pb-28 md:pt-28" }, index.h("div", { class: "container pb-20 xl:pb-40 " }, index.h("div", { class: "grid-layout" }, index.h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, index.h("eds-social-networks", { class: "mt-28" })), index.h("nav", { "aria-label": "Secondary nav", class: "grid-col-span-12 lg:grid-col-span-6 lg:grid-col-start-7 grid-layout mt-28 gap-y-12 lg:mt-0" }))))) : null, index.h("div", { key: '747d4708e90c13fe9e5aa234eaba182df100fca9', class: `border-softest ${this.social ? 'border-t-2' : ''} pt-20 pb-28 md:pt-28` }, index.h("div", { key: '3fecf340c536bb64aa98fd04c26c5b47d146630b', class: "container flex flex-wrap items-center gap-20 lg:flex-nowrap" }, index.h("div", { key: '6b7f167ac50c6aef9c76e56634a7228585c211db', class: "flex items-center gap-x-12" }, index.h("a", { key: '8e496d31c4b883a867b5f2c6a5fab8a60899470a', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-2020_en", "aria-label": "Learn about Horizon 2020 funding" }, index.h("eds-img", { key: 'b3cdfc2cc428951d58fe5ae4f1fe1992fbded7f7', width: 54, height: 41, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), index.h("div", { key: '8c3a9f55f07b44ad633b11a1d4faa8396a5ae30a', class: "order-last w-full lg:order-none lg:w-auto" }, index.h("div", { key: 'c268c107f6be692756d15a8f096e1a86df7bb62a', class: "f-ui-04 text-light" }, index.h("p", { key: '528014cafcd1b498efa01482934b54c44dd03bd6' }, this.fundedBy), index.h("div", { key: 'ee5baffcf8f801b7480c8158b30777329699f57f', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, index.h("span", { key: '79e600b799480904f47261be78262f344ada967b', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline" }, "\u00A9 ", this.rightsReserved)))), index.h("div", { key: '6bde5399c1044e0d85b71c9fab7e3e4c8b93e224', class: "ml-auto pl-12" }, this.enableScrollTop ? (index.h("eds-button", { "aria-label": "Back to top", intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop })) : null)))));
+    }
+};
+EdsFooter.style = EdsFooterStyle0;
+
+exports.eds_footer = EdsFooter;