@ebrains/components 2.0.0 → 2.1.0

package/dist/collection/utils/eds-form/formValidators.js

@@ -21,6 +21,13 @@ export function findRatingElement(formEl) {
     }
     return null;
 }
+export function findNpsElement(formEl) {
+    const elements = Array.from(formEl.querySelectorAll('eds-nps'));
+    for (const element of elements) {
+        return element;
+    }
+    return null;
+}
 /**
  * Validates all fields and returns an object containing the errors and a flag indicating any errors.
  */
@@ -30,6 +37,7 @@ isFieldVisible) {
     const errors = {};
     let hasError = false;
     parsedFields.forEach((field) => {
+        var _a;
         // Only validate fields that are visible.
         if (!isFieldVisible(field, values)) {
             // If a field is hidden, clear its error.
@@ -65,6 +73,31 @@ isFieldVisible) {
                     }
                 }
             }
+            // NPS type
+            else if (field.type === 'nps') {
+                const npsEl = findNpsElement(formEl);
+                if (npsEl && npsEl.shadowRoot) {
+                    const raw = (_a = npsEl.shadowRoot
+                        .querySelector('div[role="radio"][aria-checked="true"] eds-button')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
+                    const value = raw !== null ? parseInt(raw, 10) : null;
+                    if (value === null) {
+                        // eslint-disable-next-line
+                        if (field.required) {
+                            errors[field.name] = ['This field is required.'];
+                            hasError = true;
+                        }
+                    }
+                    else {
+                        // valid value present; if you need further range checks, add here
+                    }
+                }
+                else if (field.required) {
+                    // No NPS component found but required
+                    errors[field.name] = ['This field is required.'];
+                    hasError = true;
+                }
+                return;
+            }
             else {
                 // For all other types, find the first matching element.
                 const inputEl = findFieldElement(formEl, field.name);

package/dist/components/clone.js

@@ -0,0 +1,3 @@
+const clone = `<svg fill="#000000" height="20" width="20" version="1.1" id="XMLID_158_" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24" xml:space="preserve"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <g id="clone"> <g> <path d="M24,24H6V6h18V24z M8,22h14V8H8V22z M4,18H0v-4h2v2h2V18z M2,12H0V6h2V12z M18,4h-2V2h-2V0h4V4z M2,4H0V0h4v2H2V4z M12,2 H6V0h6V2z"></path> </g> </g> </g></svg>`;
+
+export { clone as c };

package/dist/components/components-section.js

@@ -143,7 +143,7 @@ const ComponentsSection$1 = /*@__PURE__*/ proxyCustomElement(class ComponentsSec
         }
     }
     render() {
-        return h("div", { key: 'a57909fff6c8fc3bc0bc82804595cfb08edf1b9f', class: "container" }, this.renderContent());
+        return h("div", { key: 'dc274e3d76a296c8a8b18abcc4fc8741a6b9eddd', class: "container" }, this.renderContent());
     }
 }, [0, "components-section", {
         "tabIndex": [2, "tab-index"]

package/dist/components/components.css

@@ -1006,6 +1006,10 @@ video {
   --transparent: transparent;
   --current: currentColor;
 }
+.grid-col-span-1 {
+  --container-grid-columns: 1;
+  grid-column: span 1 / span 1;
+}
 .grid-col-span-2 {
   --container-grid-columns: 2;
   grid-column: span 2 / span 2;
@@ -6286,6 +6290,9 @@ input[type="range"]::-webkit-slider-thumb {
   -webkit-box-orient: vertical;
   -webkit-line-clamp: 4;
 }
+.\!block {
+  display: block !important;
+}
 .block {
   display: block;
 }
@@ -6580,11 +6587,6 @@ input[type="range"]::-webkit-slider-thumb {
   margin-top: calc(1rem * calc(1 - var(--tw-space-y-reverse)));
   margin-bottom: calc(1rem * var(--tw-space-y-reverse));
 }
-.space-y-2 > :not([hidden]) ~ :not([hidden]) {
-  --tw-space-y-reverse: 0;
-  margin-top: calc(0.125rem * calc(1 - var(--tw-space-y-reverse)));
-  margin-bottom: calc(0.125rem * var(--tw-space-y-reverse));
-}
 .space-y-4 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
@@ -6999,10 +7001,6 @@ input[type="range"]::-webkit-slider-thumb {
   --tw-shadow-colored: 0px 1.5px 2px var(--tw-shadow-color);
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
-.outline-none {
-  outline: 2px solid transparent;
-  outline-offset: 2px;
-}
 .ring {
   --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
   --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);

package/dist/components/components.esm.js

@@ -1 +1 @@
-import{p as e,b as a}from"./p-28ae3f3a.js";export{s as setNonce}from"./p-28ae3f3a.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a(JSON.parse('[["p-4088ae0e",[[1,"eds-form",{"name":[1],"setFormUrl":[4,"set-form-url"],"formBtn":[4,"form-btn"],"formBtnLabel":[1,"form-btn-label"],"errorMessage":[1,"error-message"],"fields":[1],"groups":[1],"initData":[16],"values":[32],"isSubmitting":[32],"hasError":[32],"errors":[32],"parsedFields":[32],"parsedGroups":[32],"setData":[64],"getData":[64]},null,{"fields":["parseFields"],"groups":["parseGroups"]}],[1,"eds-user",{"user":[1025]}],[1,"eds-header",{"homeUrl":[513,"home-url"],"links":[1],"headerVariant":[513,"header-variant"],"menuEnabled":[4,"menu-enabled"],"isMenuOpen":[32],"isUserMenuOpen":[32],"isAuthenticated":[32]},[[16,"authStatusChanged","onAuthStatusChanged"]]],[1,"eds-steps-v2",{"steps":[1],"type":[1],"imageSrc":[1,"image-src"],"imageWidth":[2,"image-width"],"bg":[4],"message":[1],"activeStep":[32]},null,{"activeStep":["activeStepChanged"]}],[1,"eds-tabs",{"identifier":[1,"id"],"navAriaLabel":[1,"nav-aria-label"],"tabs":[1],"parsedTabs":[32],"activeIndex":[32]},null,{"tabs":["parseTabs"]}],[1,"eds-dropdown",{"icon":[1],"label":[1],"rounded":[4],"ariaLabel":[1,"aria-label"],"asNav":[4,"as-nav"],"dropdownPos":[1,"dropdown-pos"],"dropdownOffset":[4,"dropdown-offset"],"intent":[1],"isOpen":[32],"focusIndex":[32]},[[8,"click","handleWindowClick"],[8,"keydown","handleKeyDown"]]],[1,"eds-steps",{"steps":[1],"type":[1],"activeStep":[32]},null,{"activeStep":["activeStepChanged"]}],[1,"eds-toast",{"message":[1],"intent":[1],"duration":[2],"visible":[32]}],[1,"eds-rating",{"ratingType":[1,"rating-type"],"ratingCount":[2,"rating-count"],"selectedRating":[32]}],[1,"eds-table",{"data":[1,"table-data"],"endpoint":[1],"config":[1],"rowsPerPage":[2,"rows-per-page"],"paginationEnabled":[4,"pagination-enabled"],"searchEnabled":[4,"search-enabled"],"hostWidth":[1,"host-width"],"columnSize":[1,"column-size"],"actions":[1],"actionTemplate":[16],"parsedActions":[32],"dataColumns":[32],"tbData":[32],"columns":[32],"currentPage":[32],"parsedConfig":[32],"totalRows":[32],"searchQuery":[32],"containerWidth":[32]},null,{"data":["handleDataChange","parseData"],"config":["handleConfigChange"],"actions":["handleActionsChange"]}],[1,"eds-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"perPage":[2,"per-page"],"total":[2],"url":[1],"mode":[1],"prevLabel":[1,"prev-label"],"nextLabel":[1,"next-label"],"prevUrl":[1,"prev-url"],"nextUrl":[1,"next-url"],"links":[32]},null,{"currentPage":["onPageOrLastPageChange"],"lastPage":["onPageOrLastPageChange"]}],[1,"eds-block-break",{"inverse":[4]}],[1,"eds-input-field",{"name":[1],"inputId":[1,"input-id"],"placeholder":[1],"disabled":[4],"required":[4],"label":[1],"hint":[1],"icon":[1],"link":[16],"message":[1],"error":[4],"checked":[4],"errorMessage":[1,"error-message"],"value":[8],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"options":[1],"type":[1],"onChangeNative":[16],"onInput":[16],"exposeValueEvents":[4,"expose-value-events"]}],[1,"eds-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"picture":[1],"initials":[1],"color":[1]}],[0,"eds-input",{"name":[1],"inputId":[1,"input-id"],"placeholder":[1],"disabled":[4],"hasMessage":[4,"has-message"],"error":[4],"checked":[4],"type":[1],"required":[4],"value":[8],"icon":[1],"maxLength":[2,"max-length"],"options":[16],"extraClass":[1,"extra-class"],"min":[2],"max":[2],"step":[2],"innerVal":[32],"maxLengthReached":[32]},null,{"value":["onValueChanged"]}],[1,"eds-input-footer",{"name":[1],"errorMessage":[1,"error-message"],"message":[1],"error":[4],"link":[16]}],[0,"eds-input-search",{"name":[1],"inputId":[1,"input-id"],"placeholder":[1],"value":[1],"disabled":[4],"required":[4],"decorate":[1],"label":[1],"getInputElement":[64]}],[0,"eds-input-select",{"inputId":[1,"input-id"],"name":[1],"placeholder":[1],"disabled":[4],"hasMessage":[4,"has-message"],"error":[4],"required":[4],"options":[16],"value":[8]}],[1,"eds-input-label",{"label":[1],"name":[1],"required":[4],"disabled":[4]}],[0,"eds-input-range",{"name":[1],"inputId":[1,"input-id"],"disabled":[4],"required":[4],"min":[2],"max":[2],"step":[2],"value":[2],"sliderVal":[32],"getInputElement":[64]},null,{"value":["onValueChange"]}],[1,"eds-tag",{"label":[1],"intent":[1],"size":[1]}],[1,"eds-logo",{"href":[1],"orientation":[1],"type":[1],"label":[1]}],[1,"eds-img",{"src":[1],"alt":[1],"width":[2],"height":[2],"srcset":[1],"sizes":[1],"formats":[16],"lazyload":[4],"withBg":[4,"with-bg"],"loaded":[32],"showBg":[32]}],[1,"eds-link",{"label":[1],"intent":[1],"icon":[1],"iconPos":[1,"icon-pos"],"iconSmall":[4,"icon-small"],"size":[1],"external":[4],"current":[4],"download":[4],"url":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"hideLabelOnSmallScreen":[4,"hide-label-on-small-screen"],"extraClass":[1,"extra-class"]},[[0,"parentContext","handleParentContext"]]],[1,"eds-button",{"label":[1],"ariaLabel":[1,"aria-label"],"elementType":[1,"element-type"],"intent":[1],"loading":[4],"disabled":[4],"pill":[4],"icon":[1],"size":[1],"iconPos":[1,"icon-pos"],"iconSmall":[4,"icon-small"],"extraClass":[1,"extra-class"],"triggerClick":[16]},[[0,"parentContext","handleParentContext"]]],[0,"eds-icon-wrapper",{"icon":[1],"class":[1],"IconComponent":[32]},null,{"icon":["iconChanged"]}]]],["p-93e6ba0f",[[0,"eds-trl",{"applications":[1]}]]],["p-794f11e7",[[1,"logo-space"]]],["p-7dbe791f",[[1,"svg-repository"]]],["p-9e53eca3",[[0,"docs-palettes",{"tabIndex":[2,"tab-index"]}]]],["p-73c74835",[[0,"components-section",{"tabIndex":[2,"tab-index"]}]]],["p-564431ad",[[1,"eds-fullscreen-menu",{"links":[1],"menuLinks":[1,"menu-links"],"homeUrl":[1,"home-url"],"inverseHeader":[4,"inverse-header"],"isMenuOpen":[32]},[[16,"toggleheadermenu","handleToggleMenu"]]]]],["p-adbd0d7b",[[1,"eds-card-section",{"cards":[1],"occupyCols":[2,"occupy-cols"]}]]],["p-0687532c",[[1,"eds-timeline",{"events":[1],"selectedEvent":[32],"parsedEvents":[32]},null,{"events":["parseEvents"]}]]],["p-ed4d9bf5",[[0,"docs-tokens",{"tabIndex":[2,"tab-index"]}]]],["p-1f5c19b9",[[1,"eds-card-tool",{"cardTitle":[1,"card-title"],"url":[1],"description":[1],"image":[8],"avatar":[1],"shortAbbreviation":[1,"short-abbreviation"],"headingLevel":[1,"heading-level"],"tags":[8],"tiny":[4],"bg":[4],"withHover":[4,"with-hover"],"external":[4],"hierarchy":[4]}]]],["p-f6ca2aa6",[[0,"eds-cookies-preference",{"buttonText":[1,"button-text"],"intent":[1],"showMatomoNotice":[32],"noticeKey":[32]}]]],["p-43468b0f",[[1,"eds-app-root",{"isAuthenticated":[32]}]]],["p-4e473b4e",[[0,"eds-card-project",{"image":[8],"editorialTitle":[1,"editorial-title"],"headingLevel":[1,"heading-level"],"categoryTitle":[1,"category-title"],"color":[1],"bgOnHover":[4,"bg-on-hover"],"vertical":[4],"titleProject":[1,"title-project"],"url":[1],"parsedImage":[32]}]]],["p-2839899a",[[1,"eds-feedback",{"headingLevel":[1,"heading-level"],"type":[1],"count":[2],"label":[1],"description":[1],"textMapping":[1,"text-mapping"],"selectedRating":[32]},[[16,"rating","ratingUpdated"]]]]],["p-356846cd",[[1,"eds-toast-manager",{"toasts":[32]}]]],["p-ed7696a2",[[0,"incorrect-use-of-colors"]]],["p-3a331c68",[[0,"logo-variations-tabs",{"tabIndex":[2,"tab-index"]}]]],["p-773a119a",[[0,"correct-use-of-colors"]]],["p-b630e51a",[[1,"eds-breadcrumb",{"items":[1],"intent":[1],"parsedItems":[32],"isSmallScreen":[32],"maxVisibleItems":[32]},null,{"items":["parseItems"]}]]],["p-70e8e66f",[[1,"eds-frame",{"frameLabel":[1,"frame-label"],"frameSrc":[1,"frame-src"],"urlLabel":[1,"url-label"],"errorMessage":[1,"error-message"],"url":[1],"intent":[1],"size":[1],"iframeError":[32]}]]],["p-e35e156d",[[1,"eds-modal",{"heading":[1,"title"],"truncate":[2],"position":[1],"inverseHeader":[4,"inverse-header"],"isOpen":[32],"open":[64],"close":[64],"toggle":[64]},[[0,"eds-modal-open","handleGlobalOpen"],[0,"eds-modal-close","handleGlobalClose"],[8,"keydown","handleKeyDown"]]]]],["p-82559816",[[0,"token-ratios"]]],["p-3e183368",[[0,"token-typography"]]],["p-11efb1d1",[[1,"eds-card-tags",{"accent":[4],"tags":[16]}]]],["p-b073d78f",[[1,"eds-gauge",{"size":[2],"valueMin":[2,"value-min"],"valueMax":[2,"value-max"],"value":[2],"thickness":[2],"variant":[1]}]]],["p-19d586e6",[[0,"eds-icon-arrow-diagonal",{"class":[1]}]]],["p-d4f239d7",[[0,"eds-icon-arrow-right",{"class":[1]}]]],["p-68f45098",[[0,"eds-icon-bin",{"class":[1]}]]],["p-d7251d4d",[[0,"eds-icon-bluesky",{"class":[1]}]]],["p-0be79e08",[[0,"eds-icon-bookmark",{"class":[1]}]]],["p-c91b4eec",[[0,"eds-icon-chevron-down",{"class":[1]}]]],["p-023bc47c",[[0,"eds-icon-chevron-left",{"class":[1]}]]],["p-f2416727",[[0,"eds-icon-chevron-right",{"class":[1]}]]],["p-50f43dfd",[[0,"eds-icon-chevron-up",{"class":[1]}]]],["p-562afa88",[[0,"eds-icon-close",{"class":[1]}]]],["p-f28b5da7",[[0,"eds-icon-copy",{"class":[1]}]]],["p-f7a31196",[[0,"eds-icon-draft",{"class":[1]}]]],["p-f42b6251",[[0,"eds-icon-edit",{"class":[1]}]]],["p-85683b18",[[0,"eds-icon-eu",{"class":[1]}]]],["p-4b88d84c",[[0,"eds-icon-external",{"class":[1]}]]],["p-0e74d8b4",[[0,"eds-icon-facebook",{"class":[1]}]]],["p-2679926c",[[0,"eds-icon-gitlab",{"class":[1]}]]],["p-32e18e48",[[0,"eds-icon-linkedin",{"class":[1]}]]],["p-634258e6",[[0,"eds-icon-loader",{"class":[1]}]]],["p-42a73db4",[[0,"eds-icon-mastodon",{"class":[1]}]]],["p-aa5e75b4",[[0,"eds-icon-menu",{"class":[1]}]]],["p-ce66ea37",[[0,"eds-icon-minus",{"class":[1]}]]],["p-4a5d0dcd",[[0,"eds-icon-more",{"class":[1]}]]],["p-ae9393b6",[[0,"eds-icon-paper",{"class":[1]}]]],["p-38e99d4b",[[0,"eds-icon-plus",{"class":[1]}]]],["p-2d1a7471",[[0,"eds-icon-portal",{"class":[1]}]]],["p-02df910c",[[0,"eds-icon-private",{"class":[1]}]]],["p-44055e68",[[0,"eds-icon-public",{"class":[1]}]]],["p-af137162",[[0,"eds-icon-search",{"class":[1]}]]],["p-4a7412ec",[[0,"eds-icon-star",{"class":[1]}]]],["p-f973c83b",[[0,"eds-icon-start",{"class":[1]}]]],["p-73a44c48",[[0,"eds-icon-success",{"class":[1]}]]],["p-996005b7",[[0,"eds-icon-thumbs-down",{"class":[1]}]]],["p-5ae1c931",[[0,"eds-icon-thumbs-up",{"class":[1]}]]],["p-5aa4065a",[[0,"eds-icon-tutorial",{"class":[1]}]]],["p-877d13d9",[[0,"eds-icon-twitter",{"class":[1]}]]],["p-2ff16a39",[[0,"eds-icon-unknown",{"class":[1]}]]],["p-caff3355",[[0,"eds-icon-updown",{"class":[1]}]]],["p-960aa103",[[0,"eds-icon-user",{"class":[1]}]]],["p-f3839914",[[0,"eds-icon-youtube",{"class":[1]}]]],["p-8c0b0121",[[1,"eds-pie",{"size":[2],"slices":[1],"thickness":[2],"display":[1],"legend":[4],"colorScheme":[1,"color-scheme"]}]]],["p-1791ce82",[[1,"eds-switch",{"checked":[1540],"disabled":[4],"labelOn":[1,"label-on"],"labelOff":[1,"label-off"]}]]],["p-8dee879d",[[1,"eds-tooltip",{"content":[1],"position":[1]},[[1,"mouseenter","handleHover"]]]]],["p-024789cc",[[1,"logo-wrong-usage"]]],["p-c2dc3692",[[0,"token-spacing"]]],["p-8681e5d8",[[1,"eds-footer",{"social":[4],"enableScrollTop":[4,"enable-scroll-top"],"fundedBy":[1,"funded-by"],"rightsReserved":[1,"rights-reserved"],"cookiesPreferences":[1,"cookies-preferences"],"enableCookiesSettings":[4,"enable-cookies-settings"],"backToTopAriaLabel":[1,"back-to-top-aria-label"],"showMatomoNotice":[32]},[[9,"scroll","handleScroll"]]]]],["p-bb9af709",[[1,"eds-matomo-notice",{"heading":[1,"title"],"description":[1],"optOutMessage":[1,"opt-out-message"],"forceShow":[4,"force-show"],"showNotice":[32]},[[16,"cookies","toggleCookiesConsent"]]]]],["p-9d18d7b1",[[1,"eds-spinner",{"size":[1],"variant":[1],"message":[1],"background":[1],"fullscreen":[4]}]]],["p-543f2347",[[1,"eds-splash-screen",{"inverse":[4],"initPromise":[16],"isVisible":[32]},[[8,"hideSplash","handleHideSplash"]],{"initPromise":["watchInitPromise"]}]]],["p-b3a40663",[[1,"eds-progress-bar",{"value":[1026],"rounded":[4],"updateValue":[64]}]]],["p-02d94d2d",[[1,"eds-card-generic",{"cardTitle":[1,"card-title"],"url":[1],"description":[1],"image":[8],"avatar":[1],"shortAbbreviation":[1,"short-abbreviation"],"headingLevel":[1,"heading-level"],"tags":[1],"tiny":[4],"bg":[4],"withHover":[4,"with-hover"],"hierarchy":[4],"parsedImage":[32]},[[0,"parentContext","handleParentContext"]]]]],["p-6d3b5818",[[1,"logo-variations-horizontal"],[1,"logo-variations-vertical",{"orientation":[1],"type":[1]}]]],["p-7ec52188",[[1,"eds-accordion",{"heading":[1,"title"],"description":[1],"switchBg":[4,"switch-bg"],"expanded":[4],"clampText":[4,"clamp-text"],"buttonIntent":[1,"button-intent"],"isExpanded":[32],"panelHeight":[32],"shortContent":[32],"headerHeight":[32]}]]],["p-deb9bbed",[[1,"eds-alert",{"message":[1],"pressableLabel":[1,"pressable-label"],"pressableUrl":[1,"pressable-url"],"direction":[1],"intent":[1],"brd":[1],"withBtn":[32]}]]],["p-76905315",[[1,"eds-social-networks",{"heading":[1,"title"]}]]],["p-e2e7250a",[[0,"token-list",{"show":[1]}],[0,"token-radii"],[0,"token-shadows"]]],["p-911b1c0b",[[1,"eds-section-core",{"tag":[1],"sectionTitle":[1,"section-title"],"headingLevel":[1,"heading-level"]}],[0,"eds-section-heading",{"sectionTitle":[1,"section-title"],"withContainer":[4,"with-container"],"headingLevel":[1,"heading-level"],"tag":[1],"spacingLarge":[4,"spacing-large"]}]]],["p-fe167c78",[[1,"eds-code-block",{"code":[1],"language":[1],"copied":[32]}]]],["p-4277fb1a",[[0,"gradient-secondary-palette"],[0,"color-primary-palette"],[0,"color-secondary-palette",{"show":[1]}],[0,"color-support-palette"],[0,"gradient-primary-palette"],[0,"gradient-support-palette"]]],["p-66f4cdd9",[[1,"eds-card-desc",{"description":[1],"truncate":[4],"truncateLines":[1,"truncate-lines"]}],[1,"eds-card-title",{"url":[1],"titleClass":[1,"title-class"],"headingLevel":[1,"heading-level"],"externalLink":[4,"external-link"],"cardTitle":[1,"card-title"],"hierarchy":[4]}]]]]'),e))));
+import{p as e,b as a}from"./p-efbc374c.js";export{s as setNonce}from"./p-efbc374c.js";import{g as t}from"./p-e1255160.js";(()=>{const a=import.meta.url,s={};return""!==a&&(s.resourcesUrl=new URL(".",a).href),e(s)})().then((async e=>(await t(),a(JSON.parse('[["p-f32963ff",[[1,"eds-form",{"name":[1],"setFormUrl":[4,"set-form-url"],"formBtn":[4,"form-btn"],"formBtnLabel":[1,"form-btn-label"],"errorMessage":[1,"error-message"],"fields":[1],"groups":[1],"initData":[16],"values":[32],"isSubmitting":[32],"hasError":[32],"errors":[32],"parsedFields":[32],"parsedGroups":[32],"setData":[64],"getData":[64]},null,{"fields":["parseFields"],"groups":["parseGroups"]}],[1,"eds-user",{"user":[1025]}],[1,"eds-header",{"homeUrl":[513,"home-url"],"links":[1],"headerVariant":[513,"header-variant"],"menuEnabled":[4,"menu-enabled"],"isMenuOpen":[32],"isUserMenuOpen":[32],"isAuthenticated":[32]},[[16,"authStatusChanged","onAuthStatusChanged"]]],[1,"eds-steps-v2",{"steps":[1],"type":[1],"imageSrc":[1,"image-src"],"imageWidth":[2,"image-width"],"bg":[4],"message":[1],"activeStep":[32]},null,{"activeStep":["activeStepChanged"]}],[1,"eds-breadcrumb",{"items":[1],"intent":[1],"parsedItems":[32],"isSmallScreen":[32],"maxVisibleItems":[32]},null,{"items":["parseItems"]}],[1,"eds-switch",{"checked":[1540],"disabled":[4],"labelOn":[1,"label-on"],"labelOff":[1,"label-off"]}],[1,"eds-tabs",{"identifier":[1,"id"],"navAriaLabel":[1,"nav-aria-label"],"tabs":[1],"parsedTabs":[32],"activeIndex":[32]},null,{"tabs":["parseTabs"]}],[1,"eds-matomo-notice",{"heading":[1,"title"],"description":[1],"optOutMessage":[1,"opt-out-message"],"forceShow":[4,"force-show"],"showNotice":[32]},[[16,"cookies","toggleCookiesConsent"]]],[1,"eds-nps",{"question":[1],"leftLabel":[1,"left-label"],"rightLabel":[1,"right-label"],"selectedValue":[32]}],[1,"eds-dropdown",{"icon":[1],"label":[1],"rounded":[4],"ariaLabel":[1,"aria-label"],"asNav":[4,"as-nav"],"dropdownPos":[1,"dropdown-pos"],"dropdownOffset":[4,"dropdown-offset"],"intent":[1],"isOpen":[32],"focusIndex":[32]},[[8,"click","handleWindowClick"],[8,"keydown","handleKeyDown"]]],[1,"eds-steps",{"steps":[1],"type":[1],"activeStep":[32]},null,{"activeStep":["activeStepChanged"]}],[1,"eds-toast",{"message":[1],"intent":[1],"duration":[2],"visible":[32]}],[1,"eds-alert",{"message":[1],"pressableLabel":[1,"pressable-label"],"pressableUrl":[1,"pressable-url"],"direction":[1],"intent":[1],"brd":[1],"withBtn":[32]}],[1,"eds-accordion",{"heading":[1,"title"],"description":[1],"switchBg":[4,"switch-bg"],"expanded":[4],"clampText":[4,"clamp-text"],"buttonIntent":[1,"button-intent"],"isExpanded":[32],"panelHeight":[32],"shortContent":[32],"headerHeight":[32]}],[1,"eds-rating",{"ratingType":[1,"rating-type"],"ratingCount":[2,"rating-count"],"selectedRating":[32]}],[1,"eds-table",{"data":[1,"table-data"],"config":[1],"rowsPerPage":[2,"rows-per-page"],"paginationEnabled":[4,"pagination-enabled"],"searchEnabled":[4,"search-enabled"],"hostWidth":[1,"host-width"],"columnSize":[1,"column-size"],"actions":[1],"actionTemplate":[16],"parsedActions":[32],"dataColumns":[32],"tbData":[32],"columns":[32],"currentPage":[32],"parsedConfig":[32],"totalRows":[32],"searchQuery":[32],"containerWidth":[32]},null,{"data":["handleDataChange","parseData"],"config":["handleConfigChange"],"actions":["handleActionsChange"]}],[1,"eds-block-break",{"inverse":[4]}],[1,"eds-pagination",{"currentPage":[2,"current-page"],"lastPage":[2,"last-page"],"perPage":[2,"per-page"],"total":[2],"url":[1],"mode":[1],"useButtons":[4,"use-buttons"],"prevLabel":[1,"prev-label"],"nextLabel":[1,"next-label"],"prevUrl":[1,"prev-url"],"nextUrl":[1,"next-url"],"links":[32],"focusedIndex":[32]},null,{"currentPage":["onPageOrLastPageChange"],"lastPage":["onPageOrLastPageChange"]}],[17,"eds-input-field",{"name":[1],"inputId":[1,"input-id"],"placeholder":[1],"disabled":[4],"required":[4],"label":[1],"hint":[1],"icon":[1],"link":[16],"message":[1],"error":[4],"checked":[4],"errorMessage":[1,"error-message"],"value":[8],"maxLength":[2,"max-length"],"min":[2],"max":[2],"step":[2],"options":[1],"type":[1],"onChangeNative":[16],"onInput":[16],"exposeValueEvents":[4,"expose-value-events"]}],[1,"eds-avatar",{"firstName":[1,"first-name"],"lastName":[1,"last-name"],"picture":[1],"initials":[1],"color":[1]}],[0,"eds-input",{"name":[1],"inputId":[1,"input-id"],"placeholder":[1],"disabled":[4],"hasMessage":[4,"has-message"],"error":[4],"checked":[4],"type":[1],"required":[4],"value":[8],"icon":[1],"maxLength":[2,"max-length"],"options":[16],"extraClass":[1,"extra-class"],"min":[2],"max":[2],"step":[2],"innerVal":[32],"maxLengthReached":[32]},null,{"value":["onValueChanged"]}],[1,"eds-input-footer",{"name":[1],"errorMessage":[1,"error-message"],"message":[1],"error":[4],"link":[16]}],[0,"eds-input-search",{"name":[1],"inputId":[1,"input-id"],"placeholder":[1],"value":[1],"disabled":[4],"required":[4],"decorate":[1],"label":[1],"getInputElement":[64]}],[0,"eds-input-select",{"inputId":[1,"input-id"],"name":[1],"placeholder":[1],"disabled":[4],"hasMessage":[4,"has-message"],"error":[4],"required":[4],"options":[16],"value":[8]}],[0,"eds-input-range",{"name":[1],"inputId":[1,"input-id"],"disabled":[4],"required":[4],"min":[2],"max":[2],"step":[2],"value":[2],"sliderVal":[32],"getInputElement":[64]},null,{"value":["onValueChange"]}],[1,"eds-tag",{"label":[1],"intent":[1],"size":[1]}],[1,"eds-input-label",{"label":[1],"name":[1],"required":[4],"disabled":[4]}],[1,"eds-logo",{"href":[1],"orientation":[1],"type":[1],"label":[1]}],[1,"eds-img",{"src":[1],"alt":[1],"width":[2],"height":[2],"srcset":[1],"sizes":[1],"formats":[16],"lazyload":[4],"withBg":[4,"with-bg"],"loaded":[32],"showBg":[32]}],[1,"eds-code-block",{"code":[1],"language":[1],"copied":[32]}],[1,"eds-link",{"label":[1],"intent":[1],"icon":[1],"iconPos":[1,"icon-pos"],"iconSmall":[4,"icon-small"],"size":[1],"external":[4],"current":[4],"download":[4],"url":[1],"ariaLabel":[1,"aria-label"],"disabled":[4],"hideLabelOnSmallScreen":[4,"hide-label-on-small-screen"],"extraClass":[1,"extra-class"]},[[0,"parentContext","handleParentContext"]]],[17,"eds-button",{"label":[1],"ariaLabel":[1,"aria-label"],"elementType":[1,"element-type"],"intent":[1],"loading":[4],"disabled":[4],"pill":[4],"icon":[1],"size":[1],"iconPos":[1,"icon-pos"],"iconSmall":[4,"icon-small"],"extraClass":[1,"extra-class"],"triggerClick":[16]},[[0,"parentContext","handleParentContext"]]],[0,"eds-icon-wrapper",{"icon":[1],"class":[1],"IconComponent":[32]},null,{"icon":["iconChanged"]}]]],["p-38bc21e9",[[0,"eds-trl",{"applications":[1]}]]],["p-743f9f8f",[[1,"logo-space"]]],["p-789f54cb",[[1,"svg-repository"]]],["p-09079c5c",[[0,"docs-palettes",{"tabIndex":[2,"tab-index"]}]]],["p-ba9f41de",[[0,"components-section",{"tabIndex":[2,"tab-index"]}]]],["p-d1d1943b",[[1,"eds-fullscreen-menu",{"links":[1],"menuLinks":[1,"menu-links"],"homeUrl":[1,"home-url"],"inverseHeader":[4,"inverse-header"],"isMenuOpen":[32]},[[16,"toggleheadermenu","handleToggleMenu"]]]]],["p-265150a1",[[1,"eds-card-section",{"cards":[1],"occupyCols":[2,"occupy-cols"]}]]],["p-b88a2267",[[1,"eds-timeline",{"events":[1],"selectedEvent":[32],"parsedEvents":[32]},null,{"events":["parseEvents"]}]]],["p-89048f87",[[0,"docs-tokens",{"tabIndex":[2,"tab-index"]}]]],["p-9c1c5e8d",[[1,"eds-card-tool",{"cardTitle":[1,"card-title"],"url":[1],"description":[1],"image":[8],"avatar":[1],"shortAbbreviation":[1,"short-abbreviation"],"headingLevel":[1,"heading-level"],"tags":[8],"tiny":[4],"bg":[4],"withHover":[4,"with-hover"],"external":[4],"hierarchy":[4]}]]],["p-706a106c",[[0,"eds-cookies-preference",{"buttonText":[1,"button-text"],"intent":[1],"showMatomoNotice":[32],"noticeKey":[32]}]]],["p-beacaa4f",[[0,"incorrect-use-of-colors"]]],["p-ab3b0a53",[[1,"eds-app-root",{"isAuthenticated":[32]}]]],["p-d1927da7",[[0,"eds-card-project",{"image":[8],"editorialTitle":[1,"editorial-title"],"headingLevel":[1,"heading-level"],"categoryTitle":[1,"category-title"],"color":[1],"bgOnHover":[4,"bg-on-hover"],"vertical":[4],"titleProject":[1,"title-project"],"url":[1],"parsedImage":[32]}]]],["p-67ec46b4",[[1,"eds-feedback",{"headingLevel":[1,"heading-level"],"type":[1],"count":[2],"label":[1],"description":[1],"textMapping":[1,"text-mapping"],"selectedRating":[32]},[[16,"rating","ratingUpdated"]]]]],["p-5f348b0e",[[1,"eds-toast-manager",{"toasts":[32]}]]],["p-cd787744",[[0,"logo-variations-tabs",{"tabIndex":[2,"tab-index"]}]]],["p-4c84fcf4",[[0,"correct-use-of-colors"]]],["p-e210ddbb",[[1,"eds-frame",{"frameLabel":[1,"frame-label"],"frameSrc":[1,"frame-src"],"urlLabel":[1,"url-label"],"errorMessage":[1,"error-message"],"url":[1],"intent":[1],"size":[1],"iframeError":[32]}]]],["p-2e0c3fc4",[[1,"eds-modal",{"heading":[1,"title"],"truncate":[2],"position":[1],"inverseHeader":[4,"inverse-header"],"isOpen":[32],"open":[64],"close":[64],"toggle":[64]},[[0,"eds-modal-open","handleGlobalOpen"],[0,"eds-modal-close","handleGlobalClose"],[8,"keydown","handleKeyDown"]]]]],["p-5b55f951",[[0,"token-ratios"]]],["p-8627afc0",[[0,"token-typography"]]],["p-86eff0cb",[[1,"eds-card-tags",{"accent":[4],"tags":[16]}]]],["p-64b7a6fc",[[1,"eds-gauge",{"size":[2],"valueMin":[2,"value-min"],"valueMax":[2,"value-max"],"value":[2],"thickness":[2],"variant":[1]}]]],["p-7fa46b01",[[0,"eds-icon-arrow-diagonal",{"class":[1]}]]],["p-6b988c76",[[0,"eds-icon-arrow-right",{"class":[1]}]]],["p-9cb14b1f",[[0,"eds-icon-bin",{"class":[1]}]]],["p-5ba49cf2",[[0,"eds-icon-bluesky",{"class":[1]}]]],["p-e90da4ba",[[0,"eds-icon-bookmark",{"class":[1]}]]],["p-19e69c03",[[0,"eds-icon-chevron-down",{"class":[1]}]]],["p-9261d27c",[[0,"eds-icon-chevron-left",{"class":[1]}]]],["p-e8374410",[[0,"eds-icon-chevron-right",{"class":[1]}]]],["p-f40dd50d",[[0,"eds-icon-chevron-up",{"class":[1]}]]],["p-8cf98230",[[0,"eds-icon-clone",{"class":[1]}]]],["p-5367bb59",[[0,"eds-icon-close",{"class":[1]}]]],["p-7a5623b5",[[0,"eds-icon-copy",{"class":[1]}]]],["p-c4ac0528",[[0,"eds-icon-draft",{"class":[1]}]]],["p-bfa23535",[[0,"eds-icon-edit",{"class":[1]}]]],["p-9b90296c",[[0,"eds-icon-eu",{"class":[1]}]]],["p-f6012c17",[[0,"eds-icon-external",{"class":[1]}]]],["p-560fc3a4",[[0,"eds-icon-facebook",{"class":[1]}]]],["p-4a6a72db",[[0,"eds-icon-gitlab",{"class":[1]}]]],["p-97323c46",[[0,"eds-icon-linkedin",{"class":[1]}]]],["p-05654483",[[0,"eds-icon-loader",{"class":[1]}]]],["p-b0d38b78",[[0,"eds-icon-mastodon",{"class":[1]}]]],["p-fcba31fa",[[0,"eds-icon-menu",{"class":[1]}]]],["p-547a53d6",[[0,"eds-icon-minus",{"class":[1]}]]],["p-5a58f1c1",[[0,"eds-icon-more",{"class":[1]}]]],["p-a8ca8346",[[0,"eds-icon-paper",{"class":[1]}]]],["p-634b6ca2",[[0,"eds-icon-plus",{"class":[1]}]]],["p-1ab1ea29",[[0,"eds-icon-portal",{"class":[1]}]]],["p-10997947",[[0,"eds-icon-private",{"class":[1]}]]],["p-4bf4bc93",[[0,"eds-icon-public",{"class":[1]}]]],["p-6cd6ff0c",[[0,"eds-icon-search",{"class":[1]}]]],["p-1bcf743d",[[0,"eds-icon-star",{"class":[1]}]]],["p-cb114bf4",[[0,"eds-icon-start",{"class":[1]}]]],["p-4b33909d",[[0,"eds-icon-success",{"class":[1]}]]],["p-5dd85979",[[0,"eds-icon-thumbs-down",{"class":[1]}]]],["p-b6ee4250",[[0,"eds-icon-thumbs-up",{"class":[1]}]]],["p-b9fdcb1b",[[0,"eds-icon-tutorial",{"class":[1]}]]],["p-42457a0f",[[0,"eds-icon-twitter",{"class":[1]}]]],["p-7ca6db64",[[0,"eds-icon-unknown",{"class":[1]}]]],["p-ec706eed",[[0,"eds-icon-updown",{"class":[1]}]]],["p-cd05a97b",[[0,"eds-icon-user",{"class":[1]}]]],["p-cdc1c8e8",[[0,"eds-icon-view",{"class":[1]}]]],["p-71ee4af2",[[0,"eds-icon-youtube",{"class":[1]}]]],["p-79afd8aa",[[1,"eds-pie",{"size":[2],"slices":[1],"thickness":[2],"display":[1],"legend":[4],"colorScheme":[1,"color-scheme"]}]]],["p-8d363a3c",[[1,"eds-tooltip",{"content":[1],"position":[1]},[[1,"mouseenter","handleHover"]]]]],["p-b9a1aba3",[[1,"logo-wrong-usage"]]],["p-3b29e0fd",[[0,"token-spacing"]]],["p-e5892379",[[1,"eds-footer",{"social":[4],"enableScrollTop":[4,"enable-scroll-top"],"fundedBy":[1,"funded-by"],"rightsReserved":[1,"rights-reserved"],"cookiesPreferences":[1,"cookies-preferences"],"enableCookiesSettings":[4,"enable-cookies-settings"],"backToTopAriaLabel":[1,"back-to-top-aria-label"],"showMatomoNotice":[32]},[[9,"scroll","handleScroll"]]]]],["p-d2e485a1",[[1,"eds-splash-screen",{"inverse":[4],"initPromise":[16],"isVisible":[32]},[[8,"hideSplash","handleHideSplash"]],{"initPromise":["watchInitPromise"]}]]],["p-7a3f2576",[[1,"eds-progress-bar",{"value":[1026],"rounded":[4],"updateValue":[64]}]]],["p-6614881d",[[1,"eds-card-generic",{"cardTitle":[1,"card-title"],"url":[1],"description":[1],"image":[8],"avatar":[1],"shortAbbreviation":[1,"short-abbreviation"],"headingLevel":[1,"heading-level"],"tags":[1],"tiny":[4],"bg":[4],"withHover":[4,"with-hover"],"hierarchy":[4],"parsedImage":[32]},[[0,"parentContext","handleParentContext"]]]]],["p-2ef4dd11",[[1,"logo-variations-horizontal"],[1,"logo-variations-vertical",{"orientation":[1],"type":[1]}]]],["p-e0ada7e0",[[1,"eds-social-networks",{"heading":[1,"title"]}]]],["p-1d18106d",[[1,"eds-spinner",{"size":[1],"variant":[1],"message":[1],"background":[1],"fullscreen":[4]}]]],["p-d95d7353",[[0,"token-list",{"show":[1]}],[0,"token-radii"],[0,"token-shadows"]]],["p-9f0a34b4",[[1,"eds-section-core",{"tag":[1],"sectionTitle":[1,"section-title"],"headingLevel":[1,"heading-level"]}],[0,"eds-section-heading",{"sectionTitle":[1,"section-title"],"withContainer":[4,"with-container"],"headingLevel":[1,"heading-level"],"tag":[1],"spacingLarge":[4,"spacing-large"]}]]],["p-3360e1e2",[[0,"gradient-secondary-palette"],[0,"color-primary-palette"],[0,"color-secondary-palette",{"show":[1]}],[0,"color-support-palette"],[0,"gradient-primary-palette"],[0,"gradient-support-palette"]]],["p-b31babda",[[1,"eds-card-desc",{"description":[1],"truncate":[4],"truncateLines":[1,"truncate-lines"]}],[1,"eds-card-title",{"url":[1],"titleClass":[1,"title-class"],"headingLevel":[1,"heading-level"],"externalLink":[4,"external-link"],"cardTitle":[1,"card-title"],"hierarchy":[4]}]]]]'),e))));

package/dist/components/correct-use-of-colors.js

@@ -60,7 +60,7 @@ const CorrectUseOfColors$1 = /*@__PURE__*/ proxyCustomElement(class CorrectUseOf
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: '0d87f12519405c944ea432dacc79cc22e4710f7a', class: "container" }, h("p", { key: '6041d60d6e1bd6313b6d5989f89209c75b350048', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'bacd39d8122d919711793e0d90074ad4c7e91cc8', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'ab097f654aee5417323b55d17666dd37f51ff193', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'd7b0a82ca3108c7510a8b79ab02aff5a459b3fba', class: "flex" }, h("div", { key: '25572bd784dd3376909f9be43535d06c1eb34301', class: "w-full" }, h("ul", { key: '27508829cd4240f4b443be77182289c2de7d80e4', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '8eec0e4d1f66bc4a46d3f8f6161230667aa52b81', class: "w-full" }, h("ul", { key: '38e5c24b6a446bc9eb44e2d8c2c9918edda1685c', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '62cf0cb3a3666bd073876a15ced356a1b786b755', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '61bb1a7b4a226b2a87115ddcacb1e5f7054f7f2c', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '4cade7f04885d8743de7508088453d7266fdb52e', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'a85edc64dedaa5a736fdb6005f227dccd7d6e417', class: "flex" }, h("div", { key: '6585c4d28cc0a0c83483e05fc50e2d1eb6543826', class: "w-full" }, h("ul", { key: '5d2cd485f2730f9ecd8f9881660b660a9863f046', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '8cc38112f8fc04390309894e03bff57839867331', class: "w-full" }, h("ul", { key: '4fcf267012ae77e4a64cc8f3d41590a0077a71d2', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '1e5ae9ac4d5315e74c7509bf3ea429f330c80b8c', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '2520f9de5232569e50a16bffab46ff8a7fd07de9', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '3319ed8a5d80766150d4479bb6d360a34e65f2c9', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '4ac76de406d9d3c7d88c743dcb55445030540979', class: "flex" }, h("div", { key: '419a21e058fd90cdb9dbc814cf161d7b9a09ea60', class: "w-full" }, h("ul", { key: '811a0e032cd72ee22f474f2bcf9292cd5c1b39b0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '7a99c481bc4b866fba27af928bec2d1f2d3aef40', class: "w-full" }, h("ul", { key: '903c58130e827d4b2d562cdfcdfc711357faba0a', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: '1b85b22424d7d3a1b91ea28b22c0f35ed11c8292', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'b114668b2ae7e584bdf844738b07eabf2eaf4c1b', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '92aea63995d20c589cd5f93fad0151b1930e676e', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '59f3e6a810cb7d399dd1290021cce9fd92238605', class: "flex" }, h("div", { key: '3f9b86e94966320bcee63999cea9da3b86a725dc', class: "w-full" }, h("ul", { key: '379a6bd45c7745b9fef85e5bfe122a860ead0ce0', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '0f0d2766a259285042054653bede2d42673e2e70', class: "w-full" }, h("ul", { key: '2e47e7406097d32f4189f9ba52b19689f998a6d8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '6a68ca6961f662740e3981dc788b99e3d4a0d420', class: "container" }, h("p", { key: '3b7f675d96b1101c2d2a623082ab1987e06754de', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'cd4b48453834b32cf70aded20b3ebfc0109732cc', label: "primary", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '9c2d1c2d669bfef26b0ea45b113f727420d4a8c5', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '651d2e4bce17a2740372c1b56e772f12c906e45c', class: "flex" }, h("div", { key: 'dd7b40bf2c9be26367cf4d65df0e93d5590b34e9', class: "w-full" }, h("ul", { key: '62cb53477517807ad9535ca3b4474cf115f5ec03', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'bb8be387a4abe956a4941db1b381d25eee435453', class: "w-full" }, h("ul", { key: '60834108dbdcc6872ff5cfd1509f08ca94847854', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'b3cdb208264e8d62b144dc9eb912501d3d59e35d', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '8b358d8027c603aab384028568acfba889df7f25', label: "purple", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '9712b5e1c2433f9b707469e4d9fde547ec14f7d9', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: 'cfb5e4ada2dab6de1e4df810f9eaae0abbabd864', class: "flex" }, h("div", { key: 'c83e1bcd91700f4fc9eada969f9d349b6976b835', class: "w-full" }, h("ul", { key: 'c0c6a2a223013a5cb7b0545d59eaea8b66454f65', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, purple.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '7b1ce7da35db835a2db620c0b4d97199f85070e5', class: "w-full" }, h("ul", { key: '2a2f9e1d29a523d5b419ae27aa1df8f892f440e7', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'c6746faf400941b4eb92eb2b520a3a817615da9d', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: '89405406d127380e8b5872357cfba121a17adc3c', label: "blue", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: 'a7c21a6afb1eb69e9e4cb5046f65c9a4fb193837', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '6097c0091a2c06e6e9e9e13db41329200a78d2d6', class: "flex" }, h("div", { key: 'e8c272ad9b1066500d940044fd86a6c6dc52264f', class: "w-full" }, h("ul", { key: '2902c01c108d7893d7e30e6401560034a2ed7a0f', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, blue.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'eca739bb09d6b509c1433069595a7e6fe9be38f2', class: "w-full" }, h("ul", { key: 'cf0578a5943f54a98c6433e584397c0787ad0b4b', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } }))))))), h("p", { key: 'ead17e9a75227b4731116506bfbf9a2c656b37a9', class: "f-body-01" }, "This guide demonstrates the correct usage of the", h("eds-link", { key: 'd4e615ea5cc1c0a144ef0c2e0bd019ae9d58e3e8', label: "redish", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#primary-palette", "extra-class": "inline-block ml-4" }), "and", h("eds-link", { key: '52fe22c1055d44e4b6d772c0863abb72ffa49b5b', label: "support", size: "small", intent: "underline", icon: "chevron-right", url: "../color-palette/#support-palette", "extra-class": "inline-block ml-4" }), "color palettes."), h("div", { key: '28487bfa952d4b2611ae1b03f71fdc6d5c46f2e7', class: "flex" }, h("div", { key: '5cd6b4413b345bc81a69fcdfc0a723e4f1c2f438', class: "w-full" }, h("ul", { key: 'c9ef7fe0eff085bb342d501f6505435220985214', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, red.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[225px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '65a67a40bc7cf64c19bbb1448813b1c34633cc60', class: "w-full" }, h("ul", { key: '4f26bdccba86cba74da820c500f630d88b846631', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, support.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 }, [0, "correct-use-of-colors"]);
 function defineCustomElement$1() {

package/dist/components/docs-palettes.js

@@ -26,7 +26,7 @@ const DocsPalettes$1 = /*@__PURE__*/ proxyCustomElement(class DocsPalettes exten
         }
     }
     render() {
-        return h("div", { key: '5ca77a86d54849aaed6f2d716a66a429e6df45b7', class: "container" }, this.renderContent());
+        return h("div", { key: '82b8de086298568ed7bbb4717da0f6f19ff9677c', class: "container" }, this.renderContent());
     }
 }, [0, "docs-palettes", {
         "tabIndex": [2, "tab-index"]

package/dist/components/docs-tokens.js

@@ -30,7 +30,7 @@ const DocsContent = /*@__PURE__*/ proxyCustomElement(class DocsContent extends H
         }
     }
     render() {
-        return h("div", { key: '176be3a7df15e6463e13db2f0d519dc5dd6c11e4', class: "container" }, this.renderContent());
+        return h("div", { key: '86455a5f05b74d8d751a5d17ecf58c0046e8d0a3', class: "container" }, this.renderContent());
     }
 }, [0, "docs-tokens", {
         "tabIndex": [2, "tab-index"]

package/dist/components/edit.js

@@ -1,3 +1,3 @@
-const edit = `<svg width="20" height="20" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" fill="#000000"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <title></title> <g id="Complete"> <g id="edit"> <g> <path d="M20,16v4a2,2,0,0,1-2,2H4a2,2,0,0,1-2-2V6A2,2,0,0,1,4,4H8" fill="none" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></path> <polygon fill="none" points="12.5 15.8 22 6.2 17.8 2 8.3 11.5 8 16 12.5 15.8" stroke="#000000" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"></polygon> </g> </g> </g> </g></svg>`;
+const edit = `<svg width="20" height="20"  viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><g id="SVGRepo_bgCarrier" stroke-width="0"></g><g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"></g><g id="SVGRepo_iconCarrier"> <path d="M12 3.99997H6C4.89543 3.99997 4 4.8954 4 5.99997V18C4 19.1045 4.89543 20 6 20H18C19.1046 20 20 19.1045 20 18V12M18.4142 8.41417L19.5 7.32842C20.281 6.54737 20.281 5.28104 19.5 4.5C18.7189 3.71895 17.4526 3.71895 16.6715 4.50001L15.5858 5.58575M18.4142 8.41417L12.3779 14.4505C12.0987 14.7297 11.7431 14.9201 11.356 14.9975L8.41422 15.5858L9.00257 12.6441C9.08001 12.2569 9.27032 11.9013 9.54951 11.6221L15.5858 5.58575M18.4142 8.41417L15.5858 5.58575" stroke="#000000" stroke-width="1.44" stroke-linecap="round" stroke-linejoin="round"></path> </g></svg>`;
 
 export { edit as e };

package/dist/components/eds-accordion2.js

@@ -78,7 +78,7 @@ const EdsAccordion = /*@__PURE__*/ proxyCustomElement(class EdsAccordion extends
         return (h("div", { key: '1abfd8bfea763bc10e6f17148dbc252d0c3ffdea', ref: (el) => (this.wrapperRef = el), class: `flex effect-color border-softer relative grid overflow-hidden rounded-lg border-2 p-16 
           ${this.switchBg && this.isExpanded ? 'bg-inverse' : 'bg-default'} 
           ${this.switchBg ? 'hover:bg-inverse' : ''}
-          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: '137a3311195d51f46c6677558219828e5f4d06b5', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '0fc6d493fd61726a53a8c4311bd183eb3ad5b270', class: "ml-auto" }, h("eds-button", { key: '61e5e7727de895a9dc9d4a9d909cabea3b82e709', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md outline-none focus:outline-none`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '659ad4db8fd78dea0604afce003124a7c19987dc', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: '0b463bb9d634b9dd1aa6c512e072bf8004e54db5', id: "accordionSection", role: "region", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '7f2eb016e377e3f2c08fd042e903291ad67bd20b', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '25be3a617a42699e2adeb1c9fc711e5a55ce69ea', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: 'de7e5481940295571543c43f4b65f97dc7cec62c' })))))));
+          ${this.description ? 'min-h-56' : ''}` }, h("h3", { key: '137a3311195d51f46c6677558219828e5f4d06b5', ref: (el) => (this.headerRef = el), class: "mr-auto f-heading-06 text-left absolute inset-x-16 break-words top-16 pr-40" }, this.heading), h("div", { key: '0fc6d493fd61726a53a8c4311bd183eb3ad5b270', class: "ml-auto" }, h("eds-button", { key: 'cb8182e05c5c11950c0e624ce6b11e27a4d506ab', id: "toggleAccordion", intent: this.buttonIntent, "aria-expanded": this.isExpanded || this.shortContent, "aria-label": "Toggle accordion", "aria-controls": "accordionSection", class: `effect-color flex w-full items-center justify-between rounded-md`, onClick: this.handleClick, icon: "chevron-down" })), h("div", { key: '084bfb116dcccadf7253ca8ac8de6a1e1d4aa41f', class: `w-full`, style: Number.isFinite(this.headerHeight) ? { marginTop: `${this.headerHeight}px` } : {} }, this.description ? (h("span", { class: `text-light ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description)) : null, h("section", { key: 'c332a210fa4ce90f1974098ff790a7600dfb1721', id: "accordionSection", "aria-labelledby": "accordionHeader", "aria-hidden": !this.isExpanded, class: `z-1 effect-height relative h-0 w-full ${!this.isExpanded && this.clampText ? 'overflow-hidden' : ''}`, style: { height: this.isExpanded ? 'auto' : '0' } }, h("div", { key: '842bc3bc7a968ef5a428a97327f38253e8a32888', ref: (el) => (this.childContentRef = el), class: `accordion-content effect-color pt-4`, "aria-hidden": !this.isExpanded }, h("span", { key: '7c8fa8040da18cc2c128b42cdf9e75bfffe4c439', class: `${!this.isExpanded && this.clampText ? 'line-clamp-2' : ''}` }, h("slot", { key: '852837c0c8c9d8a36f6263f7a943f50d82563a3c' })))))));
     }
     get el() { return this; }
     static get style() { return EdsAccordionStyle0; }

package/dist/components/eds-alert2.js

@@ -1,5 +1,6 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { c as cva } from './index2.js';
+import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
@@ -60,6 +61,7 @@ const EdsAlert = /*@__PURE__*/ proxyCustomElement(class EdsAlert extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.edsalert = createEvent(this, "edsalert", 7);
         this.message = undefined;
         this.pressableLabel = undefined;
         this.pressableUrl = undefined;
@@ -72,6 +74,11 @@ const EdsAlert = /*@__PURE__*/ proxyCustomElement(class EdsAlert extends HTMLEle
         this.withBtn = Boolean(this.pressableLabel);
     }
     componentDidLoad() {
+        // Focus the alert container for immediate screen reader announcement
+        /*if (this.intent === 'error' || this.intent === 'warning') {
+          this.el.shadowRoot?.querySelector('[role="alert"]')?.setAttribute('tabindex', '-1');
+          (this.el.shadowRoot?.querySelector('[role="alert"]') as HTMLElement)?.focus();
+        }*/
         var _a;
         // Query for the 'eds-link' element inside the shadow root.
         const lnk = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('eds-link');
@@ -88,14 +95,18 @@ const EdsAlert = /*@__PURE__*/ proxyCustomElement(class EdsAlert extends HTMLEle
         });
         linkElement.dispatchEvent(event);
     }
+    handleAction() {
+        // Emit the alertAction event for parent components to handle
+        this.edsalert.emit();
+    }
     render() {
-        return (h("div", { key: '5252aca583e87d8c3249c501e55368e340ef0d64', class: alertStyles({
+        const ariaLabel = this.intent !== 'default' ? `${this.intent} alert` : 'alert';
+        return (h("div", { key: '2d22944e7ae86cf2523c194e20215a3d986083d9', class: alertStyles({
                 intent: this.intent,
                 brd: this.brd,
                 direction: this.direction,
                 withBtn: this.withBtn
-            }), role: "alert" }, h("p", { key: 'bb23c94e802ec5e287a2b8619277e83de173b498', class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn &&
-            (this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : null)));
+            }), role: "alert", "aria-label": ariaLabel, "aria-live": this.intent === 'error' ? 'assertive' : 'polite', "aria-labelledby": "alert-message", "aria-describedby": this.withBtn ? 'alert-action' : undefined }, h("p", { key: 'b6c22446b0d87fb01a3cb882fe205ef48ea60b05', id: "alert-message", class: "f-ui-01 py-8", innerHTML: this.message }), this.withBtn && (h("div", { key: '8414820eb7b65c83459cfb90adef3ea696e42444', id: "alert-action" }, this.pressableUrl ? (h("eds-link", { class: "eds-alert-link", label: this.pressableLabel, url: this.pressableUrl, intent: "secondary", external: true })) : (h("eds-button", { class: "eds-alert-button", label: this.pressableLabel, intent: "secondary", onClick: () => this.handleAction() }))))));
     }
     get el() { return this; }
     static get style() { return EdsAlertStyle0; }
@@ -112,13 +123,18 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-alert", "eds-icon-wrapper", "eds-link"];
+    const components = ["eds-alert", "eds-button", "eds-icon-wrapper", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-alert":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsAlert);
             }
             break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();

package/dist/components/eds-app-root.js

@@ -31,7 +31,7 @@ const EdsAppRoot$1 = /*@__PURE__*/ proxyCustomElement(class EdsAppRoot extends H
         this.combinedInitPromise = Promise.all([initKeycloakPromise, authStatusPromise]);
     }
     render() {
-        return (h("div", { key: '74be23fab63211137102b821a8928431d33714a3' }, h("eds-splash-screen", { key: 'da5b931f1e3999fc36afa3d7dc66ef940a553d22', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: 'eef7175edf257aabe1dd832f75e30d702ad5e96a', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: 'bcd9363278ab653852aa0f39b57070a056b8b9ab' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
+        return (h("div", { key: '36bb7790b9e035749548410ba1d54092c7a40810' }, h("eds-splash-screen", { key: '7be473b1c48f0ab2549077d7619a1dbd3a1fd90c', inverse: true, initPromise: this.combinedInitPromise }), h("eds-login", { key: '824affc8c670317f2c1b8a22b9fe6223a477d364', "keycloak-url": "http://localhost:8080", "keycloak-realm": "nigeor-realm", "keycloak-client-id": "stencil-app" }), h("main", { key: 'c5f6f9dae8608a49d3c47139f33735236a65091c' }, this.isAuthenticated ? h("h1", null, "Welcome, authenticated user!") : h("h1", null, "Please log in."))));
     }
 }, [1, "eds-app-root", {
         "isAuthenticated": [32]

package/dist/components/eds-avatar2.js

@@ -60,7 +60,7 @@ const EdsAvatar = /*@__PURE__*/ proxyCustomElement(class EdsAvatar extends HTMLE
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (h("div", { key: 'b7eff7ae1a1dea3509041e39316b49b673dbdf17', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (h("div", { key: '34e86e50b1176efd8ae0cd9b30cd3823527d7eee', class: this.containerClasses }, this.picture ? (h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
     static get style() { return EdsAvatarStyle0; }
 }, [1, "eds-avatar", {

package/dist/components/eds-block-break2.js

@@ -11,7 +11,7 @@ const EdsBlockBreak = /*@__PURE__*/ proxyCustomElement(class EdsBlockBreak exten
         this.inverse = false;
     }
     render() {
-        return h("hr", { key: 'b604a776cae7edeee189e00af6993b42b57203f0', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return h("hr", { key: '688e11c730af1193f28db196cd144c6dd2efc3c6', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
     static get style() { return EdsBlockBreakStyle0; }
 }, [1, "eds-block-break", {

package/dist/components/eds-breadcrumb.js

@@ -120,7 +120,7 @@ const EdsBreadcrumb$1 = /*@__PURE__*/ proxyCustomElement(class EdsBreadcrumb ext
      */
     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) => {
+        return (h("nav", { key: '0625a234ec9f5095abbeaafa11e56bceb0432764', "aria-label": "Breadcrumb" }, h("ol", { key: '3898a4b048eca6c606a6948b26ec25a608cb908e', 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);

package/dist/components/eds-button2.js

@@ -1,9 +1,9 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 import { c as cva } from './index2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsButtonCss = "*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\np {\n  margin: 0;\n}\n\n/*\n  Set the default cursor for buttons.\n  */\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n:disabled {\n  cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n.f-body-01 {\n  font-family: var(--f-body-01-fontFamily);\n  font-weight: var(--f-body-01-fontWeight);\n  font-size: var(--f-body-01-fontSize);\n  line-height: var(--f-body-01-lineHeight);\n  letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n  font-family: var(--f-body-02-fontFamily);\n  font-weight: var(--f-body-02-fontWeight);\n  font-size: var(--f-body-02-fontSize);\n  line-height: var(--f-body-02-lineHeight);\n  letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n  font-family: var(--f-ui-02-fontFamily);\n  font-weight: var(--f-ui-02-fontWeight);\n  font-size: var(--f-ui-02-fontSize);\n  line-height: var(--f-ui-02-lineHeight);\n  letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n  }\n\n  &::after {\n    position: absolute;\n  }\n\n  &::after {\n    inset: 0rem;\n  }\n\n  &::after {\n    z-index: 1;\n  }\n\n  &::after {\n    border-radius: 8px;\n  }\n\n  &::after {\n    border-width: 1px;\n  }\n\n  &::after {\n    border-width: 2px;\n  }\n\n  &::after {\n    border-color: rgba(0, 0, 0, .1);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-inverse {\n  &::after {\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-pill {\n  &::after {\n    border-radius: 100px;\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.loader {\n  box-sizing: border-box;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loader {\n  animation: spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 3px solid rgba(0, 0, 0, .3);\n  border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n  outline-style: solid;\n}\n\n.effect-focus-within {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n  outline-style: solid;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.sticky {\n  position: sticky;\n}\n\n.inset-0 {\n  inset: 0rem;\n}\n\n.inset-x-16 {\n  left: 1rem;\n  right: 1rem;\n}\n\n.-top-8 {\n  top: -0.5rem;\n}\n\n.left-0 {\n  left: 0rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.left-4 {\n  left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n  left: 4px;\n}\n\n.right-0 {\n  right: 0rem;\n}\n\n.right-4 {\n  right: 0.25rem;\n}\n\n.right-8 {\n  right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n  right: 6px;\n}\n\n.top-0 {\n  top: 0rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n.m-0 {\n  margin: 0rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-ml-16 {\n  margin-left: -1rem;\n}\n\n.-mr-16 {\n  margin-right: -1rem;\n}\n\n.ml-0 {\n  margin-left: 0rem;\n}\n\n.ml-4 {\n  margin-left: 0.25rem;\n}\n\n.ml-64 {\n  margin-left: 4rem;\n}\n\n.ml-8 {\n  margin-left: 0.5rem;\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n.mr-4 {\n  margin-right: 0.25rem;\n}\n\n.mr-8 {\n  margin-right: 0.5rem;\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n.block {\n  display: block;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-20 {\n  height: 1.25rem;\n}\n\n.h-24 {\n  height: 1.5rem;\n}\n\n.h-36 {\n  height: 2.25rem;\n}\n\n.h-44 {\n  height: 2.75rem;\n}\n\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.\\!min-h-20 {\n  min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.w-20 {\n  width: 1.25rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.flex-none {\n  flex: none;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.break-words {\n  overflow-wrap: break-word;\n}\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.rounded-md {\n  border-radius: 12px;\n}\n\n.rounded-pill {\n  border-radius: 100px;\n}\n\n.rounded-sm {\n  border-radius: 8px;\n}\n\n.rounded-xxs {\n  border-radius: 2px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n  border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n  background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n  background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n  background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n  background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n  background-color: var(--green-600);\n}\n\n.bg-dark {\n  background-color: var(--grey-300);\n}\n\n.bg-darker {\n  background-color: var(--grey-400);\n}\n\n.bg-overlay {\n  background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n  background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n  background-color: var(--grey-800);\n}\n\n.bg-stronger {\n  background-color: var(--grey-900);\n}\n\n.bg-strongest {\n  background-color: var(--black);\n}\n\n.p-12 {\n  padding: 0.75rem;\n}\n\n.p-6 {\n  padding: 0.375rem;\n}\n\n.p-8 {\n  padding: 0.5rem;\n}\n\n.\\!px-0 {\n  padding-left: 0rem !important;\n  padding-right: 0rem !important;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-16 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n  padding-left: 0.25rem;\n}\n\n.pl-8 {\n  padding-left: 0.5rem;\n}\n\n.pr-4 {\n  padding-right: 0.25rem;\n}\n\n.pr-8 {\n  padding-right: 0.5rem;\n}\n\n.\\!text-current {\n  color: currentColor !important;\n}\n\n.text-accent {\n  color: var(--green-500);\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-default {\n  color: var(--black);\n}\n\n.text-inverse {\n  color: var(--white);\n}\n\n.text-lightest {\n  color: var(--grey-500);\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n  --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n  --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n  text-underline-offset: 0.2em;\n}\n\n.\\@container {\n  container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n  background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n  color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n  background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n  background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n  background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n  background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n  background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n  background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n  background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n  background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n  color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n  color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n  text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n  text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n  background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n  border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n  background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n  background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n  color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n  text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n  background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n  left: 0rem;\n  right: 0rem;\n}\n\n.after\\:bottom-0::after {\n  bottom: 0rem;\n}\n\n.after\\:left-16::after {\n  left: 1rem;\n}\n\n.after\\:right-16::after {\n  right: 1rem;\n}\n\n.after\\:z-10::after {\n  z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n  border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n  border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n  border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n  border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n  opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n  --tw-content: '';\n  content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n  opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n  opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n  opacity: 1;\n}";
+const edsButtonCss = "*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\np {\n  margin: 0;\n}\n\n/*\n  Set the default cursor for buttons.\n  */\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n:disabled {\n  cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n.f-body-01 {\n  font-family: var(--f-body-01-fontFamily);\n  font-weight: var(--f-body-01-fontWeight);\n  font-size: var(--f-body-01-fontSize);\n  line-height: var(--f-body-01-lineHeight);\n  letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n  font-family: var(--f-body-02-fontFamily);\n  font-weight: var(--f-body-02-fontWeight);\n  font-size: var(--f-body-02-fontSize);\n  line-height: var(--f-body-02-lineHeight);\n  letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n  font-family: var(--f-ui-02-fontFamily);\n  font-weight: var(--f-ui-02-fontWeight);\n  font-size: var(--f-ui-02-fontSize);\n  line-height: var(--f-ui-02-lineHeight);\n  letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n  }\n\n  &::after {\n    position: absolute;\n  }\n\n  &::after {\n    inset: 0rem;\n  }\n\n  &::after {\n    z-index: 1;\n  }\n\n  &::after {\n    border-radius: 8px;\n  }\n\n  &::after {\n    border-width: 1px;\n  }\n\n  &::after {\n    border-width: 2px;\n  }\n\n  &::after {\n    border-color: rgba(0, 0, 0, .1);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-inverse {\n  &::after {\n    border-color: rgba(255, 255, 255, 0.3);\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.border-inside-pill {\n  &::after {\n    border-radius: 100px;\n  }\n\n  &::after {\n    content: '';\n  }\n}\n\n.loader {\n  box-sizing: border-box;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loader {\n  animation: spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 3px solid rgba(0, 0, 0, .3);\n  border-bottom-color: #000;\n}\n\n/** region TRANSITIONS */\n.effect-color {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus:focus-visible {\n  outline-style: solid;\n}\n\n.effect-focus-within {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--green-500);\n}\n\n.effect-focus-within:focus-within {\n  outline-style: solid;\n}\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.sticky {\n  position: sticky;\n}\n\n.inset-0 {\n  inset: 0rem;\n}\n\n.inset-x-16 {\n  left: 1rem;\n  right: 1rem;\n}\n\n.-top-8 {\n  top: -0.5rem;\n}\n\n.left-0 {\n  left: 0rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.left-4 {\n  left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n  left: 4px;\n}\n\n.right-0 {\n  right: 0rem;\n}\n\n.right-4 {\n  right: 0.25rem;\n}\n\n.right-8 {\n  right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n  right: 6px;\n}\n\n.top-0 {\n  top: 0rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n.m-0 {\n  margin: 0rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-ml-16 {\n  margin-left: -1rem;\n}\n\n.-mr-16 {\n  margin-right: -1rem;\n}\n\n.ml-0 {\n  margin-left: 0rem;\n}\n\n.ml-4 {\n  margin-left: 0.25rem;\n}\n\n.ml-64 {\n  margin-left: 4rem;\n}\n\n.ml-8 {\n  margin-left: 0.5rem;\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n.mr-4 {\n  margin-right: 0.25rem;\n}\n\n.mr-8 {\n  margin-right: 0.5rem;\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n.block {\n  display: block;\n}\n\n.\\!block {\n  display: block !important;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.hidden {\n  display: none;\n}\n\n.h-20 {\n  height: 1.25rem;\n}\n\n.h-24 {\n  height: 1.5rem;\n}\n\n.h-36 {\n  height: 2.25rem;\n}\n\n.h-44 {\n  height: 2.75rem;\n}\n\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.\\!min-h-20 {\n  min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.w-20 {\n  width: 1.25rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.flex-none {\n  flex: none;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.break-words {\n  overflow-wrap: break-word;\n}\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.rounded-md {\n  border-radius: 12px;\n}\n\n.rounded-pill {\n  border-radius: 100px;\n}\n\n.rounded-sm {\n  border-radius: 8px;\n}\n\n.rounded-xxs {\n  border-radius: 2px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.border-b-softer {\n  border-bottom-color: rgba(0, 0, 0, .1);\n}\n\n.\\!bg-accent-dark {\n  background-color: var(--green-600) !important;\n}\n\n.\\!bg-darker {\n  background-color: var(--grey-400) !important;\n}\n\n.\\!bg-strong-dark {\n  background-color: var(--grey-800) !important;\n}\n\n.bg-accent {\n  background-color: var(--green-500);\n}\n\n.bg-accent-dark {\n  background-color: var(--green-600);\n}\n\n.bg-dark {\n  background-color: var(--grey-300);\n}\n\n.bg-darker {\n  background-color: var(--grey-400);\n}\n\n.bg-overlay {\n  background-color: rgba(0, 0, 0, 0.25);\n}\n\n.bg-strong {\n  background-color: var(--grey-700);\n}\n\n.bg-strong-dark {\n  background-color: var(--grey-800);\n}\n\n.bg-stronger {\n  background-color: var(--grey-900);\n}\n\n.bg-strongest {\n  background-color: var(--black);\n}\n\n.p-12 {\n  padding: 0.75rem;\n}\n\n.p-6 {\n  padding: 0.375rem;\n}\n\n.p-8 {\n  padding: 0.5rem;\n}\n\n.\\!px-0 {\n  padding-left: 0rem !important;\n  padding-right: 0rem !important;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-16 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.pl-4 {\n  padding-left: 0.25rem;\n}\n\n.pl-8 {\n  padding-left: 0.5rem;\n}\n\n.pr-4 {\n  padding-right: 0.25rem;\n}\n\n.pr-8 {\n  padding-right: 0.5rem;\n}\n\n.\\!text-current {\n  color: currentColor !important;\n}\n\n.text-accent {\n  color: var(--green-500);\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-default {\n  color: var(--black);\n}\n\n.text-inverse {\n  color: var(--white);\n}\n\n.text-lightest {\n  color: var(--grey-500);\n}\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.shadow {\n  --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);\n  --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n  --tw-shadow: 0px 0px 12px rgba(0, 201, 89, 0.6);\n  --tw-shadow-colored: 0px 0px 12px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n  text-underline-offset: 0.2em;\n}\n\n.\\@container {\n  container-type: inline-size;\n}\n\n.after\\:effect-opacity::after {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n  background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n  color: var(--grey-500);\n}\n\n.focus-within\\:bg-transparent:focus-within {\n  background-color: var(--transparent);\n}\n\n.hover\\:bg-accent-dark:hover {\n  background-color: var(--green-600);\n}\n\n.hover\\:bg-dark:hover {\n  background-color: var(--grey-300);\n}\n\n.hover\\:bg-darker:hover {\n  background-color: var(--grey-400);\n}\n\n.hover\\:bg-default:hover {\n  background-color: var(--grey-200);\n}\n\n.hover\\:bg-inverse:hover {\n  background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n  background-color: var(--grey-800);\n}\n\n.hover\\:bg-transparent:hover {\n  background-color: var(--transparent);\n}\n\n.hover\\:text-default:hover {\n  color: var(--black);\n}\n\n.hover\\:text-lighter:hover {\n  color: var(--grey-600);\n}\n\n.hover\\:\\!underline:hover {\n  text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n  text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n  --tw-shadow: 0px 0px 16px rgba(0, 0, 0, 0.2);\n  --tw-shadow-colored: 0px 0px 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n  background-color: var(--grey-300);\n}\n\n.disabled\\:text-lightest:disabled {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n  border-color: var(--transparent) !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n  background-color: var(--grey-300);\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n  background-color: var(--transparent);\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n  color: var(--grey-700);\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n  color: var(--grey-500);\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n  text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n  background-color: var(--grey-400);\n}\n\n.after\\:absolute::after {\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n  left: 0rem;\n  right: 0rem;\n}\n\n.after\\:bottom-0::after {\n  bottom: 0rem;\n}\n\n.after\\:left-16::after {\n  left: 1rem;\n}\n\n.after\\:right-16::after {\n  right: 1rem;\n}\n\n.after\\:z-10::after {\n  z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n  border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n  border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n  border-color: var(--transparent) !important;\n}\n\n.after\\:border-accent::after {\n  border-color: var(--green-500);\n}\n\n.after\\:border-softest::after {\n  border-color: rgba(0, 0, 0, .05);\n}\n\n.after\\:opacity-0::after {\n  opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n  --tw-content: '';\n  content: var(--tw-content);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n  opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n  opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n  border-color: var(--transparent) !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n  opacity: 1;\n}";
 const EdsButtonStyle0 = edsButtonCss;
 
 const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLElement {
@@ -25,7 +25,7 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
                     secondary: 'border-inside border-inside-inverse text-inverse bg-strongest hover:bg-strong-dark',
                     tertiary: 'border-inside after:border-softest bg-dark hover:bg-darker',
                     ghost: 'border-inside hover:bg-darker',
-                    ghostInverse: 'border-inside hover:bg-dark'
+                    ghostInverse: 'border-inside text-lightest hover:bg-dark'
                 },
                 loading: {
                     true: 'pointer-events-none',
@@ -135,8 +135,7 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
     }
     handleClick(event) {
         var _a, _b;
-        if (this.disabled) {
-            // Prevent navigation if the link is disabled
+        if (this.disabled || this.loading) {
             event.preventDefault();
             return;
         }
@@ -152,6 +151,16 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
             this.triggerClick(); // Trigger the passed-in function
         }
     }
+    handleKeyDown(event) {
+        if (this.disabled || this.loading) {
+            // Fix: check loading too
+            return;
+        }
+        if (event.key === 'Enter' || (this.elementType === 'a' && event.key === ' ')) {
+            event.preventDefault();
+            this.handleClick(event);
+        }
+    }
     render() {
         const classes = this.button({
             intent: this.intent,
@@ -163,17 +172,19 @@ const EdsButton = /*@__PURE__*/ proxyCustomElement(class EdsButton extends HTMLE
             iconSmall: this.iconSmall
         });
         const ElementType = this.elementType;
-        return (h(ElementType, { key: 'ecdd901c70578c07ef094aadbcd287588d4ba705', "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: 'af8d0ca1c5c3e54f9db3066931a69d3a5a812666', class: this.loading ? 'opacity-0' : '' }, this.label), this.loading && (h("span", { key: '29b72c15e80f46e023f829568f58d8a8dca82b78', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'bad8bd059b1312ca3f5ab173b1203eb395e9bbd8', class: "loader", style: {
+        const isInteractive = !this.disabled && !this.loading;
+        return (h(Host, { key: '835cc81d3563abf1b5cb4c21165de1ef726d1e43' }, h(ElementType, { key: 'df05b2b2152e707e5fdd6028c5f557097d7e2b04', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''} ${this.extraClass || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (h("span", { key: '27c7473403e7c1bfd3dfc270151d44dbb639ceb3', class: this.loading ? 'opacity-0' : '', "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (h("span", { key: 'f52496884816bc299fb76c1afae5e4798bf642d2', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, h("span", { key: 'd42bf2c229f6956a1e0dbe64aa6c79ad5608ca5c', 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: `
-              flex inline-flex items-center justify-center
-              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
-            `, icon: this.icon })) : null));
+                flex inline-flex items-center justify-center
+                ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
+              `, icon: this.icon, "aria-hidden": "true" })) : null)));
     }
+    static get delegatesFocus() { return true; }
     get el() { return this; }
     static get style() { return EdsButtonStyle0; }
-}, [1, "eds-button", {
+}, [17, "eds-button", {
         "label": [1],
         "ariaLabel": [1, "aria-label"],
         "elementType": [1, "element-type"],

package/dist/components/eds-card-desc2.js

@@ -16,7 +16,7 @@ const EdsCardDesc = /*@__PURE__*/ proxyCustomElement(class EdsCardDesc extends H
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (h("p", { key: '2421ea469339e3d56fc5c0ebbec213eeb1a2a9cf', class: "text-light f-ui-03-light" }, h("span", { key: 'd024adda16a85bf2913803c06eb05af3b4af6bb9', class: this.getTruncateClass() }, this.description)));
+        return (h("p", { key: '302734334d08002f94c269977ebda7762fd19843', class: "text-light f-ui-03-light" }, h("span", { key: '925f6cea41068b62d22902f33d80d700d0975f39', class: this.getTruncateClass() }, this.description)));
     }
     static get style() { return EdsCardDescStyle0; }
 }, [1, "eds-card-desc", {

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

@@ -187,7 +187,7 @@ const EdsCardProject$1 = /*@__PURE__*/ proxyCustomElement(class EdsCardProject e
             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: '021f5e4d88bb987811ea169880cd327e996e36e9', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '5f1a3d00b03e6cc19023ee437a7bd2bf6b52d77a', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '6e42bcbdbe5ba666eae942a7c4e354627f019c6a', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: '12884d77432d8cc6021f9432538f1beacf3190f3', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '4f604d61c3a1a2405bfaf6407a893015c68f6f35', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '8d767d7ac9c069412b64869a03eae8ccf4b513ad', 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: '2a488d291c1f3e10b8ed36aa61e04ecf5299b320', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: '9d4fa14e0e56d8db8c1747b477cd77e4b7281f8c', class: imageClasses }, h("div", { key: '627f549786c9a1674349b851704690fdb597391e', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: 'a4eeb6a0d7f725d8c706e98c57f492e94c9c7b4b', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
+        return (h("article", { key: 'b4587158532ddc495a1cda29941b69934b93c7d3', class: cardClasses, onClick: (event) => this.handleClick(event) }, h("div", { key: '96ab6c6b9f5e89db0ca29c678c0ff3d7643976de', class: `flex grow flex-col ${this.vertical ? 'min-h-156' : ''}` }, h("div", { key: '6b1e39c1b3445c2eff43f03efc0d14307e044428', class: "lg:max-w-[720px]" }, h("eds-card-title", { key: 'a5a2c5916c35dec35d261da0bf10a3905ce0452e', "heading-level": this.headingLevel, titleClass: this.image ? 'f-ui-01' : undefined, "card-title": this.titleProject, url: this.url }), this.editorialTitle && (h("span", { key: '65f034e9ae8f7abbc37fb8fc3b03a440467c33f5', class: `block ${this.vertical ? 'f-ui-02' : 'mt-4 f-heading-06'}` }, this.editorialTitle))), this.categoryTitle && (h("div", { key: '690f9157169e6344af51407fca8c25f7cf35ac74', 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: '651b1f0424b45348c854b7ec98e4dae1e4952bbd', label: this.categoryTitle })))), this.parsedImage && (h("div", { key: 'b761288da975f05bb558b0e60767292c20e767e8', class: imageClasses }, h("div", { key: 'bf027b4359774454d9f866f4bb17872a1c0ba724', class: "aspect-1x1 w-full" }, h("eds-img", Object.assign({ key: '19b4c37dcbe7c463afd3ece46d5c348c681771c8', sizes: this.vertical ? this.parsedImage.sizes || '' : '192px' }, this.parsedImage)))))));
     }
     get el() { return this; }
 }, [0, "eds-card-project", {