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

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

@@ -0,0 +1,185 @@
+import { r as registerInstance, h } from './index.esm2.js';
+import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
+import { c as cva } from './index-39c58238.esm.js';
+import 'react';
+import 'react/jsx-runtime';
+import 'react-dom';
+
+const edsAvatarCss = ".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: 2px solid rgba(0, 0, 0, .1);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-pill {\n    &::after {\n        border-radius: 100px;\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.border-inside-inverse {\n    &::after {\n        border: 2px solid rgba(255, 255, 255, 0.3);\n    }\n\n    &::after {\n        content: '';\n    }\n}\n\n.aspect-1x1 {\n    aspect-ratio: 1/1;\n}\n\n.flex {\n    display: flex;\n}\n\n.inline-flex {\n    display: inline-flex;\n}\n\n.items-center {\n    align-items: center;\n}\n\n.justify-center {\n    justify-content: center;\n}\n\n.overflow-hidden {\n    overflow: hidden;\n}\n\n.px-4 {\n    padding-left: 0.25rem;\n    padding-right: 0.25rem;\n}\n\n.rounded-pill {\n    border-radius: 100px;\n}\n\n.rounded-sm {\n    border-radius: 8px;\n}\n\n.rounded-xs {\n    border-radius: 4px;\n}\n\n\n.bg-dark {\n    background-color: var(--grey-300);\n}\n\n.bg-darker {\n    background-color: var(--grey-400);\n}\n\n.bg-stronger {\n    background-color: var(--grey-900);\n}\n\n.bg-strongest {\n    background-color: var(--black);\n}\n\n.text-accent {\n    color: var(--green-500);\n}\n\n.text-default {\n    color: var(--black);\n}\n\n.\\!no-underline {\n    text-decoration-line: none !important;\n}\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\n.w-32 {\n    width: 2rem;\n}\n\n.w-44 {\n    width: 2.75rem;\n}\n\n.w-\\[54px\\] {\n    width: 54px;\n}";
+const EdsAvatarStyle0 = edsAvatarCss;
+const EdsAvatar = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.firstName = 'User';
+    this.lastName = 'Avatar';
+    this.picture = undefined;
+    this.initials = undefined;
+    this.color = undefined;
+    this.rounded = false;
+    this.initialsStrong = false;
+  }
+  /**
+   * Computed initials based on the provided `initials` prop or derived from `firstName` and `lastName`.
+   * @returns {string | undefined} Initials for display in the avatar.
+   */
+  get computedInitials() {
+    if (this.initials) {
+      return (this.initials.match(/.{1,3}/g) || [])[0] || '';
+    } else if (this.firstName && this.lastName) {
+      return `${this.firstName.charAt(0)}${this.lastName.charAt(0)}`.toUpperCase();
+    }
+    return undefined;
+  }
+  /**
+   * Computes the CSS classes for the avatar container based on provided props like `rounded`, `color`, and `picture`.
+   * @returns {string} List of CSS classes to apply to the avatar container.
+   */
+  get containerClasses() {
+    return ['border-inside', 'aspect-1x1', 'flex', 'items-center', 'justify-center', 'overflow-hidden', this.picture ? '' : 'px-4', this.rounded ? 'rounded-pill border-inside-pill w-32' : 'w-[54px] rounded-sm', this.color ? 'border-inside-inverse' : '', this.color === 'grey' ? 'bg-dark' : this.color && !this.picture ? gradientBGColorVariants({
+      color: this.color,
+      direction: 'top',
+      pseudo: false
+    }) : !this.picture ? 'bg-strongest text-accent' : ''].join(' ');
+  }
+  /**
+   * Renders the avatar component. Displays either an image using `eds-img` or initials depending on whether `picture` or `computedInitials` is set.
+   * @returns {JSX.Element} The rendered avatar component.
+   */
+  render() {
+    return h("div", {
+      key: '47ee5ffd12c0f90c536dea77b3ffa9120d67f37f',
+      class: this.containerClasses
+    }, this.picture ? h("eds-img", {
+      src: this.picture,
+      width: 54,
+      height: 54,
+      sizes: "120px",
+      alt: `${this.firstName} ${this.lastName}`,
+      lazyload: true,
+      withBg: true
+    }) : h("abbr", {
+      title: this.computedInitials || `${this.firstName} ${this.lastName}`,
+      class: "!no-underline f-ui-01"
+    }, this.computedInitials));
+  }
+};
+EdsAvatar.style = EdsAvatarStyle0;
+const edsCardDescCss = ".f-ui-02-light{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.text-light{color:var(--grey-700)}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
+const EdsCardDescStyle0 = edsCardDescCss;
+const EdsCardDesc = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.description = undefined;
+    this.descClass = 'f-ui-03-light';
+    this.truncate = true;
+    this.truncateLines = '3';
+  }
+  getTruncateClass() {
+    return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
+  }
+  render() {
+    return h("p", {
+      key: '71495cbd6ef4e7d66c4c22a37f8120624ecf57fb',
+      class: `text-light ${this.descClass}`
+    }, h("span", {
+      key: '8708178f7b48cc1f31aac749f50fe92b72c39ab8',
+      class: this.getTruncateClass()
+    }, this.description));
+  }
+};
+EdsCardDesc.style = EdsCardDescStyle0;
+const edsCardTitleCss = "a{all:unset;display:inline;color:inherit;text-decoration:none;cursor:pointer}h1,h2,h3,h4,h5,h6{margin:0}.f-heading-01{font-family:var(--f-heading-01-fontFamily);font-weight:var(--f-heading-01-fontWeight);font-size:var(--f-heading-01-fontSize);line-height:var(--f-heading-01-lineHeight);letter-spacing:var(--f-heading-01-letterSpacing)}.f-heading-02{font-family:var(--f-heading-02-fontFamily);font-weight:var(--f-heading-02-fontWeight);font-size:var(--f-heading-02-fontSize);line-height:var(--f-heading-02-lineHeight);letter-spacing:var(--f-heading-02-letterSpacing)}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.f-heading-06{font-family:var(--f-heading-06-fontFamily);font-weight:var(--f-heading-06-fontWeight);font-size:var(--f-heading-06-fontSize);line-height:var(--f-heading-06-lineHeight);letter-spacing:var(--f-heading-06-letterSpacing)}.break-words{overflow-wrap:break-word}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:z-10::after{z-index:10}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}";
+const EdsCardTitleStyle0 = edsCardTitleCss;
+const EdsCardTitle = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.url = undefined;
+    this.titleClass = undefined;
+    this.headingLevel = 'h3';
+    this.externalLink = false;
+    this.cardTitle = undefined;
+    this.hierarchy = true;
+  }
+  /**
+   * Dynamically generate the title class based on the heading level.
+   */
+  getTitleClass() {
+    const levelMap = this.hierarchy ? {
+      h1: '05',
+      h2: '05',
+      h3: '05',
+      h4: '05',
+      h5: '05',
+      h6: '06'
+    } : {
+      h1: '01',
+      h2: '02',
+      h3: '03',
+      h4: '04',
+      h5: '05',
+      h6: '06'
+    };
+    return `f-heading-${levelMap[this.headingLevel]}`;
+  }
+  /*private getTag() {
+    if (this.url) {
+      return 'a';
+    }
+    return 'span';
+  }*/
+  render() {
+    //const Tag = this.getTag();
+    const Heading = this.headingLevel;
+    return h(Heading, {
+      key: 'bb97dc6dd53adda14ef251b2ec32952791438986',
+      class: this.getTitleClass()
+    }, h("a", {
+      key: '37b6ac0668257d27fb3f03a6225a2d48e1fd1f79',
+      class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
+      href: this.url,
+      target: this.externalLink ? '_blank' : undefined,
+      rel: this.externalLink ? 'noopener noreferrer' : undefined
+    }, this.cardTitle));
+  }
+};
+EdsCardTitle.style = EdsCardTitleStyle0;
+const edsTagCss = ".f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.py-1{padding-top:0.0625rem;padding-bottom:0.0625rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.border-2{border-width:2px}.rounded-pill{border-radius:100px}.border-default{border:2px solid var(--black)}.text-inverse{color:var(--white)}.bg-strongest{background-color:var(--black)}.text-\\[\\#0034CB\\]{--tw-text-opacity:1;color:rgb(0 52 203 / var(--tw-text-opacity))}.border-\\[\\#0034CB\\]{--tw-border-opacity:1;border:2px solid rgb(0 52 203 / var(--tw-border-opacity))}.text-light{color:var(--grey-700)}.bg-strongest-soft{background-color:rgba(0, 0, 0, .05)}.border-transparent{border-color:var(--transparent)}.border-inverse{border-color:var(--white)}.bg-inverse{background-color:var(--white)}.text-lighter{color:var(--grey-600)}";
+const EdsTagStyle0 = edsTagCss;
+
+// Define the CVA for the tag styles
+const tagStyles = cva(['f-ui-05 py-1 px-4 border-2 rounded-pill'],
+// Base classes
+{
+  variants: {
+    intent: {
+      default: 'border-default',
+      strong: 'text-inverse bg-strongest border-default',
+      accent: 'text-[#0034CB] border-[#0034CB]',
+      weak: 'text-light bg-strongest-soft border-transparent',
+      inverse: 'border-inverse text-inverse',
+      'inverse-strong': 'bg-inverse border-inverse text-lighter'
+    }
+  },
+  defaultVariants: {
+    intent: 'default'
+  }
+});
+const EdsTag = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.label = undefined;
+    this.intent = 'default';
+  }
+  render() {
+    const classes = tagStyles({
+      intent: this.intent
+    });
+    return h("span", {
+      key: '2f4b0011094538aaa0a7cc855eadc1b39c9dc028',
+      class: classes
+    }, this.label);
+  }
+};
+EdsTag.style = EdsTagStyle0;
+
+export { EdsAvatar as eds_avatar, EdsCardDesc as eds_card_desc, EdsCardTitle as eds_card_title, EdsTag as eds_tag };

