@ebrains/components 3.1.0 → 3.2.0

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

@@ -22,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';
@@ -33,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 = {};
@@ -396,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;
         }
@@ -478,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',
@@ -516,6 +532,9 @@ export class EdsForm {
         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
@@ -529,20 +548,20 @@ export class EdsForm {
         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": (_c = this.errors[field.name]) === null || _c === void 0 ? void 0 : _c.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": (_d = this.errors[field.name]) === null || _d === void 0 ? void 0 : _d.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: 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) }));
+            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": (_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-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: (_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) }));
+        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();
@@ -565,18 +584,46 @@ export class EdsForm {
         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: '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
+        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: '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) }))))));
+            .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"; }
@@ -646,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,
@@ -841,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": {},
@@ -866,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: 'ddbc978054f645eb990cde6bdd26647bd01eeb1a', class: this.articleClasses() }, h("div", { key: '0a16fbd950742b8a75428b3705deaa03ef785a5b', class: "effect-height flex items-center justify-between py-8 px-12" }, h("span", { key: '0c2a84cae101ec1e5352ed7be7b874b6ec45f37d', 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: 'c001f1b33c5136820155b0299e83b6dc49fbbd43', 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: 'fd95f6b0126d620ab1d4f58240d471301d607fa5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, h("div", { key: 'e7b1bd9a146543107d87ff6f4c8575ad63fc3889', class: "w-[250px]" }, h("div", { key: '257a8bf3d0efea39bd0e7f5c92d2a6bcbaa66d48', class: "p-[24px]" }, h("eds-logo", { key: '71365268524d0db6999dc6ff4a9227e388d53cdf', variant: logoType, href: this.url }))), this.parsedLinks && (h("nav", { key: '085b2bd5f667ea7e0be4de77cb4bd3d1a2bb6e3c', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, h("ul", { key: 'b5c015e6e1fb376f6b48805cc5d0db436234a5fc', 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: '9bca10c081cd1b8157579fa587615538dc624817', class: "w-[250px] flex justify-end items-center" }, h("slot", { key: '360fb5fe76b41b2513cba2f8705ea5ea91cae9a9', name: "actions" })), this.menu && (h("div", { key: '7feaa2b97062e7ceb94bacc35e61a12edc0b2e54', class: "md:hidden flex overflow-hidden px-16" }, h("eds-button", { key: '706c1668e3b04517cfe0cb92da5b459980986df0', "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"; }

package/dist/collection/components/eds-icons/eds-icon-eu/eds-icon-eu.js

@@ -8,7 +8,7 @@ export class EdsIconEu {
         this.class = '';
     }
     render() {
-        return h("span", { key: '56f0efdfb37b2dd4474dc2e69ef649915a9f4bbc', class: this.class, innerHTML: euSvg });
+        return h("span", { key: 'a449a7323e89e495479822dd750e2ec7935491f1', class: this.class, innerHTML: euSvg });
     }
     static get is() { return "eds-icon-eu"; }
     static get properties() {

package/dist/collection/components/eds-icons/eds-icon-gitlab/eds-icon-gitlab.js

@@ -8,7 +8,7 @@ export class EdsIconGitlab {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd1c7c0c1e3cae3b45377e305792192df46ef064a', class: this.class, innerHTML: gitlabBlack });
+        return h("span", { key: '1dec6051705f876a5263741023164c02f49097e4', class: this.class, innerHTML: gitlabBlack });
     }
     static get is() { return "eds-icon-gitlab"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-bluesky/eds-icon-bluesky.js

@@ -8,7 +8,7 @@ export class EdsIconBluesky {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'f2c2ad35173c7bfeae50e5b4de8f59e362d9656f', class: this.class, innerHTML: bluesky });
+        return h("span", { key: '5478b4eafaaa8df66ab3e172d1dae11a7bd8aab3', class: this.class, innerHTML: bluesky });
     }
     static get is() { return "eds-icon-bluesky"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-facebook/eds-icon-facebook.js

@@ -8,7 +8,7 @@ export class EdsIconFacebook {
         this.class = '';
     }
     render() {
-        return h("span", { key: '798a3ad6a040dfce879fe62c0a32c83cbd529ad0', class: this.class, innerHTML: facebook });
+        return h("span", { key: '44a7797929e643d63c492dfb0959d61b0513ce47', class: this.class, innerHTML: facebook });
     }
     static get is() { return "eds-icon-facebook"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-linkedin/eds-icon-linkedin.js

@@ -8,7 +8,7 @@ export class EdsIconLinkedin {
         this.class = '';
     }
     render() {
-        return h("span", { key: 'd8c97d9140baa6609917021bbc67fc7cca47ee32', class: this.class, innerHTML: linkedin });
+        return h("span", { key: '39eaed2d3eec8d05b46d26a2d5a00be18d305b58', class: this.class, innerHTML: linkedin });
     }
     static get is() { return "eds-icon-linkedin"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-mastodon/eds-icon-mastodon.js

@@ -8,7 +8,7 @@ export class EdsIconMastodon {
         this.class = '';
     }
     render() {
-        return h("span", { key: '8498500cd0da2784b889a7b2b2ca9ff4e8414ab6', class: this.class, innerHTML: mastodon });
+        return h("span", { key: 'e51e5c0a49b1e85511113f649abd58cd110218e8', class: this.class, innerHTML: mastodon });
     }
     static get is() { return "eds-icon-mastodon"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js

@@ -8,7 +8,7 @@ export class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return h("span", { key: '1d2f811831f0c876e8b1133c0df03b6f15acaccb', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'b5169c7ad799a7aa85362caf30d3868aead43fec', class: this.class, innerHTML: twitter });
     }
     static get is() { return "eds-icon-twitter"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js

@@ -8,7 +8,7 @@ export class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return h("span", { key: '7ebb80fd84ed9ed7c227b1f1ddf213d0502160f9', class: this.class, innerHTML: youtube });
+        return h("span", { key: '9c794891fbf5800cbd877731c1a9d1cd8782647b', class: this.class, innerHTML: youtube });
     }
     static get is() { return "eds-icon-youtube"; }
     static get properties() {

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

@@ -57,10 +57,10 @@ export class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: '122ae0673a7a2c9afd88cdcf8a83b52c11f0643e', class: {
+        return (h("div", { key: '2b9ac7ccd4ed8b525c368059ec0c99fce03e5367', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: 'b0bb1af0c95375db18bd45453016ee2fd78a6e2a' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '2a8500ea92db1a846f0f6dbb41fa664c3d514f19', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: 'fe98dc4ac3197c0cd363ce6ed34ff33ad655de3b' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '48cd85fd0bbbf5155fdac71de07a20214399080b', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded