@ebrains/components 2.4.0 → 3.0.0

package/dist/components/eds-footer2.js

@@ -1,11 +1,10 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$5 } from './eds-button2.js';
-import { d as defineCustomElement$4 } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$3 } from './eds-img2.js';
+import { d as defineCustomElement$4 } from './eds-button2.js';
+import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 import { d as defineCustomElement$1 } from './eds-social-networks2.js';
 
-const edsFooterCss = "p{margin:0}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-darker{background-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-700)}.mt-4{margin-top:0.25rem}.mr-4{margin-right:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}.opacity-0{opacity:0}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}";
+const edsFooterCss = "p{margin:0}footer{position:relative}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-darker{background-color:var(--grey-light)}.bg-strongest{background-color:var(--brand-black)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-inverse-softer{border-color:rgba(255, 255, 255, .15)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus:focus-visible{outline-style:solid}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.h-auto{height:auto}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-light)}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.mt-4{margin-top:0.25rem}.mr-4{margin-right:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}.opacity-0{opacity:0}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-75{transition-duration:75ms}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}";
 const EdsFooterStyle0 = edsFooterCss;
 
 const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLElement {
@@ -23,6 +22,7 @@ const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLE
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
         this.social = false;
+        this.variant = 'default';
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
@@ -59,14 +59,19 @@ const EdsFooter = /*@__PURE__*/ proxyCustomElement(class EdsFooter extends HTMLE
     render() {
         const year = new Date().getFullYear();
         const rights = this.rightsReserved || `${year} EBRAINS. All rights reserved.`;
-        return (h("footer", { key: 'bf9d98eea0bd151bf87818b770e85fe0cfa1044f' }, this.social ? (h("div", { class: "border-softest border-t-2 pt-20 md:pt-28" }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28" })))))) : null, h("div", { key: 'c0058cd32e2904e4e08ec46b99a0cbbabb5df588', class: `border-softest ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: '4f2993ccded30ca66da34eca632b62abf02e06d5', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '81efd584b5de410522d338bb6ab4b53096a36868', class: "flex items-center gap-x-12" }, h("a", { key: '5a641163b3cb1549ee886e9029b65a012b31cd85', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("eds-img", { key: '6428f6d0b70f802a7eaa81fcce7641f754c0071a', width: 63, height: 50, src: "https://www.ebrains.eu/flags/4x3/eu.svg", alt: "European Union Flag" }))), h("div", { key: 'c3612f7c694abd66831a6c04f2d9f98bc9f8a2dd' }, h("div", { key: '7d16c929479ee8db9d981d6178f17fd832184e29', class: "f-ui-02 text-light" }, h("p", { key: '86c6e3eec115a886a37618963e973004f130950e' }, this.fundedBy), h("div", { key: '13e4e3925ea8f76865684cba29c91653bba0c45d', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: '21c77485fffbe352edb8501dab07fd6628de62ba', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
+        const isInverse = this.variant === 'inverse';
+        const footerClasses = isInverse ? 'bg-strongest text-inverse' : '';
+        const borderClasses = isInverse ? 'border-inverse-softer' : 'border-softest';
+        const textClasses = isInverse ? 'text-inverse' : 'text-default';
+        return (h("footer", { key: 'ffe47afda9981e367f24d2525a5b21e96f4f3d10', class: footerClasses }, this.social ? (h("div", { class: `${borderClasses} border-t-2 pt-20 md:pt-28` }, h("div", { class: "container pb-20" }, h("div", { class: "grid-layout" }, h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, h("eds-social-networks", { class: "mt-28", variant: this.variant })))))) : null, h("div", { key: '2e884f06ca55ea5837aabfd7d726a79b72365ab3', class: `${borderClasses} ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, h("div", { key: 'f601602dd39c564ce77d978325cbacaa752bd5f0', class: "container flex items-center gap-20 lg:flex-nowrap" }, h("div", { key: '94d6bf12bca8a37560124de2a9114a4566494883', class: "flex items-center gap-x-12" }, h("a", { key: '8c9bf0a41cce7e043311b39c6418d2dc3541694f', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, h("svg", { key: '5d0c96911aa0069dd7c0ef6a5690d5ac59dbc737', class: "h-auto w-full", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'bab3fd3f37857e99c2a525b7a9553d4c706d247c', d: "M0 0h640v480H0V0z", fill: "#039" }), h("path", { key: 'e77d6f1fc21f36083196adcb4f6b7a3e70105b0f', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" })))), h("div", { key: '3057a627d8cc6e524f6381f21bb34b549d45021f' }, h("div", { key: 'd6397eaa434f15d415bff0c5171b4f71295dabc3', class: `f-ui-02 ${textClasses}` }, h("p", { key: 'cc9e370cd5b4238fcd76bc8f1f84c54af2873bab' }, this.fundedBy), h("div", { key: '9af9a16cf3cc6fc4223c1b5eac13f96894b92962', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, h("span", { key: 'e86c83c7504f60831dc9d4239b3e2b551b2765b6', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (h("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
                 this.toggleCookiesConsent();
-            } })) : null))), h("div", { key: '1c8417017493de5e446bfdeec248948d920c1a95', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: "ghostInverse", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+            } })) : null))), h("div", { key: 'd2dcb8a3a99c5aa368d6d710e125e3a9f8fefd25', class: "ml-auto pl-12" }, this.enableScrollTop ? (h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
     }
     get el() { return this; }
     static get style() { return EdsFooterStyle0; }
 }, [1, "eds-footer", {
         "social": [4],
+        "variant": [1],
         "enableScrollTop": [4, "enable-scroll-top"],
         "fundedBy": [1, "funded-by"],
         "rightsReserved": [1, "rights-reserved"],
@@ -79,7 +84,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-footer", "eds-button", "eds-icon-wrapper", "eds-img", "eds-link", "eds-social-networks"];
+    const components = ["eds-footer", "eds-button", "eds-icon-wrapper", "eds-link", "eds-social-networks"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-footer":
             if (!customElements.get(tagName)) {
@@ -87,16 +92,11 @@ function defineCustomElement() {
             }
             break;
         case "eds-button":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$5();
-            }
-            break;
-        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-img":
+        case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/eds-form.js

@@ -1,15 +1,18 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 import { p as parseData } from './sharedUtils.js';
-import { d as defineCustomElement$d } from './eds-button2.js';
-import { d as defineCustomElement$c } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$b } from './eds-input2.js';
-import { d as defineCustomElement$a } from './eds-input-field2.js';
-import { d as defineCustomElement$9 } from './eds-input-footer2.js';
-import { d as defineCustomElement$8 } from './eds-input-label2.js';
-import { d as defineCustomElement$7 } from './eds-input-range2.js';
-import { d as defineCustomElement$6 } from './eds-input-search2.js';
-import { d as defineCustomElement$5 } from './eds-input-select2.js';
+import { d as defineCustomElement$g } from './eds-button2.js';
+import { d as defineCustomElement$f } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$e } from './eds-input2.js';
+import { d as defineCustomElement$d } from './eds-input-dropzone2.js';
+import { d as defineCustomElement$c } from './eds-input-field2.js';
+import { d as defineCustomElement$b } from './eds-input-file2.js';
+import { d as defineCustomElement$a } from './eds-input-footer2.js';
+import { d as defineCustomElement$9 } from './eds-input-label2.js';
+import { d as defineCustomElement$8 } from './eds-input-range2.js';
+import { d as defineCustomElement$7 } from './eds-input-search2.js';
+import { d as defineCustomElement$6 } from './eds-input-select2.js';
+import { d as defineCustomElement$5 } from './eds-kg-web-services-select2.js';
 import { d as defineCustomElement$4 } from './eds-link2.js';
 import { d as defineCustomElement$3 } from './eds-nps2.js';
 import { d as defineCustomElement$2 } from './eds-rating2.js';
@@ -39,9 +42,31 @@ function validateField(name, value, type, required, maxLength, min, max) {
     if (maxLength && typeof value === 'string' && value.length > maxLength) {
         errors.push(`${name} must be at most ${maxLength} characters.`);
     }
+    // Email validation
     if (type === 'email' && value && !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(value.toString())) {
         errors.push('Invalid email format.');
     }
+    // URL validation
+    if (type === 'url' && value) {
+        try {
+            new URL(value.toString());
+        }
+        catch (_a) {
+            errors.push('Invalid URL format.');
+        }
+    }
+    // Tel validation - must contain at least one digit and only valid phone characters
+    if (type === 'tel' && value) {
+        const telValue = value.toString();
+        const hasDigit = /\d/.test(telValue);
+        const onlyValidChars = /^[\d\s\-\+\(\)\.]+$/.test(telValue);
+        if (!hasDigit) {
+            errors.push('Phone number must contain at least one digit.');
+        }
+        else if (!onlyValidChars) {
+            errors.push('Phone number contains invalid characters. Use only digits, spaces, +, -, (, ), or .');
+        }
+    }
     return errors;
 }
 function validateFieldGroup(name, required, formEl) {
@@ -115,7 +140,6 @@ 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.
@@ -154,12 +178,10 @@ isFieldVisible) {
             // NPS type
             else if (field.type === 'nps') {
                 const npsEl = findNpsElement(formEl);
-                if (npsEl && npsEl.shadowRoot) {
-                    const raw = (_a = npsEl.shadowRoot
-                        .querySelector('eds-button[tabindex="0"]')) === null || _a === void 0 ? void 0 : _a.getAttribute('aria-label');
-                    const parsed = raw !== null ? parseInt(raw, 10) : NaN;
-                    const value = Number.isInteger(parsed) && parsed >= 0 && parsed <= 10 ? parsed : NaN;
-                    if (isNaN(value)) {
+                if (npsEl) {
+                    const raw = npsEl.getAttribute('selected-value');
+                    const value = raw !== null ? parseInt(raw, 10) : null;
+                    if (value === null || isNaN(value)) {
                         // eslint-disable-next-line
                         if (field.required) {
                             errors[field.name] = ['This field is required.'];
@@ -225,7 +247,7 @@ function getFormInitData({ initData, parsedFields, currentValues
     return { updatedValues };
 }
 
-const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}";
+const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:600;font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:600;font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing);overflow:visible}.text-light{color:var(--grey-dark)}.rounded-xs{border-radius:4px}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.border-t-2{border-top-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pt-32{padding-top:2rem}.pt-64{padding-top:4rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-20{row-gap:1.25rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.form-brand{box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border-left:4px solid var(--brand-green);animation:fadeInUp 0.6s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-4{padding-bottom:0.25rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.w-full{width:100%}.justify-between{justify-content:space-between}.items-center{align-items:center}@media (min-width: 750px){.md\\:flex-row-reverse{flex-direction:row-reverse}.md\\:justify-between{justify-content:space-between}.md\\:gap-y-0{row-gap:0}.md\\:w-auto{width:auto}.md\\:mt-64{margin-top:4rem}.md\\:pt-64{padding-top:4rem}}";
 const EdsFormStyle0 = edsFormCss;
 
 const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLElement {
@@ -241,6 +263,8 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
         this.buttonIntent = 'primary';
+        this.clearBtn = false;
+        this.clearBtnLabel = 'Clear';
         this.errorMessage = 'Some fields in your form are incorrect.';
         this.fields = [];
         this.groups = [];
@@ -414,8 +438,24 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             formData.set('form_url', window.location.href);
         }
         Object.keys(this.values).forEach((key) => {
-            // Append each key-value pair to the FormData object.
-            formData.append(key, this.values[key]);
+            const value = this.values[key];
+            // Handle File arrays (from file inputs)
+            if (Array.isArray(value)) {
+                // Check if it's a File array (could be empty or have files)
+                if (value.length === 0 || value[0] instanceof File) {
+                    // Append each file, or skip if empty array
+                    value.forEach((file) => formData.append(key, file));
+                    return;
+                }
+            }
+            // Handle single File
+            if (value instanceof File) {
+                formData.append(key, value);
+            }
+            // Handle all other values (string, number, boolean, etc.)
+            else if (value !== undefined && value !== null) {
+                formData.append(key, value);
+            }
         });
         // 2) Only do the (slower) DOM scan if we actually have file fields in the config
         const hasFileField = (_a = this.parsedFields) === null || _a === void 0 ? void 0 : _a.some((f) => (f === null || f === void 0 ? void 0 : f.type) === 'file');
@@ -428,7 +468,6 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
                     return;
                 }
                 const fileInputs = Array.from(root.querySelectorAll('input[type="file"][name]'));
-                console.log(fileInputs);
                 fileInputs.forEach((fi) => {
                     const name = fi.name;
                     const files = fi.files ? Array.from(fi.files) : [];
@@ -451,33 +490,41 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         return formData;
     }
     handleChange(e, field) {
-        const target = e.target;
-        let newValue = target.value;
-        if (target.type === 'checkbox') {
-            // Get the current comma separated string or default to an empty string.
-            const currentStr = this.values[field.name] || '';
-            // Convert the string into an array. If the string is empty, we get an empty array.
-            let valuesArray = currentStr ? currentStr.split(',') : [];
-            if (target.checked) {
-                // Only add if it's not already in the array.
-                if (!valuesArray.includes(target.value)) {
-                    valuesArray.push(target.value);
+        let newValue;
+        // Check if it's a CustomEvent (from eds-input-field or eds-kg-web-services-select)
+        if (e instanceof CustomEvent && e.detail && 'value' in e.detail) {
+            newValue = e.detail.value;
+        }
+        else {
+            // Handle native events
+            const target = e.target;
+            newValue = target.value;
+            if (target.type === 'checkbox') {
+                // Get the current comma separated string or default to an empty string.
+                const currentStr = this.values[field.name] || '';
+                // Convert the string into an array. If the string is empty, we get an empty array.
+                let valuesArray = currentStr ? currentStr.split(',') : [];
+                if (target.checked) {
+                    // Only add if it's not already in the array.
+                    if (!valuesArray.includes(target.value)) {
+                        valuesArray.push(target.value);
+                    }
+                }
+                else {
+                    // Remove the value from the array if the checkbox is unchecked.
+                    valuesArray = valuesArray.filter((item) => item !== target.value);
                 }
+                newValue = valuesArray.join(',');
             }
-            else {
-                // Remove the value from the array if the checkbox is unchecked.
-                valuesArray = valuesArray.filter((item) => item !== target.value);
+            else if (target.type === 'radio') {
+                if (!target.checked) {
+                    return;
+                } // Only react to the selected radio
+                newValue = target.value;
             }
-            newValue = valuesArray.join(',');
-        }
-        else if (target.type === 'radio') {
-            if (!target.checked) {
-                return;
-            } // Only react to the selected radio
-            newValue = target.value;
         }
         this.values = Object.assign(Object.assign({}, this.values), { [field.name]: newValue });
-        // If it’s the password field, return here for no event emission
+        // If it's the password field, return here for no event emission
         if (field.name === 'password') {
             return;
         }
@@ -491,17 +538,25 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         });
     }
     handleInput(e, field) {
-        const target = e.target;
-        if (target.type === 'radio' && !target.checked) {
-            return;
+        let newValue;
+        // Check if it's a CustomEvent (from eds-input-field or eds-kg-web-services-select)
+        if (e instanceof CustomEvent && e.detail && 'value' in e.detail) {
+            newValue = e.detail.value;
+        }
+        else {
+            // Handle native events
+            const target = e.target;
+            if (target.type === 'radio' && !target.checked) {
+                return;
+            }
+            newValue = target.value;
         }
-        const newValue = target.value;
         // Update the field's value in state.
-        //this.values = { ...this.values, [field.name]: target.value };
+        //this.values = { ...this.values, [field.name]: newValue };
         // Create a copy of the current errors.
         const newErrors = Object.assign({}, this.errors);
         // Use the utility to validate the field.
-        const fieldErrors = validateInputField(field, target.value, this.formEl);
+        const fieldErrors = validateInputField(field, newValue, this.formEl);
         if (fieldErrors.length > 0) {
             newErrors[field.name] = fieldErrors;
         }
@@ -612,6 +667,51 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         this.isSubmitting = false;
         return;
     }
+    handleClear(e) {
+        var _a, _b;
+        e === null || e === void 0 ? void 0 : e.preventDefault();
+        // Reset form element
+        this.formEl.reset();
+        // Clear values state - create new object reference to trigger re-render
+        // This will automatically reset rating and nps components through prop changes
+        this.values = Object.assign({});
+        // Clear errors
+        this.errors = {};
+        this.hasError = false;
+        // Query all input fields in the shadow DOM and manually reset them
+        // This is needed because shadow DOM isolates the fields from form.reset()
+        const inputFields = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-input-field');
+        inputFields === null || inputFields === void 0 ? void 0 : inputFields.forEach((field) => {
+            var _a;
+            if (field) {
+                const inputEl = (_a = field.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('input, select, textarea');
+                if (inputEl) {
+                    const inputType = inputEl.type;
+                    // Handle checkboxes and radios - they need 'checked' property
+                    if (inputType === 'checkbox' || inputType === 'radio') {
+                        inputEl.checked = false;
+                    }
+                    else {
+                        // Handle text, select, textarea, date, number, email, etc.
+                        inputEl.value = '';
+                    }
+                }
+            }
+        });
+        // Emit event
+        this.form.emit({
+            event: 'change',
+            message: 'Form cleared',
+            success: true
+        });
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: `${(_b = this.clearBtnLabel) === null || _b === void 0 ? void 0 : _b.toLowerCase()}/clear` || '',
+            action: 'click'
+        });
+    }
     get groupedFields() {
         const map = {};
         // initialize buckets for each declared group
@@ -632,7 +732,7 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         return map;
     }
     renderField(field) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d;
         if (!this.isFieldVisible(field)) {
             return null;
         }
@@ -643,9 +743,14 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
             return (h("div", { class: "form-group rating-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, message: field.message, "error-message": (_a = this.errors[field.name]) === null || _a === void 0 ? void 0 : _a.join('<br/>'), error: !!this.errors[field.name], link: field.link }))));
         }
         else if (field.type === 'nps') {
-            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
+            // pull the current value (or null)
+            const val = this.values[field.name] !== undefined ? this.values[field.name] : null;
+            return (h("div", { class: "form-group nps-field", key: field.name }, h("div", { class: "flex justify-between" }, field && (h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), h("div", { class: "mt-6" }, h("eds-input-footer", { id: `${field.name}-footer`, name: field.name, "error-message": (_b = this.errors[field.name]) === null || _b === void 0 ? void 0 : _b.join('<br/>'), error: !!this.errors[field.name] }))));
         }
-        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
+        else if (field.type === 'kg-web-service') {
+            return (h("eds-kg-web-services-select", { key: field.name, name: field.name, label: field.label, "api-endpoint": field.apiEndpoint || '/api/v1/kg/web-services/cached', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.join('<br/>'), value: this.values[field.name], size: field.size || 500, onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
+        }
+        return (h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
@@ -654,13 +759,20 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
         const buckets = this.groupedFields;
-        // build the shadow/bg classes if formStyle="shadow"
-        const styleClasses = this.formStyle === 'shadow'
-            ? 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-lg border-2 p-32'
-            : '';
-        return (h("form", { key: 'a4b6cf51242567739fc3ff2da482c41edb4e4e57', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '5f7e1d618f8a10a1cd6aa8d512c04064a484cd93', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '283d752d3e9f4ede0f50493ba9e5010376ebfb1f', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: 'bd5866482b87bdc86a59594b884a9b81c676afdb', class: "f-body-02 text-light" }, this.description), h("slot", { key: 'b2de746ccf8743fdef545a70ab111dfff0d7912f' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        // build the styling classes based on formStyle prop
+        let styleClasses = '';
+        if (this.formStyle === 'default') {
+            styleClasses = 'bg-inverse border-softer relative rounded-xs border-2 p-32';
+        }
+        else if (this.formStyle === 'shadow') {
+            styleClasses = 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-xs border-2 p-32';
+        }
+        else if (this.formStyle === 'brand') {
+            styleClasses = 'bg-inverse form-brand relative rounded-xs p-32';
+        }
+        return (h("form", { key: '5e58460e52950974cdf11001123f9ffb23dc659e', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: 'ff3a33e3a8d311c86712daa68c80aac767d82a9b', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (h("span", { key: 'b1f363c03074f944a8f60387a40cef6fa791b188', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && h("span", { key: '7a9b5ea5451cf59ac47ec81dd1a44c7c9e6326a3', class: "f-body-02 text-light" }, this.description), h("slot", { key: '1e50a245fa37b73149a22308fda4039051d4639c' })), hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '917c5bd2e6048a91487f0a66bd0426e529295f9e', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '96abbd19ea2869c21146f0b37da7ff6b89fbf66c', class: "mt-32" }, h("eds-button", { key: '066348df32cf27fc6e56c94b9d5c455bc51b4adf', intent: this.buttonIntent, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, onClick: () => this.handleSubmit() })))));
+            .map((g) => (h("div", { class: "mt-32", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { key: '6cd08f342c0f9004d10628827720cb641339fcd5', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { key: 'e8d37bedbd49c9fc94cbd2e2a887448f3764b8f9', class: "mt-32 md:mt-64 flex flex-col items-center md:flex-row-reverse md:justify-between gap-y-16 md:gap-y-0" }, this.formBtn && (h("eds-button", { key: 'ec878c5edaa87cf9bff0424b92e5c82605856e67', intent: this.buttonIntent, pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: 'arrow-right', size: "large", onClick: () => this.handleSubmit() })), this.clearBtn && (h("eds-button", { key: '1158dc2af47f9f523ccd2ee1435a4147fc0a646c', intent: "neutral", pill: true, size: "large", label: this.clearBtnLabel, disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: (e) => this.handleClear(e) }))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -676,6 +788,8 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         "formBtn": [4, "form-btn"],
         "formBtnLabel": [1, "form-btn-label"],
         "buttonIntent": [1, "button-intent"],
+        "clearBtn": [4, "clear-btn"],
+        "clearBtnLabel": [1, "clear-btn-label"],
         "errorMessage": [1, "error-message"],
         "fields": [1],
         "groups": [1],
@@ -697,7 +811,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-form", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-nps", "eds-rating"];
+    const components = ["eds-form", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-kg-web-services-select", "eds-link", "eds-nps", "eds-rating"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-form":
             if (!customElements.get(tagName)) {
@@ -706,45 +820,60 @@ function defineCustomElement$1() {
             break;
         case "eds-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$g();
             }
             break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$f();
             }
             break;
         case "eds-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$e();
+            }
+            break;
+        case "eds-input-dropzone":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
             }
             break;
         case "eds-input-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$c();
+            }
+            break;
+        case "eds-input-file":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$b();
             }
             break;
         case "eds-input-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "eds-input-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "eds-input-range":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "eds-input-search":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "eds-input-select":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-kg-web-services-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }

package/dist/components/eds-frame.js

@@ -2,7 +2,7 @@ import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/clien
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 
-const edsFrameCss = ".bg-inverse{background-color:var(--white)}.min-h-156{min-height:156px}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:16px}.rounded-md{border-radius:12px}.border-soft{border-color:rgba(0, 0, 0, .15)}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-softest{border-color:rgba(0, 0, 0, .05)}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.flex{display:flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.border-2{border-width:2px}.w-full{width:100%}.h-full{height:100%}.h-auto{height:auto}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.items-center{align-items:center}.justify-between{justify-content:space-between}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.px-12{padding-left:0.75rem;padding-right:0.75rem}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.ml-auto{margin-left:auto}.border-t-2{border-top-width:2px}.border{border:1px solid rgba(0, 0, 0, .1)}.border-2{border:1px solid rgba(0, 0, 0, .1)}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.mt-16{margin-top:1rem}";
+const edsFrameCss = ".bg-inverse{background-color:#FFFFFF;border:1px solid #ECECEC;color:#07140D}.min-h-156{min-height:156px}.rounded{border-radius:0.25rem}.rounded-full{border-radius:9999px}.rounded-lg{border-radius:16px}.rounded-md{border-radius:12px}.border-soft{border-color:#ECECEC}.border-softer{border-color:#ECECEC}.border-softest{border-color:#f2f2f2}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:#00FF9D}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.flex{display:flex}.grow{flex-grow:1}.flex-col{flex-direction:column}.border-2{border-width:0}.w-full{width:100%}.h-full{height:100%}.h-auto{height:auto}.effect-height{transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-property:height}.items-center{align-items:center}.justify-between{justify-content:space-between}.py-8{padding-top:0.75rem;padding-bottom:0.75rem}.px-12{padding-left:1rem;padding-right:1rem}.py-8.px-12{border-bottom:1px solid #ECECEC}.f-ui-02{font-family:'IBM Plex Sans', sans-serif;font-size:0.8125rem;font-weight:600;color:#07140D;line-height:1.4}.ml-auto{margin-left:auto}.border-t-2{border-top-width:1px;border-color:#ECECEC}.border{border:1px solid #ECECEC}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto;color:#7A7B7A}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.mt-16{margin-top:1rem}iframe{border-radius:0 0 12px 12px}";
 const EdsFrameStyle0 = edsFrameCss;
 
 const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLElement {
@@ -15,7 +15,7 @@ const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLE
         this.urlLabel = 'Open';
         this.errorMessage = 'Could not load the requested content. Please check the URL or try again later.';
         this.url = undefined;
-        this.intent = 'strong';
+        this.intent = 'cta';
         this.size = 'auto';
         this.iframeError = false;
     }
@@ -76,7 +76,7 @@ const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLE
         }
     }
     render() {
-        return (h("div", { key: '5bcdb5bdd66a7530a82662ff9b6ef06d3a1eb1d3', class: this.articleClasses() }, h("div", { key: '4c9e224f1a6421398cfef1fd89d113513727b6dd', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '7704b4f1d1a3e8a728f0ad751891ecbfd118411a', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-diagonal" })) : null), h("div", { key: 'd4372713fc8984d14808171857d6efd40790dec2', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
+        return (h("div", { key: '0fa74cf426f9d934a035b5e3f6c9e5722c40beab', class: this.articleClasses() }, h("div", { key: '65ab4084241ce1b5337e9bfaaffb5c2aaceec28e', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: 'f1cda1a4d61b47550d9d8cd08986f2253710c4ea', class: "f-ui-02" }, this.frameLabel), !this.iframeError && this.url && this.urlLabel ? (h("eds-link", { label: this.urlLabel, url: this.url, intent: this.intent, class: "ml-auto", external: true, disabled: false, icon: "arrow-up-right" })) : null), h("div", { key: 'e02ffe4f38f1375a0694f2acec72406824745437', class: "border-softer" }, this.iframeError ? (h("div", { class: "container ml-8 mr-8 mt-16" }, this.errorMessage)) : (h("iframe", { src: this.frameSrc, width: "100%", height: this.getFrameHeight(), title: this.frameLabel, frameBorder: "0", allowFullScreen: true })))));
     }
     get el() { return this; }
     static get style() { return EdsFrameStyle0; }