@ebrains/react 0.5.0-alpha.0 → 0.7.0-alpha.0

package/eds-alert.entry.esm.js

@@ -0,0 +1,104 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { c as cva } from './index-39c58238.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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 = 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) {
+    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 h("div", {
+      key: '519742081f681d6d67bc1b42c89fe1b6d005fe0f',
+      class: alertStyles({
+        intent: this.intent,
+        direction: this.direction,
+        withBtn: this.withBtn
+      }),
+      role: "alert"
+    }, h("p", {
+      key: '6a5d11fdc2a975512b12c307286b0a8b06998bec',
+      class: "f-ui-01 py-8"
+    }, this.message), this.withBtn && (this.pressableUrl ? h("eds-link", {
+      class: "eds-alert-link",
+      label: this.pressableLabel,
+      url: this.pressableUrl,
+      intent: "secondary",
+      external: true
+    }) : null));
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsAlert.style = EdsAlertStyle0;
+
+export { EdsAlert as eds_alert };

package/eds-app-root.entry.esm.js

@@ -0,0 +1,53 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const EdsAppRoot = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.isAuthenticated = false;
+  }
+  componentWillLoad() {
+    // Create a promise for the initKeycloak event.
+    const initKeycloakPromise = new Promise(resolve => {
+      document.addEventListener('initKeycloak', event => {
+        //console.log('initKeycloak event received:', event.detail);
+        resolve(event.detail);
+      }, {
+        once: true
+      });
+    });
+    // Create a promise for the authStatusChanged event.
+    const authStatusPromise = new Promise(resolve => {
+      document.addEventListener('authStatusChanged', event => {
+        var _a;
+        this.isAuthenticated = (_a = event.detail) === null || _a === void 0 ? void 0 : _a.authenticated;
+        //console.log('authStatusChanged event received:', event.detail);
+        resolve(event.detail);
+      }, {
+        once: true
+      });
+    });
+    // Combine both promises. The splash screen will hide only when both have resolved.
+    this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
+  }
+  render() {
+    return h("div", {
+      key: 'f7ff644cea84bfc78190afcfa33f1f6d6c6de29a'
+    }, h("eds-splash-screen", {
+      key: '5e04f163eafe8f0d55394b8f508386bac013907e',
+      inverse: true,
+      initPromise: this.combinedInitPromise
+    }), h("eds-login", {
+      key: '94c9dc0546e48fe8f9e6fc17fde9dcbf75fbe3bc',
+      "keycloak-url": "http://localhost:8080",
+      "keycloak-realm": "nigeor-realm",
+      "keycloak-client-id": "stencil-app"
+    }), h("main", {
+      key: '975cfb32924ecf0a4bb7d8f4788792eae500e166'
+    }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in.")));
+  }
+};
+
+export { EdsAppRoot as eds_app_root };

package/eds-avatar_4.entry.esm.js

@@ -168,23 +168,15 @@ const EdsTag = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.label = undefined;
-    this.ariaLabel = '';
     this.intent = 'default';
   }
-  /**
-   * Render the component.
-   * @returns The rendered HTML for the tag component with the applied styles and label.
-   */
   render() {
-    var _a;
     const classes = tagStyles({
       intent: this.intent
     });
-    const accessibleLabel = ((_a = this.ariaLabel) === null || _a === void 0 ? void 0 : _a.length) ? this.ariaLabel : this.label;
     return h("span", {
-      key: '6a517f42aeb641c95d96ecd6c3090a317a3195c6',
-      class: classes,
-      "aria-label": accessibleLabel
+      key: '2f4b0011094538aaa0a7cc855eadc1b39c9dc028',
+      class: classes
     }, this.label);
   }
 };

package/eds-breadcrumb.entry.esm.js

