@ebrains/react 0.9.3-beta → 1.1.0

package/eds-breadcrumb.entry.esm.js

@@ -0,0 +1,179 @@
+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;
+      } else if (width <= 1024) {
+        this.maxVisibleItems = 3;
+      } else if (width <= 1280) {
+        this.maxVisibleItems = 3;
+      } else if (width <= 2200) {
+        this.maxVisibleItems = 4;
+      } else {
+        this.maxVisibleItems = 6;
+      }
+    };
+    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: 'db769320b42e627fffd71676c1e0551646f1de70',
+      "aria-label": "Breadcrumb"
+    }, h("ol", {
+      key: '6cef8ed43cabcee73cb4ad4fb26f809d0690c0ec',
+      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 {
+          fullLabel
+        } = this.getLabels(item, isLast);
+        const linkIntent = isLast ? this.intent === 'strong' ? 'weak' : this.intent === 'weak' ? 'strong' : this.intent : this.intent;
+        return h("eds-link", Object.assign({
+          label: fullLabel,
+          url: item.url,
+          intent: linkIntent,
+          disabled: isLast,
+          current: isLast,
+          "aria-label": fullLabel,
+          size: "small",
+          "icon-small": "false"
+        }, isLast ? {
+          'aria-current': 'page'
+        } : {}));
+      })() : h("eds-link", {
+        label: "...",
+        url: "#",
+        intent: "strong",
+        current: false,
+        "aria-label": "...",
+        size: "small",
+        "icon-small": "false",
+        icon: "chevron-right"
+      }), !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-desc_2.entry.esm.js

@@ -3,13 +3,12 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-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 edsCardDescCss = ".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';
   }
@@ -18,10 +17,10 @@ const EdsCardDesc = class {
   }
   render() {
     return h("p", {
-      key: '3ea345f69bed29135df8231c79eaea0f06e813df',
-      class: `text-light ${this.descClass}`
+      key: '2421ea469339e3d56fc5c0ebbec213eeb1a2a9cf',
+      class: "text-light f-ui-03-light"
     }, h("span", {
-      key: '99c383485ec0852be81a05fe0999cb429fee4a27',
+      key: 'd024adda16a85bf2913803c06eb05af3b4af6bb9',
       class: this.getTruncateClass()
     }, this.description));
   }
