@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

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

@@ -225,7 +225,7 @@ export class EdsButton {
             show: !this.loading
         });
         const ElementType = this.elementType;
-        return (h(ElementType, { key: '8bd80319c1b541b6dd6628357b8e2e1333a8d15b', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: '9d86a1bdf96422e0857759afe4741e523223d7d7', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '8e4611bba4214889eef58052c56dc46b826ff86c', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'cfc49250bf9f1b65965bf5b2d497a33174a82291', class: "loader", style: {
+        return (h(ElementType, { key: '2e5c212800b80e17830c20e2a75df524027d27b7', "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.elementType === 'button' ? this.disabled : undefined, disabled: this.elementType === 'button' ? this.disabled : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event) }, this.label && h("span", { key: '45b1ce64e770398893b3402a539e0f3eb5130e27', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '1f627b946a17a045a415cd06f6e18e905acb4847', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '3a584192cefece3ee4a3db63d14ab87b563f358c', class: "loader", style: {
                 border: `3px solid ${this.intent === 'secondary' ? 'rgba(255, 255, 255, .3)' : 'rgba(0, 0, 0, .3)'}`,
                 borderBottomColor: this.intent === 'secondary' ? '#fff' : '#000'
             } }))), this.icon ? h("eds-icon-wrapper", { class: iconClasses, icon: this.icon }) : null));

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-desc/eds-card-desc.js

@@ -7,6 +7,9 @@ import { h } from "@stencil/core";
  * whether or not the text is truncated and to how many lines.
  *
  */
+/**
+ * @internal
+ */
 export class EdsCardDesc {
     constructor() {
         this.description = undefined;
@@ -18,7 +21,7 @@ export class EdsCardDesc {
         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)));