package/eds-breadcrumb.entry.esm.js

@@ -1,4 +1,5 @@
 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';
@@ -34,19 +35,7 @@ const EdsBreadcrumb = class {
    * 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,10 +123,10 @@ const EdsBreadcrumb = class {
   render() {
     const itemsToRender = this.getTruncatedItems();
     return h("nav", {
-      key: 'd177957e1b3218c21991bbdc9636a8e32befe990',
+      key: '02537ec4208124f8a5ba564f7487f6fad552f7da',
       "aria-label": "Breadcrumb"
     }, h("ol", {
-      key: 'd10336ddee99b9fb84d17e53093c57c6a025982f',
+      key: 'ac6e2ecd59a8ddef52e004d95fbb492f78a9b248',
       class: "flex items-center space-x-2"
     }, itemsToRender.map((item, index) => {
       const isLast = index === itemsToRender.length - 1;

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

@@ -0,0 +1,114 @@
+import { r as registerInstance, h, g as getElement } from './index.esm2.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';
+
+const edsCardGenericCss = ".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 EdsCardGenericStyle0 = edsCardGenericCss;
+const EdsCardGeneric = class {
+  constructor(hostRef) {
+    registerInstance(this, hostRef);
+    this.parentContext = null; // Accepts the entire event detail or null
+    this.cardTitle = undefined;
+    this.url = undefined;
+    this.description = undefined;
+    this.image = undefined;
+    this.avatar = undefined;
+    this.shortAbbreviation = undefined;
+    this.headingLevel = 'h3';
+    this.tags = [];
+    this.tiny = false;
+    this.bg = true;
+    this.withHover = true;
+    this.hierarchy = true;
+    this.parsedImage = null;
+  }
+  componentWillLoad() {
+    if (this.image) {
+      try {
+        if (typeof this.image === 'object') {
+          // If image is already an object, assign it directly
+          this.parsedImage = this.image;
+        } else if (typeof this.image === 'string') {
+          // If image is a string, try to parse it
+          this.parsedImage = JSON.parse(this.image);
+        }
+      } catch (error) {
+        // eslint-disable-next-line
+        console.error('Error parsing image prop:', error);
+        this.parsedImage = {}; // Assign a fallback empty object in case of an error
+      }
+    }
+  }
+  handleParentContext(event) {
+    if (event.target !== this.el) {
+      // Ignore the event if it's not targeted at this specific instance
+      return;
+    }
+    //console.log(event.detail);
+    this.parentContext = event.detail;
+    event.stopPropagation();
+  }
+  /**
+   * Parses the `tags` prop into an array of link objects.
+   * Returns an empty array if parsing fails or if `tags` is not a valid JSON string or object.
+   *
+   * @returns {any[]} Array of parsed link objects
+   */
+  get parsedTags() {
+    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(' ');
+  }
+  handleClick() {
+    var _a;
+    sendAnalytics({
+      category: 'ui-component',
+      parentContext: this.parentContext,
+      tag: this.el.tagName.toLowerCase(),
+      name: ((_a = this.cardTitle) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+      action: 'click'
+    });
+  }
+  render() {
+    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
+    }))), ' ');
+  }
+  get el() {
+    return getElement(this);
+  }
+};
+EdsCardGeneric.style = EdsCardGenericStyle0;
+
+export { EdsCardGeneric as eds_card_generic };

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

@@ -0,0 +1,56 @@
+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 = "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.occupyCols = 1;
+  }
+  /**
+   * Parses the `cards` JSON string prop into an array of card objects.
+   * If parsing fails, returns an empty array.
+   *
+   * @returns {any[]} An array of parsed card objects.
+   */
+  get parsedCards() {
+    return parseData(this.cards);
+  }
+  /**
+   * Renders the card section as a grid layout.
+   * Each parsed card object is mapped to an `<eds-card-generic>` component,
+   * displaying card details such as title, description, avatar, etc.
+   *
+   * @returns {JSX.Element} The rendered section containing a list of cards.
+   */
+  render() {
+    return h("section", {
+      key: 'eb64be830a5a1b752fadd0a8a76be9240b70cfe8',
+      class: "w-full"
+    }, h("ul", {
+      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-4 md:grid-col-span-${this.occupyCols} flex flex-col`
+    }, h("eds-card-generic", {
+      cardTitle: card.title,
+      description: card.description,
+      avatar: card.avatar,
+      headingLevel: card.headingLevel,
+      tags: card.tags,
+      url: card.url,
+      bg: card.bg,
+      tiny: card.tiny,
+      image: card.image,
+      withHover: card.withHover
+    })))));
+  }
+};
+EdsCardSection.style = EdsCardSectionStyle0;
+
+export { EdsCardSection as eds_card_section };

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

@@ -29,9 +29,9 @@ const EdsCookiesPreference = class {
   }
   render() {
     return h("div", {
-      key: 'ca5d44522f94e9ea009c657c5eae6e357cd0d13a'
+      key: '48f67648644ae9c8e645791ad3cbba5491866dc5'
     }, h("eds-link", {
-      key: '563a369e2ed44d08a6dd47922c1c1c888e81543a',
+      key: '50154721f0f44e811ebe362e18bcf8cfb77b8f64',
       size: "small",
       intent: this.intent,
       label: this.buttonText,

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());
   }