@ebrains/components 2.4.1 → 3.1.0

package/dist/collection/components/eds-form/eds-form.css

@@ -43,7 +43,7 @@
 
 .f-heading-04 {
   font-family: var(--f-heading-04-fontFamily);
-  font-weight: var(--f-heading-04-fontWeight);
+  font-weight: 600;
   font-size: var(--f-heading-04-fontSize);
   line-height: var(--f-heading-04-lineHeight);
   letter-spacing: var(--f-heading-04-letterSpacing);
@@ -51,14 +51,19 @@
 
 .f-heading-05 {
   font-family: var(--f-heading-05-fontFamily);
-  font-weight: var(--f-heading-05-fontWeight);
+  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-700);
+  color: var(--grey-dark);
+}
+
+.rounded-xs {
+  border-radius: 4px;
 }
 
 .rounded-sm {
@@ -73,6 +78,10 @@
   border-width: 2px;
 }
 
+.border-t-2 {
+  border-top-width: 2px;
+}
+
 .mt-20 {
   margin-top: 1.25rem;
 }
@@ -81,6 +90,10 @@
   margin-top: 2rem;
 }
 
+.mt-64 {
+  margin-top: 4rem;
+}
+
 .mb-32 {
   margin-bottom: 2rem;
 }
@@ -89,6 +102,14 @@
   padding-top: 1.75rem;
 }
 
+.pt-32 {
+  padding-top: 2rem;
+}
+
+.pt-64 {
+  padding-top: 4rem;
+}
+
 .pl-8 {
   padding-left: 0.5rem;
 }
@@ -109,6 +130,10 @@
   row-gap: 1rem;
 }
 
+.gap-y-20 {
+  row-gap: 1.25rem;
+}
+
 .gap-y-24 {
   row-gap: 1.5rem;
 }
@@ -122,6 +147,23 @@
   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);
@@ -142,7 +184,7 @@
 .effect-focus-within {
   outline-width: 3px;
   outline-offset: 2px;
-  outline-color: var(--green-500);
+  outline-color: var(--brand-green);
 }
 
 .effect-focus-within:focus-within {
@@ -153,6 +195,10 @@
   position: relative;
 }
 
+.rounded-sm {
+  border-radius: 8px;
+}
+
 .rounded-lg {
   border-radius: 16px;
 }
@@ -162,10 +208,96 @@
   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;
