@ebrains/components 3.0.0 → 3.2.0

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";
 /**
@@ -21,6 +22,12 @@ export class EdsForm {
         this.name = 'eds-form';
         this.title = 'Form Title';
         this.description = 'Form Description';
+        this.eyebrow = undefined;
+        this.estimatedTime = undefined;
+        this.progress = undefined;
+        this.expires = undefined;
+        this.policy = undefined;
+        this.gdpr = false;
         this.setFormUrl = true;
         this.formBtn = true;
         this.formBtnLabel = 'Submit';
@@ -32,7 +39,11 @@ export class EdsForm {
         this.groups = [];
         this.initData = {};
         this.formStyle = 'default';
+        this.status = 'open';
+        this.saveStatus = 'idle';
+        this.saveLabel = undefined;
         this.values = {};
+        this.showClearConfirm = false;
         this.isSubmitting = false;
         this.hasError = false;
         this.errors = {};
@@ -199,7 +210,20 @@ 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) => {
+            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)) {
@@ -382,6 +406,10 @@ export class EdsForm {
     handleSubmit(e) {
         var _a, _b;
         e === null || e === void 0 ? void 0 : e.preventDefault();
+        // A closed brand form is read-only — never submit.
+        if (this.status === 'closed') {
+            return;
+        }
         if (this.isSubmitting) {
             return;
         }
@@ -464,11 +492,13 @@ export class EdsForm {
                 }
             }
         });
-        // Emit event
+        // Emit event. `cleared: true` lets the host skip autosaving the now-empty
+        // form — so clearing never overwrites the last saved draft.
         this.form.emit({
             event: 'change',
             message: 'Form cleared',
-            success: true
+            success: true,
+            cleared: true
         });
         sendAnalytics({
             category: 'ui-component',
@@ -498,47 +528,102 @@ export class EdsForm {
         return map;
     }
     renderField(field) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!this.isFieldVisible(field)) {
             return null;
         }
+        // A closed (expired / not-accepting) brand form is read-only: force every
+        // field disabled regardless of its own config.
+        const fieldDisabled = field.disabled || this.status === 'closed';
+        // 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: fieldDisabled, 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') {
             // 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("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: fieldDisabled, 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] }))));
+        }
+        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: fieldDisabled, 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": (_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-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: fieldDisabled, 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: (_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) }));
+        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, disabled: fieldDisabled, 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 styling classes based on formStyle prop
         let styleClasses = '';
+        // No inner padding on the form card — spacing is provided by the surrounding
+        // page/container. This keeps fields flush with the card edge (and, when the
+        // form is slotted inside another container like a multi-step stepper, in line
+        // with it) instead of double-padding.
         if (this.formStyle === 'default') {
-            styleClasses = 'bg-inverse border-softer relative rounded-xs border-2 p-32';
+            styleClasses = 'bg-inverse border-softer relative rounded-xs border-2';
         }
         else if (this.formStyle === 'shadow') {
-            styleClasses = 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-xs border-2 p-32';
+            styleClasses = 'bg-inverse effect-shadow shadow-hover border-softer relative rounded-xs border-2';
         }
         else if (this.formStyle === 'brand') {
-            styleClasses = 'bg-inverse form-brand relative rounded-xs p-32';
+            styleClasses = 'bg-inverse form-brand relative rounded-xs';
+        }
+        // ── Brand style: a self-contained card with a dark hero header, a light
+        // sectioned body, and a footer. The page that hosts it is expected to be
+        // chrome-less (the hero header is the page header). ──
+        if (this.formStyle === 'brand') {
+            const hasRequired = this.parsedFields.some((f) => f && f.required && f.type !== 'hidden');
+            const groupSections = this.parsedGroups
+                .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
+                .map((g) => (h("div", { class: "form-sect", key: g.id }, h("div", { class: "form-sect-head" }, h("span", { class: "form-sect-glyph", "aria-hidden": "true" }, h("svg", { viewBox: "0 0 24 24" }, h("path", { d: "M6 4l13 7-5.5 1.5L11 18z", "stroke-linejoin": "round" }))), h("span", { class: "form-sect-label" }, g.title)), h("div", { class: "flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f))))));
+            // Lifecycle: open (brand green) · expiring (amber) · closed (red, read-only).
+            const isClosed = this.status === 'closed';
+            const isExpiring = this.status === 'expiring';
+            const statusSuffix = isClosed ? 'Closed' : isExpiring ? 'Closing soon' : '';
+            const statusIcon = isClosed ? (h("svg", { viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M15 9l-6 6M9 9l6 6", "stroke-linecap": "round" }))) : isExpiring ? (h("svg", { viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 8v4.5M12 16h.01", "stroke-linecap": "round" }))) : null;
+            const expiresChipClass = isClosed ? 'is-danger' : isExpiring ? 'is-warn' : '';
+            return (h("form", { class: `form-brand-card relative ${isClosed ? 'is-closed' : ''}`, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { class: "form-brand-header" }, h("div", { class: "fbh-grid", "aria-hidden": "true" }), h("div", { class: `fbh-glow fbh-glow--${this.status}`, "aria-hidden": "true" }), h("div", { class: "fbh-in" }, h("div", { class: "fbh-logo" }, h("eds-logo", { variant: "negative", href: "/" })), this.eyebrow && (h("span", { class: `fbh-eyebrow fbh-eyebrow--${this.status}` }, statusIcon, this.eyebrow, statusSuffix ? ` · ${statusSuffix}` : '')), this.title && h("h1", { class: "fbh-title" }, this.title), this.description && h("p", { class: "fbh-sub", innerHTML: this.formatDescription(this.description) }), (this.progress != null || this.expires || this.policy || this.estimatedTime || this.gdpr) && (h("div", { class: "fbh-meta" }, this.progress != null && (h("span", null, h("svg", { viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M9 12.5l2 2 4-4" })), this.progress, "% complete")), this.expires && (h("span", { class: expiresChipClass }, h("svg", { viewBox: "0 0 24 24" }, h("rect", { x: "4", y: "5", width: "16", height: "15", rx: "2" }), h("path", { d: "M4 9h16M8 3v4M16 3v4" })), this.expires)), this.policy && (h("span", null, h("svg", { viewBox: "0 0 24 24" }, h("path", { d: "M4 9a7 7 0 0112-4M20 15a7 7 0 01-12 4M16 5h4V1M8 19H4v4" })), this.policy)), this.estimatedTime && (h("span", null, h("svg", { viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 8v4l3 2" })), this.estimatedTime)), this.gdpr && (h("span", null, h("svg", { viewBox: "0 0 24 24" }, h("path", { d: "M12 3l7 3v5c0 4.4-3 8-7 10-4-2-7-5.6-7-10V6z" }), h("path", { d: "M9 12l2 2 4-4" })), "GDPR compliant")))))), h("div", { class: `form-brand-body ${isClosed ? 'form-brand-body--closed' : ''}` }, hiddenFields.map((field, index) => (h("eds-input", { key: index, type: "hidden", name: field.name, value: field.value }))), groupSections, buckets['__ungrouped'] && buckets['__ungrouped'].length > 0 && (h("div", { class: "form-sect form-sect--bare" }, h("div", { class: "flex flex-col gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f)))))), isClosed ? (h("div", { class: "form-brand-footer" }, h("span", { class: "req-note req-note--closed" }, h("svg", { viewBox: "0 0 24 24" }, h("rect", { x: "5", y: "11", width: "14", height: "9", rx: "2" }), h("path", { d: "M8 11V8a4 4 0 018 0v3" })), "Submissions closed"), h("div", { class: "form-brand-footer-actions" }, h("eds-button", { intent: "neutral", pill: true, label: this.formBtnLabel, disabled: true, icon: "arrow-right", size: "large" })))) : ((this.formBtn || this.clearBtn || hasRequired || this.saveLabel) && (h("div", { class: "form-brand-footer" }, h("div", { class: "fbf-left" }, this.saveLabel && (h("span", { class: `fbf-save fbf-save--${this.saveStatus}`, role: "status", "aria-live": "polite" }, h("span", { class: "fbf-save-dot", "aria-hidden": "true" }), this.saveLabel)), this.saveLabel && hasRequired && h("span", { class: "fbf-sep", "aria-hidden": "true" }), hasRequired && (h("span", { class: "req-note" }, h("b", null, "*"), " Required fields"))), this.showClearConfirm ? (h("div", { class: "fbf-confirm" }, h("span", { class: "fbf-confirm-q" }, h("svg", { viewBox: "0 0 24 24" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 8v4.5M12 16h.01", "stroke-linecap": "round" })), "Clear everything you've typed?"), h("button", { type: "button", class: "fbf-confirm-no", onClick: () => (this.showClearConfirm = false) }, "Cancel"), h("button", { type: "button", class: "fbf-confirm-yes", onClick: (e) => {
+                    this.showClearConfirm = false;
+                    this.handleClear(e);
+                } }, "Yes, clear it"))) : (h("div", { class: "form-brand-footer-actions" }, this.clearBtn && (h("button", { type: "button", class: "fbf-clear", disabled: this.isSubmitting || !this.values || Object.keys(this.values).length === 0, onClick: () => (this.showClearConfirm = true) }, this.clearBtnLabel)), this.formBtn && (h("eds-button", { intent: "brand", pill: true, label: this.formBtnLabel, disabled: this.isSubmitting, loading: this.isSubmitting, icon: "arrow-right", size: "large", onClick: () => this.handleSubmit() })))))))));
         }
-        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
+        return (h("form", { class: styleClasses,
+            // Inner padding defaults to 2rem (the original p-32 look) but can be
+            // overridden per-consumer via a CSS custom property, which inherits through
+            // the shadow boundary. A form slotted inside an already-padded container
+            // (e.g. a multi-step eds-steps card) sets `--eds-form-padding: 0` to sit flush.
+            style: { padding: 'var(--eds-form-padding, 2rem)' }, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, h("div", { class: "flex flex-col gap-y-20 overflow-visible" }, this.estimatedTime && (h("span", { class: "form-meta-time" }, h("svg", { viewBox: "0 0 24 24", "aria-hidden": "true" }, h("circle", { cx: "12", cy: "12", r: "9" }), h("path", { d: "M12 8v4l3 2" })), this.estimatedTime)), this.title && (h("span", { role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && (h("span", { class: "f-body-02 text-light", innerHTML: this.formatDescription(this.description) })), h("slot", null)), 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: '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) }))))));
+            .map((g) => (h("div", { class: "mt-48", key: g.id }, h("span", { class: "f-body-02" }, h("b", null, g.title)), h("div", { class: "border-group mt-24 mb-48 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), h("div", { class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (h("div", { 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", { 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", { 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"; }
@@ -608,6 +693,109 @@ export class EdsForm {
                 "reflect": false,
                 "defaultValue": "'Form Description'"
             },
+            "eyebrow": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Small mono eyebrow shown above the title in the `brand` hero header\n(e.g. a programme or category label). Brand style only."
+                },
+                "attribute": "eyebrow",
+                "reflect": false
+            },
+            "estimatedTime": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional \"time to complete\" hint shown as a meta chip in the `brand`\nhero header (e.g. \"~6 minutes\"). Brand style only."
+                },
+                "attribute": "estimated-time",
+                "reflect": false
+            },
+            "progress": {
+                "type": "number",
+                "mutable": false,
+                "complexType": {
+                    "original": "number",
+                    "resolved": "number",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Completion percentage (0\u2013100) shown as a \"X% complete\" chip in the `brand`\nhero \u2014 the single-page equivalent of the multi-step progress. Host-driven\n(e.g. filled required fields); omit/undefined to hide. Brand style only."
+                },
+                "attribute": "progress",
+                "reflect": false
+            },
+            "expires": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional expiry label shown as a meta chip in the `brand` hero\n(e.g. \"Closes Jun 28, 2026\"). Brand style only."
+                },
+                "attribute": "expires",
+                "reflect": false
+            },
+            "policy": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional submission-policy label shown as a meta chip in the `brand`\nhero (e.g. \"You can submit this form only once.\"). Brand style only."
+                },
+                "attribute": "policy",
+                "reflect": false
+            },
+            "gdpr": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Show the \"GDPR compliant\" meta chip in the `brand` hero header. Default OFF\n\u2014 it's an unverified compliance claim, so it must be opted into explicitly\n(per form) rather than advertised on every brand form."
+                },
+                "attribute": "gdpr",
+                "reflect": false,
+                "defaultValue": "false"
+            },
             "setFormUrl": {
                 "type": "boolean",
                 "mutable": false,
@@ -803,12 +991,66 @@ export class EdsForm {
                 "attribute": "form-style",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "status": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'open' | 'expiring' | 'closed'",
+                    "resolved": "\"closed\" | \"expiring\" | \"open\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Lifecycle state for the brand style (drives the hero eyebrow, glow tint and\nexpiry meta-chip colour). \"closed\" additionally disables every field,\ndesaturates the body and replaces the submit with a dead \"Submissions\nclosed\" footer. No effect outside form-style=\"brand\".\n- \"open\": accepting submissions (default)\n- \"expiring\": accepting but closing soon (amber)\n- \"closed\": expired / not accepting (red, read-only)"
+                },
+                "attribute": "status",
+                "reflect": false,
+                "defaultValue": "'open'"
+            },
+            "saveStatus": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'idle' | 'saving' | 'saved' | 'error'",
+                    "resolved": "\"error\" | \"idle\" | \"saved\" | \"saving\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Autosave state shown at the left of the brand footer (host-driven). The dot\npulses grey while saving and settles green when saved."
+                },
+                "attribute": "save-status",
+                "reflect": false,
+                "defaultValue": "'idle'"
+            },
+            "saveLabel": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Autosave label next to the dot (e.g. \"Saved 5:01 PM\"). Empty hides the\nwhole save-state cluster. Brand footer only."
+                },
+                "attribute": "save-label",
+                "reflect": false
             }
         };
     }
     static get states() {
         return {
             "values": {},
+            "showClearConfirm": {},
             "isSubmitting": {},
             "hasError": {},
             "errors": {},
@@ -828,8 +1070,8 @@ export class EdsForm {
                     "text": ""
                 },
                 "complexType": {
-                    "original": "{\n    event: 'input' | 'change' | 'submit';\n    validated?: boolean;\n    field?: string;\n    value?: any;\n    message?: string;\n    success?: boolean;\n  }",
-                    "resolved": "{ event: \"input\" | \"change\" | \"submit\"; validated?: boolean; field?: string; value?: any; message?: string; success?: boolean; }",
+                    "original": "{\n    event: 'input' | 'change' | 'submit';\n    validated?: boolean;\n    field?: string;\n    value?: any;\n    message?: string;\n    success?: boolean;\n    /** True when this change came from the Clear button (host may skip autosave). */\n    cleared?: boolean;\n  }",
+                    "resolved": "{ event: \"input\" | \"change\" | \"submit\"; validated?: boolean; field?: string; value?: any; message?: string; success?: boolean; cleared?: boolean; }",
                     "references": {}
                 }
             }];

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

