@ebrains/components 3.0.0 → 3.2.0

package/dist/components/eds-form.js

@@ -1,21 +1,22 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 import { p as parseData } from './sharedUtils.js';
-import { d as defineCustomElement$g } from './eds-button2.js';
-import { d as defineCustomElement$f } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$e } from './eds-input2.js';
-import { d as defineCustomElement$d } from './eds-input-dropzone2.js';
-import { d as defineCustomElement$c } from './eds-input-field2.js';
-import { d as defineCustomElement$b } from './eds-input-file2.js';
-import { d as defineCustomElement$a } from './eds-input-footer2.js';
-import { d as defineCustomElement$9 } from './eds-input-label2.js';
-import { d as defineCustomElement$8 } from './eds-input-range2.js';
-import { d as defineCustomElement$7 } from './eds-input-search2.js';
-import { d as defineCustomElement$6 } from './eds-input-select2.js';
-import { d as defineCustomElement$5 } from './eds-kg-web-services-select2.js';
-import { d as defineCustomElement$4 } from './eds-link2.js';
-import { d as defineCustomElement$3 } from './eds-nps2.js';
-import { d as defineCustomElement$2 } from './eds-rating2.js';
+import { s as safeInlineFormat, d as defineCustomElement$b } from './eds-input-footer2.js';
+import { d as defineCustomElement$h } from './eds-button2.js';
+import { d as defineCustomElement$g } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$f } from './eds-input2.js';
+import { d as defineCustomElement$e } from './eds-input-dropzone2.js';
+import { d as defineCustomElement$d } from './eds-input-field2.js';
+import { d as defineCustomElement$c } from './eds-input-file2.js';
+import { d as defineCustomElement$a } from './eds-input-label2.js';
+import { d as defineCustomElement$9 } from './eds-input-range2.js';
+import { d as defineCustomElement$8 } from './eds-input-select2.js';
+import { d as defineCustomElement$7 } from './eds-kg-web-services-select2.js';
+import { d as defineCustomElement$6 } from './eds-link2.js';
+import { d as defineCustomElement$5 } from './eds-logo2.js';
+import { d as defineCustomElement$4 } from './eds-nps2.js';
+import { d as defineCustomElement$3 } from './eds-rating2.js';
+import { d as defineCustomElement$2 } from './eds-search-select2.js';
 
 // utils/validators.ts
 function validateField(name, value, type, required, maxLength, min, max) {
@@ -146,7 +147,8 @@ isFieldVisible) {
             delete errors[field.name];
             return;
         }