@@ -0,0 +1,171 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+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) {
+    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) {
+    this.parsedItems = parseData(newValue);
+  }
+  /**
+   * 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 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);
+        return 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'
+        } : {}));
+      })() : h("span", {
+        class: "truncate px-2",
+        "aria-hidden": "true"
+      }, "..."), !isLast && !item.isHidden && h("eds-icon-wrapper", {
+        icon: "chevron-right",
+        class: "w-20 h-20"
+      }));
+    })));
+  }
+  get el() {
+    return getElement(this);
+  }
+  static get watchers() {
+    return {
+      "items": ["parseItems"]
+    };
+  }
+};
+EdsBreadcrumb.style = EdsBreadcrumbStyle0;
+
+export { EdsBreadcrumb as eds_breadcrumb };

package/eds-card-generic.entry.esm.js

@@ -1,5 +1,6 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -57,18 +58,7 @@ const EdsCardGeneric = class {
    * @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 [this.description ? this.tiny ? 'min-h-120' : 'min-h-156' : 'h-auto', this.bg ? 'bg-inverse' : 'bg-default', this.withHover ? 'effect-shadow hover:shadow-hover cursor-pointer' : '', 'border-softer effect-focus-within relative flex grow flex-col rounded-lg border-2 p-16'].join(' ');
@@ -85,18 +75,18 @@ const EdsCardGeneric = class {
   }
   render() {
     return h("article", {
-      key: 'dcb7cea87bfb52f8886f7ee3dbc3484d615bc00c',
+      key: '440a448c841370838c0c66610bd1266b46f66541',
       class: this.articleClasses(),
       onClick: () => this.handleClick()
     }, h("eds-card-title", {
-      key: '94dd6ff2679ce9ac4d25ec921cd1162b1584e4fd',
+      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: '433c4fe3a518153d89d48af54455286fa415a688',
+      key: '4b304cc3c65a42b3b1bcbebd9968c45e79cdabf7',
       class: "mt-8",
       "truncate-lines": "3",
       description: this.description
@@ -107,7 +97,7 @@ const EdsCardGeneric = class {
       picture: this.avatar,
       initials: this.shortAbbreviation
     }) : null, h("div", {
-      key: '97b75afb4b8de1183d4b212054ff556ba3db8fcb',
+      key: 'cb5c191f6c190fb6edb46446187dbf6b8c1b778b',
       class: "flex flex-wrap gap-y-4"
     }, this.parsedTags.map((tag, index) => h("eds-tag", {
       key: index,

package/eds-card-project.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
 import 'react';
 import 'react/jsx-runtime';

package/eds-card-section.entry.esm.js

@@ -1,15 +1,16 @@
 import { r as registerInstance, h } from './index.esm2.js';
+import { p as parseData } from './sharedUtils-a550989c.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsCardSectionCss = ".w-full{width:100%}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.gap-y-4{row-gap:0.25rem}.gap-y-8{row-gap:0.5rem}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 750px){.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.md\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-8-cols>*{--container-grid-columns:8}.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:block{display:block}.lg\\:flex{display:flex}.lg\\:hidden{display:none}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}";
+const edsCardSectionCss = "ol,ul,menu{list-style:none;margin:0;padding:0}.w-full{width:100%}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.grid-cols-4[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-4[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1)::before{inset-inline-start:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+4)::before{inset-inline-end:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1):nth-last-child(-n+4)::before{border-bottom-width:0}.grid-cols-4[class*=\"grid-line-x\"]>*:nth-child(4n+1):nth-last-child(-n+4)~*::before{border-bottom-width:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+4)::after{border-inline-end-width:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+4)::after{top:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+1):nth-last-child(-n+4)::after{bottom:0}.grid-cols-4[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(4n+1):nth-last-child(-n+4)~li::after{bottom:0}.grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.gap-y-4{row-gap:0.25rem}.gap-y-8{row-gap:0.5rem}.flex-row{flex-direction:row}.flex-row-reverse{flex-direction:row-reverse}.flex-col{flex-direction:column}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}@media (min-width: 750px){.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:gap-y-12{row-gap:0.75rem}.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 750px){.md\\:grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.md\\:grid-col-span-2{--container-grid-columns:2;grid-column:span 2 / span 2}.md\\:grid-col-span-3{--container-grid-columns:3;grid-column:span 3 / span 3}.md\\:grid-col-span-4{--container-grid-columns:4;grid-column:span 4 / span 4}.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.md\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.md\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-8-cols{width:calc(((8 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (8 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-8-cols>*{--container-grid-columns:8}.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * 100%) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.cols-container>.lg\\:w-10-cols{width:calc(((10 / var(--container-grid-columns, var(--grid-columns))) * (100% - var(--inner-gutter))) - (var(--inner-gutter) - (10 / var(--container-grid-columns, var(--grid-columns)) * var(--inner-gutter))))}.lg\\:w-10-cols>*{--container-grid-columns:10}}@media (min-width: 900px){.lg\\:order-last{order:9999}.lg\\:order-none{order:0}.lg\\:mt-0{margin-top:0rem}.lg\\:block{display:block}.lg\\:flex{display:flex}.lg\\:hidden{display:none}.lg\\:w-\\[150px\\]{width:150px}.lg\\:w-auto{width:auto}.lg\\:max-w-\\[720px\\]{max-width:720px}.lg\\:flex-row{flex-direction:row}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:gap-y-16{row-gap:1rem}.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}.lg\\:\\!pl-12{padding-left:0.75rem !important}.lg\\:\\!pr-12{padding-right:0.75rem !important}}";
 const EdsCardSectionStyle0 = edsCardSectionCss;
 const EdsCardSection = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.cards = [];
-    this.cols = 4;
+    this.occupyCols = 1;
   }
   /**
    * Parses the `cards` JSON string prop into an array of card objects.
@@ -18,22 +19,7 @@ const EdsCardSection = class {
    * @returns {any[]} An array of parsed card objects.
    */
   get parsedCards() {
-    // If it's already an array, return it immediately.
-    if (Array.isArray(this.cards)) {
-      return this.cards;
-    }
-    if (typeof this.cards === 'object') {
-      return this.cards;
-    } else if (typeof this.cards === 'string') {
-      try {
-        return JSON.parse(this.cards);
-      } catch (e) {
-        // eslint-disable-next-line
-        console.error('Error parsing cards prop:', e);
-        return [];
-      }
-    }
-    return [];
+    return parseData(this.cards);
   }
   /**
    * Renders the card section as a grid layout.
@@ -44,13 +30,13 @@ const EdsCardSection = class {
    */
   render() {
     return h("section", {
-      key: '1f221e1ec7c3cdd0e3aed18f6f930c2c5456c64b',
+      key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8',
       class: "w-full"
     }, h("ul", {
-      key: '36f984994bb2dc247475c20422f7e6e7da7d058d',
-      class: "grid-layout gap-y-8 md:gap-y-12 lg:gap-y-16"
+      key: 'd4eb8d8492a67f7491535953e0e37172fc9e09ff',
+      class: "grid-layout grid-cols-4 gap-y-8 md:gap-y-12 lg:gap-y-16"
     }, this.parsedCards.map(card => h("li", {
-      class: `grid-col-span-12 md:grid-col-span-${this.cols} flex flex-col`
+      class: `grid-col-span-4 md:grid-col-span-${this.occupyCols} flex flex-col`
     }, h("eds-card-generic", {
       cardTitle: card.title,
       description: card.description,

package/eds-card-tool.entry.esm.js

@@ -1,5 +1,5 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-1cde8e4a.esm.js';
+import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';

package/eds-components-section.entry.esm.js

@@ -149,7 +149,7 @@ const EdsComponentsSection = class {
   }
   render() {
     return h("div", {
-      key: '7e582a0eeafc2687229454532b5a7f66f91c1856',
+      key: '69eda93b8845c5fdf5edc0f58ede763866b5f8c7',
       class: "container"
     }, this.renderContent());
   }

package/eds-cookies-preference.entry.esm.js

@@ -0,0 +1,47 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsCookiesPreferenceCss = "";
+const EdsCookiesPreferenceStyle0 = edsCookiesPreferenceCss;
+const EdsCookiesPreference = class {
+  constructor(hostRef) {
+    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 h("div", {
+      key: '48f67648644ae9c8e645791ad3cbba5491866dc5'
+    }, h("eds-link", {
+      key: '50154721f0f44e811ebe362e18bcf8cfb77b8f64',
+      size: "small",
+      intent: this.intent,
+      label: this.buttonText,
+      onClick: () => this.toggleCookiesPopup()
+    }), this.showMatomoNotice && h("eds-matomo-notice", {
+      "force-show": true,
+      key: this.noticeKey
+    }));
+  }
+};
+EdsCookiesPreference.style = EdsCookiesPreferenceStyle0;
+
+export { EdsCookiesPreference as eds_cookies_preference };

package/eds-docs-palettes.entry.esm.js

@@ -20,7 +20,7 @@ const EdsDocsPalettes = class {
   }
   render() {
     return h("div", {
-      key: 'e8cd71caa7b23cc4dc28c694ecb9f13e3fd4170a',
+      key: '80f0922a40e212252a858b019d88f104defc2632',
       class: "container"
     }, this.renderContent());
   }

package/eds-docs-tokens.entry.esm.js

@@ -36,7 +36,7 @@ const EdsDocsContent = class {
   }
   render() {
     return h("div", {
-      key: 'b140f7650e5e01711dc0778b04af83f9d004efc7',
+      key: 'cf676cf54781de4a4f8b75d174201d24d30d3538',
       class: "container"
     }, this.renderContent());
   }