@@ -3,8 +3,9 @@ export default {
     title: 'Components/Form',
     component: 'eds-form',
     argTypes: {
-        title: { control: 'text', description: 'Form title displayed above the form' },
+        title: { control: 'text', description: 'Form title displayed above the form (brand: in the dark hero)' },
         description: { control: 'text', description: 'Form description displayed below the title' },
+        eyebrow: { control: 'text', description: 'Brand hero only: small uppercase kicker above the title (e.g. "Internal form")' },
         fields: {
             control: 'object',
             description: 'Form fields as JSON array'
@@ -28,10 +29,29 @@ export default {
             options: ['primary', 'secondary'],
             description: 'Variant/style intent for the submit button'
         },
+        clearBtn: { control: 'boolean', description: 'Show the Clear action (brand: quiet footer text-link with inline confirm)' },
+        clearBtnLabel: { control: 'text', description: 'Label for the Clear action' },
         formStyle: {
             control: 'select',
-            options: ['default', 'shadow']
-        }
+            options: ['default', 'shadow', 'brand'],
+            description: 'Visual style: default (bordered), shadow (elevated) or brand (dark hero + sectioned body + footer)'
+        },
+        status: {
+            control: 'select',
+            options: ['open', 'expiring', 'closed'],
+            description: 'Brand lifecycle: open (green), expiring (amber glow/eyebrow, warn expiry chip), closed (red, read-only body, locked footer)'
+        },
+        expires: { control: 'text', description: 'Hero meta chip: expiry label (e.g. "Closes Jul 18, 2026"). Tone follows `status`.' },
+        policy: { control: 'text', description: 'Hero meta chip: submission policy (e.g. "One submission per person")' },
+        estimatedTime: { control: 'text', description: 'Time-to-complete chip (e.g. "~5 min"). Brand: hero meta strip; default/shadow: above the title.' },
+        progress: { control: 'number', description: 'Hero meta chip: completion percentage ("N% complete"). Omit to hide.' },
+        gdpr: { control: 'boolean', description: 'Hero meta chip: "GDPR compliant" badge (default false)' },
+        saveStatus: {
+            control: 'select',
+            options: ['idle', 'saving', 'saved', 'error'],
+            description: 'Brand footer autosave state (dot + label). idle hides it.'
+        },
+        saveLabel: { control: 'text', description: 'Autosave label next to the state dot (e.g. "Saved 12:04")' }
     }
 };
 const Template = (args) => html `
@@ -39,13 +59,24 @@ const Template = (args) => html `
     name="form-name"
     title="${args.title}"
     description="${args.description}"
