@ebrains/components 0.9.3-beta → 1.0.0

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

@@ -1,7 +1,135 @@
-import { r as registerInstance, h, g as getElement } from './index-8a71b9a7.js';
-import { s as sendAnalytics } from './analytics-44b1416b.js';
-import { g as gradientBGColorVariants } from './color-2554aad6.js';
-import './index-39c58238.js';
+import { r as registerInstance, h, g as getElement } from './index-fdb33359.js';
+import { s as sendAnalytics } from './analytics-d99780e3.js';
+import { c as cva } from './index-39c58238.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) {
@@ -56,7 +184,7 @@ const EdsCardProject = class {
             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', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: 'e8d7f04e95722dc8ec8bcb7f90b2b8495b8c13ef', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '5ab94ee81425c5f7a143e7f1eb7981da6508e307', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'd303425849c5df81c0b72e096313a96031d1c435', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '3d4c6b9422d02e4d40d29d7875e3fc651d2f7bd4', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '2b14dee584d20e90dac0da3b93dff1dbc6f36470', 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', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '5b5cae3820ab870a7588d801151390be494d5c7e', class: imageClasses }, h("div", { key: 'e7bb9f3b090f5497b315a4d2495592cfbe5a4aa0', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '8fdecaed876c671a08067fdb272f4932b67ae406', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: '7a69b9f5fc30ce389267a064e82aa2cf78b676d1', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '8495c7b6655418741b1d208f06f003d4ec2eaf79', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '803b274d099072e055c484e818732a48ff27ebab', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '18b1d058c9d92e3df264c5f60cec0adc8f14f19e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '1854001686cae69c50a97ed50534ae4329d3017a', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: 'a5e741ce22ace338988a1a0d6f0d5c2740eb685b', 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: 'c1136aef565b3a35bee7d7c254434b6c06f3cf65', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '531cb24eafadd52397a138735436e0501b45cf76', class: imageClasses }, h("div", { key: 'c692a10bfa0032d4e43fe35090e38dde3e0401f3', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '490983736b4cd9de3b2cfbafe11be15802746afe', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return getElement(this); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { p as parseData } from './sharedUtils-a550989c.js';
 
 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}}";

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 
 const edsCardTagsCss = ".flex{display:flex}.flex-wrap{flex-wrap:wrap}.gap-y-4{row-gap:0.25rem}";
 const EdsCardTagsStyle0 = edsCardTagsCss;

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

@@ -1,5 +1,5 @@
-import { r as registerInstance, h, g as getElement } from './index-8a71b9a7.js';
-import { s as sendAnalytics } from './analytics-44b1416b.js';
+import { r as registerInstance, h, g as getElement } from './index-fdb33359.js';
+import { s as sendAnalytics } from './analytics-d99780e3.js';
 
 const edsCardToolCss = ".h-auto{height:auto}.h-full{height:100%}.\\!min-h-20{min-height:1.25rem !important}.min-h-120{min-height:120px}.min-h-156{min-height:156px}.bg-default{background-color:var(--grey-200)}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:shadow-hover:hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.border-soft{border-color:rgba(0, 0, 0, .15 )}.border-softer{border:2px solid rgba(0, 0, 0, .1 )}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.fixed{position:fixed}.absolute{position:absolute}.relative{position:relative}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.rounded-lg{border-radius:16px}.border-2{border-width:2px}.p-12{padding:0.75rem}.p-16{padding:1rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.gap-y-4{row-gap:0.25rem}.order-first{order:-9999}.mb-10{margin-bottom:0.625rem}.mb-12{margin-bottom:0.75rem}";
 const EdsCardToolStyle0 = edsCardToolCss;