@@ -70,10 +69,10 @@ const EdsCardTitle = class {
     //const Tag = this.getTag();
     const Heading = this.headingLevel;
     return h(Heading, {
-      key: '9914950b1581456a3a875ed7383975710c05fa7f',
+      key: '494d8b7ea90ccb93cf0395374951e90c89a59d3a',
       class: this.getTitleClass()
     }, h("a", {
-      key: '9b3298d8bacd8fbaecd8c714329ef5e6ac7192c7',
+      key: 'ab739472fd796767cd6e7ab4f4c09bcf24ec200a',
       class: "break-words after:absolute after:inset-0 after:z-10 after:content-[''] focus:outline-none",
       href: this.url,
       target: this.externalLink ? '_blank' : undefined,

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

@@ -1,11 +1,11 @@
 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 { s as sendAnalytics } from './analytics-d99780e3.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-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
+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-x-1{-moz-column-gap:0.0625rem;column-gap:0.0625rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}.mx-auto{margin-left:auto;margin-right:auto}.block{display:block}";
 const EdsCardGenericStyle0 = edsCardGenericCss;
 const EdsCardGeneric = class {
   constructor(hostRef) {
@@ -91,13 +91,13 @@ const EdsCardGeneric = class {
       "truncate-lines": "3",
       description: this.description
     }), this.parsedImage ? h("eds-img", Object.assign({
-      class: "mt-8"
+      class: "mt-8 block mx-auto"
     }, this.parsedImage)) : this.avatar || this.shortAbbreviation ? h("eds-avatar", {
       class: "order-first mb-12",
       picture: this.avatar,
       initials: this.shortAbbreviation
     }) : null, h("div", {
-      key: '8bdcbbe2982a450843e9ada727e3f6eb62872ae1',
+      key: '40388913b1abb9308f42469956342efdbb48d508',
       class: "flex flex-wrap gap-y-4 gap-x-1"
     }, this.parsedTags.map((tag, index) => h("eds-tag", {
       key: index,

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

@@ -1,11 +1,128 @@
 import { r as registerInstance, h, g as getElement } from './index.esm2.js';
-import { s as sendAnalytics } from './analytics-44b1416b.esm.js';
-import { g as gradientBGColorVariants } from './color-2554aad6.esm.js';
+import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
+import { c as cva } from './index-39c58238.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
-import './index-39c58238.esm.js';
 
+const GRADIANT_TOKENS = ['green', 'yellow', 'among-blue', 'purple'];
+const gradientBGColorVariants = cva([], {
+  variants: {
+    color: GRADIANT_TOKENS.reduce((acc, token) => Object.assign(Object.assign({}, acc), {
+      [token]: ''
+    }), {}),
+    direction: {
+      top: '',
+      bottom: ''
+    },
+    pseudo: {
+      true: 'before:effect-opacity effect-bg-behind',
+      false: ''
+    },
+    hover: {
+      true: 'before:opacity-0 hover:before:opacity-100',
+      false: ''
+    }
+  },
+  compoundVariants: [
+  // region GREEN
+  {
+    color: 'green',
+    direction: 'top',
+    pseudo: true,
+    class: 'before:bg-gradient-01-top'
+  }, {
+    color: 'green',
+    pseudo: true,
+    direction: 'bottom',
+    class: 'before:bg-gradient-01-bottom'
+  }, {
+    color: 'green',
+    direction: 'top',
+    pseudo: false,
+    class: 'bg-gradient-01-top'
+  }, {
+    color: 'green',
+    pseudo: false,
+    direction: 'bottom',
+    class: 'bg-gradient-01-bottom'
+  },
+  // endregion
+  // region YELLOW
+  {
+    color: 'yellow',
+    direction: 'top',
+    pseudo: true,
+    class: 'before:bg-gradient-02-top'
+  }, {
+    color: 'yellow',
+    direction: 'bottom',
+    pseudo: true,
+    class: 'before:bg-gradient-02-bottom'
+  }, {
+    color: 'yellow',
+    direction: 'top',
+    pseudo: false,
+    class: 'bg-gradient-02-top'
+  }, {
+    color: 'yellow',
+    direction: 'bottom',
+    pseudo: false,
+    class: 'bg-gradient-02-bottom'
+  },
+  // endregion
+  // region PURPLE
+  {
+    color: 'purple',
+    direction: 'top',
+    pseudo: true,
+    class: 'before:bg-gradient-03-top'
+  }, {
+    color: 'purple',
+    direction: 'bottom',
+    pseudo: true,
+    class: 'before:bg-gradient-03-bottom'
+  }, {
+    color: 'purple',
+    direction: 'top',
+    pseudo: false,
+    class: 'bg-gradient-03-top'
+  }, {
+    color: 'purple',
+    direction: 'bottom',
+    pseudo: false,
+    class: 'bg-gradient-03-bottom'
+  },
+  // endregion
+  // region AMONG-BLUE
+  {
+    color: 'among-blue',
+    direction: 'top',
+    pseudo: true,
+    class: 'before:bg-gradient-04-top'
+  }, {
+    color: 'among-blue',
+    direction: 'bottom',
+    pseudo: true,
+    class: 'before:bg-gradient-04-bottom'
+  }, {
+    color: 'among-blue',
+    direction: 'top',
+    pseudo: false,
+    class: 'bg-gradient-04-top'
+  }, {
+    color: 'among-blue',
+    direction: 'bottom',
+    pseudo: false,
+    class: 'bg-gradient-04-bottom'
+  }
+  // endregion
+  ],
+  defaultVariants: {
+    direction: 'top',
+    pseudo: true
+  }
+});
 const EdsCardProject = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
@@ -50,38 +167,38 @@ const EdsCardProject = class {
     }) : 'bg-default', this.bgOnHover && this.color ? 'effect-background bg-default focus-within:bg-transparent hover:bg-transparent' : 'effect-background hover:bg-default', this.vertical ? 'flex-col gap-y-16' : 'flex-col gap-x-16 gap-y-12 lg:flex-row'].join(' ');
     const imageClasses = this.vertical ? '' : 'max-w-120 @md:max-w-192 order-first w-full lg:order-last';
     return h("article", {
-      key: '1ffb83f3e694811d5f3d4c8235c50591bca4dec5',
+      key: '8b4707ad7689824c50db3112b5844e28beb31533',
       class: cardClasses,
       onClick: event => this.handleClick(event)
     }, h("div", {
-      key: 'e8d7f04e95722dc8ec8bcb7f90b2b8495b8c13ef',
+      key: '5cb7673378ab23826202b34034247145b7289bda',
       class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}`
     }, h("div", {
-      key: '5ab94ee81425c5f7a143e7f1eb7981da6508e307',
+      key: '8111b523840c8b363bbb422c1f314ce07057ea92',
       class: "lg:max-w-[720px]"
     }, h("eds-card-title", {
-      key: 'd303425849c5df81c0b72e096313a96031d1c435',
+      key: 'a326e1384873edb9bfc86c33e3abeb95064cc8db',
       "heading-level": this.headingLevel,
       titleClass: this.image ? 'f-ui-01' : undefined,
       "card-title": this.titleProject,
       url: this.url
     }), this.editorialTitle && h("span", {
-      key: '3d4c6b9422d02e4d40d29d7875e3fc651d2f7bd4',
+      key: '5e2de62642363533a950f3e923e3f4dfc64c56c1',
       class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}`
     }, this.editorialTitle)), this.categoryTitle && h("div", {
-      key: '2b14dee584d20e90dac0da3b93dff1dbc6f36470',
+      key: '424fed86ec4e714dc5f3644d85e5670d8be56d7f',
       class: "mt-auto flex items-center gap-x-12 pt-12"
     }, ((_a = this.categoryTitle) === null || _a === void 0 ? void 0 : _a.length) && h("eds-tag", {
-      key: 'cd02551d76731563ebdad89a141f70cbce5bca76',
+      key: 'b6961cc23835a9b3d1abae47e1c4224a29255164',
       label: this.categoryTitle
     }))), this.parsedImage && h("div", {
-      key: '5b5cae3820ab870a7588d801151390be494d5c7e',
+      key: '69564e0c65f6422a6ccc3957a8080e7e494461bb',
       class: imageClasses
     }, h("div", {
-      key: 'e7bb9f3b090f5497b315a4d2495592cfbe5a4aa0',
+      key: 'e47a21a5356459936b6f528a3aba50240851fcf2',
       class: "aspect-1x1 w-full"
     }, h("eds-img", Object.assign({
-      key: '8fdecaed876c671a08067fdb272f4932b67ae406',
+      key: 'f64af6387cdef28619aa8a0465d4a50ec3a95007',
       sizes: this.vertical ? this.parsedImage.sizes || '' : '192px'
     }, this.parsedImage)))));
   }

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

@@ -13,7 +13,7 @@ const EdsCardTags = class {
   }
   render() {
     return h("div", {
-      key: '7547e8ffafc22884fb26e7b5cd1da49e588fc590',
+      key: '5da9fcbc472476a7b438451e563586643a818bc0',
       class: "flex flex-wrap gap-y-4"
     }, this.tags.map((tag, index) => h("eds-tag", {
       key: index,

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-44b1416b.esm.js';
+import { s as sendAnalytics } from './analytics-d99780e3.esm.js';
 import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
@@ -62,11 +62,11 @@ const EdsCardTool = class {
   }
   render() {
     return h("article", {
-      key: '92103cb449fbdfd41adaeb29053746fb652a5203',
+      key: '465a4593a4d28c5bfcef7325be7674b6301bc275',
       class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`,
       onClick: () => this.handleClick()
     }, h("eds-card-title", {
-      key: '8aebade7b0cfe5ac529ff552113509314ffa4061',
+      key: '5d6c13f582bd89f03d95aa9027b83d8d4c4184ca',
       "heading-level": this.headingLevel,
       titleClass: this.image ? 'f-ui-01' : undefined,
       "card-title": this.cardTitle,
@@ -74,7 +74,7 @@ const EdsCardTool = class {
       "external-link": this.external,
       hierarchy: this.hierarchy
     }), this.description && h("eds-card-desc", {
-      key: '38abb7a59054c6fce836322c26eab77bb508845f',
+      key: '4872956b7d97e222abd8e429c73a7e97fe1f7a06',
       class: "mt-8",
       "truncate-lines": "3",
       description: this.description
@@ -88,7 +88,7 @@ const EdsCardTool = class {
       picture: this.avatar,
       initials: this.shortAbbreviation
     }) : null, h("div", {
-      key: '99158cab0d83e64bf9c45e00c06572efe7328516',
+      key: '10c20ab24e836c06ba2da070cbcf21cf11537e17',
       class: "flex flex-wrap gap-y-4"
     }, this.parsedTags.map((tag, index) => h("eds-tag", {
       key: index,

package/eds-code-block.entry.esm.js

@@ -2247,10 +2247,10 @@ const EdsCodeBlock = class {
   }
   render() {
     return h("div", {
-      key: '6c1a418d4cf1d02ea9216f9196cbbdbfdf7f7315',
+      key: '7550f1c5e29a9be39614404d51dfec9a7aa194a9',
       class: "relative bg-stronger rounded-sm"
     }, h("div", {
-      key: '118cfa439e27f3b6c8ed7f3308535a744c1fac29',
+      key: '8e654051ec6105e051af723e056b4151afc4305c',
       class: "text-inverse flex justify-between items-center p-8"
     }, this.language ? h("span", {
       class: "f-ui-03"
@@ -2261,23 +2261,23 @@ const EdsCodeBlock = class {
     }, h("code", {
       innerHTML: this.getHighlightedCode()
     })), h("span", {
-      key: '5c557849fb320c69ec830f7028f9e0ee7099d5f1',
+      key: '1f558301727adb451524850b352844d7658f33a8',
       "aria-hidden": "true",
       class: "w-20 h-20 mt-8"
     }, h("eds-icon-wrapper", {
-      key: 'c11a154a82a8b3eaff418f235a7820209579554b',
+      key: '7def1f38f949c32d6138d88a0a7edf9655852491',
       icon: this.copied ? 'success' : 'copy',
       onClick: () => this.copyToClipboard()
     })), h("span", {
-      key: '9537d56544ca139ea847d34091c093c7f852f12c',
+      key: '9eabcd54f3bcdc1c4627a7ca7e22fd38e9755ca6',
       class: "sr-only"
     }, "Copy Code")), this.language && h("pre", {
-      key: '8cc48bb7da216db0e181587a33c25dc88b91bbbc',
+      key: 'd15dce4b1692bf1956e1b3cb3586dde4d9561f1b',
       class: `language-${this.language} bg-stronger pl-8 pb-8`,
       role: "region",
       "aria-label": `Code block in ${this.language}`
     }, h("code", {
-      key: '7fd391c14a4344fd7e98ad5d32283a498085064d',
+      key: 'ad7eb7b40aaab69b6bc929c632ce4736fe3c39a5',
       innerHTML: this.getHighlightedCode()
     })));
   }

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

@@ -29,9 +29,9 @@ const EdsCookiesPreference = class {
   }
   render() {
     return h("div", {
-      key: 'ce716958892ee4d324efeb2399885c13d63ff0bb'
+      key: '37a817a2c1cccb58a7445c399f20ce5fb97653b8'
     }, h("eds-link", {
-      key: 'de191023658c2f4c59144d334075d8e1f4fa6133',
+      key: '9bf85d4fe82d7a525bae6f765da7dea9a3913494',
       size: "small",
       intent: this.intent,
       label: this.buttonText,

package/eds-feedback.entry.esm.js

@@ -10,6 +10,7 @@ const EdsFeedback = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
     this.rating = createEvent(this, "rating", 7);
+    this.headingLevel = 'h1';
     this.type = 'star';
     this.count = 5;
     this.label = 'Rate your Experience!';
@@ -55,21 +56,25 @@ const EdsFeedback = class {
     this.selectedRating = e.detail;
   }
   render() {
+    // Determine the heading tag and CSS class
+    const HeadingTag = this.headingLevel;
+    const levelNum = this.headingLevel.replace('h', '');
+    const headingClass = `f-heading-${levelNum.padStart(2, '0')} my-4`;
     return h("div", {
-      key: 'a8cf97bdcd7957b98dfca11e178361acf667c23c',
+      key: 'f1bec91df97ff2a54a8ec8284e88f572b3bf0081',
       class: "grid inline"
-    }, h("h1", {
-      key: '231bb9f49dc6084045a392b1d93c9b4454bbf268',
-      class: "f-heading-01 my-4"
+    }, h(HeadingTag, {
+      key: '8051043d5ec79a1f972fd732ef8a716487ed51d2',
+      class: headingClass
     }, this.label), h("p", {
-      key: 'a70274de05139c8ab40b5a4a2e599dc14b3d3a9f',
+      key: '55f319e89376372f13c2bb96b9a94ceed6a6565b',
       class: "f-body-01 text-light"
     }, this.description), h("eds-rating", {
-      key: '5353b7616112591240819e4b762790224a1b7cc7',
+      key: 'c9c725d4a1ae65eb6b773178f6435d239c434034',
       "rating-type": this.type,
       "rating-count": this.count
     }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && h("span", {
-      key: 'e5f8f10fb052a6de080b61cf78c309a55d081576',
+      key: 'e3ea621a035ecd6da07803478d202b2326997416',
       class: "f-ui-04 text-lighter"
     }, this.parsedMappings[this.selectedRating - 1]));
   }

package/eds-frame.entry.esm.js

@@ -3,7 +3,7 @@ import 'react';
 import 'react/jsx-runtime';
 import 'react-dom';
 
-const edsFrameCss = ".bg-inverse{background-color:var(--white)}.min-h-156{min-height:156px}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:16px}.rounded-md{border-radius:12px}.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 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.flex{display:flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.border-2{border-width:2px}.w-full{width:100%}.h-full{height:100%}.h-auto{height:auto}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.items-center{align-items:center}.justify-between{justify-content:space-between}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.px-12{padding-left:0.75rem;padding-right:0.75rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-auto{margin-left:auto}.border-t-2{border-top-width:2px}.border{border:1px solid rgba(0, 0, 0, .1 )}.border-2{border:1px solid rgba(0, 0, 0, .1 )}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.mt-16{margin-top:1rem}";
+const edsFrameCss = ".bg-inverse{background-color:var(--white)}.min-h-156{min-height:156px}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:16px}.rounded-md{border-radius:12px}.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)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.flex{display:flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.border-2{border-width:2px}.w-full{width:100%}.h-full{height:100%}.h-auto{height:auto}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.items-center{align-items:center}.justify-between{justify-content:space-between}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.px-12{padding-left:0.75rem;padding-right:0.75rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-auto{margin-left:auto}.border-t-2{border-top-width:2px}.border{border:1px solid rgba(0, 0, 0, .1)}.border-2{border:1px solid rgba(0, 0, 0, .1)}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.mt-16{margin-top:1rem}";
 const EdsFrameStyle0 = edsFrameCss;
 const EdsFrame = class {
   constructor(hostRef) {
@@ -73,15 +73,15 @@ const EdsFrame = class {
   }
   render() {
     return h("div", {
-      key: '69d47526ffca56defb1e9da214c46822fa963c14',
+      key: '61c401d6e021418e3d705cc9a4418b4f54f6bcf1',
       class: this.articleClasses()
     }, h("div", {
-      key: 'cab7cd55b15afaa77a4f4b713c55a6776dcb6a2d',
+      key: '3fe7284c2ce4057d6c953c02e03489c0ef75f43d',
       class: "effect-height flex items-center justify-between py-8 px-12"
     }, h("span", {
-      key: '99b5499c4bf992cc7101d6ea6812000283a34968',
+      key: 'a0efaa70d4ab2484c76d38e309c0bf9800edf569',
       class: "f-ui-02"
-    }, this.frameLabel), !this.iframeError ? h("eds-link", {
+    }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? h("eds-link", {
       label: this.urlLabel,
       url: this.url,
       intent: this.intent,
@@ -90,7 +90,7 @@ const EdsFrame = class {
       disabled: false,
       icon: "arrow-diagonal"
     }) : null), h("div", {
-      key: '275490ec93896eafe8a7042b86769b1f96e8bc8f',
+      key: 'e99188447abb78659865758afe3226a7ade7f8f2',
       class: "border-softer"
     }, this.iframeError ? h("div", {
       class: "container ml-8 mr-8 mt-16"