-        if (field.type !== 'hidden') {
+        // 'content' is a presentational text block — no input, never validated.
+        if (field.type !== 'hidden' && field.type !== 'content') {
             if ((field.type === 'checkbox' || field.type === 'radio') && !field.options) {
                 // Single checkbox or radio without multiple options
                 const fieldErrors = validateSingleBox(field.name, field.required, formEl);
@@ -247,7 +249,7 @@ function getFormInitData({ initData, parsedFields, currentValues
     return { updatedValues };
 }
 
-const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:600;font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:600;font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing);overflow:visible}.text-light{color:var(--grey-dark)}.rounded-xs{border-radius:4px}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.border-t-2{border-top-width:2px}.mt-20{margin-top:1.25rem}.mt-32{margin-top:2rem}.mt-64{margin-top:4rem}.mb-32{margin-bottom:2rem}.pt-28{padding-top:1.75rem}.pt-32{padding-top:2rem}.pt-64{padding-top:4rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-20{row-gap:1.25rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.form-brand{box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border-left:4px solid var(--brand-green);animation:fadeInUp 0.6s ease}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-4{padding-bottom:0.25rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.w-full{width:100%}.justify-between{justify-content:space-between}.items-center{align-items:center}@media (min-width: 750px){.md\\:flex-row-reverse{flex-direction:row-reverse}.md\\:justify-between{justify-content:space-between}.md\\:gap-y-0{row-gap:0}.md\\:w-auto{width:auto}.md\\:mt-64{margin-top:4rem}.md\\:pt-64{padding-top:4rem}}";
+const edsFormCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.f-body-01{font-family:var(--f-body-01-fontFamily);font-weight:var(--f-body-01-fontWeight);font-size:var(--f-body-01-fontSize);line-height:var(--f-body-01-lineHeight);letter-spacing:var(--f-body-01-letterSpacing)}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.f-body-01 b,.f-body-01 strong{font-weight:var(--f-body-01---bold-weight, bold)}.f-body-02 b,.f-body-02 strong{font-weight:var(--f-body-02---bold-weight, bold)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:600;font-size:var(--f-heading-04-fontSize);line-height:var(--f-heading-04-lineHeight);letter-spacing:var(--f-heading-04-letterSpacing)}.f-heading-05{font-family:var(--f-heading-05-fontFamily);font-weight:600;font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing);overflow:visible}.text-light{color:var(--grey-dark)}.rounded-xs{border-radius:4px}.rounded-sm{border-radius:8px}.border-softer{border-color:rgba(0, 0, 0, .1)}.border-2{border-width:2px}.border-t-2{border-top-width:2px}.mt-20{margin-top:1.25rem}.mt-24{margin-top:1.5rem}.mt-32{margin-top:2rem}.mt-48{margin-top:3rem}.mt-64{margin-top:4rem}.mb-32{margin-bottom:2rem}.mb-48{margin-bottom:3rem}.pt-28{padding-top:1.75rem}.pt-32{padding-top:2rem}.pt-64{padding-top:4rem}.pl-8{padding-left:0.5rem}.pl-16{padding-left:1rem}.border-l-2{border-left-width:2px}.gap-y-8{row-gap:0.5rem}.gap-y-16{row-gap:1rem}.gap-y-20{row-gap:1.25rem}.gap-y-24{row-gap:1.5rem}.border-group{border-left:1px solid var(--soft-color, #ddd);padding-left:1rem}.bg-inverse{background-color:var(--white)}.form-brand{box-shadow:0 2px 12px rgba(0, 0, 0, 0.08);border-left:4px solid var(--brand-green);animation:fadeInUp 0.6s ease}.form-brand-card{--warn:#ffb22c;--warn-strong:#b26b00;--danger:#ff6b5b;--danger-strong:#c0392b;background:var(--white, #fff);border:1px solid var(--line-color, #e2e2e2);border-radius:20px;overflow:hidden;box-shadow:0 30px 60px -34px rgba(7, 20, 13, 0.32);animation:fadeInUp 0.6s ease}.form-brand-header{position:relative;overflow:hidden;background:var(--brand-black, #07140d);color:#fff;padding:38px 40px 34px}.fbh-grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255, 255, 255, 0.1) 1px, transparent 1px),\n    linear-gradient(90deg, rgba(255, 255, 255, 0.1) 1px, transparent 1px);background-size:42px 42px;-webkit-mask-image:radial-gradient(130% 110% at 15% 0%, #000, transparent 72%);mask-image:radial-gradient(130% 110% at 15% 0%, #000, transparent 72%);opacity:0.5;pointer-events:none}.fbh-glow{position:absolute;top:-50%;right:-12%;width:420px;height:420px;background:radial-gradient(circle, rgba(0, 255, 157, 0.16), transparent 62%);pointer-events:none}.fbh-glow--expiring{background:radial-gradient(circle, rgba(255, 178, 44, 0.13), transparent 62%)}.fbh-glow--closed{background:radial-gradient(circle, rgba(192, 57, 43, 0.14), transparent 62%)}.fbh-in{position:relative}.fbh-brand{display:flex;align-items:center;gap:10px;margin-bottom:24px}.fbh-mark{width:30px;height:30px;border-radius:50%;background:linear-gradient(150deg, #00ff9d, #00c87b 55%, #0a8f5a);display:flex;align-items:center;justify-content:center}.fbh-mark svg{width:19px;height:19px}.fbh-word{font-weight:600;font-size:16px;letter-spacing:0.04em}.fbh-logo{width:150px;margin-bottom:22px}.fbh-eyebrow{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:0.15em;text-transform:uppercase;color:var(--brand-green, #00ff9d);display:inline-flex;align-items:center;gap:7px}.fbh-eyebrow svg{width:12px;height:12px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 12px}.fbh-eyebrow--expiring{color:var(--warn, #ffb22c)}.fbh-eyebrow--closed{color:var(--danger, #ff6b5b)}.fbh-title{font-weight:200;font-size:clamp(26px, 4vw, 36px);letter-spacing:-0.02em;line-height:1.08;margin-bottom:12px}.fbh-sub{font-size:14.5px;color:rgba(235, 242, 238, 0.62);font-weight:300;max-width:72ch;line-height:1.55}.fbh-meta{display:flex;gap:22px;margin-top:22px;flex-wrap:wrap}.fbh-meta span{display:inline-flex;align-items:center;gap:7px;font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:rgba(235, 242, 238, 0.62)}.fbh-meta svg{width:13px;height:13px;stroke:var(--brand-green, #00ff9d);fill:none;stroke-width:1.8}.fbh-meta span.is-warn{color:var(--warn, #ffb22c)}.fbh-meta span.is-warn svg{stroke:var(--warn, #ffb22c)}.fbh-meta span.is-danger{color:var(--danger, #ff6b5b)}.fbh-meta span.is-danger svg{stroke:var(--danger, #ff6b5b)}.form-meta-time{display:inline-flex;align-items:center;gap:7px;width:fit-content;font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:var(--grey-dark)}.form-meta-time svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex-shrink:0}.form-brand-body{padding:var(--eds-form-padding, 34px 40px 30px);--eds-field-accent:#00c87b}.form-brand-body--closed{opacity:0.55}.form-sect{margin-bottom:30px}.form-sect:last-child{margin-bottom:0}.form-sect-head{display:flex;align-items:center;gap:9px;margin-bottom:18px;padding-bottom:12px;border-bottom:1px solid var(--line-color, #e2e2e2)}.form-sect-glyph{color:#00c87b;display:inline-flex}.form-sect-glyph svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2}.form-sect-label{font-family:'IBM Plex Mono', monospace;font-size:11px;letter-spacing:0.12em;text-transform:uppercase;color:var(--brand-black, #07140d)}.form-brand-footer{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:24px 40px;border-top:1px solid var(--line-color, #e2e2e2);background:#fcfcfc;flex-wrap:wrap}.form-brand-footer-actions{display:flex;align-items:center;gap:12px}.req-note{font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.06em;text-transform:uppercase;color:#8a8c8a}.req-note b{color:#00c87b}.fbf-left{display:flex;align-items:center;gap:12px;min-width:0}.fbf-save{display:inline-flex;align-items:center;gap:9px;font-family:'IBM Plex Mono', monospace;font-size:10.5px;letter-spacing:0.07em;text-transform:uppercase;color:#8a8c8a;transition:color 0.2s;white-space:nowrap}.fbf-save-dot{width:7px;height:7px;border-radius:50%;background:#00c87b;flex:0 0 7px;transition:background 0.2s}.fbf-save--saving{color:#7a7b7a}.fbf-save--saving .fbf-save-dot{background:#7a7b7a;animation:fbfPulse 1s ease-in-out infinite}.fbf-save--error{color:var(--danger-strong, #c0392b)}.fbf-save--error .fbf-save-dot{background:var(--danger-strong, #c0392b)}@keyframes fbfPulse{0%,100%{opacity:1}50%{opacity:0.25}}.fbf-sep{width:1px;height:13px;background:var(--line-color, #e2e2e2);flex:0 0 1px}.fbf-clear{font-family:'IBM Plex Sans', system-ui, sans-serif;font-size:13.5px;color:var(--body-l, #5a5f5c);cursor:pointer;background:none;border:none;padding:6px 2px;transition:color 0.15s}.fbf-clear:hover:not(:disabled){color:var(--danger-strong, #c0392b)}.fbf-clear:disabled{opacity:0.4;cursor:not-allowed}.fbf-confirm{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.fbf-confirm-q{font-size:13.5px;color:var(--danger-strong, #c0392b);display:inline-flex;align-items:center;gap:8px}.fbf-confirm-q svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 15px}.fbf-confirm-no{font-family:'IBM Plex Sans', system-ui, sans-serif;font-size:13.5px;color:var(--body-l, #5a5f5c);cursor:pointer;background:none;border:none}.fbf-confirm-no:hover{color:var(--brand-black, #07140d)}.fbf-confirm-yes{font-family:'IBM Plex Sans', system-ui, sans-serif;font-size:13.5px;font-weight:500;cursor:pointer;border-radius:999px;padding:9px 16px;background:#fdf0ee;color:var(--danger-strong, #c0392b);border:1px solid #f2cfc9;transition:0.15s}.fbf-confirm-yes:hover{background:var(--danger-strong, #c0392b);color:#fff;border-color:var(--danger-strong, #c0392b)}.req-note--closed{display:inline-flex;align-items:center;gap:7px;color:var(--danger-strong, #c0392b)}.req-note--closed svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2;flex:0 0 13px}@media (max-width: 600px){.form-brand-header,.form-brand-footer{padding-left:24px;padding-right:24px}.form-brand-body{padding:var(--eds-form-padding, 28px 24px 28px)}.form-brand-footer{align-items:flex-start;flex-direction:column-reverse;gap:20px;padding-top:22px}.form-brand-footer-actions,.fbf-confirm{width:100%;justify-content:space-between}.fbf-left{flex-wrap:wrap;row-gap:8px;width:100%;padding-top:20px;border-top:1px solid var(--line-color, #e2e2e2)}}@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.effect-shadow{transition-property:box-shadow;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.shadow-hover{--tw-shadow:0px 0px 16px rgba(0, 0, 0, 0.2);--tw-shadow-colored:0px 0px 16px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.cursor-pointer{cursor:pointer}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus-within:focus-within{outline-style:solid}.relative{position:relative}.rounded-sm{border-radius:8px}.rounded-lg{border-radius:16px}.px-16{padding-left:1rem;padding-right:1rem}.pb-4{padding-bottom:0.25rem}.pb-16{padding-bottom:1rem}.p-32{padding:2rem}.mr-auto{margin-right:auto}.ml-auto{margin-left:auto}.w-full{width:100%}.justify-between{justify-content:space-between}.items-center{align-items:center}@media (min-width: 750px){.md\\:flex-row-reverse{flex-direction:row-reverse}.md\\:justify-between{justify-content:space-between}.md\\:gap-y-0{row-gap:0}.md\\:w-auto{width:auto}.md\\:mt-64{margin-top:4rem}.md\\:pt-64{padding-top:4rem}}.eds-desc-link{position:relative;display:inline-block;color:var(--brand-black);text-decoration:none}.eds-desc-link::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:2px;background-color:var(--brand-green);transition:width 0.3s ease}.eds-desc-link:hover::after{width:100%}.eds-desc-link:focus-visible::after{width:0}.fbh-sub .eds-desc-link{color:#fff;font-weight:400}.eds-content-block{line-height:1.5;color:var(--brand-black, #07140d)}.eds-content-block strong{font-weight:600}.eds-content-block .eds-desc-link{font-weight:600}";
 const EdsFormStyle0 = edsFormCss;
 
 const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLElement {
@@ -259,6 +261,12 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         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';
@@ -270,7 +278,11 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         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 = {};
@@ -437,7 +449,20 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         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)) {
@@ -616,6 +641,10 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
     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;
         }
@@ -698,11 +727,13 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
                 }
             }
         });
-        // 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',
@@ -732,47 +763,102 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         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';
-        }
-        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
+            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", { 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) }))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -784,6 +870,12 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         "name": [1],
         "title": [1],
         "description": [1],