@@ -66,7 +66,7 @@ const EdsCardTool = class {
         });
     }
     render() {
-        return (h("article", { key: '92103cb449fbdfd41adaeb29053746fb652a5203', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '8aebade7b0cfe5ac529ff552113509314ffa4061', "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: '38abb7a59054c6fce836322c26eab77bb508845f', 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: '99158cab0d83e64bf9c45e00c06572efe7328516', 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: 'b3f0c0f3588304fb36f1c395b69b723edbfa8c95', class: `${this.el.tagName.toLowerCase()} ${this.articleClasses()}`, onClick: () => this.handleClick() }, h("eds-card-title", { key: '12f9d1363b3d171912eb00117d99056065fbcb33', "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: '780c4b035e0fff1911ee4b8b04a0729cd182d877', 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: 'a6878ba6bb2086a334282b10750234f4251c6334', 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); }
 };

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h, g as getElement } from './index-8a71b9a7.js';
+import { r as registerInstance, h, g as getElement } from './index-fdb33359.js';
 
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 

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

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 
 const edsCookiesPreferenceCss = "";
 const EdsCookiesPreferenceStyle0 = edsCookiesPreferenceCss;
@@ -27,7 +27,7 @@ const EdsCookiesPreference = class {
         }
     }
     render() {
-        return (h("div", { key: 'ce716958892ee4d324efeb2399885c13d63ff0bb' }, h("eds-link", { key: 'de191023658c2f4c59144d334075d8e1f4fa6133', size: "small", intent: this.intent, label: this.buttonText, onClick: () => this.toggleCookiesPopup() }), this.showMatomoNotice && h("eds-matomo-notice", { "force-show": true, key: this.noticeKey })));
+        return (h("div", { key: '37a817a2c1cccb58a7445c399f20ce5fb97653b8' }, h("eds-link", { key: '9bf85d4fe82d7a525bae6f765da7dea9a3913494', 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;

package/dist/esm/eds-feedback.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a71b9a7.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fdb33359.js';
 import { p as parseData } from './sharedUtils-a550989c.js';
 
 const edsFeedbackCss = "h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}blockquote,dl,dd,h1,h2,h3,h4,h5,h6,hr,figure,p,pre{margin:0}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.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)}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.inline{display:inline}.grid{display:grid}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}";
@@ -8,6 +8,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!';
@@ -53,7 +54,11 @@ const EdsFeedback = class {
         this.selectedRating = e.detail;
     }
     render() {
-        return (h("div", { key: 'a8cf97bdcd7957b98dfca11e178361acf667c23c', class: "grid inline" }, h("h1", { key: '231bb9f49dc6084045a392b1d93c9b4454bbf268', class: "f-heading-01 my-4" }, this.label), h("p", { key: 'a70274de05139c8ab40b5a4a2e599dc14b3d3a9f', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: '5353b7616112591240819e4b762790224a1b7cc7', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'e5f8f10fb052a6de080b61cf78c309a55d081576', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
+        // 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: 'f1bec91df97ff2a54a8ec8284e88f572b3bf0081', class: "grid inline" }, h(HeadingTag, { key: '8051043d5ec79a1f972fd732ef8a716487ed51d2', class: headingClass }, this.label), h("p", { key: '55f319e89376372f13c2bb96b9a94ceed6a6565b', class: "f-body-01 text-light" }, this.description), h("eds-rating", { key: 'c9c725d4a1ae65eb6b773178f6435d239c434034', "rating-type": this.type, "rating-count": this.count }), this.selectedRating > 0 && this.parsedMappings[this.selectedRating - 1] && (h("span", { key: 'e3ea621a035ecd6da07803478d202b2326997416', class: "f-ui-04 text-lighter" }, this.parsedMappings[this.selectedRating - 1]))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/eds-frame.entry.js

@@ -1,6 +1,6 @@
-import { r as registerInstance, h, g as getElement } from './index-8a71b9a7.js';
+import { r as registerInstance, h, g as getElement } from './index-fdb33359.js';
 
-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 {
@@ -72,7 +72,7 @@ const EdsFrame = class {
         }
     }
     render() {
-        return (h("div", { key: '69d47526ffca56defb1e9da214c46822fa963c14', class: this.articleClasses() }, h("div", { key: 'cab7cd55b15afaa77a4f4b713c55a6776dcb6a2d', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '99b5499c4bf992cc7101d6ea6812000283a34968', class: "f-ui-02" }, this.frameLabel), !this.iframeError ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: '275490ec93896eafe8a7042b86769b1f96e8bc8f', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '61c401d6e021418e3d705cc9a4418b4f54f6bcf1', class: this.articleClasses() }, h("div", { key: '3fe7284c2ce4057d6c953c02e03489c0ef75f43d', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'a0efaa70d4ab2484c76d38e309c0bf9800edf569', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: 'e99188447abb78659865758afe3226a7ade7f8f2', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     get el() { return getElement(this); }
 };

package/dist/esm/eds-icon-arrow-diagonal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { a as arrowDiagonal } from './arrow-diagonal-black-8f0494c3.js';
 
 const EdsIconArrowDiagonal = class {

package/dist/esm/eds-icon-arrow-right.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { a as arrowRight } from './arrow-right-9322ba8a.js';
 
 const EdsIconArrowRight = class {

package/dist/esm/eds-icon-bluesky.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { b as bluesky } from './bluesky-cc5edd2d.js';
 
 const EdsIconBluesky = class {

package/dist/esm/eds-icon-bookmark.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { b as bookmark } from './bookmark-c200037c.js';
 
 const EdsIconBookmark = class {

package/dist/esm/eds-icon-chevron-down.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { c as chevronDown } from './chevron-down-6144c823.js';
 
 const EdsIconChevronDown = class {

package/dist/esm/eds-icon-chevron-left.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { c as chevronLeft } from './chevron-left-ca6c66e1.js';
 
 const EdsIconChevronLeft = class {

package/dist/esm/eds-icon-chevron-right.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { c as chevronRight } from './chevron-right-b88ed2d4.js';
 
 const EdsIconChevronRight = class {

package/dist/esm/eds-icon-chevron-up.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { c as chevronUp } from './chevron-up-c66bd477.js';
 
 const EdsIconChevronUp = class {

package/dist/esm/eds-icon-close.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { c as close } from './close-87fc0d63.js';
 
 const EdsIconClose = class {

package/dist/esm/eds-icon-copy.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { c as copy } from './copy-03b72cb6.js';
 
 const EdsIconCopy = class {

package/dist/esm/eds-icon-eu.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { e as euSvg } from './eu-9ddde93a.js';
 
 const EdsIconEu = class {

package/dist/esm/eds-icon-external.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { a as arrowDiagonal } from './arrow-diagonal-black-8f0494c3.js';
 
 const EdsIconExternal = class {

package/dist/esm/eds-icon-facebook.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { f as facebook } from './facebook-9cb5c17f.js';
 
 const EdsIconFacebook = class {

package/dist/esm/eds-icon-gitlab.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { g as gitlabBlack } from './mono-53f70232.js';
 
 const EdsIconGitlab = class {

package/dist/esm/eds-icon-linkedin.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { l as linkedin } from './linkedin-e8650abb.js';
 
 const EdsIconLinkedin = class {

package/dist/esm/eds-icon-loader.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { l as loader } from './loader-c9628637.js';
 
 const EdsIconLoader = class {

package/dist/esm/eds-icon-mastodon.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { m as mastodon } from './mastodon-3703ec61.js';
 
 const EdsIconMastodon = class {

package/dist/esm/eds-icon-menu.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { m as menu } from './menu-340ea948.js';
 
 const EdsIconMenu = class {

package/dist/esm/eds-icon-minus.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { m as minus } from './minus-b30a7c71.js';
 
 const EdsIconMinus = class {

package/dist/esm/eds-icon-more.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { m as more } from './more-4449d549.js';
 
 const EdsIconMore = class {

package/dist/esm/eds-icon-paper.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { p as paper } from './paper-8e74ea31.js';
 
 const EdsIconPaper = class {

package/dist/esm/eds-icon-plus.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { p as plus } from './plus-89c07be2.js';
 
 const EdsIconPlus = class {

package/dist/esm/eds-icon-portal.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { p as portal } from './portal-d6c8ce56.js';
 
 const EdsIconPortal = class {

package/dist/esm/eds-icon-private.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { p as privat } from './private-1c25ff8e.js';
 
 const EdsIconPrivate = class {

package/dist/esm/eds-icon-public.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { p as pub } from './public-d4d8c585.js';
 
 const EdsIconPublic = class {

package/dist/esm/eds-icon-search.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { s as search } from './search-fbcd79c2.js';
 
 const EdsIconSearch = class {

package/dist/esm/eds-icon-star.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { s as star } from './star-0da9b5e9.js';
 
 const EdsIconStar = class {

package/dist/esm/eds-icon-success.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { s as success } from './success-443809da.js';
 
 const EdsIconSuccess = class {

package/dist/esm/eds-icon-thumbs-down.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { t as thumbsDown } from './thumbs-down-a18fd049.js';
 
 const EdsIconThumbsDown = class {

package/dist/esm/eds-icon-thumbs-up.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { t as thumbsUp } from './thumbs-up-c19a71bc.js';
 
 const EdsIconThumbsUp = class {

package/dist/esm/eds-icon-tutorial.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { t as tutorial } from './tutotial-150ee1fd.js';
 
 const EdsIconTutorial = class {

package/dist/esm/eds-icon-twitter.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { t as twitter } from './twitter-ac21b505.js';
 
 const EdsIconTwitter = class {

package/dist/esm/eds-icon-unknown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { u as unknown } from './unknown-ed01a24c.js';
 
 const EdsIconUnknown = class {

package/dist/esm/eds-icon-updown.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { u as upDonw } from './up-and-down-d747abee.js';
 
 const EdsIconUpdown = class {

package/dist/esm/eds-icon-user.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { u as user } from './user-71ebdc15.js';
 
 const EdsIconUser = class {

package/dist/esm/eds-icon-youtube.entry.js

@@ -1,4 +1,4 @@
-import { r as registerInstance, h } from './index-8a71b9a7.js';
+import { r as registerInstance, h } from './index-fdb33359.js';
 import { y as youtube } from './youtube-efbfbdc4.js';
 
 const EdsIconYoutube = class {

package/dist/esm/eds-matomo-notice.entry.js

@@ -1,5 +1,5 @@
-import { r as registerInstance, c as createEvent, h, g as getElement } from './index-8a71b9a7.js';
-import { m as matomoOptIn, a as matomoOptOut } from './analytics-44b1416b.js';
+import { r as registerInstance, c as createEvent, h, g as getElement } from './index-fdb33359.js';
+import { m as matomoOptIn, a as matomoOptOut } from './analytics-d99780e3.js';
 
 const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
 const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
@@ -92,14 +92,16 @@ const EdsMatomoNotice = class {
         this.consent.emit('out');
     }
     noThanks() {
+        matomoOptOut();
         localStorage.setItem(`${window.location.host}-matomo-consent-given`, 'out');
         this.hideNotice();
+        this.consent.emit('out');
     }
-    deferDecision() {
-        sessionStorage.setItem(this.getStorageKey(), 'true');
-        this.hideNotice();
-        this.consent.emit('defer');
-    }
+    /*private deferDecision() {
+      sessionStorage.setItem(this.getStorageKey(), 'true');
+      this.hideNotice();
+      this.consent.emit('defer');
+    }*/
     keepMeIn() {
         this.hideNotice();
     }
@@ -110,7 +112,7 @@ const EdsMatomoNotice = class {
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }), h("eds-button", { intent: "ghost", label: "Ask me later", "aria-label": "Defer analytics decision", onClick: () => this.deferDecision() }))))));
+        return (h("div", { class: "fixed bottom-0 p-8 z-[999999] grow md:left-1/2 md:-translate-x-1/2 md:-translate-y-1/2 justify-center" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-4" }, this.optedOut() ? (h("eds-button", { intent: "primary", label: "Opt me in again", "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "primary", label: "Keep Me In", "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghostInverse", label: "Opt-out", "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-4" }, h("eds-button", { intent: "primary", label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     get el() { return getElement(this); }
 };