+        return (h("p", { key: '96ba520be4ef9acf871a6e992d5ea74aaf17c962', class: `text-light ${this.descClass}` }, h("span", { key: '951358bd0c992426175e3c1b3c580f2f9be4027f', class: this.getTruncateClass() }, this.description)));
     }
     static get is() { return "eds-card-desc"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-tags/eds-card-tags.js

@@ -8,7 +8,7 @@ export class EdsCardTags {
         this.tags = [];
     }
     render() {
-        return (h("div", { key: '272d53abb9be9086881cb2f8e99f7fb7aae1bb59', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
+        return (h("div", { key: 'df8937e32907eb978f27565d04f7ca56f2485c87', class: "flex flex-wrap gap-y-4" }, this.tags.map((tag, index) => (h("eds-tag", { key: index, intent: this.accent ? 'accent' : 'default', label: tag })))));
     }
     static get is() { return "eds-card-tags"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-title/eds-card-title.js

@@ -43,7 +43,7 @@ export class EdsCardTitle {
     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)));
+        return (h(Heading, { key: '57ce97f35ee52623d32fac0b6b1a576ca8b5aa70', class: this.getTitleClass() }, h("a", { key: '60fb313d2b8753974658f73aaddd359a63548a79', 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)));
     }
     static get is() { return "eds-card-title"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-cards/eds-card-composer/eds-card-wrapper/eds-card-wrapper.js

@@ -21,7 +21,7 @@ export class EdsCardWrapper {
             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(' ');
-        return (h("article", { key: 'f21cc9703011026652765b399e2b87b1ef80d220', class: articleClasses }, h("slot", { key: '9a37adad73d2d49edcc9ca9222d5b188202c5612' }), this.hasSlot('footer') && (h("div", { key: '87addfc052ed4ae33736724fbd8fbc8aca873b4d', class: "mt-auto" }, h("slot", { key: '2e48677f42ac2aa951bc1a82afa9291fea3ddd72', name: "footer" })))));
+        return (h("article", { key: 'b860e65a1a943216793a5ce2f5a08d01249fc671', class: articleClasses }, h("slot", { key: '3ea351da205f375ed746695762efc1f28d1fc3f0' }), this.hasSlot('footer') && (h("div", { key: '84d24bd248033d4855dd63dfa5042585ae61d64d', class: "mt-auto" }, h("slot", { key: 'c7a2530d70a93705097b9ac3b8be1a21551dd1fb', name: "footer" })))));
     }
     static get is() { return "eds-card-wrapper"; }
     static get properties() {

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

@@ -1,103 +1,134 @@
 .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;
-  }
+  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;
+}

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

@@ -105,7 +105,16 @@ export const WithImageAndTags = {
         bg="${args.bg}"
         with-hover="${args.withHover}"
         hierarchy="${args.hierarchy}">
-      </eds-card-generic>`,
+      </eds-card-generic>
+      
+      <div class="mt-32">
+        <span>To try out the avatar propery use this example:</span>
+        <eds-code-block 
+          code="https://files.ebrains.eu/img/686e0edc-f3be-4d79-aa02-373c32c08d65/ebrains-logo-high-resolution.png?fit=max&q=80&fm=webp&crop=879%2C879%2C597%2C0&w=200" 
+          language="url"
+        ></eds-code-block>
+      </div>
+      `,
     args: {
         cardTitle: 'Card with Image and Tags',
         description: 'This card showcases an image and tags together.',

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

@@ -56,7 +56,7 @@ export class EdsCardProject {
             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: '98c5dbd033ec05d08965559e00f32d9fe18698ef', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: 'e083c43e38c3c24fcd996a90267f7cd92d3651b3', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '37de1e46023b533fd8595a3077c4e68c11fb01af', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'ee31ae2804d2c17c82e8f4c0c3269ac8254331df', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: 'c6f74ba9b5b522f713e25d3339f541efa68cdddd', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'ab18e55046777cf4a4f58ebd057641db9b9e0328', 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: '3714ee86a74dce7f33a8f953fd726db349ba9271', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '2818d15f7ab671b7b2dfb34ec3085b390150f38d', class: imageClasses }, h("div", { key: '5166feef3674631298f699449b956655f38f0db9', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '86555a43491da5b2aa3b287e539e603a2c2adaf3', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: '067a30c2b0860d71dc13d1d3d875a7e288de842b', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '3e2e62ecc9ad5973c359b7bbceefd8c2ac682d0b', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: 'e07a666f80d6955b5cf16c18a999a756dcfe10f0', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'b1ef62c888e9d69f1146fc218a7012015ddc78e1', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '79cf1af876a0a358a9f65036a1ff1c4944604435', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'ce7e525b0bdbbc94d3e2ec8055c692be9d521042', 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: '23e3527a3772970642dcb07a4abc381415132155', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '178ef2273b2506070c045c3f2e7a287d4b175414', class: imageClasses }, h("div", { key: 'f77fb56cd2ed1bdcafd07db9adcf0f7b6a44cdb7', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: 'b9734f48ab685280b801cfb75cc96f5aa109ca6f', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     static get is() { return "eds-card-project"; }
     static get properties() {

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

@@ -64,7 +64,7 @@ export class EdsCardTool {
         });
     }
     render() {
-        return (h("article", { key: 'da61b384e966b148cd1f77eec59671bc4d92e259', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '00702d032bc25f52b2a2c98255ceb60a1d314f4d', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: 'd2b135ed422fb64f142af71330dc666e2f0c2b1f', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: '54111e90175754cb0c1f2eb339e86926914ca0e7', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
+        return (h("article", { key: '5ecce6667d066e78586f795ab260bed569434c4f', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: 'a6ff863ade669db7494c763d563809dbfddb3f2c', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.cardTitle, url: this.url, "external-link": this.external, hierarchy: this.hierarchy }), this.description && (h("eds-card-desc", { key: '6f5328fba79a564e6e0d737b2d64a31e50ea6434', class: "mt-8", "truncate-lines": "3", description: this.description })), this.image ? (h("eds-img", { src: this.image, alt: "Sample Image", width: 200, height: 150 })) : this.avatar || this.shortAbbreviation ? (h("eds-avatar", { class: "order-first mb-12", picture: this.avatar, initials: this.shortAbbreviation })) : null, h("div", { key: 'b1a42a1db9274ebf1098143d56e1ad8a08825c4c', class: "flex flex-wrap gap-y-4" }, this.parsedTags.map((tag, index) => (h("eds-tag", { key: index, intent: tag.style, label: tag.label }))))));
     }
     static get is() { return "eds-card-tool"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-code-block/eds-code-block.css

@@ -4,8 +4,10 @@
 }
 
 pre[class*="language-"] {
-  white-space: pre-wrap; /* Preserve line breaks */
-  word-break: break-word; /* Prevent horizontal scrolling for long lines */
+  white-space: pre-wrap;
+  /* Preserve line breaks */
+  word-break: break-word;
+  /* Prevent horizontal scrolling for long lines */
 }
 
 .language {
@@ -52,6 +54,7 @@ code {
 .rounded-sm {
   border-radius: 8px;
 }
+
 .rounded-xs {
   border-radius: 4px;
 }
@@ -59,12 +62,15 @@ code {
 .text-inverse {
   color: var(--white);
 }
+
 .text-light {
   color: var(--grey-700);
 }
+
 .text-lighter {
   color: var(--grey-600);
 }
+
 .text-lightest {
   color: var(--grey-500);
 }
@@ -72,12 +78,15 @@ code {
 .flex {
   display: flex;
 }
+
 .items-center {
   align-items: center;
 }
+
 .justify-center {
   justify-content: center;
 }
+
 .justify-between {
   justify-content: space-between;
 }
@@ -85,21 +94,27 @@ code {
 .p-0 {
   padding: 0rem;
 }
+
 .p-12 {
   padding: 0.75rem;
 }
+
 .p-16 {
   padding: 1rem;
 }
+
 .p-20 {
   padding: 1.25rem;
 }
+
 .p-6 {
   padding: 0.375rem;
 }
+
 .p-8 {
   padding: 0.5rem;
 }
+
 .pl-8 {
   padding-left: 0.5rem;
 }
@@ -107,24 +122,31 @@ code {
 .mb-10 {
   margin-bottom: 0.625rem;
 }
+
 .mb-12 {
   margin-bottom: 0.75rem;
 }
+
 .mb-28 {
   margin-bottom: 1.75rem;
 }
+
 .pb-16 {
   padding-bottom: 1rem;
 }
+
 .pb-20 {
   padding-bottom: 1.25rem;
 }
+
 .pb-28 {
   padding-bottom: 1.75rem;
 }
+
 .pb-60 {
   padding-bottom: 3.75rem;
 }
+
 .pb-8 {
   padding-bottom: 0.5rem;
 }
@@ -132,12 +154,15 @@ code {
 .mt-16 {
   margin-top: 1rem;
 }
+
 .mt-2 {
   margin-top: 0.125rem;
 }
+
 .mt-20 {
   margin-top: 1.25rem;
 }
+
 .mt-28 {
   margin-top: 1.75rem;
 }
@@ -145,6 +170,7 @@ code {
 .w-20 {
   width: 1.25rem;
 }
+
 .h-20 {
   height: 1.25rem;
 }
@@ -156,6 +182,7 @@ code {
   line-height: var(--f-ui-03-lineHeight);
   letter-spacing: var(--f-ui-03-letterSpacing);
 }
+
 .f-ui-03-light {
   font-family: var(--f-ui-03-light-fontFamily);
   font-weight: var(--f-ui-03-light-fontWeight);
@@ -174,4 +201,4 @@ code {
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
   border-width: 0;
-}
+}

package/dist/collection/components/eds-code-block/eds-code-block.js

@@ -80,7 +80,7 @@ export class EdsCodeBlock {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (h("div", { key: 'cb379e82bcf71345945b0b88397650ecd4992770', class: "relative bg-stronger rounded-sm" }, h("div", { key: '945046d4fd747cd64a83155b421a897e380cc612', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: '3f6c7e996101f0bb83fb8c9e6991a205a0b268c8', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '8ad9beb61058f29e688f6777233c61f7fb3ccfe8', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: 'a4f9a07906e1c2d9febb7ae789a3eed76dc422e9', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: 'e31339126dd3cc885511aaa2bdf6f06f3a113c74', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '7efacd276f26a00f0f61793f6b8748259e1614b5', innerHTML: this.getHighlightedCode() })))));
+        return (h("div", { key: '98f5fe5e215e87c1eb024969b5e4f3ae1bd0cb0d', class: "relative bg-stronger rounded-sm" }, h("div", { key: '173be873a0f41398bd080758d5a0bbdcc977dcf5', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, h("code", { innerHTML: this.getHighlightedCode() }))), h("span", { key: 'f8cb36cf89d19bf306c57168e61ccfde9a4d18ff', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, h("eds-icon-wrapper", { key: '74f214c47dc647c2c254f3f9f96fba71e35133df', icon: this.copied ? 'success' : 'copy', onClick: () => this.copyToClipboard() })), h("span", { key: '74e628574b481d68c2d2132a12fd07bb62c86fde', class: "sr-only" }, "Copy Code")), this.language && (h("pre", { key: '19d2b813b6e86451a8a9047b954d99340fc3cd85', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, h("code", { key: '974eb2e2ef0d7dc90e012e421d64bf5b735761d1', innerHTML: this.getHighlightedCode() })))));
     }
     static get is() { return "eds-code-block"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,8 @@ export class EdsDropdown {
      * @param {Event} e - The click event.
      */
     handleWindowClick(e) {
-        if (!this.host.contains(e.target)) {
+        const path = (e.composedPath && e.composedPath()) || [];
+        if (!path.includes(this.host)) {
             this.closeDropdown();
             this.dropdown.emit({ expanded: false });
         }
@@ -112,14 +113,14 @@ export class EdsDropdown {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (h("div", { key: '3edd3453afbd52ee9e3c4d925baa46e07cfdbfc0', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '7c69acb6d6213af2cec8c1e00c68d83a5d23d676', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: '5048b1c3cb42418736d471c2331330afef49cbc5', role: "menu", class: {
+        return (h("div", { key: '03ab7911a018f273afdd58986fea1a0d9b86aa30', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, h("eds-button", { key: '4145f8e8918ef36121bb54ef4e614263b077e4d5', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu" }), h("nav", { key: '5848addad59482f2c0b350739aa5440167379e86', role: "menu", class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
                 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset,
                 'rounded-lg': this.rounded
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '842f316e9a7910aa8b34823e883c54c1979668d1' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, h("slot", { key: '8427053528abc74e2acf9b544363870b57f98fef' }))));
     }
     static get is() { return "eds-dropdown"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-down/eds-icon-chevron-down.js

@@ -8,7 +8,7 @@ export class EdsIconChevronDown {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'c723d7f1bbd596063ae7e66123b8038af5320a54', class: this.class, innerHTML: chevronDown });
+        return h("span", { key: 'd6251250a9c47acceb68dee74c53fca873671878', class: this.class, innerHTML: chevronDown });
     }
     static get is() { return "eds-icon-chevron-down"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-left/eds-icon-chevron-left.js

@@ -8,7 +8,7 @@ export class EdsIconChevronLeft {
         this.class = '';
     }
     render() {
-        return h("span", { key: '5547e9d98f781dc03e88a014f726b3a402e6425d', class: this.class, innerHTML: chevronLeft });
+        return h("span", { key: '6c98bd673a1562fda009e95e4e4562d1e7f0ccfd', class: this.class, innerHTML: chevronLeft });
     }
     static get is() { return "eds-icon-chevron-left"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-right/eds-icon-chevron-right.js

@@ -8,7 +8,7 @@ export class EdsIconChevronRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: '177f447969a48957c54d011bfb72693731ecc1cf', class: this.class, innerHTML: chevronRight });
+        return h("span", { key: '418c8476ddb31b876a047a7e9de8841865ea5b81', class: this.class, innerHTML: chevronRight });
     }
     static get is() { return "eds-icon-chevron-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/chevron/eds-icon-chevron-up/eds-icon-chevron-up.js

@@ -8,7 +8,7 @@ export class EdsIconChevronUp {
         this.class = '';
     }
     render() {
-        return h("span", { key: '7b8f0aa2da992611e0c908ca0785abce6e1ae189', class: this.class, innerHTML: chevronUp });
+        return h("span", { key: '3484b9074d724ddee4141ff561e568284737ef43', class: this.class, innerHTML: chevronUp });
     }
     static get is() { return "eds-icon-chevron-up"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-arrow-diagonal/eds-icon-arrow-diagonal.js

@@ -5,15 +5,15 @@ import { h } from "@stencil/core";
  */
 export class EdsIconArrowDiagonal {
     constructor() {
-        this.addClass = '';
+        this.class = '';
     }
     render() {
-        return h("span", { key: '61fba958a683480dfd28e503b65a7dceb6640f46', class: this.addClass, innerHTML: arrowDiagonal });
+        return h("span", { key: 'd19f08d99908a8e47198e49b91a213aadb1dd619', class: this.class, innerHTML: arrowDiagonal });
     }
     static get is() { return "eds-icon-arrow-diagonal"; }
     static get properties() {
         return {
-            "addClass": {
+            "class": {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
@@ -27,7 +27,7 @@ export class EdsIconArrowDiagonal {
                     "tags": [],
                     "text": "Additional CSS classes to be applied to the icon for styling."
                 },
-                "attribute": "add-class",
+                "attribute": "class",
                 "reflect": false,
                 "defaultValue": "''"
             }

package/dist/collection/components/eds-icons/eds-icon-arrow-right/eds-icon-arrow-right.js

@@ -8,7 +8,7 @@ export class EdsIconArrowRight {
         this.class = '';
     }
     render() {
-        return h("span", { key: '823be807e649d4ddbd41c0628e2fda249a8c6f74', class: this.class, innerHTML: arrowRight });
+        return h("span", { key: '399c8c70c1d875f35b7f4f578efe8072fb59d008', class: this.class, innerHTML: arrowRight });
     }
     static get is() { return "eds-icon-arrow-right"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-bookmark/eds-icon-bookmark.js

@@ -0,0 +1,36 @@
+import { bookmark } from "../../../../../../../../packages/svgs/src/index";
+import { h } from "@stencil/core";
+/**
+ * @internal
+ */
+export class EdsIconBookmark {
+    constructor() {
+        this.class = '';
+    }
+    render() {
+        return h("span", { key: '9cc4aa1805e43ca6275305e26d2fff79e2818862', class: this.class, innerHTML: bookmark });
+    }
+    static get is() { return "eds-icon-bookmark"; }
+    static get properties() {
+        return {
+            "class": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Additional CSS classes to be applied to the icon for styling."
+                },
+                "attribute": "class",
+                "reflect": false,
+                "defaultValue": "''"
+            }
+        };
+    }
+}