+    eyebrow="${args.eyebrow || ''}"
     .fields=${args.fields}
     .groups=${args.groups}
     .initData=${args.initData}
     form-btn="${args.formBtn}"
     form-btn-label="${args.formBtnLabel}"
     button-intent="${args.buttonIntent}"
+    clear-btn="${args.clearBtn || false}"
+    clear-btn-label="${args.clearBtnLabel || 'Clear'}"
     form-style="${args.formStyle}"
+    status="${args.status || 'open'}"
+    expires="${args.expires || ''}"
+    policy="${args.policy || ''}"
+    estimated-time="${args.estimatedTime || ''}"
+    .progress=${args.progress}
+    gdpr="${args.gdpr || false}"
+    save-status="${args.saveStatus || 'idle'}"
+    save-label="${args.saveLabel || ''}"
   ></eds-form>
 `;
 export const Default = Template.bind({});
@@ -146,3 +177,79 @@ WithInitData.args = {
     buttonIntent: 'primary',
     formStyle: 'default'
 };
+/* Shared field set for the brand stories — a small registration form with
+   required fields (feeds the footer's "* Required fields" note) and a group
+   (renders as a brand section with glyph + label). */
+const brandFields = [
+    { name: 'fullName', label: 'Full name', type: 'text', required: true, placeholder: 'Jane Doe', groupId: 'about' },
+    { name: 'email', label: 'Email address', type: 'email', required: true, placeholder: 'jane@example.org', groupId: 'about' },
+    {
+        name: 'attendance',
+        label: 'How would you like to attend?',
+        type: 'radio',
+        required: true,
+        options: [
+            { value: 'remote', label: 'Join remotely online' },
+            { value: 'in-person', label: 'Join in person' }
+        ]
+    },
+    { name: 'comments', label: 'Anything we should know?', type: 'textarea', required: false, maxlength: 300 }
+];
+const brandGroups = [{ id: 'about', title: 'About you' }];
+/**
+ * The full brand experience: dark hero (eyebrow · title · description) with the
+ * meta strip — progress, expiry, policy, estimated time, GDPR badge — a light
+ * sectioned body, and the footer with autosave state, required-fields note,
+ * Clear text-link (inline confirm) and the pill submit.
+ */
+export const Brand = Template.bind({});
+Brand.args = {
+    title: 'Attendee Confirmation Survey',
+    description: 'Reusable form template to confirm attendance and capture key logistics (contact details, dietary/access needs, session choices).',
+    eyebrow: 'Internal form',
+    fields: brandFields,
+    groups: brandGroups,
+    formBtn: true,
+    formBtnLabel: 'Submit',
+    clearBtn: true,
+    clearBtnLabel: 'Clear form',
+    formStyle: 'brand',
+    status: 'open',
+    expires: 'Closes Jul 18, 2026',
+    policy: 'One submission per person',
+    estimatedTime: '~5 min',
+    progress: 25,
+    gdpr: true,
+    saveStatus: 'saved',
+    saveLabel: 'Saved 12:04'
+};
+/** Expiring lifecycle: amber glow, "· Closing soon" eyebrow suffix, warn-toned expiry chip. */
+export const BrandExpiring = Template.bind({});
+BrandExpiring.args = Object.assign(Object.assign({}, Brand.args), { status: 'expiring', expires: 'Closes in 3 days · Jul 18', progress: undefined, saveStatus: 'idle', saveLabel: '' });
+/** Closed lifecycle: red glow, "· Closed" eyebrow, danger expiry chip, read-only
+ *  body and the locked footer ("Submissions closed" + disabled submit). */
+export const BrandClosed = Template.bind({});
+BrandClosed.args = Object.assign(Object.assign({}, Brand.args), { status: 'closed', expires: 'Closed Jul 18, 2026', progress: undefined, saveStatus: 'idle', saveLabel: '', gdpr: false });
+/** Autosave footer states — flip `saveStatus` (saving/saved/error) in the controls. */
+export const BrandAutosave = Template.bind({});
+BrandAutosave.args = Object.assign(Object.assign({}, Brand.args), { progress: undefined, gdpr: false, saveStatus: 'saving', saveLabel: 'Saving…' });
+/** Non-brand styles show `estimatedTime` too — as a quiet mono chip above the title. */
+export const EstimatedTimeChip = Template.bind({});
+EstimatedTimeChip.args = {
+    title: 'Quick Survey',
+    description: 'Three questions, in and out.',
+    fields: [
+        { name: 'q1', label: 'How satisfied are you?', type: 'radio', required: true, options: [
+                { value: 'happy', label: 'Satisfied' },
+                { value: 'neutral', label: 'Neutral' },
+                { value: 'unhappy', label: 'Unsatisfied' }
+            ] },
+        { name: 'q2', label: 'What should we improve?', type: 'textarea', required: false }
+    ],
+    groups: [],
+    formBtn: true,
+    formBtnLabel: 'Send',
+    buttonIntent: 'primary',
+    formStyle: 'shadow',
+    estimatedTime: '~2 min'
+};

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

@@ -84,7 +84,7 @@ export class EdsFrame {
         }
     }
     render() {
-        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 })))));
+        return (h("div", { key: '397b0f9433b9339079774f0aa49b1451f9c0d45e', class: this.articleClasses() }, h("div", { key: 'a70c2ec210a1de124a82c39d6f2592ddb9ff4572', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '88d0732d0cf4b3fab14ed0e1b0797b78dd230585', 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: '85c0d453e85d23520e5a6a5bae2159285771677e', 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 })))));
     }
     static get is() { return "eds-frame"; }
     static get encapsulation() { return "shadow"; }

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

@@ -54,7 +54,7 @@ export class EdsHeader {
         const logoType = this.variant === 'strong' ? 'negative' : 'positive';
         // Link intent based on header variant
         const linkIntent = this.variant === 'strong' ? 'underlineInverse' : 'underline';
-        return (h("header", { key: '2c1cfca934f70c0d72fa50c163eb14524ca4e5a5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'b7914ad1431d19a167e39814aa5ab7e6c87ce8e4', class: "w-[250px]" }, h("div", { key: 'efb6efcb51f960e48bf236dd94d308ae12480808', class: "p-[24px]" }, h("eds-logo", { key: 'a8b20eee1ed9577fc06da51e6325875f56025694', variant: logoType, href: this.url }))), this.parsedLinks && (h("nav", { key: '3b322f02b8249091158876559339baf4ba763242', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, h("ul", { key: '8c74e64f51bddefcc578c09e5d6570f208ecbcf6', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), h("div", { key: 'c75b261b7bc734a121ac195400d2c1200b58d7ec', class: "w-[250px] flex justify-end items-center" }, h("slot", { key: '1b447037e7158d3e06f68add6084da957ff8c8b0', name: "actions" })), this.menu && (h("div", { key: '8e92ee65ed8a235ad0af4d61588ce6118a92b07f', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '8b79d619d4b51dac26f0ff5347909611383cb635', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (h("header", { key: '7b2039f33349e19ff3f6e8519e36c73008f636ff', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: '300470c050a9f50a08cc0d964b718327ecec598f', class: "w-[250px]" }, h("div", { key: '4ff98957c7f838561b2a86b6fcf5a40a1f631d94', class: "p-[24px]" }, h("eds-logo", { key: '610e8465379fbdc9cab1d315aa11940763ba4561', variant: logoType, href: this.url }))), this.parsedLinks && (h("nav", { key: '97e14d79eea2d69fb37785984d29167e3056c2ec', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, h("ul", { key: '79a7dd5f647319b339078ad426160ebc21af733d', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), h("div", { key: '1da0a64c28395f3601e6e954f5ed9017525d4c2e', class: "w-[250px] flex justify-end items-center" }, h("slot", { key: 'bae6c23ce8400bc5ff21c4aec71e915bde7b15f2', name: "actions" })), this.menu && (h("div", { key: '9ab2466ce42dcf2136565a14522f734565bd2fbf', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: 'bd2e20f436a96bd28eea126e655f0c9c9976d32e', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     static get is() { return "eds-header"; }
     static get encapsulation() { return "shadow"; }