+  }
+}
+/* Inline links in the form/step description and Text Blocks — exact match of
+   eds-link's "underline" intent (.animated-underline): green bar animates in
+   on hover. */
+.eds-desc-link {
+  position: relative;
+  display: inline-block;
+  color: var(--brand-black);
+  text-decoration: none;
+}
+.eds-desc-link::after {
+  content: '';
+  position: absolute;
+  bottom: -2px;
+  left: 0;
+  width: 0;
+  height: 2px;
+  background-color: var(--brand-green);
+  transition: width 0.3s ease;
+}
+.eds-desc-link:hover::after {
+  width: 100%;
+}
+.eds-desc-link:focus-visible::after {
+  width: 0;
+}
+
+/* Presentational "Text Block" field (type=content): body text the author drops
+   anywhere in the form. Links inside reuse .eds-desc-link above. */
+.eds-content-block {
+  line-height: 1.5;
+  color: var(--brand-black, #07140d);
+}
+.eds-content-block strong { font-weight: 600; }
+/* In Text Blocks, make links a touch bolder than body text so they read as
+   links at a glance (the eds-link underline still animates on hover). */
+.eds-content-block .eds-desc-link { font-weight: 600; }

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

@@ -2,6 +2,7 @@ import { h } from "@stencil/core";
 import { sendAnalytics } from "../../utils/analytics";
 import { parseData } from "../../utils/sharedUtils";
 import { validateFormFields } from "../../utils/eds-form/formValidators";
+import { safeInlineFormat } from "../../utils/eds-form/safeFormat";
 import { validateInputField } from "../../utils/eds-form/validateInput";
 import { getFormInitData } from "../../utils/eds-form/formUtils";
 /**
@@ -25,6 +26,8 @@ export class EdsForm {
         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 = [];
@@ -197,9 +200,38 @@ export class EdsForm {
         if (this.setFormUrl && typeof window !== 'undefined') {
             formData.set('form_url', window.location.href);
         }
+        // Group fields by name so we can drop values for fields hidden by a condition.
+        // A name may be reused across mutually-exclusive conditional variants (e.g. a
+        // `web_app_url` shown for service_type=web_app AND another for =platform), so a
+        // value is dropped ONLY when EVERY field with that name is hidden — if any
+        // variant is visible, its value is kept.
+        const fieldsByName = {};
+        this.parsedFields.forEach((f) => {
+            (fieldsByName[f.name] = fieldsByName[f.name] || []).push(f);
+        });
         Object.keys(this.values).forEach((key) => {
-            // Append each key-value pair to the FormData object.
-            formData.append(key, this.values[key]);
+            const fields = fieldsByName[key];
+            if (fields && fields.length && !fields.some((f) => this.isFieldVisible(f))) {
+                return; // all fields with this name are conditionally hidden — skip
+            }
+            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');
@@ -212,7 +244,6 @@ export class EdsForm {
                     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) : [];
@@ -239,33 +270,41 @@ export class EdsForm {
         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;
         }
@@ -279,17 +318,25 @@ export class EdsForm {
         });
     }
     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;
         }
@@ -400,6 +447,51 @@ export class EdsForm {
         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
@@ -420,35 +512,71 @@ export class EdsForm {
         return map;
     }
     renderField(field) {
-        var _a, _b, _c;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!this.isFieldVisible(field)) {
             return null;
         }
+        // 0) Presentational "Text Block" — static formatted text, NOT an input.
+        // It has no value, is never added to the submission (makeFormData only
+        // iterates this.values) and is never validated (see formValidators). The
+        // text runs through formatDescription, which escapes HTML first, so author
+        // content can never inject markup — only the **bold**/[link]/newline subset.
+        if (field.type === 'content') {
+            const raw = ((_b = (_a = field.content) !== null && _a !== void 0 ? _a : field.label) !== null && _b !== void 0 ? _b : '');
+            return (h("div", { class: "eds-content-block f-body-02 text-default", key: field.name, innerHTML: this.formatDescription(raw) }));
+        }
         // 1) Handle rating
         if (field.type === 'rating') {
             // pull the current value (or zero)
             const val = this.values[field.name] || 0;
-            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 }))));
+            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": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.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": (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.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 === 'search-select') {
+            return (h("eds-search-select", { key: field.name, name: field.name, label: field.label, source: field.source, options: field.options, multiple: !!field.multiple, "api-base": field.apiBase || '/api/v1', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_e = this.errors[field.name]) === null || _e === void 0 ? void 0 : _e.join('<br/>'), value: this.values[field.name], onEdsinput: (e) => this.handleInput(e, field), onEdschange: (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": (_f = this.errors[field.name]) === null || _f === void 0 ? void 0 : _f.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: (_g = this.errors[field.name]) === null || _g === void 0 ? void 0 : _g.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
     }
+    /**
+     * Render the form/step description with a small, safe subset of inline
+     * formatting so authors can add links and emphasis:
+     *   **bold**            → <strong>
+     *   [label](url)        → <a> (only http/https/mailto; others render as text)
+     *   blank line / \n     → paragraph / line break
+     * HTML is escaped FIRST, so author text can never inject markup — only the
+     * whitelisted patterns above produce tags.
+     */
+    formatDescription(text) {
+        return safeInlineFormat(text);
+    }
     render() {
         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: '8a722f99ea8ad7b063805b3377180d73b16d96e1', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '6a091913152adad7df2f8581a62d2146d9ea2f1d', class: "flex flex-col gap-y-24" }, this.title && (h("span", { key: '11dc49375a4eef1dfd4994a6ba2b2876262f9f55', role: "heading", class: "f-heading-04" }, this.title)), this.description && h("span", { key: 'dfa8bfa745828e8a57a4909dcbfd9f48497205c0', class: "f-body-02 text-light" }, this.description), h("slot", { key: 'db2c00b99038a6feddbe057de16b1002bbf14f03' })), 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: '5717a276eb4bcb1b40bb6c3a3d68e2372ccf0b37', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { key: '8e9fec59b6cafccabbb67381a12541f12201cc48', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (h("span", { key: 'f47c68db954de63773257f9c898141be27278a00', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && h("span", { key: '4287bb5f9c31cf5d3953a032de4a8c269e1feb7e', class: "f-body-02 text-light", innerHTML: this.formatDescription(this.description) }), h("slot", { key: 'e9e52696eab6477354ac5ee6cbe08399483b1b37' })), 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: 'ed2cbf6dada2bf43c8846f5f2af8f3f0767a5b1c', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), this.formBtn && (h("div", { key: '1cc4b51279214181f1894a573227cda0cbf385ee', class: "mt-32" }, h("eds-button", { key: '2a004027664d1433cf625c48f3447960de9c5c84', 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: '22d248217ea85d68e2be652ddcbfd13ed4775934', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { key: '101f9e275d68f59b762938ff3f7d7102660b80f0', 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: '02d427d951c715634605b6977f61cee67abaa8b0', 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: 'abf330715df3acf2a4bdc8d4f322fc13c70c267f', 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) }))))));
     }
     static get is() { return "eds-form"; }
     static get encapsulation() { return "shadow"; }
@@ -576,20 +704,56 @@ export class EdsForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'primary' | 'secondary' | 'tertiary' | 'ghost'",
-                    "resolved": "\"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "original": "'primary' | 'secondary'",
+                    "resolved": "\"primary\" | \"secondary\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": true,
                 "docs": {
                     "tags": [],
-                    "text": "Variant/style intent for the submit button (e.g., primary, secondary, tertiary, ghost)."
+                    "text": "Variant/style intent for the submit button (e.g., primary, secondary)."
                 },
                 "attribute": "button-intent",
                 "reflect": false,
                 "defaultValue": "'primary'"
             },
+            "clearBtn": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "If `true`, includes a clear/reset button in the form."
+                },
+                "attribute": "clear-btn",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "clearBtnLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Label for the clear button"
+                },
+                "attribute": "clear-btn-label",
+                "reflect": false,
+                "defaultValue": "'Clear'"
+            },
             "errorMessage": {
                 "type": "string",
                 "mutable": false,
@@ -664,15 +828,15 @@ export class EdsForm {
                 "type": "string",
                 "mutable": false,
                 "complexType": {
-                    "original": "'default' | 'shadow'",
-                    "resolved": "\"default\" | \"shadow\"",
+                    "original": "'default' | 'shadow' | 'brand'",
+                    "resolved": "\"brand\" | \"default\" | \"shadow\"",
                     "references": {}
                 },
                 "required": false,
                 "optional": false,
                 "docs": {
                     "tags": [],
-                    "text": "Choose between default layout or an always-shadow style.\nWhen \"shadow\", the form gets the same effect-shadow + shadow-hover classes"
+                    "text": "Choose between default layout, shadow style, or brand style.\n- \"default\": Standard form layout\n- \"shadow\": Form with shadow effect\n- \"brand\": EBRAINS branded form with left border and shadow"
                 },
                 "attribute": "form-style",
                 "reflect": false,