+        "eyebrow": [1],
+        "estimatedTime": [1, "estimated-time"],
+        "progress": [2],
+        "expires": [1],
+        "policy": [1],
+        "gdpr": [4],
         "setFormUrl": [4, "set-form-url"],
         "formBtn": [4, "form-btn"],
         "formBtnLabel": [1, "form-btn-label"],
@@ -795,7 +887,11 @@ const EdsForm$1 = /*@__PURE__*/ proxyCustomElement(class EdsForm extends HTMLEle
         "groups": [1],
         "initData": [16],
         "formStyle": [1, "form-style"],
+        "status": [1],
+        "saveStatus": [1, "save-status"],
+        "saveLabel": [1, "save-label"],
         "values": [32],
+        "showClearConfirm": [32],
         "isSubmitting": [32],
         "hasError": [32],
         "errors": [32],
@@ -811,7 +907,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-form", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-kg-web-services-select", "eds-link", "eds-nps", "eds-rating"];
+    const components = ["eds-form", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-select", "eds-kg-web-services-select", "eds-link", "eds-logo", "eds-nps", "eds-rating", "eds-search-select"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-form":
             if (!customElements.get(tagName)) {
@@ -820,75 +916,80 @@ function defineCustomElement$1() {
             break;
         case "eds-button":
             if (!customElements.get(tagName)) {
-                defineCustomElement$g();
+                defineCustomElement$h();
             }
             break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$f();
+                defineCustomElement$g();
             }
             break;
         case "eds-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$e();
+                defineCustomElement$f();
             }
             break;
         case "eds-input-dropzone":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "eds-input-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "eds-input-file":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "eds-input-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "eds-input-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "eds-input-range":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$9();
+            }
+            break;
+        case "eds-input-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "eds-input-search":
+        case "eds-kg-web-services-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "eds-input-select":
+        case "eds-link":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "eds-kg-web-services-select":
+        case "eds-logo":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-link":
+        case "eds-nps":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-nps":
+        case "eds-rating":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }
             break;
-        case "eds-rating":
+        case "eds-search-select":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

package/dist/components/eds-frame.js

@@ -76,7 +76,7 @@ const EdsFrame$1 = /*@__PURE__*/ proxyCustomElement(class EdsFrame extends HTMLE
         }
     }
     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 })))));
     }
     get el() { return this; }
     static get style() { return EdsFrameStyle0; }

package/dist/components/eds-gauge.js

@@ -49,7 +49,7 @@ const EdsGauge$1 = /*@__PURE__*/ proxyCustomElement(class EdsGauge extends HTMLE
         const textStyle = {
             fontSize: `${fontSize}px`
         };
-        return (h("div", { key: 'f5801b63984f42bad206445de4e865c0e161b88e', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: '1a982401ba1853e937dfbb9aeb4736d4665abab1', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: '0db002b1a3a3f49fe3fd0f3aa4d3fd0e2ee6a45d', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: 'a011eaaab9e6f3d15d706bf9309ae7bafa689387', class: "f-body-01 text-default", style: textStyle }, clamped))));
+        return (h("div", { key: '5629f8adbc6f144aad49062883cb85ecf24fc16c', role: "progressbar", "aria-valuemin": this.valueMin, "aria-valuemax": this.valueMax, "aria-valuenow": clamped, "aria-label": `Gauge value: ${clamped} of ${this.valueMax}`, class: "relative inline-block rounded-full overflow-hidden", style: containerStyle }, h("div", { key: 'd668b54b0a5f4bf260a2f1153781c59741bd8694', class: "absolute bg-inverse rounded-full", style: maskStyle }), h("div", { key: 'f08feba97d30ed893a72a7e07e412aa82ea8cd3d', class: "absolute inset-0 flex items-center justify-center" }, h("span", { key: '2a8dccde44677d4a4b742cd992144d6cf399ee9b', class: "f-body-01 text-default", style: textStyle }, clamped))));
     }
     static get style() { return EdsGaugeStyle0; }
 }, [1, "eds-gauge", {

package/dist/components/eds-gitlab-contributors.js

@@ -7,7 +7,7 @@ import { d as defineCustomElement$4 } from './eds-img2.js';
 import { d as defineCustomElement$3 } from './eds-link2.js';
 import { d as defineCustomElement$2 } from './eds-spinner2.js';
 
-const edsGitlabContributorsCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.grid{display:grid}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}.p-5{padding:1.25rem;}.p-12{padding:3rem;}.pb-2{padding-bottom:0.25rem;}.pb-4{padding-bottom:1rem;}.mb-6{margin-bottom:1.5rem;}.m-0{margin:0}.mt-auto{margin-top:auto}.w-full{width:100%}.min-w-0{min-width:0}.text-xs{font-size:0.75rem;line-height:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.no-underline{text-decoration:none}.text-gray-600{color:var(--eds-color-gray-600, #4b5563)}.text-gray-900{color:var(--eds-color-gray-900, #111827)}.border-gray-200{border-color:var(--eds-color-gray-200, #e5e7eb)}.bg-white{background-color:var(--eds-color-white, #ffffff)}.text-primary-600{color:var(--eds-color-primary-600, #2563eb)}.hover\\:text-primary-600:hover{color:var(--eds-color-primary-600, #2563eb)}.border-primary-300{border-color:var(--eds-color-primary-300, #93c5fd)}.hover\\:border-primary-300:hover{border-color:var(--eds-color-primary-300, #93c5fd)}.text-success-600{color:var(--eds-color-success-600, #16a34a)}.text-error-600{color:var(--eds-color-error-600, #dc2626)}.border{border-width:1px}.border-b{border-bottom-width:1px}.rounded-lg{border-radius:var(--eds-radius-lg, 0.5rem);}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.hover\\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.-translate-y-0\\.5{transform:translateY(-0.125rem);}.hover\\:-translate-y-0\\.5:hover{transform:translateY(-0.125rem)}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}@media (min-width: 640px){.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 768px){.md\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}.contributor-card{will-change:transform, box-shadow, border-color}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}";
+const edsGitlabContributorsCss = ".container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.flex{display:flex}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.grid{display:grid}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex-1{flex:1 1 0%}.flex-shrink-0{flex-shrink:0}.gap-2{gap:0.5rem;}.gap-4{gap:1rem;}.gap-6{gap:1.5rem;}.p-5{padding:1.25rem;}.p-12{padding:3rem;}.pb-2{padding-bottom:0.25rem;}.pb-4{padding-bottom:1rem;}.mb-6{margin-bottom:1.5rem;}.m-0{margin:0}.mt-auto{margin-top:auto}.w-full{width:100%}.min-w-0{min-width:0}.text-xs{font-size:0.75rem;line-height:1rem}.text-sm{font-size:0.875rem;line-height:1.25rem}.text-base{font-size:1rem;line-height:1.5rem}.text-2xl{font-size:1.5rem;line-height:2rem}.font-semibold{font-weight:600}.whitespace-nowrap{white-space:nowrap}.overflow-hidden{overflow:hidden}.text-ellipsis{text-overflow:ellipsis}.no-underline{text-decoration:none}.text-gray-600{color:var(--eds-color-gray-600, #4b5563)}.text-gray-900{color:var(--eds-color-gray-900, #111827)}.border-gray-200{border-color:var(--eds-color-gray-200, #e5e7eb)}.bg-white{background-color:var(--eds-color-white, #ffffff)}.text-primary-600{color:var(--eds-color-primary-600, #2563eb)}.hover\\:text-primary-600:hover{color:var(--eds-color-primary-600, #2563eb)}.border-primary-300{border-color:var(--eds-color-primary-300, #93c5fd)}.hover\\:border-primary-300:hover{border-color:var(--eds-color-primary-300, #93c5fd)}.text-success-600{color:var(--eds-color-success-600, #16a34a)}.text-error-600{color:var(--eds-color-error-600, #dc2626)}.border{border-width:1px}.border-b{border-bottom-width:1px}.rounded-lg{border-radius:var(--eds-radius-lg, 0.5rem);}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition-colors{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-200{transition-duration:200ms}.shadow-md{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.hover\\:shadow-md:hover{box-shadow:0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)}.-translate-y-0\\.5{transform:translateY(-0.125rem);}.hover\\:-translate-y-0\\.5:hover{transform:translateY(-0.125rem)}.grid-cols-1{grid-template-columns:repeat(1, minmax(0, 1fr))}@media (min-width: 640px){.sm\\:grid-cols-2{grid-template-columns:repeat(2, minmax(0, 1fr))}}@media (min-width: 768px){.md\\:grid-cols-3{grid-template-columns:repeat(3, minmax(0, 1fr))}}@media (min-width: 1024px){.lg\\:grid-cols-4{grid-template-columns:repeat(4, minmax(0, 1fr))}.lg\\:grid-cols-5{grid-template-columns:repeat(5, minmax(0, 1fr))}}.contributor-card{will-change:transform, box-shadow, border-color}.loading{position:relative;min-height:8rem;padding:1rem 1.25rem;color:var(--grey-dark, #7A7B7A);font-size:0.9375rem;border:1px solid rgba(0, 0, 0, 0.08);border-radius:0.25rem;background-color:rgba(0, 0, 0, 0.02)}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.text-default{color:var(--black)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}";
 const EdsGitlabContributorsStyle0 = edsGitlabContributorsCss;
 
 const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlabContributors extends HTMLElement {
@@ -37,8 +37,8 @@ const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlab
     getProjectIds() {
         return this.projectId
             .split(',')
-            .map(id => id.trim())
-            .filter(id => id.length > 0);
+            .map((id) => id.trim())
+            .filter((id) => id.length > 0);
     }
     /**
      * Fetches commits by path and aggregates by author for a single project
@@ -85,7 +85,7 @@ const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlab
             }
         }
         // Convert to GitLabContributor format
-        return Array.from(authorMap.values()).map(author => ({
+        return Array.from(authorMap.values()).map((author) => ({
             name: author.name,
             email: author.email,
             commits: author.commits,
@@ -105,18 +105,16 @@ const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlab
             // Fetch commits by path and aggregate by author (for monorepo)
             return await this.fetchCommitsByPathForProject(projectId);
         }
-        else {
-            // Use contributors API for entire repository
-            const contributorsResponse = await fetch(`${this.apiUrl}/projects/${encodeURIComponent(projectId)}/repository/contributors?per_page=100`, {
-                headers: {
-                    'PRIVATE-TOKEN': this.accessToken
-                }
-            });
-            if (!contributorsResponse.ok) {
-                throw new Error(`GitLab API error: ${contributorsResponse.status} ${contributorsResponse.statusText}`);
+        // Use contributors API for entire repository
+        const contributorsResponse = await fetch(`${this.apiUrl}/projects/${encodeURIComponent(projectId)}/repository/contributors?per_page=100`, {
+            headers: {
+                'PRIVATE-TOKEN': this.accessToken
             }
-            return await contributorsResponse.json();
+        });
+        if (!contributorsResponse.ok) {
+            throw new Error(`GitLab API error: ${contributorsResponse.status} ${contributorsResponse.statusText}`);
         }
+        return await contributorsResponse.json();
     }
     /**
      * Fetches contributors from GitLab API (supports multiple projects)
@@ -131,29 +129,24 @@ const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlab
             this.loading = true;
             this.error = '';
             const projectIds = this.getProjectIds();
-            let allContributorsData = [];
+            const allContributorsData = [];
             // Fetch contributors from all projects
             for (const projectId of projectIds) {
                 const contributorsData = await this.fetchContributorsForProject(projectId);
                 allContributorsData.push(...contributorsData);
             }
             // Filter by minimum commits and exclude bot contributors
-            const filteredContributors = allContributorsData.filter(c => {
+            const filteredContributors = allContributorsData.filter((c) => {
                 // Exclude if commits are below minimum
-                if (c.commits < this.minCommits)
+                if (c.commits < this.minCommits) {
                     return false;
+                }
                 // Exclude GitLab CI and other bots
                 const email = c.email.toLowerCase();
                 const name = c.name.toLowerCase();
                 // Common bot identifiers
-                const botPatterns = [
-                    'gitlab-ci',
-                    'gitlab ci',
-                    'noreply@gitlab',
-                    'bot@',
-                    'automation@'
-                ];
-                return !botPatterns.some(pattern => email.includes(pattern) || name.includes(pattern));
+                const botPatterns = ['gitlab-ci', 'gitlab ci', 'noreply@gitlab', 'bot@', 'automation@'];
+                return !botPatterns.some((pattern) => email.includes(pattern) || name.includes(pattern));
             });
             // Aggregate duplicate contributors by username
             const aggregatedContributors = this.aggregateContributors(filteredContributors);
@@ -230,18 +223,28 @@ const EdsGitlabContributors$1 = /*@__PURE__*/ proxyCustomElement(class EdsGitlab
     }
     render() {
         if (this.loading) {
-            return (h("div", { class: "flex flex-col items-center justify-center p-12 gap-4" }, h("eds-spinner", { size: "md" }), h("p", { class: "text-base text-gray-600 m-0" }, "Loading contributors...")));
+            // Spinner placeholder mirrors eds-kg-learning-resources exactly —
+            // same `.loading` wrapper (position: relative + min-height so the
+            // absolutely-positioned spinner anchors inside the box instead of
+            // escaping to the page), same eds-spinner props (sm/primary/
+            // transparent + message-as-prop), and the same role+aria-live for
+            // screen-reader announcement. Keep these two components in sync if
+            // the loading affordance ever changes.
+            return (h("div", { class: "loading", role: "status", "aria-live": "polite" }, h("eds-spinner", { size: "sm", variant: "primary", background: "transparent", message: "Loading contributors..." })));
         }
         if (this.error) {
-            return (h("eds-alert", { message: "Error loading contributors", intent: "error" }));
+            return h("eds-alert", { message: "Error loading contributors", intent: "error" });
         }
         if (this.contributors.length === 0) {
-            return (h("eds-alert", { message: "No contributors found for this project.", intent: "error" }));
+            return h("eds-alert", { message: "No contributors found for this project.", intent: "error" });
         }
-        const gridClass = `grid gap-6 w-full ${this.columns === '2' ? 'grid-cols-1 sm:grid-cols-2' :
-            this.columns === '3' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3' :
-                this.columns === '4' ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4' :
-                    'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5'}`;
+        const gridClass = `grid gap-6 w-full ${this.columns === '2'
+            ? 'grid-cols-1 sm:grid-cols-2'
+            : this.columns === '3'
+                ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3'
+                : this.columns === '4'
+                    ? 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4'
+                    : 'grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-5'}`;
         return (h("div", { class: "w-full" }, h("div", { class: gridClass }, this.contributors.map((contributor) => {
             const { firstName, lastName } = this.parseName(contributor.name);
             return (h("div", { class: "contributor-card flex flex-row gap-4 p-5 bg-white border border-gray-200 rounded-lg transition-all duration-200", key: contributor.email }, h("div", { class: "flex-shrink-0" }, h("eds-avatar", { firstName: firstName, lastName: lastName, color: "black" })), h("div", { class: "min-w-0 flex flex-col gap-2" }, h("span", { class: "f-ui-01 text-default pb-2 m-0 whitespace-nowrap overflow-hidden text-ellipsis" }, "@", contributor.username), h("div", { class: "flex flex-col gap-2 mt-auto" }, h("div", { class: "flex items-center gap-2 font-semibold" }, h("span", { class: "text-light" }, this.formatNumber(contributor.commits)), h("span", { class: "text-lighter" }, contributor.commits === 1 ? 'commit' : 'commits'))))));