@ebrains/components 3.0.0 → 3.1.0

package/dist/cjs/{eds-accordion_52.cjs.entry.js → eds-accordion_53.cjs.entry.js}

@@ -8,7 +8,7 @@ const sharedUtils = require('./sharedUtils-8e287250.js');
 const negative = require('./negative-c61d13b5.js');
 const positive = require('./positive-fdcd161e.js');
 
-const edsAccordionCss = ":host{display:block;width:100%}.accordion-card{border-radius:16px;padding:1.5rem;transition:all 0.4s ease;position:relative;overflow:hidden;border:1px solid rgba(0, 0, 0, 0.1)}.accordion-card-default{background:var(--brand-black);color:var(--white)}.accordion-card-default:hover{border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.accordion-card-default .accordion-title{color:var(--white)}.accordion-card-default .accordion-description{color:var(--grey-light)}.accordion-card-default .accordion-chevron{color:var(--white)}.accordion-card-default .accordion-content{color:var(--grey-light)}.accordion-card-inverse{background:var(--white);color:var(--brand-black)}.accordion-card-inverse:hover{border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.accordion-card-inverse .accordion-title{color:var(--brand-black)}.accordion-card-inverse .accordion-description{color:var(--grey-dark)}.accordion-card-inverse .accordion-chevron{color:var(--brand-black)}.accordion-card-inverse .accordion-content{color:var(--grey-dark)}.accordion-header{display:flex;align-items:center;gap:1rem;cursor:pointer;width:100%;background:none;border:none;padding:0;text-align:left;-webkit-user-select:none;user-select:none}.accordion-header:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px;border-radius:8px}.accordion-icon{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;background:rgba(0, 255, 157, 0.1);border-radius:12px;color:var(--brand-green);flex-shrink:0}.accordion-card-inverse .accordion-icon{background:rgba(0, 0, 0, 0.05);color:var(--brand-black)}.accordion-header-text{flex-grow:1;min-width:0}.accordion-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:1.25rem;line-height:1.4;margin:0}.accordion-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.9375rem;line-height:1.6;margin-top:0.25rem;margin-bottom:0}.accordion-chevron{flex-shrink:0;transition:transform 0.3s ease}.accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.4s ease}.accordion-panel.expanded{grid-template-rows:1fr}.accordion-panel-inner{overflow:hidden}.accordion-content{padding-top:1rem;font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.9375rem;line-height:1.6}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}@media (max-width: 768px){.accordion-card{padding:1.25rem}.accordion-icon{width:40px;height:40px;min-width:40px}.accordion-title{font-size:1.125rem}.accordion-header{gap:0.75rem}}h3,p{margin:0}";
+const edsAccordionCss = ":host{display:block;width:100%}.accordion-card{border-radius:16px;padding:1.5rem;transition:all 0.4s ease;position:relative;overflow:hidden;border:1px solid rgba(0, 0, 0, 0.1)}.accordion-card-default{background:var(--brand-black);color:var(--white)}.accordion-card-default:hover{border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.accordion-card-default .accordion-title{color:var(--white)}.accordion-card-default .accordion-description{color:var(--grey-light)}.accordion-card-default .accordion-chevron{color:var(--white)}.accordion-card-default .accordion-content{color:var(--grey-light)}.accordion-card-inverse{background:var(--white);color:var(--brand-black)}.accordion-card-inverse:hover{border-color:rgba(0, 255, 157, 0.4);box-shadow:0 4px 20px rgba(0, 0, 0, 0.1)}.accordion-card-inverse .accordion-title{color:var(--brand-black)}.accordion-card-inverse .accordion-description{color:var(--grey-700)}.accordion-card-inverse .accordion-chevron{color:var(--brand-black)}.accordion-card-inverse .accordion-content{color:var(--grey-700)}.accordion-header{display:flex;align-items:center;gap:1rem;cursor:pointer;width:100%;background:none;border:none;padding:0;text-align:left;-webkit-user-select:none;user-select:none}.accordion-header:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px;border-radius:8px}.accordion-icon{width:48px;height:48px;min-width:48px;display:flex;align-items:center;justify-content:center;background:rgba(0, 255, 157, 0.1);border-radius:12px;color:var(--brand-green);flex-shrink:0}.accordion-card-inverse .accordion-icon{background:rgba(0, 0, 0, 0.05);color:var(--brand-black)}.accordion-header-text{flex-grow:1;min-width:0}.accordion-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:1.25rem;line-height:1.4;margin:0}.accordion-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.9375rem;line-height:1.6;margin-top:0.25rem;margin-bottom:0}.accordion-chevron{flex-shrink:0;transition:transform 0.3s ease}.accordion-panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows 0.4s ease}.accordion-panel.expanded{grid-template-rows:1fr}.accordion-panel-inner{overflow:hidden}.accordion-content{padding-top:1rem;font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:0.9375rem;line-height:1.6}.line-clamp-1{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:1}.line-clamp-2{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2}@media (max-width: 768px){.accordion-card{padding:1.25rem}.accordion-icon{width:40px;height:40px;min-width:40px}.accordion-title{font-size:1.125rem}.accordion-header{gap:0.75rem}}h3,p{margin:0}";
 const EdsAccordionStyle0 = edsAccordionCss;
 
 const EdsAccordion = class {
@@ -56,7 +56,7 @@ const EdsAccordion = class {
             'accordion-card',
             `accordion-card-${this.variant}`
         ].join(' ');
-        return (index.h("div", { key: 'e9f44914fce505b97f90415ed72f322ff09fcee7', class: cardClasses }, index.h("div", { key: 'd4c6ec563b66b14fc74bc872c953bd9e3e501a85', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (index.h("div", { key: '9c365bc15aeec93ccc2021206e72e457a2032265', class: "accordion-icon" }, index.h("eds-icon-wrapper", { key: '73742a6cb431342c62e1fd5661c39927dcb57bef', name: this.icon, size: 24 }))), index.h("div", { key: '1ba17b07eedccb135dc5138ace783ea211b75d52', class: "accordion-header-text" }, index.h("h3", { key: 'd8c34e66195fbe2863736d39f5a9e8276f30252a', class: "accordion-title" }, this.heading), this.description && (index.h("p", { key: 'c24a3614a3f2d1bcd29a39cbd3384c25c1c50e47', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), index.h("eds-icon-wrapper", { key: 'deecdbb3c0ec32079b3b913ed7976ae813b9468a', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), index.h("section", { key: 'f3767c81d79e2681c6317e3268cf1c966fba6bc2', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, index.h("div", { key: '08ce9281f2e7fc858f30d0b7c0da0b0739824193', class: "accordion-panel-inner" }, index.h("div", { key: 'c9cdc6312fa279d1c1ee5753c7038b0a9ce3c624', class: "accordion-content" }, index.h("slot", { key: 'aaec055131ce2ae7830aecfc2fc6ace50f05ded1' }))))));
+        return (index.h("div", { key: '08061b87dfd54b49f8aa782f29e2a9c5c8bcd2ef', class: cardClasses }, index.h("div", { key: '728033232d8e6aa348bc98d028a5bd62d32fd934', class: "accordion-header", onClick: this.handleClick, onKeyDown: this.handleKeyDown, role: "button", tabindex: 0, "aria-expanded": String(this.isExpanded), "aria-controls": "accordionSection" }, this.icon && (index.h("div", { key: 'eeb4260c955a2d4394bc3663dc749afc45b6f87f', class: "accordion-icon" }, index.h("eds-icon-wrapper", { key: '0896625a235bda97a098ac7b9a4ebec00e5fa587', name: this.icon, size: 24 }))), index.h("div", { key: '3e6b85780bc597a84dc0eb5d2526f9e54c16148d', class: "accordion-header-text" }, index.h("h3", { key: 'b5c5c0023bc23dc225183736f02683134a40da93', class: "accordion-title" }, this.heading), this.description && (index.h("p", { key: 'eb04c90cef03a838a4f852b988f3a9984e593120', class: `accordion-description ${!this.isExpanded && this.clampText ? 'line-clamp-1' : ''}` }, this.description))), index.h("eds-icon-wrapper", { key: '583d0bcc82a178c2a47eef586aede9c87e8ea456', name: this.toggleIcon, size: 20, class: "accordion-chevron" })), index.h("section", { key: '8f820377d639ced2d0a4fe505452b6b408640400', id: "accordionSection", "aria-hidden": String(!this.isExpanded), class: `accordion-panel ${this.isExpanded ? 'expanded' : ''}` }, index.h("div", { key: 'd41dc9c3ef21f14df3ca25138440356703fa35ed', class: "accordion-panel-inner" }, index.h("div", { key: '156c3c9b139efcb964525147338ecdeeca538123', class: "accordion-content" }, index.h("slot", { key: 'b19b54c279cca1a32b4ed0f5b0a319d87b7bf937' }))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -172,7 +172,7 @@ const EdsAvatar = class {
      * @returns {JSX.Element} The rendered avatar component.
      */
     render() {
-        return (index.h("div", { key: '00e163f2dd33c92bdfd8f45b6e2d3384afa32a30', class: this.containerClasses }, this.picture ? (index.h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (index.h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
+        return (index.h("div", { key: '36f8cb598e0e53793ce8a49e9e2419f41ba8f160', class: this.containerClasses }, this.picture ? (index.h("eds-img", { src: this.picture, width: 54, height: 54, sizes: "120px", alt: `${this.firstName} ${this.lastName}`, lazyload: true, withBg: true })) : (index.h("abbr", { title: this.computedInitials || `${this.firstName} ${this.lastName}`, class: "!no-underline f-ui-01" }, this.computedInitials))));
     }
 };
 EdsAvatar.style = EdsAvatarStyle0;
@@ -186,7 +186,7 @@ const EdsBlockBreak = class {
         this.inverse = false;
     }
     render() {
-        return index.h("hr", { key: '7b472ce3dcecc7a0c061d336c4edb1bec098c113', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
+        return index.h("hr", { key: '2531c44fa20745f7860e4647f77ffa038a56d832', class: `${this.inverse ? 'border-default' : 'border-softer'}  my-16 inline-block w-full border-t-2` });
     }
 };
 EdsBlockBreak.style = EdsBlockBreakStyle0;
@@ -306,7 +306,7 @@ const EdsBreadcrumb = class {
      */
     render() {
         const itemsToRender = this.getTruncatedItems();
-        return (index.h("nav", { key: 'a068d2deb011c0a303e5a4320f4f5913bfc36d4a', "aria-label": "Breadcrumb" }, index.h("ol", { key: '63ab81ece8ff48546875320f4fd346638fac3bdc', class: "flex items-center space-x-2" }, itemsToRender.map((item, index$1) => {
+        return (index.h("nav", { key: '95c13ac07de20bc04fb57ee990e5d21f928f3a86', "aria-label": "Breadcrumb" }, index.h("ol", { key: '2a03ff53ac27eaa5e37ddfef32e9a4fe322755dd', class: "flex items-center space-x-2" }, itemsToRender.map((item, index$1) => {
             const isLast = index$1 === itemsToRender.length - 1;
             return (index.h("li", { class: "flex items-center" }, !item.isHidden ? ((() => {
                 const { fullLabel } = this.getLabels(item, isLast);
@@ -373,14 +373,17 @@ const cva = (base, config)=>{
     };
 };
 
-const edsButtonCss = "/* ============================================\n   EDS BUTTON - NEW EBRAINS VISUAL SYSTEM\n   ============================================ */\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\np {\n  margin: 0;\n}\n\n/*\n  Set the default cursor for buttons.\n  */\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n:disabled {\n  cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n/* ============================================\n   TYPOGRAPHY CLASSES\n   ============================================ */\n\n.f-body-01 {\n  font-family: var(--f-body-01-fontFamily);\n  font-weight: var(--f-body-01-fontWeight);\n  font-size: var(--f-body-01-fontSize);\n  line-height: var(--f-body-01-lineHeight);\n  letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n  font-family: var(--f-body-02-fontFamily);\n  font-weight: var(--f-body-02-fontWeight);\n  font-size: var(--f-body-02-fontSize);\n  line-height: var(--f-body-02-lineHeight);\n  letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n  font-family: var(--f-ui-02-fontFamily);\n  font-weight: var(--f-ui-02-fontWeight);\n  font-size: var(--f-ui-02-fontSize);\n  line-height: var(--f-ui-02-lineHeight);\n  letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n/* ============================================\n   BUTTON BORDER EFFECTS - NEW SYSTEM\n   ============================================ */\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n    position: absolute;\n    inset: 0rem;\n    z-index: 1;\n    border-radius: 8px;\n    border-width: 2px;\n    border-color: rgba(7, 20, 13, 1); /* brand-black with opacity */\n    content: '';\n  }\n}\n\n.border-inside-inverse {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n    position: absolute;\n    inset: 0rem;\n    z-index: 1;\n    border-radius: 8px;\n    border-width: 2px;\n    border-color: rgba(255, 255, 255, 1); /* white border */\n    content: '';\n  }\n}\n\n.border-inside-pill {\n  &::after {\n    border-radius: 100px; /* pill shape */\n    content: '';\n  }\n}\n\n.border-inside-inverse.border-inside-pill {\n  &::after {\n    border-radius: 100px; /* pill shape for inverse border */\n  }\n}\n\n/* ============================================\n   LOADER SPINNER\n   ============================================ */\n\n.loader {\n  box-sizing: border-box;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loader {\n  animation: spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 3px solid rgba(7, 20, 13, 0.3); /* brand-black */\n  border-bottom-color: #07140D; /* brand-black */\n}\n\n/* ============================================\n   TRANSITIONS & EFFECTS\n   ============================================ */\n\n.effect-color {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--brand-green); /* NEW: brand-green for focus */\n}\n\n.effect-focus:focus-visible {\n  outline-style: solid;\n}\n\n.effect-focus-within {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--brand-green); /* NEW: brand-green for focus */\n}\n\n.effect-focus-within:focus-within {\n  outline-style: solid;\n}\n\n/* ============================================\n   BRAND HOVER TRANSFORM EFFECT\n   ============================================ */\n.brand-hover-transform {\n  transition-property: transform, box-shadow, color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n}\n\n.brand-hover-transform:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 20px rgba(0, 255, 157, 0.3);\n}\n\n.brand-hover-transform[aria-disabled=\"true\"]:hover,\n.brand-hover-transform:disabled:hover {\n  transform: none;\n  box-shadow: none;\n}\n\n/* Secondary Inverse Transform Effect */\n.secondary-inverse-transform {\n  transition-property: transform, background-color, color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n}\n\n.secondary-inverse-transform:hover {\n  transform: translateY(-2px);\n}\n\n.secondary-inverse-transform[aria-disabled=\"true\"]:hover,\n.secondary-inverse-transform:disabled:hover {\n  transform: none;\n}\n\n/* ============================================\n   UTILITY CLASSES\n   ============================================ */\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.sticky {\n  position: sticky;\n}\n\n.inset-0 {\n  inset: 0rem;\n}\n\n.inset-x-16 {\n  left: 1rem;\n  right: 1rem;\n}\n\n/* ============================================\n   POSITIONING\n   ============================================ */\n\n.-top-8 {\n  top: -0.5rem;\n}\n\n.left-0 {\n  left: 0rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.left-4 {\n  left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n  left: 4px;\n}\n\n.right-0 {\n  right: 0rem;\n}\n\n.right-4 {\n  right: 0.25rem;\n}\n\n.right-8 {\n  right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n  right: 6px;\n}\n\n.top-0 {\n  top: 0rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n/* ============================================\n   SPACING\n   ============================================ */\n\n.m-0 {\n  margin: 0rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-ml-16 {\n  margin-left: -1rem;\n}\n\n.-mr-16 {\n  margin-right: -1rem;\n}\n\n.ml-0 {\n  margin-left: 0rem;\n}\n\n.ml-4 {\n  margin-left: 0.25rem;\n}\n\n.ml-64 {\n  margin-left: 4rem;\n}\n\n.ml-8 {\n  margin-left: 0.5rem;\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n.mr-4 {\n  margin-right: 0.25rem;\n}\n\n.mr-8 {\n  margin-right: 0.5rem;\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n/* ============================================\n   DISPLAY\n   ============================================ */\n\n.block {\n  display: block;\n}\n\n.\\!block {\n  display: block !important;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.hidden {\n  display: none;\n}\n\n/* ============================================\n   DIMENSIONS\n   ============================================ */\n\n.h-20 {\n  height: 1.25rem;\n}\n\n.h-24 {\n  height: 1.5rem;\n}\n\n.h-36 {\n  height: 2.25rem;\n}\n\n.h-40 {\n  height: 2.5rem;\n}\n\n.h-44 {\n  height: 2.75rem;\n}\n\n.h-48 {\n  height: 3rem;\n}\n\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.\\!min-h-20 {\n  min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.w-20 {\n  width: 1.25rem;\n}\n\n.w-24 {\n  width: 1.5rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-auto {\n  width: auto;\n}\n\n/* ============================================\n   FLEXBOX\n   ============================================ */\n\n.flex-none {\n  flex: none;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-4 {\n  gap: 0.25rem;\n}\n\n.gap-8 {\n  gap: 0.5rem;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n/* ============================================\n   OVERFLOW\n   ============================================ */\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n/* ============================================\n   TEXT\n   ============================================ */\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.break-words {\n  overflow-wrap: break-word;\n}\n\n/* ============================================\n   BORDERS & RADIUS - NEW SYSTEM\n   ============================================ */\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.rounded-md {\n  border-radius: 12px;\n}\n\n.rounded-pill {\n  border-radius: 100px; /* NEW: pill shape */\n}\n\n.rounded-sm {\n  border-radius: 8px;\n}\n\n.rounded-xxs {\n  border-radius: 2px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n  border-color: var(--grey-light);\n}\n\n.border-b-softer {\n  border-bottom-color: rgba(7, 20, 13, 0.1); /* NEW: brand-black */\n}\n\n/* ============================================\n   BACKGROUNDS - NEW EBRAINS COLORS\n   ============================================ */\n\n/* Accent backgrounds - NEW green */\n.\\!bg-accent-dark {\n  background-color: var(--brand-green-dark) !important; /* NEW: #00C87B */\n}\n\n.bg-accent {\n  background-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.bg-accent-dark {\n  background-color: var(--brand-green-dark); /* NEW: #00C87B */\n}\n\n/* Neutral backgrounds - NEW simplified greys */\n.\\!bg-darker {\n  background-color: var(--grey-dark) !important; /* NEW: #7A7B7A */\n}\n\n.bg-dark {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.bg-darker {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n/* Strong backgrounds - NEW brand-black */\n.\\!bg-strong-dark {\n  background-color: var(--brand-black) !important; /* NEW: #07140D */\n}\n\n.bg-strong {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.bg-strong-dark {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.bg-stronger {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.bg-strongest {\n  background-color: var(--brand-black); /* NEW: #07140D (was pure black) */\n}\n\n/* Overlay */\n.bg-overlay {\n  background-color: rgba(7, 20, 13, 0.25); /* NEW: brand-black overlay */\n}\n\n/* ============================================\n   PADDING\n   ============================================ */\n\n.p-12 {\n  padding: 0.75rem;\n}\n\n.p-6 {\n  padding: 0.375rem;\n}\n\n.p-8 {\n  padding: 0.5rem;\n}\n\n.\\!px-0 {\n  padding-left: 0rem !important;\n  padding-right: 0rem !important;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-16 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.px-32 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.pl-2 {\n  padding-left: 0.125rem;\n}\n\n.pl-4 {\n  padding-left: 0.25rem;\n}\n\n.pl-8 {\n  padding-left: 0.5rem;\n}\n\n.pr-2 {\n  padding-right: 0.125rem;\n}\n\n.pr-4 {\n  padding-right: 0.25rem;\n}\n\n.pr-8 {\n  padding-right: 0.5rem;\n}\n\n/* ============================================\n   TEXT COLORS - NEW SYSTEM\n   ============================================ */\n\n.\\!text-current {\n  color: currentColor !important;\n}\n\n.text-accent {\n  color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-default {\n  color: var(--brand-black); /* NEW: #07140D (was pure black) */\n}\n\n.text-inverse {\n  color: var(--white);\n}\n\n.text-light {\n  color: var(--grey-dark); /* NEW: simplified to grey-dark */\n}\n\n\n.text-lightest {\n  color: var(--grey-light); /* NEW: simplified to grey-dark */\n}\n\n/* ============================================\n   OPACITY\n   ============================================ */\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-20 {\n  opacity: 20;\n}\n\n/* ============================================\n   SHADOWS - NEW SYSTEM\n   ============================================ */\n\n.shadow {\n  --tw-shadow: 0 1px 3px rgba(7, 20, 13, 0.1); /* NEW: brand-black */\n  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n  --tw-shadow: 0 0 16px rgba(0, 255, 157, 0.5); /* NEW: brand-green glow */\n  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n  text-underline-offset: 0.2em;\n}\n\n.\\@container {\n  container-type: inline-size;\n}\n\n/* ============================================\n   PSEUDO-ELEMENT EFFECTS\n   ============================================ */\n\n.after\\:effect-opacity::after {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n  background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n  color: var(--grey-dark); /* NEW: simplified */\n}\n\n/* ============================================\n   INTERACTIVE STATES - NEW COLORS\n   ============================================ */\n\n.focus-within\\:bg-transparent:focus-within {\n  background-color: transparent;\n}\n\n/* Hover states with NEW colors */\n\n.hover\\:border-0::hover {\n  border-width: 0px;\n}\n\n.hover\\:border-accent::hover {\n  border-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.hover\\:text-default:hover {\n  color: var(--brand-black);\n}\n\n.hover\\:text-light:hover {\n  color: var(--grey-dark);\n}\n\n.hover\\:text-inverse:hover {\n  color: var(--white);\n}\n\n\n.hover\\:bg-accent:hover {\n  background-color: var(--brand-green); /* NEW: #00C87B */\n}\n\n.hover\\:bg-accent-dark:hover {\n  background-color: var(--brand-green-dark); /* NEW: #00C87B */\n}\n\n.hover\\:bg-dark:hover {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.hover\\:bg-darker:hover {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.hover\\:bg-default:hover {\n  background-color: var(--grey-light);\n}\n\n.hover\\:bg-inverse:hover {\n  background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.hover\\:bg-transparent:hover {\n  background-color: transparent;\n}\n\n.hover\\:bg-strongest:hover {\n  background-color: var(--brand-black);\n}\n\n.hover\\:text-default:hover {\n  color: var(--brand-black); /* NEW: #07140D */\n}\n\n.hover\\:text-lighter:hover {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.hover\\:\\!underline:hover {\n  text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n  text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n  --tw-shadow: 0 8px 24px rgba(7, 20, 13, 0.2); /* NEW: brand-black */\n  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   DISABLED STATES - NEW COLORS\n   ============================================ */\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.disabled\\:text-lightest:disabled {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n  border-color: transparent !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n  background-color: transparent;\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n  text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n/* ============================================\n   AFTER PSEUDO-ELEMENTS\n   ============================================ */\n\n.after\\:absolute::after {\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n  left: 0rem;\n  right: 0rem;\n}\n\n.after\\:bottom-0::after {\n  bottom: 0rem;\n}\n\n.after\\:left-16::after {\n  left: 1rem;\n}\n\n.after\\:right-16::after {\n  right: 1rem;\n}\n\n.after\\:z-10::after {\n  z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n  border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n  border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n  border-color: transparent !important;\n}\n\n.after\\:border-accent::after {\n  border-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.after\\:border-accent-dark::after {\n  border-color: var(--brand-green-dark); /* NEW: #00FF9D */\n}\n\n.after\\:border-soft::after {\n  border-color: var(--grey-dark);\n}\n\n.after\\:border-softest::after {\n  border-color: var(--grey-light);\n}\n\n.after\\:opacity-0::after {\n  opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n  --tw-content: '';\n  content: var(--tw-content);\n}\n\n.hover\\:text-accent:hover {\n  color: var(--brand-green);\n}\n\n.hover\\:after\\:\\border-accent:hover::after {\n  border-color: var(--brand-green);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n  border-color: transparent !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n  opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n  opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n  border-color: transparent !important;\n}\n\n.aria-disabled\\:after\\:\\!border-0[aria-disabled=\"true\"]::after {\n  border-width: 0 !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n  opacity: 1;\n}\n\n/* ============================================\n   CTA BUTTON STYLES\n   ============================================ */\n\n/* CTA link style */\n.cta-link {\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: var(--f-ui-01-fontSize);\n  color: var(--grey-dark);\n  text-decoration: none;\n  transition: color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.cta-link:hover {\n  color: var(--brand-green);\n}\n\n/* CTA brand link style - always green */\n.cta-link-brand {\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: var(--f-ui-02-fontSize);\n  color: var(--brand-green);\n  text-decoration: none;\n  transition: color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.cta-link-brand:hover {\n  color: var(--brand-green-dark);\n}\n\n@media (min-width: 750px) {\n  .md\\:w-full {\n    width: 100%;\n  }\n\n  .md\\:flex {\n    display: flex;\n  }\n}";
+const edsButtonCss = "/* ============================================\n   EDS BUTTON - NEW EBRAINS VISUAL SYSTEM\n   ============================================ */\n\n*,\n::before,\n::after {\n  box-sizing: border-box;\n  border-width: 0;\n  border-style: solid;\n  border-color: currentColor;\n}\n\na {\n  color: inherit;\n  text-decoration: inherit;\n}\n\n/*\n  1. Change the font styles in all browsers.\n  2. Remove the margin in Firefox and Safari.\n  3. Remove default padding in all browsers.\n  */\nbutton,\ninput,\noptgroup,\nselect,\ntextarea {\n  font-family: inherit;\n  font-feature-settings: inherit;\n  font-variation-settings: inherit;\n  font-size: 100%;\n  font-weight: inherit;\n  line-height: inherit;\n  letter-spacing: inherit;\n  color: inherit;\n  margin: 0;\n  padding: 0;\n}\n\n/*\n  Remove the inheritance of text transform in Edge and Firefox.\n  */\nbutton,\nselect {\n  text-transform: none;\n}\n\n/*\n  1. Correct the inability to style clickable types in iOS and Safari.\n  2. Remove default button styles.\n  */\nbutton,\ninput:where([type='button']),\ninput:where([type='reset']),\ninput:where([type='submit']) {\n  -webkit-appearance: button;\n  /* 1 */\n  background-color: transparent;\n  /* 2 */\n  background-image: none;\n  /* 2 */\n}\n\np {\n  margin: 0;\n}\n\n/*\n  Set the default cursor for buttons.\n  */\nbutton,\n[role=\"button\"] {\n  cursor: pointer;\n}\n\n/*\n  Make sure disabled buttons don't get the pointer cursor.\n  */\n:disabled {\n  cursor: default;\n}\n\n/* Make elements with the HTML hidden attribute stay hidden by default */\n[hidden] {\n  display: none;\n}\n\n/* ============================================\n   TYPOGRAPHY CLASSES\n   ============================================ */\n\n.f-body-01 {\n  font-family: var(--f-body-01-fontFamily);\n  font-weight: var(--f-body-01-fontWeight);\n  font-size: var(--f-body-01-fontSize);\n  line-height: var(--f-body-01-lineHeight);\n  letter-spacing: var(--f-body-01-letterSpacing);\n}\n\n.f-body-02 {\n  font-family: var(--f-body-02-fontFamily);\n  font-weight: var(--f-body-02-fontWeight);\n  font-size: var(--f-body-02-fontSize);\n  line-height: var(--f-body-02-lineHeight);\n  letter-spacing: var(--f-body-02-letterSpacing);\n}\n\n.f-ui-01 {\n  font-family: var(--f-ui-01-fontFamily);\n  font-weight: var(--f-ui-01-fontWeight);\n  font-size: var(--f-ui-01-fontSize);\n  line-height: var(--f-ui-01-lineHeight);\n  letter-spacing: var(--f-ui-01-letterSpacing);\n}\n\n.f-ui-02 {\n  font-family: var(--f-ui-02-fontFamily);\n  font-weight: var(--f-ui-02-fontWeight);\n  font-size: var(--f-ui-02-fontSize);\n  line-height: var(--f-ui-02-lineHeight);\n  letter-spacing: var(--f-ui-02-letterSpacing);\n}\n\n/* ============================================\n   BUTTON BORDER EFFECTS - NEW SYSTEM\n   ============================================ */\n\n.border-inside {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n    position: absolute;\n    inset: 0rem;\n    z-index: 1;\n    border-radius: 8px;\n    border-width: 2px;\n    border-color: rgba(7, 20, 13, 1); /* brand-black with opacity */\n    content: '';\n  }\n}\n\n.border-inside-inverse {\n  position: relative;\n\n  &::after {\n    pointer-events: none;\n    position: absolute;\n    inset: 0rem;\n    z-index: 1;\n    border-radius: 8px;\n    border-width: 2px;\n    border-color: rgba(255, 255, 255, 1); /* white border */\n    content: '';\n  }\n}\n\n.border-inside-pill {\n  &::after {\n    border-radius: 100px; /* pill shape */\n    content: '';\n  }\n}\n\n.border-inside-inverse.border-inside-pill {\n  &::after {\n    border-radius: 100px; /* pill shape for inverse border */\n  }\n}\n\n/* ============================================\n   LOADER SPINNER\n   ============================================ */\n\n.loader {\n  box-sizing: border-box;\n  display: inline-block;\n  height: 1rem;\n  width: 1rem;\n}\n\n@keyframes spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n.loader {\n  animation: spin 1s linear infinite;\n  border-radius: 9999px;\n  border: 3px solid rgba(7, 20, 13, 0.3); /* brand-black */\n  border-bottom-color: #07140D; /* brand-black */\n}\n\n/* ============================================\n   TRANSITIONS & EFFECTS\n   ============================================ */\n\n.effect-color {\n  transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.effect-focus {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--brand-green); /* NEW: brand-green for focus */\n}\n\n.effect-focus:focus-visible {\n  outline-style: solid;\n}\n\n.effect-focus-within {\n  outline-width: 3px;\n  outline-offset: 2px;\n  outline-color: var(--brand-green); /* NEW: brand-green for focus */\n}\n\n.effect-focus-within:focus-within {\n  outline-style: solid;\n}\n\n/* ============================================\n   BRAND HOVER TRANSFORM EFFECT\n   ============================================ */\n.brand-hover-transform {\n  transition-property: transform, box-shadow, color, background-color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n}\n\n.brand-hover-transform:hover {\n  transform: translateY(-2px);\n  box-shadow: 0 8px 20px rgba(0, 255, 157, 0.3);\n}\n\n.brand-hover-transform[aria-disabled=\"true\"]:hover,\n.brand-hover-transform:disabled:hover {\n  transform: none;\n  box-shadow: none;\n}\n\n/* Secondary Inverse Transform Effect */\n.secondary-inverse-transform {\n  transition-property: transform, background-color, color;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n}\n\n.secondary-inverse-transform:hover {\n  transform: translateY(-2px);\n}\n\n.secondary-inverse-transform[aria-disabled=\"true\"]:hover,\n.secondary-inverse-transform:disabled:hover {\n  transform: none;\n}\n\n/* ============================================\n   UTILITY CLASSES\n   ============================================ */\n\n.sr-only {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border-width: 0;\n}\n\n.pointer-events-none {\n  pointer-events: none;\n}\n\n.static {\n  position: static;\n}\n\n.fixed {\n  position: fixed;\n}\n\n.absolute {\n  position: absolute;\n}\n\n.relative {\n  position: relative;\n}\n\n.sticky {\n  position: sticky;\n}\n\n.inset-0 {\n  inset: 0rem;\n}\n\n.inset-x-16 {\n  left: 1rem;\n  right: 1rem;\n}\n\n/* ============================================\n   POSITIONING\n   ============================================ */\n\n.-top-8 {\n  top: -0.5rem;\n}\n\n.left-0 {\n  left: 0rem;\n}\n\n.left-1\\/2 {\n  left: 50%;\n}\n\n.left-4 {\n  left: 0.25rem;\n}\n\n.left-\\[4px\\] {\n  left: 4px;\n}\n\n.right-0 {\n  right: 0rem;\n}\n\n.right-4 {\n  right: 0.25rem;\n}\n\n.right-8 {\n  right: 0.5rem;\n}\n\n.right-\\[6px\\] {\n  right: 6px;\n}\n\n.top-0 {\n  top: 0rem;\n}\n\n.top-1\\/2 {\n  top: 50%;\n}\n\n/* ============================================\n   SPACING\n   ============================================ */\n\n.m-0 {\n  margin: 0rem;\n}\n\n.mx-auto {\n  margin-left: auto;\n  margin-right: auto;\n}\n\n.-ml-16 {\n  margin-left: -1rem;\n}\n\n.-mr-16 {\n  margin-right: -1rem;\n}\n\n.ml-0 {\n  margin-left: 0rem;\n}\n\n.ml-4 {\n  margin-left: 0.25rem;\n}\n\n.ml-64 {\n  margin-left: 4rem;\n}\n\n.ml-8 {\n  margin-left: 0.5rem;\n}\n\n.ml-auto {\n  margin-left: auto;\n}\n\n.mr-4 {\n  margin-right: 0.25rem;\n}\n\n.mr-8 {\n  margin-right: 0.5rem;\n}\n\n.mr-auto {\n  margin-right: auto;\n}\n\n/* ============================================\n   DISPLAY\n   ============================================ */\n\n.block {\n  display: block;\n}\n\n.\\!block {\n  display: block !important;\n}\n\n.inline-block {\n  display: inline-block;\n}\n\n.inline {\n  display: inline;\n}\n\n.flex {\n  display: flex;\n}\n\n.inline-flex {\n  display: inline-flex;\n}\n\n.hidden {\n  display: none;\n}\n\n/* ============================================\n   DIMENSIONS\n   ============================================ */\n\n.h-20 {\n  height: 1.25rem;\n}\n\n.h-24 {\n  height: 1.5rem;\n}\n\n.h-36 {\n  height: 2.25rem;\n}\n\n.h-40 {\n  height: 2.5rem;\n}\n\n.h-44 {\n  height: 2.75rem;\n}\n\n/* Min-height variants — used for button sizing so a label that wraps to\n   two lines grows (with its py-12 padding) instead of being clipped at a\n   fixed height. Single-line buttons keep the same height. */\n.min-h-36 {\n  min-height: 2.25rem;\n}\n\n.min-h-44 {\n  min-height: 2.75rem;\n}\n\n.h-48 {\n  height: 3rem;\n}\n\n.h-auto {\n  height: auto;\n}\n\n.h-full {\n  height: 100%;\n}\n\n.\\!min-h-20 {\n  min-height: 1.25rem !important;\n}\n\n.min-h-screen {\n  min-height: 100vh;\n}\n\n.w-20 {\n  width: 1.25rem;\n}\n\n.w-24 {\n  width: 1.5rem;\n}\n\n.w-full {\n  width: 100%;\n}\n\n.w-auto {\n  width: auto;\n}\n\n/* ============================================\n   FLEXBOX\n   ============================================ */\n\n.flex-none {\n  flex: none;\n}\n\n.grow {\n  flex-grow: 1;\n}\n\n.cursor-pointer {\n  cursor: pointer;\n}\n\n.resize {\n  resize: both;\n}\n\n.flex-row {\n  flex-direction: row;\n}\n\n.flex-row-reverse {\n  flex-direction: row-reverse;\n}\n\n.flex-col {\n  flex-direction: column;\n}\n\n.flex-wrap {\n  flex-wrap: wrap;\n}\n\n.items-center {\n  align-items: center;\n}\n\n.justify-center {\n  justify-content: center;\n}\n\n.justify-between {\n  justify-content: space-between;\n}\n\n.gap-4 {\n  gap: 0.25rem;\n}\n\n.gap-8 {\n  gap: 0.5rem;\n}\n\n.space-x-2> :not([hidden])~ :not([hidden]) {\n  --tw-space-x-reverse: 0;\n  margin-right: calc(0.125rem * var(--tw-space-x-reverse));\n  margin-left: calc(0.125rem * calc(1 - var(--tw-space-x-reverse)));\n}\n\n/* ============================================\n   OVERFLOW\n   ============================================ */\n\n.overflow-hidden {\n  overflow: hidden;\n}\n\n.overflow-x-auto {\n  overflow-x: auto;\n}\n\n.overflow-x-hidden {\n  overflow-x: hidden;\n}\n\n.overflow-y-scroll {\n  overflow-y: scroll;\n}\n\n/* ============================================\n   TEXT\n   ============================================ */\n\n.whitespace-nowrap {\n  white-space: nowrap;\n}\n\n.break-words {\n  overflow-wrap: break-word;\n}\n\n/* ============================================\n   BORDERS & RADIUS - NEW SYSTEM\n   ============================================ */\n\n.rounded {\n  border-radius: 0.25rem;\n}\n\n.rounded-full {\n  border-radius: 9999px;\n}\n\n.rounded-lg {\n  border-radius: 16px;\n}\n\n.rounded-md {\n  border-radius: 12px;\n}\n\n.rounded-pill {\n  border-radius: 100px; /* NEW: pill shape */\n}\n\n.rounded-sm {\n  border-radius: 8px;\n}\n\n.rounded-xxs {\n  border-radius: 2px;\n}\n\n.border {\n  border-width: 1px;\n}\n\n.border-\\[\\#0034CB\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(0 52 203 / var(--tw-border-opacity));\n}\n\n.border-\\[\\#d2d2d2\\] {\n  --tw-border-opacity: 1;\n  border-color: rgb(210 210 210 / var(--tw-border-opacity));\n}\n\n.border-softest {\n  border-color: var(--grey-light);\n}\n\n.border-b-softer {\n  border-bottom-color: rgba(7, 20, 13, 0.1); /* NEW: brand-black */\n}\n\n/* ============================================\n   BACKGROUNDS - NEW EBRAINS COLORS\n   ============================================ */\n\n/* Accent backgrounds - NEW green */\n.\\!bg-accent-dark {\n  background-color: var(--brand-green-dark) !important; /* NEW: #00C87B */\n}\n\n.bg-accent {\n  background-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.bg-brand-light {\n  background-color: var(--green-200); /* light brand tint #d3ffdc — brandLight intent */\n}\n\n.bg-accent-dark {\n  background-color: var(--brand-green-dark); /* NEW: #00C87B */\n}\n\n/* Neutral backgrounds - NEW simplified greys */\n.\\!bg-darker {\n  background-color: var(--grey-dark) !important; /* NEW: #7A7B7A */\n}\n\n.bg-dark {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.bg-darker {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n/* Strong backgrounds - NEW brand-black */\n.\\!bg-strong-dark {\n  background-color: var(--brand-black) !important; /* NEW: #07140D */\n}\n\n.bg-strong {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.bg-strong-dark {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.bg-stronger {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.bg-strongest {\n  background-color: var(--brand-black); /* NEW: #07140D (was pure black) */\n}\n\n/* Overlay */\n.bg-overlay {\n  background-color: rgba(7, 20, 13, 0.25); /* NEW: brand-black overlay */\n}\n\n/* ============================================\n   PADDING\n   ============================================ */\n\n.p-12 {\n  padding: 0.75rem;\n}\n\n.p-6 {\n  padding: 0.375rem;\n}\n\n.p-8 {\n  padding: 0.5rem;\n}\n\n.\\!px-0 {\n  padding-left: 0rem !important;\n  padding-right: 0rem !important;\n}\n\n.px-12 {\n  padding-left: 0.75rem;\n  padding-right: 0.75rem;\n}\n\n.px-16 {\n  padding-left: 1rem;\n  padding-right: 1rem;\n}\n\n.px-32 {\n  padding-left: 1.5rem;\n  padding-right: 1.5rem;\n}\n\n.py-8 {\n  padding-top: 0.5rem;\n  padding-bottom: 0.5rem;\n}\n\n.py-12 {\n  padding-top: 0.75rem;\n  padding-bottom: 0.75rem;\n}\n\n.pl-2 {\n  padding-left: 0.125rem;\n}\n\n.pl-4 {\n  padding-left: 0.25rem;\n}\n\n.pl-8 {\n  padding-left: 0.5rem;\n}\n\n.pr-2 {\n  padding-right: 0.125rem;\n}\n\n.pr-4 {\n  padding-right: 0.25rem;\n}\n\n.pr-8 {\n  padding-right: 0.5rem;\n}\n\n/* ============================================\n   TEXT COLORS - NEW SYSTEM\n   ============================================ */\n\n.\\!text-current {\n  color: currentColor !important;\n}\n\n.text-accent {\n  color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.text-current {\n  color: currentColor;\n}\n\n.text-default {\n  color: var(--brand-black); /* NEW: #07140D (was pure black) */\n}\n\n.text-inverse {\n  color: var(--white);\n}\n\n.text-light {\n  color: var(--grey-dark); /* NEW: simplified to grey-dark */\n}\n\n\n.text-lightest {\n  color: var(--grey-light); /* NEW: simplified to grey-dark */\n}\n\n/* ============================================\n   OPACITY\n   ============================================ */\n\n.opacity-0 {\n  opacity: 0;\n}\n\n.opacity-20 {\n  opacity: 20;\n}\n\n/* ============================================\n   SHADOWS - NEW SYSTEM\n   ============================================ */\n\n.shadow {\n  --tw-shadow: 0 1px 3px rgba(7, 20, 13, 0.1); /* NEW: brand-black */\n  --tw-shadow-colored: 0 1px 3px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.shadow-accent {\n  --tw-shadow: 0 0 16px rgba(0, 255, 157, 0.5); /* NEW: brand-green glow */\n  --tw-shadow-colored: 0 0 16px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.underline-offset-4 {\n  text-underline-offset: 0.2em;\n}\n\n.\\@container {\n  container-type: inline-size;\n}\n\n/* ============================================\n   PSEUDO-ELEMENT EFFECTS\n   ============================================ */\n\n.after\\:effect-opacity::after {\n  transition-property: opacity;\n  transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);\n  transition-duration: 300ms;\n  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);\n}\n\n.even\\:bg-inverse-softer:nth-child(even) {\n  background-color: rgba(255, 255, 255, .15);\n}\n\n.invalid\\:text-lightest:invalid {\n  color: var(--grey-dark); /* NEW: simplified */\n}\n\n/* ============================================\n   INTERACTIVE STATES - NEW COLORS\n   ============================================ */\n\n.focus-within\\:bg-transparent:focus-within {\n  background-color: transparent;\n}\n\n/* Hover states with NEW colors */\n\n.hover\\:border-0::hover {\n  border-width: 0px;\n}\n\n.hover\\:border-accent::hover {\n  border-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.hover\\:text-default:hover {\n  color: var(--brand-black);\n}\n\n.hover\\:text-light:hover {\n  color: var(--grey-dark);\n}\n\n.hover\\:text-inverse:hover {\n  color: var(--white);\n}\n\n\n.hover\\:bg-accent:hover {\n  background-color: var(--brand-green); /* NEW: #00C87B */\n}\n\n.hover\\:bg-accent-dark:hover {\n  background-color: var(--brand-green-dark); /* NEW: #00C87B */\n}\n\n.hover\\:bg-dark:hover {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.hover\\:bg-darker:hover {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.hover\\:bg-default:hover {\n  background-color: var(--grey-light);\n}\n\n.hover\\:bg-inverse:hover {\n  background-color: var(--white);\n}\n\n.hover\\:bg-strong-dark:hover {\n  background-color: var(--brand-black); /* NEW: #07140D */\n}\n\n.hover\\:bg-transparent:hover {\n  background-color: transparent;\n}\n\n.hover\\:bg-strongest:hover {\n  background-color: var(--brand-black);\n}\n\n.hover\\:text-default:hover {\n  color: var(--brand-black); /* NEW: #07140D */\n}\n\n.hover\\:text-lighter:hover {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.hover\\:\\!underline:hover {\n  text-decoration-line: underline !important;\n}\n\n.hover\\:no-underline:hover {\n  text-decoration-line: none;\n}\n\n.hover\\:shadow-hover:hover {\n  --tw-shadow: 0 8px 24px rgba(7, 20, 13, 0.2); /* NEW: brand-black */\n  --tw-shadow-colored: 0 8px 24px var(--tw-shadow-color);\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:shadow-none:focus {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.focus\\:outline-none:focus {\n  outline: 2px solid transparent;\n  outline-offset: 2px;\n}\n\n/* ============================================\n   DISABLED STATES - NEW COLORS\n   ============================================ */\n\n.disabled\\:cursor-not-allowed:disabled {\n  cursor: not-allowed;\n}\n\n.disabled\\:bg-dark:disabled {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.disabled\\:text-lightest:disabled {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:cursor-not-allowed[aria-disabled=\"true\"] {\n  cursor: not-allowed;\n}\n\n.aria-disabled\\:\\!border-transparent[aria-disabled=\"true\"] {\n  border-color: transparent !important;\n}\n\n.aria-disabled\\:bg-dark[aria-disabled=\"true\"] {\n  background-color: var(--grey-light); /* NEW: #ECECEC */\n}\n\n.aria-disabled\\:bg-transparent[aria-disabled=\"true\"] {\n  background-color: transparent;\n}\n\n.aria-disabled\\:text-light[aria-disabled=\"true\"] {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:text-lightest[aria-disabled=\"true\"] {\n  color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n.aria-disabled\\:line-through[aria-disabled=\"true\"] {\n  text-decoration-line: line-through;\n}\n\n.aria-disabled\\:shadow-none[aria-disabled=\"true\"] {\n  --tw-shadow: 0 0 #0000;\n  --tw-shadow-colored: 0 0 #0000;\n  box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);\n}\n\n.aria-current-page\\:bg-darker[aria-current=\"page\"] {\n  background-color: var(--grey-dark); /* NEW: #7A7B7A */\n}\n\n/* ============================================\n   AFTER PSEUDO-ELEMENTS\n   ============================================ */\n\n.after\\:absolute::after {\n  position: absolute;\n}\n\n.after\\:inset-0::after {\n  inset: 0rem;\n}\n\n.after\\:inset-x-0::after {\n  left: 0rem;\n  right: 0rem;\n}\n\n.after\\:bottom-0::after {\n  bottom: 0rem;\n}\n\n.after\\:left-16::after {\n  left: 1rem;\n}\n\n.after\\:right-16::after {\n  right: 1rem;\n}\n\n.after\\:z-10::after {\n  z-index: 10;\n}\n\n.after\\:rounded-lg::after {\n  border-radius: 16px;\n}\n\n.after\\:rounded-t-lg::after {\n  border-top-left-radius: 16px;\n  border-top-right-radius: 16px;\n}\n\n.after\\:border-3::after {\n  border-width: 3px;\n}\n\n.after\\:border-b-2::after {\n  border-bottom-width: 2px;\n}\n\n.after\\:\\!border-transparent::after {\n  border-color: transparent !important;\n}\n\n.after\\:border-accent::after {\n  border-color: var(--brand-green); /* NEW: #00FF9D */\n}\n\n.after\\:border-accent-dark::after {\n  border-color: var(--brand-green-dark); /* NEW: #00FF9D */\n}\n\n.after\\:border-soft::after {\n  border-color: var(--grey-dark);\n}\n\n.after\\:border-softest::after {\n  border-color: var(--grey-light);\n}\n\n.after\\:opacity-0::after {\n  opacity: 0;\n}\n\n.after\\:content-\\[\\'\\'\\]::after {\n  --tw-content: '';\n  content: var(--tw-content);\n}\n\n.hover\\:text-accent:hover {\n  color: var(--brand-green);\n}\n\n.hover\\:after\\:\\border-accent:hover::after {\n  border-color: var(--brand-green);\n}\n\n.hover\\:after\\:\\!border-transparent:hover::after {\n  border-color: transparent !important;\n}\n\n.hover\\:after\\:opacity-100:hover::after {\n  opacity: 1;\n}\n\n.focus-visible\\:after\\:opacity-100:focus-visible::after {\n  opacity: 1;\n}\n\n.aria-disabled\\:after\\:\\!border-transparent[aria-disabled=\"true\"]::after {\n  border-color: transparent !important;\n}\n\n.aria-disabled\\:after\\:\\!border-0[aria-disabled=\"true\"]::after {\n  border-width: 0 !important;\n}\n\n.hover\\:before\\:opacity-100:hover::before {\n  opacity: 1;\n}\n\n/* ============================================\n   CTA BUTTON STYLES\n   ============================================ */\n\n/* CTA link style */\n.cta-link {\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: var(--f-ui-01-fontSize);\n  color: var(--grey-dark);\n  text-decoration: none;\n  transition: color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.25rem;\n}\n\n.cta-link:hover {\n  color: var(--brand-green);\n}\n\n/* CTA brand link style - always green */\n.cta-link-brand {\n  font-family: 'IBM Plex Mono', monospace;\n  font-size: var(--f-ui-02-fontSize);\n  color: var(--brand-green);\n  text-decoration: none;\n  transition: color 0.3s ease;\n  display: inline-flex;\n  align-items: center;\n  gap: 0.5rem;\n}\n\n.cta-link-brand:hover {\n  color: var(--brand-green-dark);\n}\n\n@media (min-width: 750px) {\n  .md\\:w-full {\n    width: 100%;\n  }\n\n  .md\\:flex {\n    display: flex;\n  }\n}";
 const EdsButtonStyle0 = edsButtonCss;
 
 const EdsButton = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.button = cva([
-            'relative items-center py-12 cursor-pointer',
+            'relative items-center cursor-pointer',
+            // Brand-green focus-visible outline (rules live in eds-button.css);
+            // without this class keyboard focus falls back to the browser ring.
+            'effect-focus',
             'aria-disabled:text-lightest aria-disabled:bg-dark aria-disabled:cursor-not-allowed',
             'disabled:text-lightest disabled:bg-dark disabled:cursor-not-allowed'
         ], {
@@ -392,6 +395,10 @@ const EdsButton = class {
                     ghost: '',
                     ghostInverse: 'text-inverse',
                     brand: 'bg-accent text-default hover:bg-strongest hover:text-inverse aria-disabled:shadow-none',
+                    // Light-green tint with brand-black text — an on-brand "unselected"
+                    // state (e.g. eds-rating / eds-nps) that brightens to solid brand on
+                    // hover/selection. Lives start-to-finish in the brand palette.
+                    brandLight: 'bg-brand-light text-default hover:bg-accent hover:text-default aria-disabled:shadow-none',
                     brandInverse: 'bg-accent text-default hover:bg-inverse hover:text-default aria-disabled:shadow-none',
                     neutral: 'bg-darker after:border-softest bg-inverse hover:bg-dark hover:text-light text-inverse aria-disabled:shadow-none',
                     cta: [
@@ -410,8 +417,8 @@ const EdsButton = class {
                     true: ''
                 },
                 size: {
-                    small: 'h-36 f-ui-02',
-                    large: 'h-44 f-ui-01'
+                    small: 'min-h-36 f-ui-02 py-8',
+                    large: 'min-h-44 f-ui-01 py-12'
                 },
                 hasIcon: {
                     true: '',
@@ -584,7 +591,7 @@ const EdsButton = class {
         const loaderBottomColor = this.intent === 'primary' || this.intent === 'secondaryInverse'
             ? '#FFFFFF' // White for dark backgrounds
             : '#07140D'; // Brand-black for light backgrounds (secondary, brand, etc.)
-        return (index.h(index.Host, { key: '6f955c89a01cf823ff8fc34bfa92df85a3aa8327' }, index.h(ElementType, { key: 'fabf5842d4c9583c7ff9e4415697c62c111dce68', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (index.h("span", { key: '746feb603fd83b54bab92e62ab9aefcd6a232f54', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && (this.intent !== 'cta' && this.intent !== 'cta-brand') ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (index.h("span", { key: 'e0f54e409080548687304bae2f5d3e1b56863318', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, index.h("span", { key: 'c2472f5d2730ef850a076471fa00c9db91496db7', class: "loader", style: {
+        return (index.h(index.Host, { key: '263f3fd25c17d5f9d8ddcfcc57848d6c8e729994' }, index.h(ElementType, { key: '9c9f68e332ca6fe14387fc239e880069596b0072', tabindex: isInteractive ? '0' : '-1', "aria-label": this.label ? undefined : this.ariaLabel, "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, disabled: this.elementType === 'button' ? this.disabled || this.loading : undefined, role: this.elementType === 'a' ? 'button' : undefined, class: `${classes || ''}`, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, this.label && (index.h("span", { key: '285a0b07089eb7ebab3bd439000ea89c454164d0', class: `${this.loading ? 'opacity-0' : ''} ${this.icon && (this.intent !== 'cta' && this.intent !== 'cta-brand') ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}`, "aria-hidden": this.loading ? 'true' : undefined }, this.label)), this.loading && (index.h("span", { key: '36da873de3be79f2cfc3e4851dadd953e17109dc', class: "absolute inset-0 flex items-center justify-center", "aria-hidden": "true" }, index.h("span", { key: '961913b2c22e6bd803c6639e617129843c877bfe', class: "loader", style: {
                 border: `3px solid ${loaderBorderColor}`,
                 borderBottomColor: loaderBottomColor
             } }))), this.icon ? (index.h("eds-icon-wrapper", { name: this.icon, size: 20, "aria-hidden": "true" })) : null)));
@@ -628,7 +635,7 @@ const EdsCardApp = class {
 };
 EdsCardApp.style = EdsCardAppStyle0;
 
-const edsCardCtaCss = ":host{display:flex;height:100%}.cta-container{height:auto;text-align:center;border-radius:16px;padding:1.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;flex-grow:1;justify-content:center}.cta-container-default{background-color:var(--brand-black);border:1px solid rgba(0, 255, 157, 0.25)}.cta-container-default .cta-title{color:var(--white)}.cta-container-default .cta-description{color:var(--grey-light)}.cta-container-default .cta-link{color:var(--grey-dark)}.cta-container-inverse{background-color:var(--white);border:1px solid rgba(0, 255, 157, 0.15)}.cta-container-inverse .cta-title{color:var(--brand-black)}.cta-container-inverse .cta-description{color:var(--grey-dark)}.cta-container-inverse .cta-link{color:var(--grey-dark)}.cta-container::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center, rgba(0, 255, 157, 0.1) 0%, transparent 50%);animation:rotate 20s linear infinite;pointer-events:none}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.cta-content{position:relative;z-index:1;width:100%}.cta-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:clamp(1.5rem, 4vw, 2rem);letter-spacing:-0.02em;margin-bottom:1rem;line-height:1.2}.cta-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;margin:0 0 1.5rem;line-height:1.6}.cta-actions{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap}.cta-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}@media (max-width: 768px){.cta-container{padding:1.5rem}.cta-title{font-size:1.25rem}.cta-description{font-size:0.875rem;margin-bottom:1rem}.cta-actions{gap:0.75rem;margin-bottom:1rem}.cta-links{gap:0.75rem}}";
+const edsCardCtaCss = ":host{display:flex;height:100%}.cta-container{height:auto;text-align:center;border-radius:16px;padding:1.5rem;position:relative;overflow:hidden;display:flex;flex-direction:column;flex-grow:1;justify-content:flex-start}.cta-container-default{background-color:var(--brand-black);border:1px solid rgba(0, 255, 157, 0.25)}.cta-container-default .cta-title{color:var(--white)}.cta-container-default .cta-description{color:var(--grey-light)}.cta-container-default .cta-link{color:var(--grey-dark)}.cta-container-inverse{background-color:var(--white);border:1px solid rgba(0, 255, 157, 0.15)}.cta-container-inverse .cta-title{color:var(--brand-black)}.cta-container-inverse .cta-description{color:var(--grey-dark)}.cta-container-inverse .cta-link{color:var(--grey-dark)}.cta-container::before{content:'';position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at center, rgba(0, 255, 157, 0.1) 0%, transparent 50%);animation:rotate 20s linear infinite;pointer-events:none}@keyframes rotate{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}.cta-content{position:relative;z-index:1;width:100%;flex-grow:1;display:flex;flex-direction:column}.cta-title{font-family:'Inter', var(--f-heading-fontFamily);font-weight:300;font-size:clamp(1.5rem, 4vw, 2rem);letter-spacing:-0.02em;margin-bottom:1rem;line-height:1.2}.cta-description{font-family:'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;font-size:1rem;margin:0 0 1.5rem;line-height:1.6}.cta-actions{display:flex;gap:1rem;justify-content:center;margin-bottom:1.5rem;flex-wrap:wrap;margin-top:auto}.cta-links{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}@media (max-width: 768px){.cta-container{padding:1.5rem}.cta-title{font-size:1.25rem}.cta-description{font-size:0.875rem;margin-bottom:1rem}.cta-actions{gap:0.75rem;margin-bottom:1rem}.cta-links{gap:0.75rem}}";
 const EdsCardCtaStyle0 = edsCardCtaCss;
 
 const EdsCardCta = class {
@@ -668,7 +675,7 @@ const EdsCardCta = class {
         const primaryButtonIntent = this.variant === 'default' ? 'brandInverse' : 'brand';
         const secondaryButtonIntent = this.variant === 'default' ? 'secondaryInverse' : 'secondary';
         const linkIntent = this.variant === 'default' ? 'cta' : 'underline';
-        return (index.h("div", { key: 'ee2163e6096ad05dc55ac40c6626236723a23b72', class: containerClasses }, index.h("div", { key: 'f51481133015ef5eafce48bab525cf166c000e3a', class: "cta-content" }, index.h("h2", { key: '577441d8bc7cb4c906408faf995e106ef2779e8b', class: "cta-title", innerHTML: this.title }), index.h("p", { key: 'b8cbcf891b95f82c3dd57f1db9335f55c1d7162c', class: "cta-description" }, this.description), index.h("div", { key: 'f167262a521b9e15176a4fc65e3e45a8cf24feb1', class: "cta-actions" }, index.h("eds-button", { key: 'f2c092d340996c87864677f94d979fe6317ef6d7', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (index.h("eds-button", { key: 'de0fe98dab48b2ab4b78a637915df48c930c4b54', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick }))), this.parsedLinks && this.parsedLinks.length > 0 && (index.h("div", { key: '842a6e794364fb50829ad422fc7699527b17e918', class: "cta-links" }, this.parsedLinks.map((link, index$1) => (index.h("eds-link", { key: index$1, label: link.label, url: link.url, intent: linkIntent }))))))));
+        return (index.h("div", { key: 'ee2163e6096ad05dc55ac40c6626236723a23b72', class: containerClasses }, index.h("div", { key: 'f51481133015ef5eafce48bab525cf166c000e3a', class: "cta-content" }, index.h("h2", { key: '577441d8bc7cb4c906408faf995e106ef2779e8b', class: "cta-title", innerHTML: this.title }), index.h("p", { key: 'b8cbcf891b95f82c3dd57f1db9335f55c1d7162c', class: "cta-description" }, this.description), index.h("div", { key: 'f167262a521b9e15176a4fc65e3e45a8cf24feb1', class: "cta-actions" }, index.h("slot", { key: 'c114de9b72bf56a2bda67d21aab0a1a24efba2e4', name: "actions" }, index.h("eds-button", { key: '75c4508fad3377ae1788bca7cda5f8315c8301a3', label: this.primaryButtonText, intent: primaryButtonIntent, icon: "arrow-right", "icon-pos": "right", size: "large", triggerClick: this.handlePrimaryClick }), this.secondaryButtonText && (index.h("eds-button", { key: '2c6de6b1032c62619b7225d3f7cbc04617fca465', label: this.secondaryButtonText, intent: secondaryButtonIntent, size: "large", triggerClick: this.handleSecondaryClick })))), this.parsedLinks && this.parsedLinks.length > 0 && (index.h("div", { key: 'a78f81632c85cb729d738b0bb533d260bc7e3727', class: "cta-links" }, this.parsedLinks.map((link, index$1) => (index.h("eds-link", { key: index$1, label: link.label, url: link.url, intent: linkIntent }))))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -689,7 +696,7 @@ const EdsCardDesc = class {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
     render() {
-        return (index.h("p", { key: 'c018c6b42e709c9e5df23ba9a999955ee4da1fdd', class: `f-body-02 ${this.intent === 'secondary' ? 'text-inverse' : 'text-default'}` }, index.h("span", { key: 'bcfb43e3940a31dc4c0ec18904e4448eb27d0580', class: this.getTruncateClass() }, this.description)));
+        return (index.h("p", { key: 'd7d9f5d40d82700388753a165a998574bd69e674', class: `f-body-02 ${this.intent === 'secondary' ? 'text-inverse' : 'text-default'}` }, index.h("span", { key: 'bff2551896e726ce02a78b448a0e3f2a3df0c697', class: this.getTruncateClass() }, this.description)));
     }
 };
 EdsCardDesc.style = EdsCardDescStyle0;
@@ -712,7 +719,7 @@ const EdsCardFeature = class {
             'feature-card',
             `feature-card-${this.variant}`
         ].join(' ');
-        return (index.h("div", { key: '315904b024e86403b00c9f0e3ebb93dafba08fa8', class: cardClasses }, this.icon && (index.h("div", { key: 'e0891b38e8321130471ae1422c96fbfe7662b01f', class: "feature-icon" }, index.h("eds-icon-wrapper", { key: '768b355daebf53d69a54166525c193505dc44d67', name: this.icon, size: 24 }))), index.h("h3", { key: 'e2486793198e51e518f24beab609a3d0186902d4', class: "feature-title" }, this.title), index.h("p", { key: '4d66d673b5733c96312cde5e1c3fd64cced5d95a', class: "feature-description" }, this.description), this.url && (index.h("eds-link", { key: 'e9123234265f259fb9b61172f2e79c7aba5f82b4', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
+        return (index.h("div", { key: 'f76c056bbca7b38892cdecf56291fe3882c9e3bb', class: cardClasses }, this.icon && (index.h("div", { key: '9e22a5f6c5e30b55c4bac84f5f11f773b1b37ab9', class: "feature-icon" }, index.h("eds-icon-wrapper", { key: '64154c38f3655cb55f14c2963a62ead699d8a533', name: this.icon, size: 24 }))), index.h("h3", { key: '99ed95a90796dbb6baa3f73cb2830fcd0954328c', class: "feature-title" }, this.title), index.h("p", { key: 'f91109a10f62a58d8b650987fbbf1a5a4f68beaa', class: "feature-description" }, this.description), this.url && (index.h("eds-link", { key: 'b94b57e5385da9db54a3767d0413349000add755', label: this.linkText, url: this.url, intent: "cta", icon: "arrow-right", "icon-pos": "right" }))));
     }
     get el() { return index.getElement(this); }
 };
@@ -796,7 +803,7 @@ const EdsCardGeneric = class {
         this.isHovered = false;
     }
     render() {
-        return (index.h("article", { key: 'eb4b42dccca0fb46bc8e51e1b6873e118796647b', class: this.articleClasses(), onClick: this.url ? () => this.handleClick() : undefined, onMouseEnter: this.url ? () => this.handleMouseEnter() : undefined, onMouseLeave: this.url ? () => this.handleMouseLeave() : undefined }, this.icon && (index.h("div", { key: '229f7daab8d8560092eb94e664c73c306b2fec19', class: "card-icon-wrapper" }, index.h("eds-icon-wrapper", { key: 'c4b76bdff72dcbe7d98a7dfea71ca8693c00094e', name: this.icon, size: 32 }))), index.h("div", { key: '45d3a9d83cf92137485bae5248c55edb56c58671', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (index.h("div", { key: '101676ed06f29e985c6bf11620a56660360ace57', class: "flex mb-12 gap-x-4" }, this.parsedTags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: tag.intent, label: tag.label, size: tag.size }))))), index.h("eds-card-title", { key: 'c901580eca3a3b8ce4c26e1c9ce5d0f9b7a11ed6', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (index.h("div", { key: '618be209087536eee2fdfd3eaa1595c6fe6d0176', class: "mt-8" }, this.description && (index.h("eds-card-desc", { key: '1aa3ea97c4371ea7510ad47e364cea27e1de0482', "truncate-lines": "3", description: this.description, intent: this.intent })))), index.h("slot", { key: '3086eeeeb29bb82d927ab82e6ce98664118b0193', name: "card" }), this.url && (index.h("div", { key: 'f1f73a07002f7d82daa0b68b15d7c5cddba9c730', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, index.h("span", { key: '86fd1e428f6553b74aa634359fad7ba3ce590844', class: "f-ui-01" }, "Learn more"), index.h("eds-icon-wrapper", { key: 'f955e10355e2726052cd2d34d888ea0effd2b362', name: this.isHovered ? 'arrow-right' : 'arrow-up-right', size: 32 }))))));
+        return (index.h("article", { key: '6efb0c2c0c3d196b9759307bb98f4bf1e12504d5', class: this.articleClasses(), onClick: this.url ? () => this.handleClick() : undefined, onMouseEnter: this.url ? () => this.handleMouseEnter() : undefined, onMouseLeave: this.url ? () => this.handleMouseLeave() : undefined }, this.icon && (index.h("div", { key: '9c29cae822923b524668da65f3e341f9626d7e95', class: "card-icon-wrapper" }, index.h("eds-icon-wrapper", { key: '104a3551d3d8b910528dd43e8a12494faf4764a0', name: this.icon, size: 32 }))), index.h("div", { key: 'cc9d326aa6e55d1ed26b73f46d5fbb8087d55bf0', class: "p-12 flex flex-col grow" }, this.parsedTags && this.parsedTags.length > 0 && (index.h("div", { key: 'f740e184ec400d6083d04e4fa99259aa061c5dbf', class: "flex mb-12 gap-x-4" }, this.parsedTags.map((tag, index$1) => (index.h("eds-tag", { key: index$1, intent: tag.intent, label: tag.label, size: tag.size }))))), index.h("eds-card-title", { key: 'e263ce9bd116857648439bf9f356fc110e048547', title: this.title, url: this.url, intent: this.intent, size: this.titleSize }), this.description && (index.h("div", { key: 'aa6687dc61c548dd52e2d2f3eb9598f85c2af0a5', class: "mt-8" }, this.description && (index.h("eds-card-desc", { key: '8b82f70b5dc513396d08affc4958d9c1040583d6', "truncate-lines": "3", description: this.description, intent: this.intent })))), index.h("slot", { key: 'ff4d0ba6184b01b80e44c78a7cccec124f2b1706', name: "card" }), this.url && (index.h("div", { key: '889b5fbaf026df0e826626020ff201d06f047cc8', class: `flex items-center justify-between mt-auto pt-16 ${this.getLearnMoreColor()}` }, index.h("span", { key: '3a5b5d603a7f3d852b5e92ba57f7214f7b9754ec', class: "f-ui-01" }, "Learn more"), index.h("eds-icon-wrapper", { key: 'de15571bd4892f72646c205b14105f328d5a596d', name: this.isHovered ? 'arrow-right' : 'arrow-up-right', size: 32 }))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -841,7 +848,7 @@ const EdsCardHero = class {
             `hero-card-${this.variant}`,
             this.url ? 'hero-card-clickable' : ''
         ].filter(Boolean).join(' ');
-        return (index.h("div", { key: '8f7c9c98becb22586f308b0065c3f9cd515a7860', class: cardClasses, onClick: () => this.handleClick() }, index.h("div", { key: '6d99fd528b9611573a5ad3548e04914f532cfa21', class: "card-category" }, this.category), index.h("div", { key: 'f117842619c7fa91b088a72d3e5405843f9b0b3f', class: "card-title" }, this.title), this.description && (index.h("div", { key: '25a110fe2f58cb77051a8a5b37ee43e616e516fd', class: "card-description" }, this.description)), this.parsedTags && this.parsedTags.length > 0 && (index.h("div", { key: 'd0ef732bf246460affb697d71496ae5ee284ff48', class: "card-tags" }, this.parsedTags.map((tag, index$1) => (index.h("span", { key: index$1, class: "card-tag" }, tag.label)))))));
+        return (index.h("div", { key: 'c92f2acc8065b4142b28ca213abbb646e61f44fc', class: cardClasses, onClick: () => this.handleClick() }, index.h("div", { key: '38b8ec832d05a4891646ac31f24d32f62c5ac2e1', class: "card-category" }, this.category), index.h("div", { key: 'd356e4651ed9d136c72c519ecb9b484570c9b3be', class: "card-title" }, this.title), this.description && (index.h("div", { key: '52afdf7988667f73d8725e6a5f5b7816d4b38b30', class: "card-description" }, this.description)), this.parsedTags && this.parsedTags.length > 0 && (index.h("div", { key: 'a50fb41278d3b98da7054e0bee52d2a98ab5d8f3', class: "card-tags" }, this.parsedTags.map((tag, index$1) => (index.h("span", { key: index$1, class: "card-tag" }, tag.label)))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -879,7 +886,7 @@ const EdsCardStat = class {
             `stat-card-${this.variant}`,
             this.url ? 'stat-card-clickable' : ''
         ].filter(Boolean).join(' ');
-        const content = (index.h("div", { key: '9934fb7c9f9014293fc4190e83b658151c8ce5a1', class: cardClasses, onClick: () => this.handleClick() }, index.h("div", { key: '22b26775310db09da96fe0d793362ff8691da554', class: "stat-number" }, this.number), index.h("div", { key: '59e5a6f0851ac2d133cdfa7fdbb160401c60ba92', class: "stat-label" }, this.label), this.description && (index.h("div", { key: '916007f86e7de06b8e7cec79fc92b422a2c66db0', class: "stat-description" }, this.description))));
+        const content = (index.h("div", { key: 'f1dadeadd1d893b7a33aa92772baf7245954f6e7', class: cardClasses, onClick: () => this.handleClick() }, index.h("div", { key: '6adb8cc68740cd2dabf0bacf0af446e1499171a8', class: "stat-number" }, this.number), index.h("div", { key: 'adc7a8ffd44bceda51fcb98f68cfc8d7e454db5f', class: "stat-label" }, this.label), this.description && (index.h("div", { key: 'f70549244277e2c08c7bd94a1d297c00655faff5', class: "stat-description" }, this.description))));
         return content;
     }
     get el() { return index.getElement(this); }
@@ -3402,7 +3409,7 @@ const EdsCodeBlock = class {
         return this.code; // Fallback if language is not provided or unsupported
     }
     render() {
-        return (index.h("div", { key: '16c785c0fbac538fb0e20c42ed613f5211bea089', class: "relative bg-strongest rounded-sm" }, index.h("div", { key: '24967e8c714dc62c2366cae6bf6a19566fdeedbf', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (index.h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (index.h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, index.h("code", { innerHTML: this.getHighlightedCode() }))), index.h("span", { key: 'd84c547a7fda762a51279462e6c33642d3ed93b1', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, index.h("eds-icon-wrapper", { key: 'e784206acb815fdb2df3f7013b32e18b42f47e0d', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), index.h("span", { key: '8f68b5adda295c370cfff19602cb8cc140d9a10d', class: "sr-only" }, "Copy Code")), this.language && (index.h("pre", { key: 'a3c42360f4a5026d8e6f5328f5ed5d8ca724c3ca', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, index.h("code", { key: '96ce7f1cf1cee401bd1a90368c56934116d97d29', innerHTML: this.getHighlightedCode() })))));
+        return (index.h("div", { key: '4d73fa52c489b6995dd8a6d83c05e323bb1f5431', class: "relative bg-strongest rounded-sm" }, index.h("div", { key: 'c0df3237009310833b417f5ede5b7c204f2752bc', class: "text-inverse flex justify-between items-center p-8" }, this.language ? (index.h("span", { class: "f-ui-03" }, this.language.toUpperCase())) : (index.h("pre", { class: "bg-stronger pl-8", role: "region", "aria-label": "Code block without language" }, index.h("code", { innerHTML: this.getHighlightedCode() }))), index.h("span", { key: '016505a0749baaa52c6e4aa77f00b4da31e7ec45', "aria-hidden": "true", class: "w-20 h-20 mt-8" }, index.h("eds-icon-wrapper", { key: '21474f1b28af95251aca639c349aaac489d8519b', name: this.copied ? 'checkmark-filled' : 'copy', onClick: () => this.copyToClipboard() })), index.h("span", { key: '64450529ad3cf3dab7e74f8455307cdb3298bbc4', class: "sr-only" }, "Copy Code")), this.language && (index.h("pre", { key: 'affcb4719ef29d7ed9ed676eab975c98ceca31fa', class: `language-${this.language} bg-stronger pl-8 pb-8`, role: "region", "aria-label": `Code block in ${this.language}` }, index.h("code", { key: '43fa1b80c2e02233076c4da15a5aa04f0b49bfc3', innerHTML: this.getHighlightedCode() })))));
     }
     get el() { return index.getElement(this); }
 };
@@ -3425,6 +3432,13 @@ const EdsDropdown = class {
             if (this.isOpen) {
                 // refresh focusables each open in case slot changed
                 this.focusableItems = Array.from(((_a = this.panelEl) === null || _a === void 0 ? void 0 : _a.querySelectorAll('a, button, [role="menuitem"]')) || []);
+                // The panel declares role="menu"; slotted links/buttons need
+                // role="menuitem" or screen readers announce an empty menu.
+                this.focusableItems.forEach((item) => {
+                    if (!item.hasAttribute('role')) {
+                        item.setAttribute('role', 'menuitem');
+                    }
+                });
                 this.focusIndex = this.focusableItems.length ? 0 : -1;
                 this.focusItem();
             }
@@ -3463,7 +3477,6 @@ const EdsDropdown = class {
         const path = (e.composedPath && e.composedPath()) || [];
         if (!path.includes(this.host)) {
             this.closeDropdown();
-            this.dropdown.emit({ expanded: false });
         }
     }
     /**
@@ -3471,12 +3484,22 @@ const EdsDropdown = class {
      * @param {KeyboardEvent} event - The keyboard event.
      */
     handleKeyDown(event) {
+        var _a;
         if (this.isOpen) {
             const key = event.key;
             switch (key) {
                 case 'Tab':
+                    // ARIA menu pattern: Tab does not walk the items — it closes
+                    // the menu and lets focus continue to the next element on the
+                    // page (no preventDefault on purpose).
                     this.closeDropdown();
-                    this.dropdown.emit({ expanded: false });
+                    break;
+                case 'Escape':
+                    // Close and hand focus back to the trigger so keyboard users
+                    // can back out without committing to a Tab.
+                    event.preventDefault();
+                    this.closeDropdown();
+                    (_a = this.buttonEl) === null || _a === void 0 ? void 0 : _a.focus();
                     break;
                 case 'ArrowUp':
                     event.preventDefault();
@@ -3488,6 +3511,16 @@ const EdsDropdown = class {
                     this.focusIndex = (this.focusIndex + 1) % this.focusableItems.length;
                     this.focusItem();
                     break;
+                case 'Home':
+                    event.preventDefault();
+                    this.focusIndex = this.focusableItems.length ? 0 : -1;
+                    this.focusItem();
+                    break;
+                case 'End':
+                    event.preventDefault();
+                    this.focusIndex = this.focusableItems.length - 1;
+                    this.focusItem();
+                    break;
             }
         }
     }
@@ -3555,51 +3588,123 @@ const EdsDropdown = class {
      * @returns {JSX.Element} The rendered dropdown component.
      */
     render() {
-        return (index.h("div", { key: '52f349afae529afc12461642abf17fcf4870ca6f', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, index.h("eds-button", { key: 'ed1f3366306f7e3d708473e14fc8de5723dba03f', label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), index.h("nav", { key: 'fb9a559a97ad866b62d4cb2a0f7f828548e24c75', ref: (el) => (this.panelEl = el), role: "menu", class: {
+        return (index.h("div", { key: '1ce4926a15ac67d653ef03de877e64be83f61b4e', class: "z-focus relative", ref: (el) => (this.dropdownContent = el) }, index.h("eds-button", { key: '8b45fc57c018dd620701b2b9db5403c30f88a6ed', ref: (el) => (this.buttonEl = el), label: this.label, "aria-label": this.ariaLabel, icon: this.icon, iconSmall: false, intent: this.intent, onClick: this.handleClick, "aria-expanded": this.isOpen.toString(), "aria-haspopup": "menu", size: "small", pill: true }), index.h("nav", { key: '35854d55ea595e35513348bf36145794b2c57007', ref: (el) => (this.panelEl = el), role: "menu", class: {
                 'shadow-small bg-inverse border-softest z-10 z-on-top absolute top-full mt-4 flex flex-col gap-y-4 border-2 p-8': true,
                 'left-4': this.dropdownPos === 'left' && this.dropdownOffset,
                 'left-0': this.dropdownPos === 'left' && !this.dropdownOffset,
                 'right-4': this.dropdownPos === 'right' && this.dropdownOffset,
                 'right-0': this.dropdownPos === 'right' && !this.dropdownOffset
-            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, index.h("slot", { key: '6205de74b039cb784bf9b104edfd6f7a03cc5ed1' }))));
+            }, style: { display: this.isOpen ? 'block' : 'none' }, "aria-label": "Dropdown", "aria-hidden": !this.isOpen }, index.h("slot", { key: 'd6b153bb5968fa958be4d96d60cce774a9a0713c' }))));
     }
     get host() { return index.getElement(this); }
 };
 EdsDropdown.style = EdsDropdownStyle0;
 
-const edsFooterCss = "p{margin:0}footer{position:relative}.cursor-pointer{cursor:pointer}.ml-4{margin-left:0.25rem}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.bg-darker{background-color:var(--grey-light)}.bg-strongest{background-color:var(--brand-black)}.border-softest{border-color:rgba(0, 0, 0, .05)}.border-inverse-softer{border-color:rgba(255, 255, 255, .15)}.border-t-2{border-top-width:2px}.pt-20{padding-top:1.25rem}.pb-28{padding-bottom:1.75rem}.grid-layout{display:grid;grid-template-columns:repeat(var(--container-grid-columns, var(--grid-columns)), 1fr);grid-gap:var(--inner-gutter)}.grid-col-span-12{--container-grid-columns:12;grid-column:span 12 / span 12}.mt-28{margin-top:1.75rem}.gap-y-12{row-gap:0.75rem}.gap-x-12{-moz-column-gap:0.75rem;column-gap:0.75rem}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.flex-wrap{flex-wrap:wrap}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.gap-20{gap:1.25rem}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--brand-green)}.effect-focus:focus-visible{outline-style:solid}.focus-visible\\:rounded-xs:focus-visible{border-radius:4px}.flex{display:flex}.w-\\[54px\\]{width:54px}.ml-0{margin-left:0rem}.order-last{order:9999}.w-full{width:100%}.h-auto{height:auto}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-light)}.text-default{color:var(--brand-black)}.text-inverse{color:var(--white)}.mt-4{margin-top:0.25rem}.mr-4{margin-right:0.25rem}.gap-12{gap:0.75rem}.inline-block{display:inline-block}.\\!no-underline{text-decoration-line:none !important}.decoration-2{text-decoration-thickness:2px}.underline-offset-4{text-underline-offset:4px}.hover\\:\\!underline:hover{text-decoration-line:underline !important}.ml-auto{margin-left:auto}.pl-12{padding-left:0.75rem}.opacity-0{opacity:0}.transition-all{transition-property:all;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.transition{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-75{transition-duration:75ms}@media (min-width: 750px){.md\\:pt-28{padding-top:1.75rem}}@media (min-width: 900px){.lg\\:grid-col-span-5{--container-grid-columns:5;grid-column:span 5 / span 5}.lg\\:grid-col-span-6{--container-grid-columns:6;grid-column:span 6 / span 6}.lg\\:grid-col-start-7{grid-column-start:7}.lg\\:mt-0{margin-top:0rem}.lg\\:flex-nowrap{flex-wrap:nowrap}.lg\\:order-none{order:0}.lg\\:w-auto{width:auto}}@media (min-width: 1024px){.xl\\:pb-40{padding-bottom:2.5rem}}";
+const edsFooterCss = ":host{display:block}p{margin:0}ul{list-style:none;padding:0;margin:0}.eds-footer-root{position:relative;padding:4rem 4rem 2rem;border-top:1px solid rgba(0, 0, 0, 0.06);font-family:var(--f-ui-02-fontFamily)}.eds-footer-root.theme-inverse{background-color:var(--brand-black, #000000);color:var(--grey-light, rgba(255, 255, 255, 0.7));border-top-color:rgba(255, 255, 255, 0.06)}.eds-footer-root.theme-default{background-color:var(--white, #ffffff);color:var(--grey-dark, #4b5563);border-top-color:rgba(0, 0, 0, 0.06)}.footer-container{max-width:1400px;margin:0 auto}.footer-grid{display:grid;grid-template-columns:2fr repeat(3, 1fr);gap:4rem;margin-bottom:4rem}.footer-brand-row{display:flex;align-items:center;gap:1rem}.footer-flag-link{display:inline-block;width:54px;flex-shrink:0;border-radius:4px}.footer-flag-link:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px}.footer-flag-svg{height:auto;width:100%;display:block}.footer-funded{font-size:0.875rem;line-height:1.6;max-width:300px}.theme-inverse .footer-funded{color:var(--grey-dark, rgba(255, 255, 255, 0.55))}.theme-default .footer-funded{color:var(--grey-dark, #4b5563)}.footer-copyright{font-size:0.875rem;margin-top:0.75rem}.theme-inverse .footer-copyright{color:var(--grey-dark, rgba(255, 255, 255, 0.55))}.theme-default .footer-copyright{color:var(--grey-dark, #4b5563)}.footer-column-heading{font-size:0.8125rem;font-weight:500;margin:0 0 1.5rem 0}.theme-inverse .footer-column-heading{color:var(--white, #ffffff)}.theme-default .footer-column-heading{color:var(--brand-black, #111827)}.footer-column-list li{margin-bottom:0.75rem}.footer-column-list li:last-child{margin-bottom:0}.footer-link,.footer-text-item{font-size:0.875rem;text-decoration:none;transition:color 0.3s ease}.footer-link{cursor:pointer}.theme-inverse .footer-link,.theme-inverse .footer-text-item{color:var(--grey-dark, rgba(255, 255, 255, 0.55))}.theme-default .footer-link,.theme-default .footer-text-item{color:var(--grey-dark, #4b5563)}.footer-link:hover{color:var(--brand-green)}.footer-link:focus-visible{outline:2px solid var(--brand-green);outline-offset:2px;border-radius:2px}.footer-social{padding-bottom:2rem;margin-bottom:2rem}.theme-inverse .footer-social{border-bottom:1px solid rgba(255, 255, 255, 0.06)}.theme-default .footer-social{border-bottom:1px solid rgba(0, 0, 0, 0.06)}.footer-back-to-top{position:absolute;top:1.5rem;right:2rem;opacity:0;transition:opacity 75ms cubic-bezier(0.4, 0, 0.2, 1)}@media (max-width: 1200px){.footer-grid{grid-template-columns:repeat(2, 1fr);gap:3rem}}@media (max-width: 768px){.eds-footer-root{padding:3rem 2rem 2rem}.footer-grid{grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}.footer-funded{max-width:none}}";
 const EdsFooterStyle0 = edsFooterCss;
 
+/**
+ * EBRAINS-wide default link columns. Used when a consumer doesn't pass
+ * the `columns` prop. URLs are absolute so the same footer renders
+ * correctly from any app's domain (handbook.ebrains.eu, forms.ebrains.eu,
+ * design.ebrains.eu, …) — the previous eds-docs design used relative
+ * paths which only worked from design.ebrains.eu itself.
+ *
+ * If EBRAINS adds / renames a canonical resource, change it here once
+ * and every consumer's footer updates on the next component release.
+ */
+const DEFAULT_COLUMNS = [
+    {
+        heading: 'Resources',
+        links: [
+            { label: 'Documentation', href: 'https://design.ebrains.eu/get-started/', external: true },
+            { label: 'Components', href: 'https://design.ebrains.eu/ui-components/', external: true },
+            { label: 'Foundations', href: 'https://design.ebrains.eu/foundations/', external: true },
+            { label: 'Analytics', href: 'https://design.ebrains.eu/analytics/', external: true },
+        ],
+    },
+    {
+        heading: 'Community',
+        links: [
+            { label: 'GitLab', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/', external: true },
+            { label: 'Storybook', href: 'https://storybook.design.ebrains.eu', external: true },
+            { label: 'Report Issues', href: 'https://gitlab.ebrains.eu/ri/tech-hub/ebrains-ui-ecosystem/-/issues', external: true },
+            { label: 'Contribute', href: 'https://design.ebrains.eu/get-started/contributing/', external: true },
+        ],
+    },
+    {
+        heading: 'Legal',
+        links: [
+            { label: 'MIT License' },
+            { label: 'Cookie Preferences', action: 'cookies' },
+        ],
+    },
+];
 const EdsFooter = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
         this.cookies = index.createEvent(this, "cookies", 7);
-        /**
-         * Scrolls the page smoothly back to the top.
-         * Called when the "Back to top" button is clicked.
-         * @private
-         */
         this.backToTop = () => {
             window.scrollTo({ top: 0, behavior: 'smooth' });
         };
+        this.emitCookies = () => {
+            this.cookies.emit('toggle');
+        };
         this.social = false;
-        this.variant = 'default';
+        this.variant = 'inverse';
         this.enableScrollTop = false;
         this.fundedBy = 'EBRAINS is funded by the Horizon Europe Framework Programme.';
         this.rightsReserved = `${new Date().getFullYear()} EBRAINS. All rights reserved.`;
-        this.cookiesPreferences = 'Cookies preferences';
+        this.cookiesPreferences = 'Cookie Preferences';
         this.enableCookiesSettings = false;
         this.backToTopAriaLabel = 'Back to Top';
-        this.showMatomoNotice = false;
+        this.columns = undefined;
+        this.resolvedColumns = DEFAULT_COLUMNS;
+    }
+    componentWillLoad() {
+        this.resolvedColumns = this.parseColumns(this.columns);
+    }
+    onColumnsChange(value) {
+        this.resolvedColumns = this.parseColumns(value);
+    }
+    /**
+     * Resolve the `columns` prop to a usable array.
+     *   - undefined / null   → defaults
+     *   - JSON-parseable str → parsed array
+     *   - already an array   → used as-is
+     *   - anything else (malformed JSON, wrong shape) → defaults + console warning
+     *
+     * Defensive parsing so a typo in a Hugo template's attribute doesn't
+     * render an empty footer in production. Failure logs a warning but
+     * keeps the footer working with sensible defaults.
+     */
+    parseColumns(value) {
+        if (value === undefined || value === null || value === '')
+            return DEFAULT_COLUMNS;
+        if (Array.isArray(value))
+            return value;
+        if (typeof value === 'string') {
+            try {
+                const parsed = JSON.parse(value);
+                if (Array.isArray(parsed))
+                    return parsed;
+                console.warn('eds-footer: `columns` JSON parsed but is not an array; using defaults');
+                return DEFAULT_COLUMNS;
+            }
+            catch (e) {
+                console.warn('eds-footer: failed to parse `columns` JSON, using defaults', e);
+                return DEFAULT_COLUMNS;
+            }
+        }
+        return DEFAULT_COLUMNS;
     }
     componentDidLoad() {
         var _a;
         this.backBtn = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector('#toTop');
     }
     handleScroll() {
-        if (!this.backBtn) {
+        if (!this.backBtn)
             return;
-        }
         const shouldShow = window.scrollY > 100 && document.body.scrollHeight > window.innerHeight;
         this.backBtn.style.opacity = shouldShow ? '1' : '0';
         this.backBtn.style.pointerEvents = shouldShow ? 'auto' : 'none';
@@ -3609,26 +3714,40 @@ const EdsFooter = class {
             btn.setAttribute('tabindex', shouldShow ? '0' : '-1');
         }
     }
-    toggleCookiesConsent() {
-        this.cookies.emit('toggle');
-    }
     /**
-     * Renders the footer component with optional sections and elements,
-     * including social network links, a Horizon Europe funding acknowledgment, and
-     * legal links such as "Cookies Preferences" and copyright information.
+     * Render one link inside a column.
+     *   - `action: 'cookies'` → button-like anchor that fires the cookies event
+     *   - `href` present      → real anchor (target=_blank when `external`)
+     *   - neither             → plain text span (e.g. "MIT License")
      */
+    renderLink(link, index$1) {
+        if (link.action === 'cookies') {
+            if (!this.enableCookiesSettings)
+                return null;
+            return (index.h("li", { key: `cookies-${index$1}` }, index.h("a", { href: "javascript:void(0)", class: "footer-link", onClick: this.emitCookies, role: "button" }, this.cookiesPreferences || link.label)));
+        }
+        if (link.href) {
+            const external = link.external === true;
+            return (index.h("li", { key: `${link.label}-${index$1}` }, index.h("a", Object.assign({ class: "footer-link", href: link.href }, (external ? { target: '_blank', rel: 'noopener noreferrer' } : {})), link.label)));
+        }
+        return (index.h("li", { key: `text-${index$1}` }, index.h("span", { class: "footer-text-item" }, link.label)));
+    }
     render() {
         const year = new Date().getFullYear();
         const rights = this.rightsReserved || `${year} EBRAINS. All rights reserved.`;
         const isInverse = this.variant === 'inverse';
-        const footerClasses = isInverse ? 'bg-strongest text-inverse' : '';
-        const borderClasses = isInverse ? 'border-inverse-softer' : 'border-softest';
-        const textClasses = isInverse ? 'text-inverse' : 'text-default';
-        return (index.h("footer", { key: 'ffe47afda9981e367f24d2525a5b21e96f4f3d10', class: footerClasses }, this.social ? (index.h("div", { class: `${borderClasses} border-t-2 pt-20 md:pt-28` }, index.h("div", { class: "container pb-20" }, index.h("div", { class: "grid-layout" }, index.h("div", { class: "grid-col-span-12 lg:grid-col-span-5" }, index.h("eds-social-networks", { class: "mt-28", variant: this.variant })))))) : null, index.h("div", { key: '2e884f06ca55ea5837aabfd7d726a79b72365ab3', class: `${borderClasses} ${this.social ? 'border-t-2' : ''} pb-28 pt-20 md:pt-28` }, index.h("div", { key: 'f601602dd39c564ce77d978325cbacaa752bd5f0', class: "container flex items-center gap-20 lg:flex-nowrap" }, index.h("div", { key: '94d6bf12bca8a37560124de2a9114a4566494883', class: "flex items-center gap-x-12" }, index.h("a", { key: '8c9bf0a41cce7e043311b39c6418d2dc3541694f', target: "_blank", rel: "noopener noreferrer", class: "effect-focus focus-visible:rounded-xs flex w-[54px] ml-0", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, index.h("svg", { key: '5d0c96911aa0069dd7c0ef6a5690d5ac59dbc737', class: "h-auto w-full", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: 'bab3fd3f37857e99c2a525b7a9553d4c706d247c', d: "M0 0h640v480H0V0z", fill: "#039" }), index.h("path", { key: 'e77d6f1fc21f36083196adcb4f6b7a3e70105b0f', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" })))), index.h("div", { key: '3057a627d8cc6e524f6381f21bb34b549d45021f' }, index.h("div", { key: 'd6397eaa434f15d415bff0c5171b4f71295dabc3', class: `f-ui-02 ${textClasses}` }, index.h("p", { key: 'cc9e370cd5b4238fcd76bc8f1f84c54af2873bab' }, this.fundedBy), index.h("div", { key: '9af9a16cf3cc6fc4223c1b5eac13f96894b92962', class: "mt-4 flex flex-wrap gap-12 lg:flex-nowrap inline-block" }, index.h("span", { key: 'e86c83c7504f60831dc9d4239b3e2b551b2765b6', class: "effect-focus !no-underline decoration-2 underline-offset-4 hover:!underline mr-4" }, "\u00A9 ", rights), this.enableCookiesSettings ? (index.h("eds-link", { label: this.cookiesPreferences, intent: "underline", size: "small", onClick: () => {
-                this.toggleCookiesConsent();
-            } })) : null))), index.h("div", { key: 'd2dcb8a3a99c5aa368d6d710e125e3a9f8fefd25', class: "ml-auto pl-12" }, this.enableScrollTop ? (index.h("div", { id: "toTop", class: "transition-all transition duration-75 opacity-0" }, index.h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null)))));
+        // Class hooks driven by variant — the CSS file styles each
+        // selector independently rather than relying on prop-based
+        // inline styles, so theme tokens stay overridable from outside
+        // via the host's CSS custom properties.
+        const rootClasses = ['eds-footer-root', isInverse ? 'theme-inverse' : 'theme-default']
+            .join(' ');
+        return (index.h("footer", { key: 'b09063376e3bd78845302473a96884bd473cea09', class: rootClasses }, this.social ? (index.h("div", { class: "footer-social" }, index.h("div", { class: "footer-container" }, index.h("eds-social-networks", { variant: this.variant })))) : null, index.h("div", { key: '3aeb8f496bb4c3c73da907ba9b9fbb72841be213', class: "footer-container" }, index.h("div", { key: 'e7e33ce7dee8079a9aff17d45963dfaff9576121', class: "footer-grid" }, index.h("div", { key: 'e6fc738e086774e114c5ceef1b82fea2e2840990', class: "footer-brand" }, index.h("div", { key: '96f7030269174c122ffe0117897a79b00020dd29', class: "footer-brand-row" }, index.h("a", { key: '5967c33efff435ceee2a45c21cae67749b91b9ba', target: "_blank", rel: "noopener noreferrer", class: "footer-flag-link", href: "https://research-and-innovation.ec.europa.eu/funding/funding-opportunities/funding-programmes-and-open-calls/horizon-europe_en", "aria-label": "Learn about Horizon Europe funding" }, index.h("svg", { key: '3de7debe64d431152e47a4daefb7c9facf7bf951', class: "footer-flag-svg", width: "63", height: "50", viewBox: "0 0 640 480", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("path", { key: '50e3f0c5ae41e3e7cc5689ddf01a8944a6c5d2eb', d: "M0 0h640v480H0V0z", fill: "#039" }), index.h("path", { key: '2c0f61e6de734d7214accd10cefd3a39e31f36a1', d: "M325.032 93.15l17.513-.398-14.401 9.972 5.789 16.53L320 108.639l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.396L320 76.374l5.032 16.775zm0 284.444l17.513-.398-14.401 9.972 5.789 16.53L320 393.083l-13.933 10.615 5.789-16.531-14.399-9.97 17.51.397L320 360.818l5.032 16.776zm-147.25-158.983l5.029 16.761 17.511-.397-14.4 9.969 5.79 16.533-13.933-10.616-13.932 10.616 5.788-16.531-14.401-9.971 17.511.397 5.028-16.761.004-.015.001.003.001-.003.003.015zm77.885-105.334l17.511-.397-14.401 9.971 5.79 16.531-13.932-10.614-13.933 10.615 5.788-16.531-14.4-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.032 16.775zm-52.729 52.729l17.511-.398h.002l-14.402 9.971 5.79 16.531-13.933-10.615-13.932 10.615 5.789-16.532-14.4-9.97 17.51.397 5.033-16.776 5.032 16.777zm-5.001 125.803l5.027 16.759 17.513-.397-14.401 9.971 5.79 16.531-.005-.005.003.006-13.932-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.396 5.029-16.759.004-.016v.003l.002-.003.003.016zm51.445 47.71l5.027 16.76 17.513-.397-14.401 9.97 5.791 16.532-.004-.004.002.004-13.933-10.615-13.933 10.615 5.788-16.532-14.398-9.97 17.51.397 5.029-16.76.004-.016v.003l.002-.003.003.016zm217.873-104.147l17.511-.397-14.401 9.969 5.79 16.533-13.934-10.616-13.931 10.616 5.789-16.533-14.399-9.969 17.509.397 5.034-16.776 5.032 16.776zm-63.958-95.997l-5.786-16.522 14.401-9.972-17.511.398-5.033-16.778-5.034 16.777-17.51-.398 14.4 9.972-5.789 16.53 13.932-10.614 13.934 10.614-.004-.007zm38.797 42.122l13.934 10.614-.004-.007-5.787-16.524 14.401-9.971-17.51.399-5.033-16.778-5.033 16.777-17.51-.398h-.001l14.399 9.972-5.787 16.529 13.931-10.613zm5.007 127.071l17.51-.397-14.4 9.971 5.79 16.531-13.933-10.614-13.932 10.615 5.788-16.531-14.401-9.971h.005l-.003-.001 17.51.397 5.033-16.775 5.033 16.775zm-51.446 47.711l17.511-.397-14.4 9.97 5.79 16.532-13.933-10.615-13.933 10.615 5.789-16.531-14.401-9.971h.002l17.51.397 5.033-16.776 5.032 16.776z", fill: "#FC0" }))), index.h("p", { key: '9ff8e10db0e213754bfc73bcce1b3dd36bc62e30', class: "footer-funded" }, this.fundedBy)), index.h("p", { key: 'a24c4fbfe48c4c3c8d076f24da9c84b739a982d8', class: "footer-copyright" }, "\u00A9 ", rights)), this.resolvedColumns.map((col, ci) => (index.h("div", { class: "footer-column", key: `col-${ci}` }, index.h("h4", { class: "footer-column-heading" }, col.heading), index.h("ul", { class: "footer-column-list" }, (col.links || []).map((link, li) => this.renderLink(link, li)))))))), this.enableScrollTop ? (index.h("div", { id: "toTop", class: "footer-back-to-top" }, index.h("eds-button", { id: "backToTop", "aria-label": this.backToTopAriaLabel, intent: isInverse ? 'ghostInverse' : 'ghost', size: "large", icon: "chevron-up", onClick: this.backToTop, tabindex: "-1" }))) : null));
     }
     get el() { return index.getElement(this); }
+    static get watchers() { return {
+        "columns": ["onColumnsChange"]
+    }; }
 };
 EdsFooter.style = EdsFooterStyle0;
 
@@ -3761,7 +3880,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);
@@ -3828,6 +3948,46 @@ isFieldVisible) {
     return { errors, hasError };
 }
 
+/**
+ * safeInlineFormat — the single, audited text→HTML formatter used everywhere a
+ * form renders author-supplied text via innerHTML (form/step description, Text
+ * Blocks, and field messages).
+ *
+ * SECURITY: escape-first, then a tiny whitelisted inline subset. Because all of
+ * &, <, >, " are turned into entities BEFORE any markup is generated, author
+ * text can never inject a tag or attribute — the only HTML produced is the
+ * <strong>, <a> and <br> emitted here. Links are restricted to http/https/mailto
+ * (others fall back to plain text), URLs cannot contain whitespace or a quote,
+ * and external links get rel="noopener noreferrer".
+ *
+ * DO NOT reorder: escaping MUST happen before tag generation, or the guarantee
+ * breaks. Keep this in sync with the JS mirror in
+ * apps/live/forms-app/src/utils/descriptionFormat.ts.
+ *
+ *   **bold**       → <strong>bold</strong>
+ *   [label](url)   → <a href="url" …>label</a>   (http/https/mailto only)
+ *   newline        → <br>
+ */
+function safeInlineFormat(text) {
+    if (!text) {
+        return '';
+    }
+    let s = String(text)
+        .replace(/&/g, '&amp;')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;');
+    // bold
+    s = s.replace(/\*\*([^*]+)\*\*/g, '<strong>$1</strong>');
+    // links — safe schemes only; otherwise drop to the plain label
+    s = s.replace(/\[([^\]]+)\]\(([^)\s]+)\)/g, (_m, label, url) => /^(https?:|mailto:)/i.test(url)
+        ? `<a href="${url}" target="_blank" rel="noopener noreferrer" class="eds-desc-link">${label}</a>`
+        : label);
+    // newlines → line breaks
+    s = s.replace(/\n/g, '<br>');
+    return s;
+}
+
 /**
  * Validates a field based on its type and returns an array of error messages.
  * @param field - The field configuration object.
@@ -3862,7 +4022,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-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}}.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}.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 = class {
@@ -4050,7 +4210,20 @@ const EdsForm = class {
         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)) {
@@ -4345,29 +4518,53 @@ const EdsForm = class {
         return map;
     }
     renderField(field) {
-        var _a, _b, _c, _d;
+        var _a, _b, _c, _d, _e, _f, _g;
         if (!this.isFieldVisible(field)) {
             return null;
         }
+        // 0) Presentational "Text Block" — static formatted text, NOT an input.
+        // It has no value, is never added to the submission (makeFormData only
+        // iterates this.values) and is never validated (see formValidators). The
+        // text runs through formatDescription, which escapes HTML first, so author
+        // content can never inject markup — only the **bold**/[link]/newline subset.
+        if (field.type === 'content') {
+            const raw = ((_b = (_a = field.content) !== null && _a !== void 0 ? _a : field.label) !== null && _b !== void 0 ? _b : '');
+            return (index.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 (index.h("div", { class: "form-group rating-field", key: field.name }, index.h("div", { class: "flex justify-between" }, field && (index.h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), index.h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), index.h("div", { class: "mt-6" }, index.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 (index.h("div", { class: "form-group rating-field", key: field.name }, index.h("div", { class: "flex justify-between" }, field && (index.h("eds-input-label", { name: `rating-${field.name}`, label: field.label, disabled: field.disabled, required: field.required }))), index.h("eds-rating", { id: `rating-${field.name}`, "rating-type": field.ratingType, "rating-count": field.ratingCount, "selected-rating": val, onRating: (e) => this.handleRating(e, field) }), index.h("div", { class: "mt-6" }, index.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 (index.h("div", { class: "form-group nps-field", key: field.name }, index.h("div", { class: "flex justify-between" }, field && (index.h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), index.h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), index.h("div", { class: "mt-6" }, index.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 (index.h("div", { class: "form-group nps-field", key: field.name }, index.h("div", { class: "flex justify-between" }, field && (index.h("eds-input-label", { name: `nps-${field.name}`, label: field.question, disabled: field.disabled, required: field.required }))), index.h("eds-nps", { id: `nps-${field.name}`, "right-label": field.rightLabel, "left-label": field.leftLabel, "selected-value": val, onNps: (e) => this.handleNPS(e, field) }), index.h("div", { class: "mt-6" }, index.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 (index.h("eds-search-select", { key: field.name, name: field.name, label: field.label, source: field.source, options: field.options, multiple: !!field.multiple, "api-base": field.apiBase || '/api/v1', placeholder: field.placeholder, required: field.required, disabled: field.disabled, hint: field.hint, message: field.message, error: !!this.errors[field.name], "error-message": (_e = this.errors[field.name]) === null || _e === void 0 ? void 0 : _e.join('<br/>'), value: this.values[field.name], onEdsinput: (e) => this.handleInput(e, field), onEdschange: (e) => this.handleChange(e, field) }));
         }
         else if (field.type === 'kg-web-service') {
-            return (index.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 (index.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 (index.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 (index.h("eds-input-field", { key: field.name, name: field.name, label: field.label, placeholder: field.placeholder, type: field.type, value: this.values[field.name], required: field.required, hint: field.hint, message: field.message, link: field.link, error: !!this.errors[field.name], errorMessage: (_g = this.errors[field.name]) === null || _g === void 0 ? void 0 : _g.join('<br/>'), options: field.options, onInput: (e) => this.handleInput(e, field), onChangeNative: (e) => this.handleChange(e, field) }));
     }
     async getData() {
         return this.makeFormData();
     }
+    /**
+     * Render the form/step description with a small, safe subset of inline
+     * formatting so authors can add links and emphasis:
+     *   **bold**            → <strong>
+     *   [label](url)        → <a> (only http/https/mailto; others render as text)
+     *   blank line / \n     → paragraph / line break
+     * HTML is escaped FIRST, so author text can never inject markup — only the
+     * whitelisted patterns above produce tags.
+     */
+    formatDescription(text) {
+        return safeInlineFormat(text);
+    }
     render() {
         const hiddenFields = this.parsedFields.filter((field) => field.type === 'hidden');
         //const otherFields = this.parsedFields.filter((field) => field.type !== 'hidden');
@@ -4383,9 +4580,9 @@ const EdsForm = class {
         else if (this.formStyle === 'brand') {
             styleClasses = 'bg-inverse form-brand relative rounded-xs p-32';
         }
-        return (index.h("form", { key: '5e58460e52950974cdf11001123f9ffb23dc659e', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, index.h("div", { key: 'ff3a33e3a8d311c86712daa68c80aac767d82a9b', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (index.h("span", { key: 'b1f363c03074f944a8f60387a40cef6fa791b188', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && index.h("span", { key: '7a9b5ea5451cf59ac47ec81dd1a44c7c9e6326a3', class: "f-body-02 text-light" }, this.description), index.h("slot", { key: '1e50a245fa37b73149a22308fda4039051d4639c' })), hiddenFields.map((field, index$1) => (index.h("eds-input", { key: index$1, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
+        return (index.h("form", { key: '5717a276eb4bcb1b40bb6c3a3d68e2372ccf0b37', class: styleClasses, ref: (el) => (this.formEl = el), autocomplete: "on", onSubmit: this.handleSubmit }, index.h("div", { key: '8e9fec59b6cafccabbb67381a12541f12201cc48', class: "flex flex-col gap-y-20 overflow-visible" }, this.title && (index.h("span", { key: 'f47c68db954de63773257f9c898141be27278a00', role: "heading", class: "f-heading-05 pb-4 block" }, this.title)), this.description && index.h("span", { key: '4287bb5f9c31cf5d3953a032de4a8c269e1feb7e', class: "f-body-02 text-light", innerHTML: this.formatDescription(this.description) }), index.h("slot", { key: 'e9e52696eab6477354ac5ee6cbe08399483b1b37' })), hiddenFields.map((field, index$1) => (index.h("eds-input", { key: index$1, type: "hidden", name: field.name, value: field.value }))), this.parsedGroups
             .filter((g) => Array.isArray(buckets[g.id]) && buckets[g.id].length > 0)
-            .map((g) => (index.h("div", { class: "mt-32", key: g.id }, index.h("span", { class: "f-body-02" }, index.h("b", null, g.title)), index.h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), index.h("div", { key: '6cd08f342c0f9004d10628827720cb641339fcd5', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (index.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 && (index.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 && (index.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) => (index.h("div", { class: "mt-32", key: g.id }, index.h("span", { class: "f-body-02" }, index.h("b", null, g.title)), index.h("div", { class: "border-group mt-32 mb-32 flex flex-col gap-y-24" }, buckets[g.id].map((f) => this.renderField(f)))))), index.h("div", { key: '22d248217ea85d68e2be652ddcbfd13ed4775934', class: "flex flex-col mt-32 gap-y-24" }, buckets['__ungrouped'].map((f) => this.renderField(f))), (this.formBtn || this.clearBtn) && (index.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 && (index.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 && (index.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) }))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -4478,7 +4675,7 @@ const EdsFullscreenMenu = class {
 };
 EdsFullscreenMenu.style = EdsFullscreenMenuStyle0;
 
-const edsGlobalSearchCss = ":host{display:block;width:100%}p{margin:0}ol,ul,menu{list-style:none;margin:0;padding:0}.search-wrapper{position:relative;width:100%}.search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12),\n    0 2px 8px rgba(0, 0, 0, 0.08),\n    0 0 0 1px rgba(0, 255, 157, 0.08);max-height:500px;overflow:hidden;z-index:9999;display:flex;flex-direction:column;animation:dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1)}.dropdown-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#616161;font-size:14px}.dropdown-results{list-style:none;margin:0;overflow-y:auto;overflow-x:hidden;max-height:440px}.result-item{padding:7px 7px;cursor:pointer;border-left:4px solid transparent;margin-bottom:2px;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;word-wrap:break-word;word-break:break-word}.result-item:hover,.result-item--selected{background:linear-gradient(\n    90deg,\n    rgba(0, 255, 157, 0.08) 0%,\n    rgba(0, 255, 157, 0.03) 100%\n  );border-left-color:var(--green-600);box-shadow:0 2px 8px rgba(0, 255, 157, 0.15)}.result-item:hover .result-title,.result-item--selected .result-title{color:var(--green-700)}.result-title{color:var(--black);transition:color 0.2s ease}.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.result-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.result-badge{display:inline-block;padding:3px 8px;background:rgba(0, 255, 157, 0.12);color:var(--green-800);border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:all 0.2s ease}.result-item:hover .result-badge,.result-item--selected .result-badge{background:rgba(0, 255, 157, 0.2);color:var(--green-900)}.result-url{font-size:12px;color:var(--grey-600)}.external-icon{display:inline-block;width:14px;height:14px;margin-left:4px;color:var(--green-600)}.result-snippet{font-size:13px;color:#616161;line-height:1.5;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color 0.2s ease}.result-item:hover .result-snippet,.result-item--selected .result-snippet{color:#424242}.dropdown-footer{border-top:1px solid rgba(0, 255, 157, 0.15);padding:10px 16px;background:linear-gradient(\n    180deg,\n    rgba(0, 255, 157, 0.02) 0%,\n    rgba(0, 255, 157, 0.05) 100%\n  );flex-shrink:0}.footer-hint{font-size:11px;color:#616161;display:flex;align-items:center;gap:6px;flex-wrap:wrap}kbd{display:inline-block;padding:3px 7px;font-size:11px;font-family:monospace;line-height:1.2;font-weight:500;color:var(--green-700);background:rgba(0, 255, 157, 0.1);border:1px solid rgba(0, 200, 123, 0.3);border-radius:4px;box-shadow:0 2px 0 rgba(0, 255, 157, 0.15),\n    inset 0 1px 0 rgba(255, 255, 255, 0.5)}.dropdown-results::-webkit-scrollbar{width:8px}.dropdown-results::-webkit-scrollbar-track{background:rgba(0, 255, 157, 0.05);border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb{background:#33FFB8;border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb:hover{background:#00FF9D}.flex{display:flex}.inline-flex{display:inline-flex}.text-center{text-align:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-error{color:var(--red-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-4{margin-left:0.25rem}.ml-8{margin-left:0.5rem}.ml-16{margin-left:1rem}.p-16{padding:1rem}.p-64{padding:4rem}.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-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}";
+const edsGlobalSearchCss = ":host{display:block;width:100%}p{margin:0}ol,ul,menu{list-style:none;margin:0;padding:0}.search-wrapper{position:relative;width:100%}.search-pill{display:flex;align-items:center;gap:12px;height:48px;padding:0 18px;border-radius:999px;font-family:var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);font-size:15px;cursor:text;transition:background 120ms ease, box-shadow 120ms ease, color 120ms ease}.search-pill .search-icon{flex-shrink:0}.search-pill .search-input{flex:1;min-width:0;border:0;background:transparent;outline:none;font:inherit;color:inherit;-webkit-appearance:none;appearance:none}.search-pill .search-input::-webkit-search-cancel-button{-webkit-appearance:none}.search-pill .search-kbd{flex-shrink:0;font-family:'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;font-size:11px;font-weight:500;line-height:1;padding:3px 6px;border-radius:4px;box-shadow:inset 0 -1px 0 rgba(0, 0, 0, 0.05);letter-spacing:0.02em}.search-pill:focus-within .search-kbd{display:none}.search-pill .search-clear{flex-shrink:0;width:22px;height:22px;display:inline-flex;align-items:center;justify-content:center;padding:0;margin:0;border:0;border-radius:999px;background:transparent;color:inherit;cursor:pointer;opacity:0.7;transition:opacity 120ms ease, background 120ms ease}.search-pill .search-clear:hover{opacity:1;background:rgba(0, 0, 0, 0.06)}.search-pill .search-clear:focus-visible{outline:none;box-shadow:0 0 0 2px var(--brand-green, #00C87B);opacity:1}.search-pill--black .search-clear:hover{background:rgba(255, 255, 255, 0.10)}.search-pill--gray{background:var(--grey-light, #ECECEC);color:var(--grey-dark, #7A7B7A);border:0}.search-pill--gray:hover{background:#E0E0E0}.search-pill--gray .search-input{color:var(--brand-black, #07140D)}.search-pill--gray .search-input::placeholder{color:var(--grey-dark, #7A7B7A)}.search-pill--gray .search-kbd{color:var(--grey-dark, #7A7B7A);background:var(--white, #FFFFFF);border:1px solid #DCDCDC}.search-pill--gray:focus-within{background:var(--white, #FFFFFF);box-shadow:0 0 0 2px var(--brand-green, #00C87B)}.search-pill--white{background:var(--white, #FFFFFF);color:var(--grey-dark, #7A7B7A);border:1px solid var(--grey-light, #ECECEC)}.search-pill--white:hover{background:#FAFAFA}.search-pill--white .search-input{color:var(--brand-black, #07140D)}.search-pill--white .search-input::placeholder{color:var(--grey-dark, #7A7B7A)}.search-pill--white .search-kbd{color:var(--grey-dark, #7A7B7A);background:var(--grey-light, #ECECEC);border:1px solid #DCDCDC}.search-pill--white:focus-within{background:var(--white, #FFFFFF);box-shadow:0 0 0 2px var(--brand-green, #00C87B)}.search-pill--black{background:var(--brand-black, #07140D);color:rgba(255, 255, 255, 0.7);border:1px solid rgba(255, 255, 255, 0.12)}.search-pill--black:hover{background:#11221A}.search-pill--black .search-input{color:var(--white, #FFFFFF)}.search-pill--black .search-input::placeholder{color:rgba(255, 255, 255, 0.55)}.search-pill--black .search-kbd{color:rgba(255, 255, 255, 0.75);background:rgba(255, 255, 255, 0.08);border:1px solid rgba(255, 255, 255, 0.15)}.search-pill--black:focus-within{background:var(--brand-black, #07140D);box-shadow:0 0 0 2px var(--brand-green, #00C87B)}.search-dropdown{position:absolute;top:calc(100% + 8px);left:0;right:0;background:white;border:1px solid #e0e0e0;border-radius:12px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12),\n    0 2px 8px rgba(0, 0, 0, 0.08),\n    0 0 0 1px rgba(0, 255, 157, 0.08);max-height:500px;overflow:hidden;z-index:9999;display:flex;flex-direction:column;animation:dropdownFadeIn 0.25s cubic-bezier(0.4, 0, 0.2, 1)}.dropdown-state{display:flex;align-items:center;justify-content:center;gap:8px;padding:24px;color:#616161;font-size:14px}.dropdown-results{list-style:none;margin:0;overflow-y:auto;overflow-x:hidden;max-height:440px}.result-item{padding:7px 7px;cursor:pointer;border-left:4px solid transparent;margin-bottom:2px;transition:all 0.25s cubic-bezier(0.4, 0, 0.2, 1);overflow:hidden;word-wrap:break-word;word-break:break-word}.result-item:hover,.result-item--selected{background:linear-gradient(\n    90deg,\n    rgba(0, 255, 157, 0.08) 0%,\n    rgba(0, 255, 157, 0.03) 100%\n  );border-left-color:var(--green-600);box-shadow:0 2px 8px rgba(0, 255, 157, 0.15)}.result-item:hover .result-title,.result-item--selected .result-title{color:var(--green-700)}.result-title{color:var(--black);transition:color 0.2s ease}.result-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}.result-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-bottom:6px}.result-badge{display:inline-block;padding:3px 8px;background:rgba(0, 255, 157, 0.12);color:var(--green-800);border-radius:4px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.05em;transition:all 0.2s ease}.result-badge--parent{background:rgba(120, 0, 255, 0.08);color:var(--purple-800, #6b21a8)}.result-badge--lr{background:rgba(0, 120, 255, 0.1);color:var(--blue-800, #1565c0)}.result-item:hover .result-badge,.result-item--selected .result-badge{background:rgba(0, 255, 157, 0.2);color:var(--green-900)}.result-item:hover .result-badge--parent,.result-item--selected .result-badge--parent{background:rgba(120, 0, 255, 0.15);color:var(--purple-900, #581c87)}.result-item:hover .result-badge--lr,.result-item--selected .result-badge--lr{background:rgba(0, 120, 255, 0.18);color:var(--blue-900, #0d47a1)}.result-url{font-size:12px;color:var(--grey-600)}.external-icon{display:inline-block;width:14px;height:14px;margin-left:4px;color:var(--green-600)}.result-snippet{font-size:13px;color:#616161;line-height:1.5;margin:0;overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;transition:color 0.2s ease}.result-item:hover .result-snippet,.result-item--selected .result-snippet{color:#424242}.dropdown-footer{border-top:1px solid rgba(0, 255, 157, 0.15);padding:10px 16px;background:linear-gradient(\n    180deg,\n    rgba(0, 255, 157, 0.02) 0%,\n    rgba(0, 255, 157, 0.05) 100%\n  );flex-shrink:0}.footer-hint{font-size:11px;color:#616161;display:flex;align-items:center;gap:6px;flex-wrap:wrap}kbd{display:inline-block;padding:3px 7px;font-size:11px;font-family:monospace;line-height:1.2;font-weight:500;color:var(--green-700);background:rgba(0, 255, 157, 0.1);border:1px solid rgba(0, 200, 123, 0.3);border-radius:4px;box-shadow:0 2px 0 rgba(0, 255, 157, 0.15),\n    inset 0 1px 0 rgba(255, 255, 255, 0.5)}.dropdown-results::-webkit-scrollbar{width:8px}.dropdown-results::-webkit-scrollbar-track{background:rgba(0, 255, 157, 0.05);border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb{background:#33FFB8;border-radius:4px}.dropdown-results::-webkit-scrollbar-thumb:hover{background:#00FF9D}.flex{display:flex}.inline-flex{display:inline-flex}.text-center{text-align:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-error{color:var(--red-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-4{margin-left:0.25rem}.ml-8{margin-left:0.5rem}.ml-16{margin-left:1rem}.p-16{padding:1rem}.p-64{padding:4rem}.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-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}";
 const EdsGlobalSearchStyle0 = edsGlobalSearchCss;
 
 const EdsGlobalSearch = class {
@@ -4486,6 +4683,23 @@ const EdsGlobalSearch = class {
         index.registerInstance(this, hostRef);
         this.resultSelected = index.createEvent(this, "resultSelected", 7);
         this.searchClosed = index.createEvent(this, "searchClosed", 7);
+        /** Clear the current query and results; keep focus in the input so the
+         *  user can start typing again without an extra click. */
+        this.handleClear = () => {
+            if (this.debounceTimer) {
+                clearTimeout(this.debounceTimer);
+            }
+            this.query = '';
+            this.results = [];
+            this.hasSearched = false;
+            this.showDropdown = false;
+            this.selectedIndex = -1;
+            // Re-focus and reflect the empty value on the underlying DOM input.
+            if (this.inputRef) {
+                this.inputRef.value = '';
+                this.inputRef.focus();
+            }
+        };
         this.handleInput = (event) => {
             var _a;
             const target = event.target;
@@ -4518,6 +4732,7 @@ const EdsGlobalSearch = class {
         this.currentOrigin = '';
         this.currentSource = '';
         this.authToken = '';
+        this.variant = 'gray';
         this.query = '';
         this.results = [];
         this.loading = false;
@@ -4527,15 +4742,26 @@ const EdsGlobalSearch = class {
         this.selectedIndex = -1;
     }
     componentDidLoad() {
-        // Focus input if needed
-        if (this.inputRef) {
-            this.inputRef.focus();
-        }
+        // ⌘K / Ctrl+K focuses the search pill from anywhere on the page.
+        // Bound here (not via @Listen) so it works across shadow boundaries.
+        this.cmdKListener = (event) => {
+            var _a;
+            const isMac = navigator.platform.toUpperCase().includes('MAC');
+            const modifier = isMac ? event.metaKey : event.ctrlKey;
+            if (modifier && event.key.toLowerCase() === 'k') {
+                event.preventDefault();
+                (_a = this.inputRef) === null || _a === void 0 ? void 0 : _a.focus();
+            }
+        };
+        document.addEventListener('keydown', this.cmdKListener);
     }
     disconnectedCallback() {
         if (this.debounceTimer) {
             clearTimeout(this.debounceTimer);
         }
+        if (this.cmdKListener) {
+            document.removeEventListener('keydown', this.cmdKListener);
+        }
     }
     handleDocumentClick(event) {
         const path = event.composedPath();
@@ -4682,10 +4908,19 @@ const EdsGlobalSearch = class {
         return this.hasSearched && !this.loading && !this.hasResults && this.query.trim();
     }
     render() {
-        return (index.h("div", { key: '1852fc796b6240987bcad1e278f4b1df136cc449', class: "search-wrapper" }, index.h("eds-input-field", { key: 'b52b3f0910af3b75c52dc5fd9a514c592b257939', icon: "search", "input-id": "search-global", type: "text", name: "search-box-global", placeholder: this.placeholder, value: this.query, onInput: this.handleInput }), this.showDropdown && (index.h("div", { key: '9f3201f757082d175f74cd6cf289235876a7adbd', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (index.h("div", { key: '3eb28e3703204b69356012f69088e6eb756be901', class: "flex text-center justify-center p-64" }, index.h("eds-spinner", { key: '08034f1d9fd9125bc9581c89e9b2f96efc1a964b', variant: "primary", size: "sm" }))), this.error && !this.loading && (index.h("div", { key: '8b54ae6c27499978b37a34b0b8e596216141a967', class: "flex text-center justify-center p-16" }, index.h("span", { key: 'b4229325ea0650af096984c50882558508c3e97d', class: "text-error f-body-02" }, this.error))), this.showEmpty && (index.h("div", { key: 'e2c4afb90f05171d30c42d7f5780388b18b19e50', class: "dropdown-state" }, index.h("eds-icon-wrapper", { key: 'ad17ced3b7cd285c654cb88e21f295c1aaa1059f', name: "search" }), index.h("div", { key: '66f22b148372de474fa3593deedbaa138b6f534e' }, index.h("p", { key: 'eeb0532fbe406b0415f45685ea0f00e09950db84', class: "f-body-02" }, "No results found"), index.h("p", { key: 'e13d6267eaa8cfc11930b2f61ea29b2f3a82cb71', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (index.h("ul", { key: '23a0e1e6e1634d0e9212d2b9711a9d9f8d1ace42', class: "dropdown-results" }, this.results.map((result, index$1) => (index.h("li", { key: result.id, "data-index": index$1, class: {
+        return (index.h("div", { key: '841c9a013a1c4cee9697f3465759bf638b28475e', class: "search-wrapper" }, index.h("label", { key: 'ff1b37fff6e94019d2da63060aba77d82ee1bafb', class: `search-pill search-pill--${this.variant}`, htmlFor: "search-global" }, index.h("svg", { key: '150aff8a31a68195e7b333b9bcfccbc3affb3901', class: "search-icon", width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("circle", { key: 'cb424f39cd5f6316056dbcc6b80d11ce8ade1410', cx: "11", cy: "11", r: "7" }), index.h("line", { key: '004bce39d3a9ee7a53ef0e942cf986e38b76b921', x1: "20", y1: "20", x2: "16.5", y2: "16.5" })), index.h("input", { key: '97f4c012d7152f29fac9723ced4f06207b8a2453', id: "search-global", class: "search-input", type: "search", name: "search-box-global", placeholder: this.placeholder, value: this.query, autoComplete: "off", onInput: this.handleInput, ref: (el) => (this.inputRef = el) }), this.query && this.query.length > 0 ? (index.h("button", { type: "button", class: "search-clear", "aria-label": "Clear search", onMouseDown: (e) => e.preventDefault() /* keep focus in input */, onClick: () => this.handleClear() }, index.h("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2.2", "stroke-linecap": "round", "stroke-linejoin": "round", "aria-hidden": "true" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))) : (index.h("kbd", { class: "search-kbd", "aria-hidden": "true" }, "\u2318K"))), this.showDropdown && (index.h("div", { key: '3354848b17ba065a64919defd74de0616a29c25c', class: "search-dropdown", ref: (el) => (this.dropdownRef = el) }, this.loading && (index.h("div", { key: '5c5f731e969f60c8c3d2ce21683fec35302a2954', class: "flex text-center justify-center p-64" }, index.h("eds-spinner", { key: '6d0b5223f03bb0ed2f83f2ab3c77cf4e116d87e7', variant: "primary", size: "sm" }))), this.error && !this.loading && (index.h("div", { key: '9cbca9b3f62c2969478e34a654a973196a5e9187', class: "flex text-center justify-center p-16" }, index.h("span", { key: 'ce2bd2f6c6b05fb5fdfec4da67460b72445970bc', class: "text-error f-body-02" }, this.error))), this.showEmpty && (index.h("div", { key: 'b7d446aa72732c9932c90bb5ef08a2f27c357ae4', class: "dropdown-state" }, index.h("eds-icon-wrapper", { key: 'ac5377b3efa4f26e10781f369843a69c3409ec83', name: "search" }), index.h("div", { key: '774784c1dbe4c6e6eda9e8d70833d0a2a6821b4f' }, index.h("p", { key: 'bbce9a267889eee40b54fd471f203b530de42a86', class: "f-body-02" }, "No results found"), index.h("p", { key: 'd440e4e0ff4f59ea14eef7aa5db0692c4a2352fa', class: "f-ui-04 text-lightest" }, "Try different keywords")))), this.hasResults && !this.loading && (index.h("ul", { key: 'b89e31f5931705e750f0f19fb159f93a05324e6d', class: "dropdown-results" }, this.results.map((result, index$1) => (index.h("li", { key: result.id, "data-index": index$1, class: {
                 'result-item': true,
                 'result-item--selected': index$1 === this.selectedIndex
-            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index$1) }, index.h("div", { class: "result-header" }, index.h("span", { class: "result-title f-body-02" }, result.title)), index.h("div", { class: "result-meta" }, index.h("span", { class: "result-badge" }, result.source), result.section && index.h("span", { class: "result-badge" }, result.section), index.h("span", { class: "result-url" }, result.url)), result.snippet && index.h("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (index.h("div", { key: '4d901487a14818ea05d3433c7cc5b881a87764e2', class: "dropdown-footer" }, index.h("span", { key: '8411362dd3b694220e6d10268a63ef4fc3b30eeb', class: "footer-hint" }, index.h("kbd", { key: '5b1c50f275a4d1daa35f0b1276c26bf110189785' }, "\u2191"), " ", index.h("kbd", { key: '711430aba48663a8f58b5f3dae15c1357e75761b' }, "\u2193"), " navigate \u2022 ", index.h("kbd", { key: 'b4e4362f19d7b82cbce9dcdea0b9c863a6e36fef' }, "\u21B5"), " select \u2022 ", index.h("kbd", { key: '9cc79708fece76043eb8f050b1715ff610f937ec' }, "esc"), " close")))))));
+            }, onClick: () => this.selectResult(result), onMouseEnter: () => (this.selectedIndex = index$1) }, index.h("div", { class: "result-header" }, index.h("span", { class: "result-title f-body-02" }, result.title)), index.h("div", { class: "result-meta" }, result.parent_software ? ([
+            index.h("span", { class: "result-badge result-badge--parent" }, result.parent_software),
+            result.section && index.h("span", { class: "result-badge result-badge--lr" }, result.section)
+        ]) : result.source === 'kg-services' ? ([
+            index.h("span", { class: "result-badge" }, "EBRAINS KG"),
+            result.section && index.h("span", { class: "result-badge" }, result.section)
+        ]) : ([
+            index.h("span", { class: "result-badge" }, result.source),
+            result.section && index.h("span", { class: "result-badge" }, result.section)
+        ]), index.h("span", { class: "result-url" }, result.url)), result.snippet && index.h("p", { class: "result-snippet" }, this.stripHtml(result.snippet))))))), this.hasResults && !this.loading && (index.h("div", { key: 'fd07f17d78ba2d95c30d95b35d89151b27e3a957', class: "dropdown-footer" }, index.h("span", { key: '20a6bc436e135e29b89a94b150c505bab6281d6f', class: "footer-hint" }, index.h("kbd", { key: '08e43dd318b0dde7d67f74731055e2bbc00bdc78' }, "\u2191"), " ", index.h("kbd", { key: '676535d717d5fb4b98cbf09050883630dbecaf6e' }, "\u2193"), " navigate \u2022 ", index.h("kbd", { key: 'cd9ac17223ae195b0508c7ea37ad2a9459341b8b' }, "\u21B5"), " select \u2022 ", index.h("kbd", { key: 'dbaa3eacc337eee81404518e9bd4c9b9fbc44205' }, "esc"), " close")))))));
     }
     get el() { return index.getElement(this); }
 };
@@ -4737,7 +4972,7 @@ const EdsHeader = class {
         const logoType = this.variant === 'strong' ? 'negative' : 'positive';
         // Link intent based on header variant
         const linkIntent = this.variant === 'strong' ? 'underlineInverse' : 'underline';
-        return (index.h("header", { key: '2c1cfca934f70c0d72fa50c163eb14524ca4e5a5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, index.h("div", { key: 'b7914ad1431d19a167e39814aa5ab7e6c87ce8e4', class: "w-[250px]" }, index.h("div", { key: 'efb6efcb51f960e48bf236dd94d308ae12480808', class: "p-[24px]" }, index.h("eds-logo", { key: 'a8b20eee1ed9577fc06da51e6325875f56025694', variant: logoType, href: this.url }))), this.parsedLinks && (index.h("nav", { key: '3b322f02b8249091158876559339baf4ba763242', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, index.h("ul", { key: '8c74e64f51bddefcc578c09e5d6570f208ecbcf6', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (index.h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), index.h("div", { key: 'c75b261b7bc734a121ac195400d2c1200b58d7ec', class: "w-[250px] flex justify-end items-center" }, index.h("slot", { key: '1b447037e7158d3e06f68add6084da957ff8c8b0', name: "actions" })), this.menu && (index.h("div", { key: '8e92ee65ed8a235ad0af4d61588ce6118a92b07f', class: "md:hidden flex overflow-hidden px-16" }, index.h("eds-button", { key: '8b79d619d4b51dac26f0ff5347909611383cb635', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
+        return (index.h("header", { key: 'fd95f6b0126d620ab1d4f58240d471301d607fa5', role: "banner", class: `flex items-center justify-between relative z-10 ${classes}` }, index.h("div", { key: 'e7b1bd9a146543107d87ff6f4c8575ad63fc3889', class: "w-[250px]" }, index.h("div", { key: '257a8bf3d0efea39bd0e7f5c92d2a6bcbaa66d48', class: "p-[24px]" }, index.h("eds-logo", { key: '71365268524d0db6999dc6ff4a9227e388d53cdf', variant: logoType, href: this.url }))), this.parsedLinks && (index.h("nav", { key: '085b2bd5f667ea7e0be4de77cb4bd3d1a2bb6e3c', role: "navigation", "aria-label": "Primary", class: "flex-1 flex justify-center items-center hidden md:flex" }, index.h("ul", { key: 'b5c015e6e1fb376f6b48805cc5d0db436234a5fc', class: "flex gap-x-16" }, this.parsedLinks.map((link) => (index.h("eds-link", { label: link.label, "aria-label": link.label, url: link.url, intent: linkIntent, size: "large", icon: link.icon, external: link.external })))))), index.h("div", { key: '9bca10c081cd1b8157579fa587615538dc624817', class: "w-[250px] flex justify-end items-center" }, index.h("slot", { key: '360fb5fe76b41b2513cba2f8705ea5ea91cae9a9', name: "actions" })), this.menu && (index.h("div", { key: '7feaa2b97062e7ceb94bacc35e61a12edc0b2e54', class: "md:hidden flex overflow-hidden px-16" }, index.h("eds-button", { key: '706c1668e3b04517cfe0cb92da5b459980986df0', "aria-label": "Menu", intent: this.variant === 'strong' ? 'ghostInverse' : 'ghost', icon: "menu", size: "small", onClick: () => this.handleToggleMenu() })))));
     }
     get hostEl() { return index.getElement(this); }
 };
@@ -7169,6 +7404,7 @@ const EdsIconWrapper = class {
         index.registerInstance(this, hostRef);
         this.name = undefined;
         this.size = 20;
+        this.label = undefined;
     }
     render() {
         const iconSvg = ICONS[this.name];
@@ -7176,7 +7412,8 @@ const EdsIconWrapper = class {
             console.warn(`Icon "${this.name}" not found in ICONS`);
             return null;
         }
-        return (index.h(index.Host, { role: "img" }, index.h("span", { class: `icon icon--${this.size}`, innerHTML: iconSvg })));
+        const decorative = !this.label;
+        return (index.h(index.Host, { role: decorative ? null : 'img', "aria-label": decorative ? null : this.label, "aria-hidden": decorative ? 'true' : null }, index.h("span", { class: `icon icon--${this.size}`, innerHTML: iconSvg })));
     }
 };
 EdsIconWrapper.style = EdsIconWrapperStyle0;
@@ -7224,10 +7461,10 @@ const EdsImg = class {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (index.h("div", { key: '401f46b1ba986cbab6ef1617039f2315fb9d5e6b', class: {
+        return (index.h("div", { key: '122ae0673a7a2c9afd88cdcf8a83b52c11f0643e', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, index.h("picture", { key: 'cf2b2803efd4f8f0abb40cd427b1b29eff591b15' }, this.formats.map((format) => (index.h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), index.h("img", Object.assign({ key: 'a256bcf9c87284391fdeebcf6dcdb1e95b7fc1f8', ref: (el) => (this.img = el), class: {
+            } }, index.h("picture", { key: 'b0bb1af0c95375db18bd45453016ee2fd78a6e2a' }, this.formats.map((format) => (index.h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), index.h("img", Object.assign({ key: '2a8500ea92db1a846f0f6dbb41fa664c3d514f19', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded
@@ -7264,6 +7501,7 @@ const EdsInput = class {
         this.min = undefined;
         this.max = undefined;
         this.step = undefined;
+        this.inputTabIndex = undefined;
         this.innerVal = '';
         this.maxLengthReached = false;
     }
@@ -7286,7 +7524,7 @@ const EdsInput = class {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (index.h("div", { key: '5e5aabb89e931e0129ad606f9ed6070e336f9d98', class: "relative flex items-center" }, this.type === 'textarea' ? (index.h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (index.h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (index.h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (index.h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
+        return (index.h("div", { key: '0261b14034860a2f59dde8de72d6729ec411d2cf', class: "relative flex items-center" }, this.type === 'textarea' ? (index.h("textarea", { id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, class: `min-h-80 input input-textarea ${withIcon ? 'input-with-icon' : ''} ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput })) : this.type === 'select' ? (index.h("select", { id: this.inputId || this.name, name: this.name, required: this.required, disabled: this.disabled, class: `input input-select ${this.error ? 'input-error' : ''} ${this.extraClass}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, onInput: this.handleInput, onChange: this.handleInput }, this.options.map((option) => (index.h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (index.h("input", Object.assign({ id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.innerVal.toString(), required: this.required, disabled: this.disabled, type: this.type, tabindex: this.inputTabIndex, checked: ['radio', 'checkbox'].includes(this.type) ? this.checked : undefined }, (this.type === 'number'
             ? {
                 min: this.min,
                 max: this.max,
@@ -7297,7 +7535,7 @@ const EdsInput = class {
               input ${this.type === 'radio' ? 'input-radio' : this.type === 'checkbox' ? 'input-checkbox' : ''}
               ${withIcon && this.type !== 'radio' && this.type !== 'checkbox' ? 'input-icon pl-36' : ''} 
               ${this.error ? 'input-error' : ''}
-              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (index.h("span", { key: 'b3f75c5b363dc5320d4552ca9d9544975fdd89e0', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (index.h("eds-icon-wrapper", { key: 'e3d18b7c5089e635ee3c4341f039482fdf37f5f1', class: `absolute top-1/2 left-[12px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, name: this.icon }))));
+              `, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, maxlength: this.maxLength, onInput: this.handleInput, onChange: this.handleInput }))), this.maxLength && this.type === 'textarea' && (index.h("span", { key: 'f2a7b410ee586d3266d05d422f3376488392fc6b', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (index.h("eds-icon-wrapper", { key: '37581bbd64652b25a00a401ab359736169814b1f', class: `absolute top-1/2 left-[12px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, name: this.icon }))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -7402,7 +7640,7 @@ const EdsInputDropzone = class {
     }
     render() {
         const dropzoneClass = `eds-input-dropzone ${this.isDragging ? 'dragging' : ''} ${this.disabled ? 'disabled' : ''}`;
-        return (index.h("div", { key: 'a5f1b90a46927fc9b6396c7aa46b6871233f543a', class: "eds-input-dropzone-container" }, index.h("input", { key: '3eefd790de82dc7686f1eaeb70f974155830d0e1', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-dropzone-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), index.h("div", { key: 'e9f2a824fd9df33e943b6b4ab80dff9b6b0c031d', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("svg", { key: 'f7535c3bb5e80e894520176de395da72732fa714', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { key: 'c16c8692d38cf348ec967b2a3617422afff7909a', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), index.h("polyline", { key: '13d7a4c1ae764156957c86c03dbeb4e18f4df227', points: "17 8 12 3 7 8" }), index.h("line", { key: 'ddd716e98d7defa01360ecaa726696141116c860', x1: "12", y1: "3", x2: "12", y2: "15" })), index.h("div", { key: '2ab160b911248c5db33b00100b2dbacfeebd6145', class: "dropzone-text" }, index.h("p", { key: '4dc47aaa591673211e7b6b2fbd84565a3986bf8e', class: "dropzone-primary" }, this.primaryText), index.h("p", { key: '92d44b3198860ad6509743a7c55a7c1f949fab70', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (index.h("div", { key: '84b2403ba93872292c4d15206d9fcbe1a71a21a5', class: "eds-input-dropzone-chips" }, this.selectedFiles.map((item) => (index.h("div", { key: item.id, class: "eds-input-dropzone-chip" }, this.getFileIcon(item.file.name), index.h("span", { class: "eds-input-dropzone-chip-name" }, item.file.name), index.h("span", { class: "eds-input-dropzone-chip-size" }, this.formatFileSize(item.file.size)), index.h("button", { type: "button", class: "eds-input-dropzone-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+        return (index.h("div", { key: '8c6d9cdd919e72f5e85a7b01a2db3cb6fadface0', class: "eds-input-dropzone-container" }, index.h("input", { key: 'fb643c39fa588971f825a01b20e8da6ac2da7d36', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-dropzone-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), index.h("div", { key: 'fd000cfb95b10eb54798ea5575810692c8cce65d', class: dropzoneClass, onClick: this.handleDropzoneClick, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, index.h("svg", { key: 'ed7588f87e4182351f5301992ae582df1f21be5e', class: "dropzone-icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { key: '9977271ac6bb26c6d642708eb6a7d2f2ca242dcc', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), index.h("polyline", { key: 'f32b1ff2bea2718e075d78985837ba71acf23ce9', points: "17 8 12 3 7 8" }), index.h("line", { key: '326bc6f0e24c191a26859567653f807c81745a77', x1: "12", y1: "3", x2: "12", y2: "15" })), index.h("div", { key: 'f880855ecf537d527663101a5348591f975e7074', class: "dropzone-text" }, index.h("p", { key: '4747da3e157c6b1c3e56774867fc0258e2e77059', class: "dropzone-primary" }, this.primaryText), index.h("p", { key: '7852be7ecdcdfabf5fed632065b14128941461ee', class: "dropzone-secondary" }, this.secondaryText))), this.selectedFiles.length > 0 && (index.h("div", { key: '36347980293d2ea800a845a4ab5bb9c28fedc485', class: "eds-input-dropzone-chips" }, this.selectedFiles.map((item) => (index.h("div", { key: item.id, class: "eds-input-dropzone-chip" }, this.getFileIcon(item.file.name), index.h("span", { class: "eds-input-dropzone-chip-name" }, item.file.name), index.h("span", { class: "eds-input-dropzone-chip-size" }, this.formatFileSize(item.file.size)), index.h("button", { type: "button", class: "eds-input-dropzone-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
     }
     get hostEl() { return index.getElement(this); }
 };
@@ -7529,9 +7767,12 @@ const EdsInputField = class {
         return [];
     }
     render() {
-        const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error, icon: this.icon, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
-        return (index.h("div", { key: '1568054341b82bcaa01ffe4a48092d5f25a639ed' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (index.h("fieldset", { class: "space-y-4" }, (this.label || this.hint) && (index.h("div", { class: "flex justify-between mb-4" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.parsedOptions.map((option) => (index.h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, index.h("eds-input", Object.assign({}, inputOpts, { value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), index.h("label", { htmlFor: this.name, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (index.h("div", { class: "flex items-center gap-x-8" }, index.h("eds-input", Object.assign({}, inputOpts, { value: this.value, checked: this.value === 'on' || this.checked })), this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (index.h("div", null, (this.label || this.hint) && (index.h("div", { class: "flex justify-between mb-4" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.type === 'select' ? (index.h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (index.h("eds-input-file", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'dropzone' ? (index.h("eds-input-dropzone", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'search' ? (index.h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
-            var _a, _b, _c;
+        const inputOpts = Object.assign({ name: this.name, id: this.inputId, placeholder: this.placeholder, disabled: this.disabled, onInput: this.handleNativeInput, onChange: this.handleNativeChange, type: this.type, required: this.required, value: this.value, error: this.error,
+            // Icons are only supported on text inputs for now — ignore the prop for
+            // every other type so e.g. number/select/checkbox never render one.
+            icon: this.type === 'text' ? this.icon : undefined, checked: this.checked }, (this.type === 'number' ? { min: this.min, max: this.max, step: this.step } : {}));
+        return (index.h("div", { key: '2072cce16b572431b41363beff779d8631de7abc' }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (index.h("fieldset", { class: "space-y-4" }, (this.label || this.hint) && (index.h("div", { class: "flex justify-between mb-4" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.parsedOptions.map((option) => (index.h("div", { class: "flex items-center gap-x-4 gap-y-4", key: option.value }, index.h("eds-input", Object.assign({}, inputOpts, { inputId: `${this.inputId || this.name}-${option.value}`, inputTabIndex: 0, value: option.value, checked: typeof this.value === 'string' && this.value.split(',').includes(String(option.value)) })), index.h("label", { htmlFor: `${this.inputId || this.name}-${option.value}`, class: `input-label-options ${this.disabled ? 'text-lighter' : ''}` }, option.label)))))) : (index.h("div", { class: "flex items-center gap-x-8" }, index.h("eds-input", Object.assign({}, inputOpts, { inputTabIndex: 0, value: this.value, checked: this.value === 'on' || this.checked })), this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (index.h("div", null, (this.label || this.hint) && (index.h("div", { class: "flex justify-between mb-4" }, this.label && (index.h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (index.h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)))), this.type === 'select' ? (index.h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (index.h("eds-input-file", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'dropzone' ? (index.h("eds-input-dropzone", { name: this.name, inputId: this.inputId, disabled: this.disabled, required: this.required, multiple: true, onEdsfile: this.handleFileChange })) : this.type === 'range' ? ((() => {
+            var _a, _b, _c, _d, _e, _f;
             const rangeProps = {
                 name: inputOpts.name,
                 inputId: inputOpts.id || inputOpts.name,
@@ -7542,8 +7783,11 @@ const EdsInputField = class {
             };
             const opt = this.parsedOptions;
             const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value;
-            return (index.h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
-        })()) : (index.h("eds-input", Object.assign({}, inputOpts))))), index.h("div", { key: '5df838f8bf73bc9e0dfa0792f76ad1b958f3d1fc', class: "mt-6" }, index.h("eds-input-footer", { key: 'daf5d0fd8d9cca3241e760b740a47e2663c3e665', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
+            // Prefer the explicit min/max/step props (consistent with
+            // type="number"); fall back to options[0..2].value for
+            // backward compatibility with existing range fields.
+            return (index.h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = this.min) !== null && _a !== void 0 ? _a : (_b = opt[0]) === null || _b === void 0 ? void 0 : _b.value, max: (_c = this.max) !== null && _c !== void 0 ? _c : (_d = opt[1]) === null || _d === void 0 ? void 0 : _d.value, step: (_e = this.step) !== null && _e !== void 0 ? _e : (_f = opt[2]) === null || _f === void 0 ? void 0 : _f.value, value: numberValue })));
+        })()) : (index.h("eds-input", Object.assign({}, inputOpts))))), index.h("div", { key: 'f3ab7ef07c5c35f6d5e5d7a3ec35f98fe133ab5b', class: "mt-6" }, index.h("eds-input-footer", { key: 'a72af69114cd3916e9ffa6ca8a65dced572dadf7', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link }))));
     }
     static get delegatesFocus() { return true; }
     get hostEl() { return index.getElement(this); }
@@ -7616,13 +7860,13 @@ const EdsInputFile = class {
     }
     render() {
         const effectiveLabel = this.buttonLabel || (this.multiple ? 'Choose Files' : 'Choose File');
-        return (index.h("div", { key: 'c4c8f06b7d911cc7b9aa44a54bc1ec1144fc7901', class: "eds-input-file-container" }, index.h("input", { key: 'bf4d4f3b3a49a2b386780fd6d65056e2bfee327d', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), index.h("button", { key: 'cb4447bab24a31ba0ab7ab852041a9117a4c8d16', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, index.h("svg", { key: 'b5a98574c8b044b63bf4d6b5384f691d78179b25', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { key: '9dcd73b3ea6b947052417dedbdedfbe9c1683d11', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), index.h("polyline", { key: '17442a8caa70a37f77839b4a313a36aa8324d54a', points: "17 8 12 3 7 8" }), index.h("line", { key: 'de51aa410bd793d708280bc398766859afa59ff5', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (index.h("div", { key: '179a1541b71508f3bf78760079d04b2d98a8c7ec', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (index.h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), index.h("span", { class: "eds-input-file-chip-name" }, item.file.name), index.h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), index.h("button", { type: "button", class: "eds-input-file-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
+        return (index.h("div", { key: 'e02d98fbc01dbe7a89eeb3010f966ed4a373ede6', class: "eds-input-file-container" }, index.h("input", { key: '2013826fda9453aade4528c9f051aac98780662f', ref: (el) => (this.fileInputRef = el), type: "file", id: this.inputId || this.name, name: this.name, class: "eds-input-file-hidden", disabled: this.disabled, required: this.required, multiple: this.multiple, accept: this.accept, onChange: this.handleFileSelect }), index.h("button", { key: 'f5e5cf91376ccb69b39ef3c9b11095aca8bfb728', type: "button", class: "eds-input-file-btn", onClick: this.handleButtonClick, disabled: this.disabled }, index.h("svg", { key: '563066375b42d0a8c14f14ac9fdfb587539f4e76', viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }, index.h("path", { key: 'ebe5549fffa0c2453ab98891da75a464c09e9fa2', d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }), index.h("polyline", { key: '69036b82e15103e481770d0ef2c500b0dcad0399', points: "17 8 12 3 7 8" }), index.h("line", { key: 'e0531be95796ec6dc7f9fe359e4736a15a0e3640', x1: "12", y1: "3", x2: "12", y2: "15" })), effectiveLabel), this.selectedFiles.length > 0 && (index.h("div", { key: '62590fb46cee89d2524f1ede71c7af341c3e426a', class: "eds-input-file-chips" }, this.selectedFiles.map((item) => (index.h("div", { key: item.id, class: "eds-input-file-chip" }, this.getFileIcon(item.file.name), index.h("span", { class: "eds-input-file-chip-name" }, item.file.name), index.h("span", { class: "eds-input-file-chip-size" }, this.formatFileSize(item.file.size)), index.h("button", { type: "button", class: "eds-input-file-chip-remove", onClick: () => this.handleRemoveFile(item.id), disabled: this.disabled, "aria-label": `Remove ${item.file.name}` }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", "stroke-width": "2" }, index.h("line", { x1: "18", y1: "6", x2: "6", y2: "18" }), index.h("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))))))));
     }
     get hostEl() { return index.getElement(this); }
 };
 EdsInputFile.style = EdsInputFileStyle0;
 
-const edsInputFooterCss = "p{margin:0}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.pt-4{padding-top:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{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:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
+const edsInputFooterCss = "p{margin:0}.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}eds-link{--f-ui-02-fontSize:var(--f-ui-04-fontSize)}.text-error{color:var(--red-700)}.flex{display:flex}.items-center{align-items:center}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.ml-4{margin-left:0.25rem}.pt-4{padding-top:0.25rem}.mb-4{margin-bottom:0.25rem}.f-ui-05{font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing)}.text-lighter{color:var(--grey-600)}.effect-color{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:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.hover\\:text-lighter:hover{color:var(--grey-600)}.underline{text-decoration-line:underline}.underline-offset-4{text-underline-offset:4px}";
 const EdsInputFooterStyle0 = edsInputFooterCss;
 
 const EdsInputFooter = class {
@@ -7635,7 +7879,7 @@ const EdsInputFooter = class {
         this.link = undefined;
     }
     render() {
-        return (index.h("div", { key: 'b6e571eae554f1292e897d99443ea03b6dfa4fe3' }, this.error && this.errorMessage && (index.h("div", { key: '9240b3db2aee19b5cbc1c54aa7a90994c23580d0', id: `error_${this.name}`, class: "text-error flex items-center" }, index.h("eds-icon-wrapper", { key: '68b17235d0396119275c9b2a883bb47ee365c266', name: "warning", size: 20 }), index.h("p", { key: 'bfb1721ddcc7ad63583e56911b8c4a31f1147c51', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && index.h("p", { key: '390c9ea7b3b2754a1a090c9f3f3ec6996a8f0945', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (index.h("eds-link", { key: '0777fb8b099d5cc7fa2902bf1b741f28592515a1', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
+        return (index.h("div", { key: '866e375b5dd1d9c958f2255537e919a8c1f25dc7' }, this.error && this.errorMessage && (index.h("div", { key: '95d11c9cbb7746cc727ad9e037d00a28d9475bfc', id: `error_${this.name}`, class: "text-error flex items-center" }, index.h("eds-icon-wrapper", { key: 'face7f905ffa7c5f4dc7a7e6825d185e0d6b7901', name: "warning", size: 20 }), index.h("p", { key: '2011af93e06df1d91972843a510e843763f53b0b', class: "f-ui-04 ml-4 mb-4 pt-4", innerHTML: this.errorMessage }))), this.message && index.h("p", { key: '39d6833a30e7b93f75154a14bee1e6b4500575cb', id: `desc_${this.name}`, class: "f-ui-04 text-lighter", innerHTML: safeInlineFormat(this.message) }), this.link && (index.h("eds-link", { key: 'bfbf95e704574ada6f857ca08a90409ab38c1a5e', label: this.link.label, url: this.link.url, intent: "underline", size: "small", external: true }))));
     }
 };
 EdsInputFooter.style = EdsInputFooterStyle0;
@@ -7652,7 +7896,7 @@ const EdsInputLabel = class {
         this.disabled = false;
     }
     render() {
-        return (index.h("label", { key: '7790bae024ee253c12b47ee43dd7697329ff5602', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (index.h("span", { key: '1f8e72cee3848171c0f70ce7564524c9f2646eeb' }, index.h("span", { key: '5ac8ccbe9b984c54ae3a556ea0dc09d6fa625f24', "aria-hidden": "true" }, "*"), index.h("span", { key: 'a562b41bce8a4e671596266c7705a98f5b2252d0', class: "sr-only" }, "required")))));
+        return (index.h("label", { key: '40867ae01e94ab7a69b6f82658e4ee1b1e5b87cf', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (index.h("span", { key: 'e3cfc44ea2a7f53f51c544648b3c635557cb8248' }, index.h("span", { key: 'ff7559b58cb22ce2a3066ed15e77f6088f299aaa', "aria-hidden": "true" }, "*"), index.h("span", { key: '2c831682aae410ac71589171e2b04981c60052bb', class: "sr-only" }, "required")))));
     }
 };
 EdsInputLabel.style = EdsInputLabelStyle0;
@@ -7701,7 +7945,7 @@ const EdsInputRange = class {
     render() {
         var _a;
         const currentValue = (_a = this.sliderVal) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
-        return (index.h("div", { key: '9be1a9d4241844c03d7e2b851ebc5ce181bfadf6', class: "relative flex flex-col items-start" }, index.h("input", { key: '746c10f7a466a6b498f57812dcb6d9b9ff1e685d', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), index.h("p", { key: '97b516ab9c20d9b5c7a783b369081b29eb3a83f0', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
+        return (index.h("div", { key: '231ae0f34900dfa3b8edeb9745ce07220735c613', class: "relative flex flex-col items-start" }, index.h("input", { key: '2cbfbbb410694a4764f44c26a74f4cbca9b98f3c', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: currentValue, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input", tabindex: "0", role: "slider", "aria-describedby": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": currentValue, onInput: this.onInput, onChange: this.onChange }), index.h("p", { key: '8e7036cbaeebb62c6cd4b7f2105d3fa487ad463e', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -7709,74 +7953,6 @@ const EdsInputRange = class {
     }; }
 };
 
-const EdsInputSearch = class {
-    constructor(hostRef) {
-        index.registerInstance(this, hostRef);
-        this.search = index.createEvent(this, "search", 7);
-        /**
-         * Keydown event listener to detect Command+K (Mac) or Ctrl+K (Windows/Linux)
-         * and focus the input element when triggered.
-         *
-         * @param e - The keyboard event.
-         */
-        this.keydownListener = (e) => {
-            // Check for Command+K (Mac) or Ctrl+K (Windows/Linux)
-            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === 'k') {
-                e.preventDefault();
-                // Focus the input if it's available and not disabled
-                if (this.inputElement && !this.disabled) {
-                    this.inputElement.focus();
-                }
-            }
-        };
-        /*onInput = (e: any) => {
-          // eslint-disable-next-line
-          console.log('on input:', e);
-        };*/
-        this.onChange = (e) => {
-            // eslint-disable-next-line
-            this.search.emit({
-                event: 'change',
-                value: e.target.value
-            });
-            analytics.sendAnalytics({
-                category: 'ui-component',
-                parentContext: null,
-                tag: this.el.tagName.toLowerCase(),
-                name: e.target.value || '',
-                action: 'search'
-            });
-        };
-        this.name = undefined;
-        this.inputId = 'search-main';
-        this.placeholder = 'Search...';
-        this.value = undefined;
-        this.disabled = false;
-        this.required = false;
-        this.decorate = undefined;
-        this.label = 'Search';
-    }
-    componentDidLoad() {
-        // Assign the native input element after the component loads
-        this.inputElement = this.el.querySelector('input');
-        document.addEventListener('keydown', this.keydownListener);
-    }
-    disconnectedCallback() {
-        // Clean up the event listener when the component is removed
-        document.removeEventListener('keydown', this.keydownListener);
-    }
-    async getInputElement() {
-        // Return the native input element
-        return this.inputElement;
-    }
-    render() {
-        return (index.h("div", { key: '849afaf3483b07fd2579d1138fbc1c1eee3930be', class: "relative flex items-center" }, index.h("eds-icon-wrapper", { key: '1b9a30ee46d4575116b585efe8a2d0c6d6b83b39', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), index.h("input", { key: '174fc93f10851aec47cb440895105c34600de601', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
-            //onInput={this.onInput}
-            onChange: this.onChange })));
-    }
-    get el() { return index.getElement(this); }
-};
-
 const EdsInputSelect = class {
     constructor(hostRef) {
         index.registerInstance(this, hostRef);
@@ -7799,15 +7975,160 @@ const EdsInputSelect = class {
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Pick from the list`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (index.h("div", { key: 'c2f809a88f8b9eab6a36b86bb49daaa39ac1a832', class: "relative" }, index.h("select", { key: '0847d6526bd118db744627279d96a979dafd19d1', id: selectId, name: this.name, class: {
+        return (index.h("div", { key: '8365ffbc8f6f6386edfc1626d16c9152fd3cce9f', class: "relative" }, index.h("select", { key: '52e712898a3251cea5447a379886449175e7c8b8', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, index.h("option", { key: '1d66602cc92028fddfd047bb2fc79c8f3602ba8e', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index$1) => (index.h("option", { key: index$1, value: opt.value, selected: opt.value === this.value }, opt.label)))), index.h("span", { key: '40f750ff55b0ac5707c4010868835c6d82537d17', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, index.h("eds-icon-wrapper", { key: 'ef8c068e287819be7228940bfbe0b8b923e22087', class: "w-20 h-20", name: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, index.h("option", { key: 'd52c376ffb683abc0dec72177dba445273d148f7', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index$1) => (index.h("option", { key: index$1, value: opt.value, selected: opt.value === this.value }, opt.label)))), index.h("span", { key: 'fecbcb47793f8a57de44711b33d3650be5297aa7', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, index.h("eds-icon-wrapper", { key: '4fda1345a62eeb212093057382d877f31bb6112d', class: "w-20 h-20", name: "chevron-right" }))));
     }
 };
 
+const edsKgLearningResourcesCss = ":host{display:block;font-family:var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);color:var(--brand-black, #07140D)}.lr-header{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:0.75rem;margin-bottom:1.5rem}.lr-heading{font-family:var(--inter, 'Inter', sans-serif);font-weight:300;font-size:1.75rem;line-height:110%;margin:0;color:var(--brand-black, #07140D)}.summary{display:flex;gap:0.5rem}.filters{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0.75rem;margin-bottom:1.5rem;align-items:flex-end}.filter-search{grid-column:span 2}.filter-select{grid-column:span 1}.accordion-list{display:flex;flex-direction:column;gap:0.5rem}.resources-content{padding-top:0.5rem}.kg-link{margin-bottom:1rem}.resources-table{width:100%;border-collapse:collapse;font-size:0.875rem}.resources-table thead th{text-align:left;font-family:var(--plex-sans, 'IBM Plex Sans', system-ui, sans-serif);font-weight:500;font-size:0.75rem;text-transform:uppercase;letter-spacing:0.04em;color:var(--grey-dark, #7A7B7A);padding:0.5rem 0.75rem;border-bottom:1px solid rgba(0, 0, 0, 0.1)}.resource-row{transition:background-color 0.2s ease}.resource-row--clickable{cursor:pointer}.resource-row--clickable:hover{background-color:rgba(0, 255, 157, 0.04)}.resource-row td{padding:0.625rem 0.75rem;border-bottom:1px solid rgba(0, 0, 0, 0.04);vertical-align:top}.resource-row:last-child td{border-bottom:none}.resource-name{font-weight:500;font-size:1.0625rem;color:var(--brand-black, #07140D);transition:color 0.2s ease}.resource-row--clickable:hover .resource-name{color:var(--brand-green-dark, #00C87B)}.resource-desc{margin:0.25rem 0 0;font-size:0.9375rem;color:var(--grey-dark, #7A7B7A);line-height:145%;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}.col-name{width:auto}.col-type{width:160px;white-space:nowrap}.col-level{width:110px;white-space:nowrap}.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)}.no-results{padding:2rem;text-align:center;color:var(--grey-dark, #7A7B7A);font-size:0.875rem}@media (max-width: 750px){.lr-header{flex-direction:column;align-items:flex-start}.filters{grid-template-columns:1fr}.filter-search,.filter-select{grid-column:span 1}.col-type,.col-level{width:auto}.resources-table thead{display:none}.resource-row{display:flex;flex-wrap:wrap;gap:0.375rem;padding:0.625rem 0;border-bottom:1px solid rgba(0, 0, 0, 0.04)}.resource-row td{border:none;padding:0}.col-name{width:100%}}";
+const EdsKgLearningResourcesStyle0 = edsKgLearningResourcesCss;
+
+let cachedData = null;
+let cacheTimestamp = 0;
+const CACHE_TTL = 10 * 60 * 1000;
+const EdsKgLearningResources = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.apiEndpoint = '/api/v1/kg/learning-resources/cached';
+        this.resolveNames = true;
+        this.size = 500;
+        this.heading = '';
+        this.variant = 'inverse';
+        this.loading = false;
+        this.error = '';
+        this.software = [];
+        this.meta = null;
+        this.filterType = '';
+        this.filterLevel = '';
+        this.searchQuery = '';
+    }
+    componentWillLoad() {
+        this.fetchData();
+    }
+    async fetchData() {
+        const now = Date.now();
+        if (cachedData && (now - cacheTimestamp) < CACHE_TTL) {
+            this.software = cachedData;
+            return;
+        }
+        this.loading = true;
+        this.error = '';
+        try {
+            const params = new URLSearchParams({
+                size: this.size.toString(),
+                resolve_names: this.resolveNames.toString(),
+            });
+            const response = await fetch(`${this.apiEndpoint}?${params}`);
+            if (!response.ok) {
+                throw new Error(`Failed to fetch: ${response.statusText}`);
+            }
+            const data = await response.json();
+            this.software = data.data || [];
+            this.meta = data.meta || null;
+            cachedData = this.software;
+            cacheTimestamp = now;
+        }
+        catch (err) {
+            this.error = err instanceof Error ? err.message : 'Failed to load learning resources';
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    getFilteredSoftware() {
+        let filtered = this.software;
+        if (this.filterType) {
+            filtered = filtered.filter(sw => sw.learning_resources_types.includes(this.filterType));
+        }
+        if (this.filterLevel) {
+            filtered = filtered.filter(sw => sw.learning_resources_levels.includes(this.filterLevel));
+        }
+        if (this.searchQuery) {
+            const q = this.searchQuery.toLowerCase();
+            filtered = filtered.filter(sw => sw.name.toLowerCase().includes(q) ||
+                sw.learning_resources.some(lr => {
+                    var _a, _b;
+                    return ((_a = lr.name) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(q)) ||
+                        ((_b = lr.abstract) === null || _b === void 0 ? void 0 : _b.toLowerCase().includes(q));
+                }));
+        }
+        return filtered;
+    }
+    getFilteredResources(resources) {
+        let filtered = resources;
+        if (this.filterType) {
+            filtered = filtered.filter(lr => lr.type === this.filterType);
+        }
+        if (this.filterLevel) {
+            filtered = filtered.filter(lr => lr.educational_level === this.filterLevel);
+        }
+        return filtered;
+    }
+    /* TODO: Uncomment when filters are enabled
+    private getAllTypes(): string[] {
+      const types = new Set<string>();
+      this.software.forEach(sw =>
+        sw.learning_resources_types.forEach(t => types.add(t))
+      );
+      return Array.from(types).sort();
+    }
+  
+    private getAllLevels(): string[] {
+      const levels = new Set<string>();
+      this.software.forEach(sw =>
+        sw.learning_resources_levels.forEach(l => levels.add(l))
+      );
+      return Array.from(levels).sort();
+    }
+    */
+    getTagIntent(type) {
+        const map = {
+            'interactive tutorial': 'brand',
+            'video tutorial': 'primary',
+            'user documentation': 'dark',
+            'video presentation': 'inverse',
+            'slide deck': 'strong',
+        };
+        return map[type] || 'brand-dark';
+    }
+    getLevelTagIntent(level) {
+        const map = {
+            'beginner': 'brand',
+            'intermediate': 'dark',
+            'advanced': 'strong',
+        };
+        return map[level] || 'brand-dark';
+    }
+    renderAccordionDescription(sw) {
+        const count = sw.learning_resources_count;
+        const types = sw.learning_resources_types.join(', ');
+        return `${count} resource${count !== 1 ? 's' : ''} — ${types}`;
+    }
+    renderResources(sw) {
+        const filtered = this.getFilteredResources(sw.learning_resources);
+        return (index.h("div", { class: "resources-content" }, sw.kg_search_url && (index.h("div", { class: "kg-link" }, index.h("eds-link", { url: sw.kg_search_url, label: "View in EBRAINS Knowledge Graph", intent: "cta", external: true }))), index.h("table", { class: "resources-table" }, index.h("thead", null, index.h("tr", null, index.h("th", { class: "col-name" }, "Name"), index.h("th", { class: "col-type" }, "Type"), index.h("th", { class: "col-level" }, "Level"))), index.h("tbody", null, filtered.map(lr => (index.h("tr", { class: `resource-row ${lr.iri ? 'resource-row--clickable' : ''}`, onClick: () => {
+                if (lr.iri) {
+                    window.open(lr.iri, '_blank', 'noopener,noreferrer');
+                }
+            } }, index.h("td", { class: "col-name" }, index.h("span", { class: "resource-name" }, lr.name || 'Untitled'), lr.abstract && (index.h("p", { class: "resource-desc" }, lr.abstract))), index.h("td", { class: "col-type" }, lr.type && (index.h("eds-tag", { label: lr.type, intent: this.getTagIntent(lr.type), size: "medium" }))), index.h("td", { class: "col-level" }, lr.educational_level && (index.h("eds-tag", { label: lr.educational_level, intent: this.getLevelTagIntent(lr.educational_level), size: "medium" })))))))), filtered.length === 0 && (index.h("p", { class: "no-results" }, "No resources match the current filters."))));
+    }
+    render() {
+        // Always render the same outer scaffold (header + content area) so the
+        // heading sits in identical position across loading / error / loaded
+        // states and the spinner appears where the accordion list will render.
+        const filtered = !this.loading && !this.error ? this.getFilteredSoftware() : [];
+        // const allTypes = this.getAllTypes();
+        // const allLevels = this.getAllLevels();
+        return (index.h("div", { key: '154b59a74cb32996f1bee10ee7758d916bebdd43', class: "lr-container" }, index.h("div", { key: '0c5c04b65f0c4e4c032b1b1a7d96e98fd6775563', class: "lr-header" }, index.h("h2", { key: '01ef66537b31a63521f0406cd2ec9976b532d18f', class: "lr-heading" }, this.heading)), this.loading && (index.h("div", { key: '134ca8e5f7349127b40aa1ae0967cd12dc12cc0b', class: "loading", role: "status", "aria-live": "polite" }, index.h("eds-spinner", { key: 'a3a0621b6ea041f8da4ef6f36c1688974f3c5591', size: "sm", variant: "primary", background: "transparent", message: "Loading learning resources..." }))), this.error && !this.loading && (index.h("eds-alert", { key: 'a0334442c175374daf8ce2be4da60ac004e4d0e2', intent: "error", message: this.error })), !this.loading && !this.error && (index.h("div", { key: 'f2b8244f1ee5c052cabd5eec8cbfc36d06f4d08d', class: "accordion-list" }, filtered.map(sw => (index.h("eds-accordion", { heading: sw.name, description: this.renderAccordionDescription(sw), variant: this.variant, icon: "book", switchBg: true, clampText: false }, this.renderResources(sw)))), filtered.length === 0 && (index.h("p", { key: 'd572c9eb76279c93ba2bd5f0fae20b4e1d9fc816', class: "no-results" }, "No software matches the current filters."))))));
+    }
+    get el() { return index.getElement(this); }
+};
+EdsKgLearningResources.style = EdsKgLearningResourcesStyle0;
+
 const edsKgWebServicesSelectCss = ".kg-web-services-select-container{width:100%}.loading-container,.error-container{width:100%}";
 const EdsKgWebServicesSelectStyle0 = edsKgWebServicesSelectCss;
 
@@ -8181,7 +8502,7 @@ const EdsLink = class {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (index.h("a", { key: 'b604585e484db17a87cba4fb492ef17014c0c88a', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("span", { key: 'c3d5d62b4740ecb9f4fa6330147bb1f23afe22e0', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (index.h("span", { key: 'c4340d032516895b8ad9a01170998605875a5774', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}` }, this.label)), this.renderRightIcon())));
+        return (index.h("a", { key: 'd167c16280b7f0b4c1fcf14f0f0d3468111e715b', class: `${classes || ''}`, href: isInteractive ? safeUrl : undefined, target: this.external && isInteractive ? '_blank' : undefined, rel: this.external && isInteractive ? 'noopener noreferrer' : undefined, tabIndex: isInteractive ? 0 : -1, "aria-label": isIconOnly ? this.ariaLabel || 'Link' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-current": this.current ? 'page' : undefined, role: this.disabled ? 'link' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event), onKeyDown: (event) => this.handleKeyDown(event) }, index.h("span", { key: '000476a609888f5f848722015ce5e6137f26e371', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (index.h("span", { key: '15232cde31d23c5a466189c69fbdb9db48f08274', class: `${labelClasses} ${this.icon ? (this.iconPos === 'right' ? (this.size === 'large' ? 'pr-4' : 'pr-2') : (this.size === 'large' ? 'pl-4' : 'pl-2')) : ''}` }, this.label)), this.renderRightIcon())));
     }
     get el() { return index.getElement(this); }
 };
@@ -8225,13 +8546,13 @@ const EdsLogo = class {
     }
     render() {
         const logoContent = this.getLogo();
-        return (index.h("a", { key: '06321ecfcf456f1870cd080043203258306a2451', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, index.h("div", { key: '0e9da2f98700553f4898d0f60935f1c5cbd97cbc', innerHTML: logoContent })));
+        return (index.h("a", { key: '3f8257c9481079f011278b114e13effe9057d823', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, index.h("div", { key: '4dac45a1a0c38c6e1613995aad2005b41acac775', innerHTML: logoContent })));
     }
     get el() { return index.getElement(this); }
 };
 EdsLogo.style = EdsLogoStyle0;
 
-const edsMatomoNoticeCss = ".fixed{position:fixed}.absolute{position:absolute}.w-full{width:100%}.bottom-0{bottom:0rem}.bottom-4{bottom:0.25rem}.p-4{padding:0.25rem}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.z-10{z-index:10}.z-\\[999999\\]{z-index:999999}.left-0{left:0rem}.left-1\\/2{left:50%}.grow{flex-grow:1}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.flex{display:flex}.gap-12{gap:0.75rem}.gap-20{gap:1.25rem}.gap-4{gap:0.25rem}.gap-8{gap:0.5rem}@media (min-width: 750px){.md\\:left-1\\/2{left:50%}.md\\:flex{display:flex}.md\\:hidden{display:none}.md\\:-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.md\\:-translate-y-1\\/2{--tw-translate-y:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}}";
+const edsMatomoNoticeCss = ":host{display:block;background-color:var(--white, #FFFFFF);border-radius:16px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12);overflow:hidden}.flex{display:flex}.items-center{align-items:center}.gap-8{gap:0.5rem}";
 const EdsMatomoNoticeStyle0 = edsMatomoNoticeCss;
 
 const EdsMatomoNotice = class {
@@ -8342,13 +8663,19 @@ const EdsMatomoNotice = class {
         if (!this.showNotice) {
             return null;
         }
-        return (index.h("div", { class: "p-8" }, index.h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (index.h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (index.h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (index.h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), index.h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (index.h("div", { class: "flex items-center gap-8" }, index.h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), index.h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
+        return (
+        // Content-only render — no positioning, no overlay, no sizing.
+        // The host application wraps this component in whatever positioned
+        // container makes sense (fixed bottom banner, modal, sidebar slot,
+        // etc.). See packages/shared-hugo/layouts/_default/baseof.html for
+        // the bottom-centered card wrapper used by handbook/eds-docs.
+        index.h("div", null, index.h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (index.h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (index.h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (index.h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), index.h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (index.h("div", { class: "flex items-center gap-8" }, index.h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), index.h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     get el() { return index.getElement(this); }
 };
 EdsMatomoNotice.style = EdsMatomoNoticeStyle0;
 
-const edsNpsCss = ".flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.gap-2{gap:0.125rem}.gap-4{gap:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-dark)}.flex-wrap{flex-wrap:wrap}";
+const edsNpsCss = ".eds-nps__labels{padding-top:0.75rem;padding-bottom:0.5rem}.eds-nps__scale{display:block;width:fit-content;max-width:100%;padding-top:0.5rem;}#nps-buttons{gap:0.6rem}.eds-nps__btn{border-radius:9999px;transition:transform 0.15s ease-in-out}.eds-nps__btn.is-selected{transform:scale(1.12)}.flex{display:flex}.justify-between{justify-content:space-between}.mt-4{margin-top:0.25rem}.mt-8{margin-top:0.5rem}.ml-4{margin-left:0.25rem}.mr-4{margin-right:0.25rem}.gap-2{gap:0.125rem}.gap-4{gap:0.25rem}.grid{display:grid}.grid-col-span-1{--container-grid-columns:1;grid-column:span 1 / span 1}.grid-cols-11{grid-template-columns:repeat(11, minmax(0, 1fr))}.grid-cols-11[class*=\"grid-line-x\"][class*=\"grid-line-x\"]>*:nth-child(n)::before{border-bottom-width:1px}.grid-cols-11[class*=\"grid-line-xfull\"]>*:nth-child(n)::before{inset-inline-start:calc(var(--inner-gutter) / -2);inset-inline-end:calc(var(--inner-gutter) / -2)}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1)::before{inset-inline-start:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+11)::before{inset-inline-end:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-x\"]>*:nth-child(11n+1):nth-last-child(-n+11)~*::before{border-bottom-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(n)::after{border-inline-end-width:1px}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+11)::after{border-inline-end-width:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(-n+11)::after{top:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)::after{bottom:0}.grid-cols-11[class*=\"grid-line-y\"][class*=\"grid-line-y\"]>*:nth-child(11n+1):nth-last-child(-n+11)~li::after{bottom:0}.f-ui-04{font-family:var(--f-ui-04-fontFamily);font-weight:var(--f-ui-04-fontWeight);font-size:var(--f-ui-04-fontSize);line-height:var(--f-ui-04-lineHeight);letter-spacing:var(--f-ui-04-letterSpacing)}.text-light{color:var(--grey-dark)}.flex-wrap{flex-wrap:wrap}";
 const EdsNpsStyle0 = edsNpsCss;
 
 const EdsNps = class {
@@ -8429,14 +8756,14 @@ const EdsNps = class {
     }
     render() {
         const count = this.max - this.min + 1;
-        return (index.h("div", { key: '932d0a62e52376c1ddaf71e8d21bf5437c2d0b9f', class: "eds-nps" }, index.h("eds-input-label", { key: '60f5b6849dcc53f2a0d46fa5e44499076bd46174', id: "nps-question", name: "nps-question", label: this.question }), index.h("div", { key: '14d032aa6dc6b2cc67189f6e11a0fc59ca420cbb', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
+        return (index.h("div", { key: '412ddeabf0cc97829202063af25f17e3309b0754', class: "eds-nps" }, index.h("eds-input-label", { key: '100a47e710fa75d6a5761a87ca68e8bc8910e248', id: "nps-question", name: "nps-question", label: this.question }), index.h("div", { key: '9a7a63112e17f4c725005e1ae8e42c98107db7c4', class: "eds-nps__scale" }, index.h("div", { key: '501029dad573cd31d956ae3cae67f2db9f2649f1', id: "nps-buttons", role: "radiogroup", "aria-labelledby": "nps-question", onKeyDown: this.handleKeyNav, class: "flex flex-wrap gap-2 my-8" }, Array.from({ length: count }, (_, i) => {
             const val = this.min + i;
             const isSelected = val === this.internalValue;
             const tabIndex = isSelected || (this.internalValue == null && i === 0) ? 0 : -1;
-            return (index.h("div", { class: "flex", key: val }, index.h("eds-button", { ref: (el) => (this.btnRefs[i] = el), size: "large", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`, onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'brand' : 'neutral', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
+            return (index.h("div", { class: "flex", key: val }, index.h("eds-button", { ref: (el) => (this.btnRefs[i] = el), size: "large", role: "radio", "aria-checked": isSelected ? 'true' : 'false', "aria-label": `${val}`, onClick: () => this.onSelect(val), tabIndex: tabIndex, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-nps__btn is-selected' : 'eds-nps__btn', "extra-class": "!block !px-0 w-full", label: `${val}`, pill: true, onFocus: () => {
                     this.internalValue = val;
                 } })));
-        })), index.h("div", { key: 'f1fd58c7c1003f144b816c9a1d169a2edec4a768', class: "flex justify-between mt-8" }, index.h("span", { key: '476a3c3b3ef1c43744b8a69e577e597fff887beb', class: "f-ui-04 text-light ml-4" }, this.leftLabel), index.h("span", { key: '275ec0c204781365c2e57283c1096fadb853dbe5', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), index.h("div", { key: 'aa15457591f1edf6e59eed384bcfbb25d49c9fd5', class: "flex justify-between eds-nps__labels" }, index.h("span", { key: 'a468b290491e368e3084f17ce40c6aa39e00ad3a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), index.h("span", { key: '146b9eea4bbc360f7765e69e319738c77beae69d', class: "f-ui-04 text-light mr-4" }, this.rightLabel)))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -8686,7 +9013,7 @@ const EdsPagination = class {
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (index.h("div", { key: '6d7dea7a6d544bf79e944dfeb80cffb2f5a0b0cb' }, this.total > 0 && this.mode === 'default' && (index.h("p", { key: '77da5262419978bf0806155727f64c2c957e3bb1', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, index.h("span", { key: '537551dfe8de1af55d3350cef4fa62f503aba3c1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (index.h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, index.h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, index.h("li", { class: "mr-auto" }, this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "secondary", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
+        return (index.h("div", { key: '5c11fd306f0ebf47a452e44d633e18b2e3860d78' }, this.total > 0 && this.mode === 'default' && (index.h("p", { key: 'fe8b7f7b6c7785152f1edd90a750f4a9a7e2768b', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, index.h("span", { key: '5e2c67535dbf765dc662770164404f0de69315a1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (index.h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, index.h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, index.h("li", { class: "mr-auto" }, this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: this.prevLabel, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "ghost", "extra-class": "!p-8 lg:!pr-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isFirstPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) - 1);
                 }
@@ -8695,7 +9022,7 @@ const EdsPagination = class {
                 : this.isFirstPage()
                     ? '#'
                     : this.generateLink(this.currentPage - 1).url, disabled: this.mode === 'navigator' ? !this.prevUrl : this.isFirstPage(), "aria-label": "Go to previous page", icon: "chevron-left", "icon-pos": "left", size: "small", "icon-small": "true", intent: "strong", "hide-label-on-small-screen": true, class: "!p-8 lg:!pr-12" }))), this.mode === 'default' &&
-            this.links.map((link, index$1) => (index.h("li", { key: index$1, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (index.h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (index.h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), index.h("li", { class: "ml-auto" }, this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "secondary", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
+            this.links.map((link, index$1) => (index.h("li", { key: index$1, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (index.h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: link.label, "aria-label": link.current ? `Current page, page ${link.label}` : `Go to page ${link.label}`, "aria-current": link.current ? 'page' : undefined, size: "small", "extra-class": "!p-8 pagination-button", intent: link.current ? 'brand' : 'ghost', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))) : (index.h("eds-link", { url: link.url, "aria-label": link.ariaLabel, label: link.label, current: link.current, "aria-current": link.current ? 'page' : undefined, size: "small", class: "!p-8", intent: link.current ? 'primary' : 'secondary', onClick: (event) => this.handlePageClick(event, parseInt(link.label)) }))))), index.h("li", { class: "ml-auto" }, this.useButtons ? (index.h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, index.h("eds-button", { label: this.nextLabel, disabled: this.mode === 'navigator' ? !this.nextUrl : this.isLastPage(), "aria-label": "Go to next page", size: "small", "icon-small": "true", icon: "chevron-right", intent: "ghost", "extra-class": "!p-8 lg:!pl-12 pagination-button", onClick: (event) => {
                 if (this.mode === 'default' && !this.isLastPage()) {
                     this.handlePageClick(event, (this.currentPage || 1) + 1);
                 }
@@ -8771,7 +9098,7 @@ const EdsProgressBar = class {
 };
 EdsProgressBar.style = EdsProgressBarStyle0;
 
-const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--brand-green);}.star:hover,.star.filled:hover{transform:scale(1.2)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
+const edsRatingCss = ":host{display:inline-block}.block{display:block}.stars{display:flex;gap:0.25rem;cursor:pointer}.star{color:var(--star-empty-color, #ccc);transition:color 0.2s ease-in-out}.star.filled{color:var(--brand-green);}.star:hover,.star.filled:hover{transform:scale(1.2)}.eds-rating__btn{transition:transform 0.15s ease-in-out}.eds-rating__btn.is-selected{transform:scale(1.05)}.flex{display:flex}.inline-flex{display:inline-flex}.flex-col{flex-direction:column}.mt-4{margin-top:0.25rem}.mt-6{margin-top:0.375rem}.mt-8{margin-top:0.5rem}.my-4{margin-top:0.25rem;margin-bottom:0.25rem}.my-8{margin-top:0.5rem;margin-bottom:0.5rem}.my-16{margin-top:1rem;margin-bottom:1rem}.my-20{margin-top:1.25rem;margin-bottom:1.25rem}.space-x-1>:not([hidden])~:not([hidden]){--tw-space-x-reverse:0;margin-right:calc(0.0625rem * var(--tw-space-x-reverse));margin-left:calc(0.0625rem * calc(1 - var(--tw-space-x-reverse)))}";
 const EdsRatingStyle0 = edsRatingCss;
 
 const EdsRating = class {
@@ -8850,12 +9177,12 @@ const EdsRating = class {
         this.onSelect(next);
     }
     render() {
-        return (index.h("div", { key: '89671afe2d02d527001009ee83fb0d4e48550479', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index$1) => {
+        return (index.h("div", { key: '01857f12c63fbe53b95152902ddba594aa736f6f', id: "rating-buttons", role: "group", "aria-labelledby": "rating", class: "stars flex space-x-1 my-8", onKeyDown: (e) => this.handleKeyNav(e) }, Array.from({ length: this.ratingCount }, (_, index$1) => {
             const starRating = index$1 + 1;
             const isSelected = starRating <= this.internalRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.
             const checked = this.internalRating === starRating;
-            return (index.h("eds-button", { ref: (el) => (this.buttonRefs[index$1] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index$1 === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'neutral', size: "large" }));
+            return (index.h("eds-button", { ref: (el) => (this.buttonRefs[index$1] = el), icon: this.ratingType, "aria-label": `${starRating} ${this.ratingType}${starRating > 1 ? 's' : ''}`, onClick: () => this.onSelect(starRating), tabIndex: checked || (this.internalRating === 0 && index$1 === 0) ? 0 : -1, intent: isSelected ? 'brand' : 'brandLight', class: isSelected ? 'eds-rating__btn is-selected' : 'eds-rating__btn', size: "large" }));
         })));
     }
     get el() { return index.getElement(this); }
@@ -8865,6 +9192,295 @@ const EdsRating = class {
 };
 EdsRating.style = EdsRatingStyle0;
 
+const edsSearchSelectCss = ":host{display:block;width:100%;font-family:var(--f-ui-02-fontFamily, 'IBM Plex Sans', system-ui, sans-serif)}.eds-ss{position:relative;display:block;width:100%}.eds-ss__labelrow{display:flex;justify-content:space-between;margin-bottom:0.25rem}.eds-ss__hint{margin-top:0.5rem;margin-left:0.5rem;font-family:var(--f-ui-05-fontFamily);font-weight:var(--f-ui-05-fontWeight);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);letter-spacing:var(--f-ui-05-letterSpacing);color:var(--grey-600)}.eds-ss__control{position:relative}.eds-ss__box{display:flex;flex-wrap:wrap;align-items:center;gap:0.35rem;width:100%;box-sizing:border-box;min-height:2.5rem;padding:6px 0.75rem;padding-right:3.75rem;border-width:2px;border-style:solid;border-color:rgba(0, 0, 0, 0.1);border-radius:8px;background:var(--white, #fff);transition-property:color, background-color, border-color;transition-timing-function:cubic-bezier(0, 0, 0.2, 1);transition-duration:300ms}.eds-ss__box:hover{border-color:var(--brand-black)}.eds-ss__box:focus-within{border-color:var(--brand-black);outline:3px solid var(--brand-green);outline-offset:2px}.eds-ss__box.is-error{border-color:var(--red-700)}.eds-ss__box.is-disabled{cursor:not-allowed;background-color:var(--grey-300)}.eds-ss__input{flex:1;min-width:6rem;border:none;outline:none;background:transparent;padding:4px 0;color:var(--brand-black);font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}.eds-ss__input::placeholder{color:var(--grey-500)}.eds-ss__input:disabled{cursor:not-allowed;color:var(--grey-500)}.eds-ss__chip{display:inline-flex;align-items:center;gap:0.35rem;padding:4px 0.4rem 4px 0.7rem;background:rgba(0, 200, 123, 0.12);color:var(--brand-green-dark, #00A867);border-radius:6px;font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);font-weight:600;line-height:1.4;max-width:100%}.eds-ss__chip-label{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.eds-ss__chip-x{flex-shrink:0;border:none;background:none;cursor:pointer;color:var(--brand-green-dark, #00A867);font-size:1.2rem;line-height:1;padding:0 2px}.eds-ss__chip-x:hover{color:var(--brand-black, #07140D)}.eds-ss__clear,.eds-ss__chevron{position:absolute;top:50%;transform:translateY(-50%)}.eds-ss__chevron{right:6px;width:1.75rem;height:1.75rem;display:flex;align-items:center;justify-content:center;background-color:var(--grey-300);border-radius:4px;color:var(--brand-black);pointer-events:none}.eds-ss__clear{right:2.6rem;color:var(--grey-600, #6e6e6e);background:none;border:none;cursor:pointer;font-size:1.05rem;line-height:1}.eds-ss__clear:hover{color:var(--brand-black, #07140D)}.eds-ss__list{position:absolute;z-index:50;left:0;right:0;margin:0.25rem 0 0;padding:0.25rem;list-style:none;max-height:18rem;overflow-y:auto;background:var(--white, #fff);border:2px solid rgba(0, 0, 0, 0.1);border-radius:8px;box-shadow:0 8px 24px rgba(0, 0, 0, 0.12)}.eds-ss__option{padding:0.5rem 0.6rem;border-radius:6px;cursor:pointer;color:var(--brand-black, #07140D);font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.eds-ss__option.is-active{background:rgba(0, 200, 123, 0.1)}.eds-ss__option.is-selected{font-weight:600;color:var(--brand-green-dark, #00A867)}.eds-ss__status,.eds-ss__more{padding:0.5rem 0.6rem;font-family:var(--f-ui-05-fontFamily);font-size:var(--f-ui-05-fontSize);line-height:var(--f-ui-05-lineHeight);color:var(--grey-600, #6e6e6e)}.eds-ss__status.is-error{color:var(--red-700, #d64545)}.eds-ss__more{border-top:1px solid rgba(0, 0, 0, 0.1);margin-top:0.25rem;font-style:italic}";
+const EdsSearchSelectStyle0 = edsSearchSelectCss;
+
+const EdsSearchSelect = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.edsinput = index.createEvent(this, "edsinput", 7);
+        this.edschange = index.createEvent(this, "edschange", 7);
+        this.debounceTimer = null;
+        this.inlineOptions = [];
+        this.listboxId = `eds-ss-list-${Math.round(performance.now())}`;
+        // value -> label, so selected tags render readable labels even for remote
+        // values whose label hasn't been fetched in the current page.
+        this.labelCache = {};
+        this.onInput = (e) => {
+            this.query = e.target.value;
+            this.open = true;
+            this.activeIndex = -1;
+            this.runSearch(this.query);
+        };
+        this.clear = () => {
+            if (this.multiple) {
+                this.value = [];
+                this.emitValue([]);
+            }
+            else {
+                this.value = undefined;
+                this.selectedLabel = '';
+                this.emitValue('');
+            }
+            this.query = '';
+        };
+        this.onKeyDown = (e) => {
+            if (e.key === 'ArrowDown') {
+                e.preventDefault();
+                if (!this.open)
+                    return this.openMenu();
+                this.activeIndex = Math.min(this.activeIndex + 1, this.visibleItems.length - 1);
+            }
+            else if (e.key === 'ArrowUp') {
+                e.preventDefault();
+                this.activeIndex = Math.max(this.activeIndex - 1, 0);
+            }
+            else if (e.key === 'Enter') {
+                if (this.open && this.activeIndex >= 0) {
+                    e.preventDefault();
+                    this.select(this.visibleItems[this.activeIndex]);
+                }
+            }
+            else if (e.key === 'Escape') {
+                this.closeMenu();
+            }
+            else if (e.key === 'Backspace' && this.multiple && !this.query && this.selectedValues.length) {
+                // Backspace on an empty query removes the last selected tag.
+                this.removeValue(this.selectedValues[this.selectedValues.length - 1]);
+            }
+        };
+        // Close when a click lands outside the component. Must be shadow-aware:
+        // this component is nested inside eds-form's shadow root, so a document-level
+        // listener sees the event retargeted to the OUTER host — `host.contains(target)`
+        // would be false even for our own clicks and wrongly close on open. composedPath()
+        // walks through every shadow boundary and contains our host iff the click was ours.
+        this.onDocumentClick = (e) => {
+            if (this.open && !e.composedPath().includes(this.host))
+                this.closeMenu();
+        };
+        this.name = undefined;
+        this.label = undefined;
+        this.placeholder = 'Search…';
+        this.required = false;
+        this.disabled = false;
+        this.hint = undefined;
+        this.message = undefined;
+        this.error = false;
+        this.errorMessage = undefined;
+        this.value = undefined;
+        this.multiple = false;
+        this.options = undefined;
+        this.source = undefined;
+        this.apiBase = '/api/v1';
+        this.searchParam = 'q';
+        this.limit = 50;
+        this.debounceMs = 250;
+        this.maxVisible = 100;
+        this.open = false;
+        this.query = '';
+        this.loading = false;
+        this.fetchError = '';
+        this.items = [];
+        this.total = 0;
+        this.activeIndex = -1;
+        this.selectedLabel = '';
+    }
+    componentWillLoad() {
+        this.parseInlineOptions();
+        this.resolveSelectedLabel();
+    }
+    onOptionsChange() {
+        this.parseInlineOptions();
+        this.resolveSelectedLabel();
+    }
+    onValueChange() {
+        this.resolveSelectedLabel();
+    }
+    parseInlineOptions() {
+        if (!this.options) {
+            this.inlineOptions = [];
+            return;
+        }
+        if (typeof this.options === 'string') {
+            try {
+                this.inlineOptions = JSON.parse(this.options) || [];
+            }
+            catch (_a) {
+                this.inlineOptions = [];
+            }
+        }
+        else {
+            this.inlineOptions = this.options;
+        }
+        this.cacheLabels(this.inlineOptions);
+    }
+    cacheLabels(opts) {
+        (opts || []).forEach((o) => {
+            if (o && o.value != null)
+                this.labelCache[String(o.value)] = o.label;
+        });
+    }
+    /** The current selection as a value array (works for single + multi). */
+    get selectedValues() {
+        const v = this.value;
+        if (Array.isArray(v))
+            return v.map(String).filter((s) => s !== '');
+        if (typeof v === 'string' && v !== '') {
+            return this.multiple ? v.split(',').filter(Boolean) : [v];
+        }
+        return [];
+    }
+    labelFor(val) {
+        var _a, _b;
+        return (this.labelCache[String(val)] ||
+            ((_a = this.inlineOptions.find((o) => String(o.value) === String(val))) === null || _a === void 0 ? void 0 : _a.label) ||
+            ((_b = this.items.find((o) => String(o.value) === String(val))) === null || _b === void 0 ? void 0 : _b.label) ||
+            String(val));
+    }
+    emitValue(v) {
+        this.edsinput.emit({ value: v });
+        this.edschange.emit({ value: v });
+    }
+    get isRemote() {
+        return !!this.source && this.inlineOptions.length === 0;
+    }
+    resolveSelectedLabel() {
+        if (!this.value) {
+            this.selectedLabel = '';
+            return;
+        }
+        // Inline: resolve label from the known list. Remote: best-effort — show the
+        // value until/unless it appears in a fetched page.
+        const pool = this.inlineOptions.length ? this.inlineOptions : this.items;
+        const found = pool.find((o) => String(o.value) === String(this.value));
+        this.selectedLabel = found ? found.label : String(this.value);
+    }
+    // --- Data --------------------------------------------------------------
+    filterInline(q) {
+        const needle = q.trim().toLowerCase();
+        if (!needle)
+            return this.inlineOptions;
+        return this.inlineOptions.filter((o) => o.label.toLowerCase().includes(needle) ||
+            String(o.value).toLowerCase().includes(needle));
+    }
+    async fetchRemote(q) {
+        this.loading = true;
+        this.fetchError = '';
+        try {
+            const params = new URLSearchParams({ [this.searchParam]: q, limit: String(this.limit) });
+            const url = `${this.apiBase}/datasets/${encodeURIComponent(this.source)}/search?${params}`;
+            const resp = await fetch(url);
+            if (!resp.ok)
+                throw new Error(`Search failed: ${resp.statusText}`);
+            const data = await resp.json();
+            this.items = data.items || [];
+            this.cacheLabels(this.items);
+            this.total = typeof data.total === 'number' ? data.total : this.items.length;
+            this.resolveSelectedLabel();
+        }
+        catch (e) {
+            this.fetchError = e instanceof Error ? e.message : 'Search failed';
+            this.items = [];
+            this.total = 0;
+        }
+        finally {
+            this.loading = false;
+        }
+    }
+    runSearch(q, immediate = false) {
+        if (this.isRemote) {
+            // Show the loading state synchronously so the debounce window renders
+            // "Searching…" rather than a misleading "No matches" before the fetch.
+            this.loading = true;
+            clearTimeout(this.debounceTimer);
+            if (immediate) {
+                this.fetchRemote(q);
+            }
+            else {
+                this.debounceTimer = setTimeout(() => this.fetchRemote(q), this.debounceMs);
+            }
+        }
+        else {
+            this.items = this.filterInline(q);
+            this.total = this.items.length;
+        }
+    }
+    // --- The capped, render-ready slice ------------------------------------
+    get visibleItems() {
+        return this.items.slice(0, this.maxVisible);
+    }
+    get hiddenCount() {
+        return Math.max(0, this.total - this.visibleItems.length);
+    }
+    // --- Interaction -------------------------------------------------------
+    openMenu() {
+        if (this.disabled)
+            return;
+        this.open = true;
+        this.activeIndex = -1;
+        // Populate on first open (initial page for remote, full list for inline).
+        // Immediate fetch on open — debounce only applies to typing.
+        if (!this.items.length || this.isRemote)
+            this.runSearch(this.query, true);
+    }
+    closeMenu() {
+        this.open = false;
+        this.activeIndex = -1;
+    }
+    select(opt) {
+        this.labelCache[String(opt.value)] = opt.label;
+        if (this.multiple) {
+            const current = this.selectedValues;
+            const key = String(opt.value);
+            const next = current.includes(key)
+                ? current.filter((v) => v !== key) // toggle off if already chosen
+                : [...current, key];
+            this.value = next;
+            this.query = '';
+            this.emitValue(next);
+            // Keep the menu open so more can be picked; reset the list to all results.
+            this.runSearch('', true);
+            return;
+        }
+        this.value = opt.value;
+        this.selectedLabel = opt.label;
+        this.query = '';
+        this.closeMenu();
+        this.emitValue(opt.value);
+    }
+    removeValue(val, e) {
+        e === null || e === void 0 ? void 0 : e.stopPropagation();
+        const next = this.selectedValues.filter((v) => v !== String(val));
+        this.value = next;
+        this.emitValue(next);
+    }
+    connectedCallback() {
+        document.addEventListener('click', this.onDocumentClick, true);
+    }
+    disconnectedCallback() {
+        document.removeEventListener('click', this.onDocumentClick, true);
+        clearTimeout(this.debounceTimer);
+    }
+    render() {
+        const selected = this.selectedValues;
+        const hasSelection = selected.length > 0;
+        const inputValue = this.multiple ? this.query : (this.open ? this.query : this.selectedLabel);
+        const placeholder = this.multiple
+            ? (hasSelection ? '' : this.placeholder)
+            : (hasSelection && !this.open ? this.selectedLabel : this.placeholder);
+        return (index.h("div", { key: 'f5224332aa395be2a9dd8a1312dcd1b631ad2129', class: "eds-ss" }, (this.label || this.hint) && (index.h("div", { key: 'e28da19abdedb4107a7b7be2a59e6444780f8251', class: "eds-ss__labelrow" }, this.label && (index.h("eds-input-label", { key: '81933dbc2d370b8ddbbf8f4286c3420e4f140ca7', name: `${this.name}-input`, label: this.label, required: this.required, disabled: this.disabled })), this.hint && (index.h("p", { key: '1ff5b7a62cc20bb2ce710ca2e06c728d94aef895', id: `${this.name}-hint`, class: "eds-ss__hint" }, this.hint)))), index.h("div", { key: '84fbdccc6326707ac854e06d7209dd149d9c26a7', class: "eds-ss__control relative" }, index.h("div", { key: 'ae99c3d9c706fa6619459d8d6c9baa3df610169e', class: { 'eds-ss__box': true, 'is-error': this.error || !!this.fetchError, 'is-disabled': this.disabled } }, this.multiple &&
+            selected.map((v) => (index.h("span", { class: "eds-ss__chip", key: v }, index.h("span", { class: "eds-ss__chip-label" }, this.labelFor(v)), !this.disabled && (index.h("button", { type: "button", class: "eds-ss__chip-x", "aria-label": `Remove ${this.labelFor(v)}`, onMouseDown: (e) => { e.preventDefault(); this.removeValue(v, e); } }, "\u00D7"))))), index.h("input", { key: '18dcd5787c7636c09be7285fb85b77f5cae334c8', id: `${this.name}-input`, class: "eds-ss__input", type: "text", role: "combobox", autocomplete: "off", "aria-expanded": this.open ? 'true' : 'false', "aria-controls": this.listboxId, "aria-autocomplete": "list", placeholder: placeholder, value: inputValue, disabled: this.disabled, required: this.required && !hasSelection, onFocus: () => this.openMenu(), onInput: this.onInput, onKeyDown: this.onKeyDown })), !this.multiple && hasSelection && !this.disabled && (index.h("button", { key: 'c927fa49fb58b7abec13f6d436f1d1452f9644c5', type: "button", class: "eds-ss__clear", "aria-label": "Clear selection", onClick: this.clear }, "\u00D7")), index.h("span", { key: 'bff4bf41fb388f849ef9c0928f4aa88e065d718d', class: "eds-ss__chevron", "aria-hidden": "true" }, index.h("eds-icon-wrapper", { key: '7871955d6fc5626914995d51c1b4b3511b60febe', name: "chevron-right", size: 20 }))), this.open && (index.h("ul", { key: 'e529fe82576be45a0e99d4a020aa4f721b71686b', class: "eds-ss__list", id: this.listboxId, role: "listbox" }, this.loading && index.h("li", { key: 'fe8d73dfa0d6a5cf7e9bea4220511a22489884f8', class: "eds-ss__status" }, "Searching\u2026"), !this.loading && this.fetchError && index.h("li", { key: 'b708b1de4eee8e45287fd23f0bf63327032616d6', class: "eds-ss__status is-error" }, this.fetchError), !this.loading && !this.fetchError && this.visibleItems.length === 0 && (index.h("li", { key: '9400ac7a022f38935f05df3705e2a65acb9d4a04', class: "eds-ss__status" }, "No matches")), !this.loading &&
+            !this.fetchError &&
+            this.visibleItems.map((opt, i) => (index.h("li", { key: opt.value, class: { 'eds-ss__option': true, 'is-active': i === this.activeIndex, 'is-selected': selected.includes(String(opt.value)) }, role: "option", "aria-selected": selected.includes(String(opt.value)) ? 'true' : 'false', onMouseEnter: () => (this.activeIndex = i), onMouseDown: (e) => { e.preventDefault(); this.select(opt); } }, opt.label))), !this.loading && !this.fetchError && this.hiddenCount > 0 && (index.h("li", { key: '8e82d65e9da3755ad10ffaf0fc4a45f5bc365a48', class: "eds-ss__more" }, "+", this.hiddenCount, " more \u2014 keep typing to narrow")))), index.h("eds-input-footer", { key: '0564f006a874a3556118ce99441cbfabc230ac57', name: this.name, message: this.message, error: this.error, "error-message": this.errorMessage })));
+    }
+    get host() { return index.getElement(this); }
+    static get watchers() { return {
+        "options": ["onOptionsChange"],
+        "value": ["onValueChange"]
+    }; }
+};
+EdsSearchSelect.style = EdsSearchSelectStyle0;
+
 const edsSidebarCss = ":host{display:block;width:100%;height:100%;overflow-y:auto;overflow-x:hidden;transition:width 0.3s ease}:host(.collapsed){width:4rem}:host::-webkit-scrollbar{width:8px}:host::-webkit-scrollbar-track{background:transparent}:host::-webkit-scrollbar-thumb{background:rgba(0, 0, 0, 0.2);border-radius:4px}:host::-webkit-scrollbar-thumb:hover{background:rgba(0, 0, 0, 0.3)}.sidebar-nav{padding:0.5rem 0}.sidebar-header{display:flex;justify-content:flex-end;padding:0.5rem 0.75rem;margin-bottom:0.5rem}:host(.collapsed) .sidebar-header{justify-content:center;padding:0.5rem}.collapse-toggle{display:flex;align-items:center;justify-content:center;width:2rem;height:2rem;background:none;border:none;cursor:pointer;padding:0;border-radius:0.375rem;transition:background-color 0.15s ease;color:inherit}.collapse-toggle:hover{background-color:rgba(0, 0, 0, 0.08)}.collapse-toggle:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:2px}.sidebar-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:0.125rem}.sidebar-item{display:flex;flex-direction:column}.sidebar-item-content{display:flex;align-items:center;gap:0.5rem;padding:0.5rem 0.75rem;cursor:pointer;user-select:none;word-break:break-word;transition:background-color 0.15s ease;border-radius:0.375rem;margin:0 0.5rem;position:relative}:host(.collapsed) .sidebar-item-content{justify-content:center;padding:0.75rem;margin:0 0.5rem}.sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}.sidebar-item-content:focus-visible{outline:2px solid var(--eds-focus-color, #0066cc);outline-offset:-2px;z-index:1}.sidebar-icon{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem}.sidebar-content-wrapper{display:flex;align-items:center;gap:0.5rem;flex:1;min-width:0}.sidebar-toggle{display:flex;align-items:center;justify-content:center;flex-shrink:0;width:1.25rem;height:1.25rem;padding:0;margin:-0.125rem 0;pointer-events:none}.sidebar-link-wrapper{flex:1;min-width:0;pointer-events:none}.sidebar-link{font-weight:400;pointer-events:none}.sidebar-children{list-style:none;margin:0.25rem 0 0 0;padding:0;display:flex;flex-direction:column;gap:0.125rem;overflow:hidden;animation:slideDown 0.2s ease}@keyframes slideDown{from{opacity:0;transform:translateY(-0.25rem)}to{opacity:1;transform:translateY(0)}}.sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.collapsed) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}.sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}.sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}.sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}.sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}.sidebar-item.level-5 .sidebar-item-content{padding-left:7rem}:host(.theme-default) .sidebar-item-content{border-radius:0.375rem;margin:0 0.5rem;padding:0.5rem 0.75rem}:host(.theme-default.collapsed) .sidebar-item-content{margin:0 0.5rem;border-radius:0.375rem}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.04)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:transparent}:host(.theme-default) .sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:600}:host(.theme-default) .sidebar-item.level-0 .sidebar-item-content{padding-left:0.75rem}:host(.theme-default) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-default) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-default) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-default) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-item-content{border-radius:0;margin:0;padding-left:1rem;padding-right:1rem}:host(.theme-minimal.collapsed) .sidebar-item-content{margin:0 0.25rem;border-radius:0.375rem}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(0, 255, 157, 0.05);color:var(--brand-black, #07140D)}:host(.theme-minimal) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 255, 157, 0.1);border-left:3px solid var(--brand-green-dark, #00C87B);padding-left:calc(1rem - 3px);color:var(--brand-black, #07140D);font-weight:500}:host(.theme-minimal.collapsed) .sidebar-item.active>.sidebar-item-content{border-left:none;border-radius:0.375rem;padding-left:0.75rem;background-color:rgba(0, 255, 157, 0.1);color:var(--brand-black, #07140D)}:host(.theme-minimal) .sidebar-item.level-1.active>.sidebar-item-content{padding-left:calc(2rem - 3px)}:host(.theme-minimal) .sidebar-item.level-2.active>.sidebar-item-content{padding-left:calc(3.25rem - 3px)}:host(.theme-minimal) .sidebar-item.level-3.active>.sidebar-item-content{padding-left:calc(4.5rem - 3px)}:host(.theme-minimal) .sidebar-item.level-4.active>.sidebar-item-content{padding-left:calc(5.75rem - 3px)}:host(.theme-minimal) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-minimal) .sidebar-item.level-1 .sidebar-item-content{padding-left:2rem}:host(.theme-minimal) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.25rem}:host(.theme-minimal) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.5rem}:host(.theme-minimal) .sidebar-item.level-4 .sidebar-item-content{padding-left:5.75rem}:host(.theme-minimal) .sidebar-children{position:relative}:host(.theme-ebrains) .sidebar-item-content{padding:0.5rem 1rem;border-radius:0.5rem;margin:0 0.5rem}:host(.theme-ebrains.collapsed) .sidebar-item-content{padding:0.75rem}:host(.theme-ebrains) .sidebar-item-content:hover{background-color:rgba(0, 0, 0, 0.05)}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content{background-color:var(--brand-green-dark, #22c55e);color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-link{--eds-link-color:white;--eds-link-hover-color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-toggle{color:white}:host(.theme-ebrains) .sidebar-item.active>.sidebar-item-content .sidebar-icon{color:white}:host(.theme-ebrains) .sidebar-item.level-0 .sidebar-item-content{padding-left:1rem}:host(.theme-ebrains) .sidebar-item.level-1 .sidebar-item-content{padding-left:2.25rem}:host(.theme-ebrains) .sidebar-item.level-2 .sidebar-item-content{padding-left:3.5rem}:host(.theme-ebrains) .sidebar-item.level-3 .sidebar-item-content{padding-left:4.75rem}:host(.theme-ebrains) .sidebar-item.level-4 .sidebar-item-content{padding-left:6rem}@media (prefers-color-scheme: dark){.collapse-toggle:hover{background-color:rgba(255, 255, 255, 0.08)}:host(.theme-default) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.05)}:host(.theme-default) .sidebar-item.active>.sidebar-item-content{background-color:rgba(0, 102, 204, 0.15)}:host(.theme-minimal) .sidebar-item-content:hover{background-color:rgba(255, 255, 255, 0.06)}:host::-webkit-scrollbar-thumb{background:rgba(255, 255, 255, 0.2)}:host::-webkit-scrollbar-thumb:hover{background:rgba(255, 255, 255, 0.3)}}.sidebar-toggle eds-icon-wrapper,.sidebar-icon eds-icon-wrapper,.collapse-toggle eds-icon-wrapper{transition:transform 0.15s ease;display:flex;align-items:center;justify-content:center}.sidebar-item-content:focus-visible .sidebar-link{text-decoration:underline}.sidebar-item.active>.sidebar-item-content .sidebar-link{font-weight:500}:host(.collapsed) .sidebar-item-content::after{content:attr(title);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:0.5rem;padding:0.5rem 0.75rem;background:rgba(0, 0, 0, 0.9);color:white;border-radius:0.375rem;white-space:nowrap;font-size:0.875rem;opacity:0;pointer-events:none;transition:opacity 0.2s ease;z-index:1000}:host(.collapsed) .sidebar-item-content:hover::after{opacity:1;transition-delay:0.3s}.-ml-4{margin-left:-0.25rem}.mt-2{margin-top:0.125rem}";
 const EdsSidebarStyle0 = edsSidebarCss;
 
@@ -9016,10 +9632,10 @@ const EdsSidebar = class {
             } }, hasChildren && (index.h("span", { class: "sidebar-toggle -ml-4", "aria-hidden": "true" }, index.h("eds-icon-wrapper", { name: isOpen ? 'chevron-down' : 'chevron-right' }))), index.h("span", { class: "sidebar-link-wrapper" }, index.h("eds-link", { label: item.title, url: item.url || '#', intent: isActive ? 'strong' : 'weak', size: "small", "aria-label": item.title, "extra-class": "sidebar-link", tabindex: "-1" }))), hasChildren && isOpen && (index.h("ul", { id: childrenId, class: "sidebar-children" }, item.children.map((child) => this.renderItem(child, level + 1))))));
     }
     render() {
-        return (index.h(index.Host, { key: 'a56e293e9b53b0dbffd6268c117f77828ba5f41a', class: {
+        return (index.h(index.Host, { key: 'f5221c19e8148ca62a76fb470a4aa6786c3e41b5', class: {
                 'eds-sidebar': true,
                 [`theme-${this.theme}`]: true
-            } }, index.h("nav", { key: '07ca17add683f976b30e736389eddc473e1e5669', class: "sidebar-nav", "aria-label": "Sidebar" }, index.h("ul", { key: 'a102418d399f14715eddf34e1c3373cf1be9d4aa', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
+            } }, index.h("nav", { key: '0a975a10a3892f6eabaf2a1c2be21963f0e76549', class: "sidebar-nav", "aria-label": "Sidebar" }, index.h("ul", { key: '498436fa1f4ec7ff2f3feea843fe58b415d20a3f', class: "sidebar-list" }, this.parsedItems.map((item) => this.renderItem(item, 0))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -9085,7 +9701,7 @@ const EdsSocialNetworks = class {
         const isInverse = this.variant === 'inverse';
         const textClass = isInverse ? 'text-inverse' : '';
         const linkIntent = isInverse ? 'inverse' : 'strong';
-        return (index.h("nav", { key: '11b876483142bb98c686a4cb722d28022ca9f40c', "aria-label": "Social media" }, index.h("p", { key: 'daf2865247ed69ab3e4233d191d8abb8d5be584f', class: `f-ui-02 ${textClass}` }, this.heading), index.h("ul", { key: '47918284e8a158d523d3329eb28f4881ac27233e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index$1) => (index.h("li", { key: index$1 }, index.h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
+        return (index.h("nav", { key: '924bdf5a32b65cd0968ad92461cb8203f3305fce', "aria-label": "Social media" }, index.h("p", { key: 'f406d71ed2d7ff9048e5db05f5ad62566081aa45', class: `f-ui-02 ${textClass}` }, this.heading), index.h("ul", { key: '40d000bc78780d7ec3c0c9bf2e10ec0a26f3b72e', class: "mt-12 flex gap-4" }, this.socialNetworks.map((network, index$1) => (index.h("li", { key: index$1 }, index.h("eds-link", { external: true, "aria-label": `EBRAINS on ${network.label}`, url: network.url, icon: network.icon, intent: linkIntent })))))));
     }
 };
 EdsSocialNetworks.style = EdsSocialNetworksStyle0;
@@ -9166,7 +9782,7 @@ const EdsSpinner = class {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (index.h(index.Host, { key: '16d20431aaa90a29b6e3d32cbd3403ece1f45345' }, index.h("div", { key: '0e29dafa5eb3a84f31305614ae083356604a81bf', class: "spinner-overlay", style: overlayStyle }, index.h("span", { key: 'cf63a83095e35a1ca4328fd14293e6895d8d9811', class: "spinner", style: spinnerStyle }), this.message && index.h("p", { key: '7bb83c40db5dc985c429ca6ac171145db80c011d', class: "f-ui-01" }, this.message))));
+        return (index.h(index.Host, { key: 'c09fa07856848a03aab44bbb56ecdd66a986bb40' }, index.h("div", { key: '544c653e9e0457d2063eaefc5ff1fe88de89f14e', class: "spinner-overlay", style: overlayStyle }, index.h("span", { key: 'e389aa572863a265c9aa68d587ad744f1c8db0a7', class: "spinner", style: spinnerStyle }), this.message && index.h("p", { key: '5e554fe1b870e673c5b3da3ec2a227e92dd9863d', class: "f-ui-01" }, this.message))));
     }
 };
 EdsSpinner.style = EdsSpinnerStyle0;
@@ -9615,7 +10231,7 @@ const EdsStepsV2 = class {
         const steps = this.parsedSteps;
         const marginClass = this.orientation === 'horizontal' ? 'mt-64' : 'mt-32';
         const themeClass = this.theme === 'brand' ? 'theme-brand' : 'theme-default';
-        return (index.h("div", { key: '0f95d17cc699c020419593bec5ed76c4515501c9', class: this.articleClasses() }, this.imageSrc ? (index.h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, index.h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (index.h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, index.h("div", { class: "p-24" }, index.h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), index.h("div", { key: 'ed26ac9fc5cc4d7c409d29c3cd623e37a5abc944', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (index.h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, index.h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index$1) => {
+        return (index.h("div", { key: 'e1d78d18506adb662bbcc100f6f886e33c21a996', class: this.articleClasses() }, this.imageSrc ? (index.h("div", { class: "w-full mb-12 rounded-t-lg overflow-hidden border-2" }, index.h("eds-img", { src: this.imageSrc, width: this.imageWidth, "with-bg": "true", "lazy-load": "true", alt: "Step illustration" }))) : (this.message && (index.h("div", { class: `w-full ${this.theme === 'brand' ? 'bg-strongest' : 'bg-darker'} rounded-t-lg border-2` }, index.h("div", { class: "p-24" }, index.h("span", { class: `${this.theme === 'brand' ? 'text-accent' : 'text-inverse'} f-heading-04` }, this.message))))), index.h("div", { key: '5b69e2c641d96025b34377fc647679f94d0e4e44', class: "mt-16 pb-20 px-8" }, this.type === 'linear' && this.orientation === 'horizontal' ? (index.h("div", { class: `steps--horizontal ${themeClass}`, style: { '--step-count': steps.length.toString() } }, index.h("div", { class: "horizontal-indicators" }, steps.map((step, index) => this.renderHorizontalIndicator(step, index))), steps.map((step, index$1) => {
             const isLast = index$1 === steps.length - 1;
             if (this.activeStep !== index$1) {
                 return null;
@@ -9720,7 +10336,7 @@ const EdsSwitch = class {
 };
 EdsSwitch.style = EdsSwitchStyle0;
 
-const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}tr.table-row-default{background-color:transparent}tr.table-row-color:nth-child(even){background-color:var(--grey-light)}tr.table-row-color:nth-child(odd){background-color:transparent}.brand-table-wrapper{margin-top:2rem;width:100%}.brand-table{width:100% !important;border-collapse:separate !important;border-spacing:0 !important;display:table !important;table-layout:fixed !important}.brand-thead{background:var(--grey-light)}.brand-header-row{border:none !important}.brand-header-row th{padding:1rem 1.5rem !important;text-align:center !important;font-weight:600 !important;font-size:0.9rem !important;text-transform:uppercase;letter-spacing:0.05em;color:var(--grey-dark) !important;border:none !important;overflow-wrap:break-word !important;word-wrap:break-word !important}.brand-header-row th:first-child{border-radius:0.5rem 0 0 0;padding-left:2rem !important}.brand-header-row th:last-child{border-radius:0 0.5rem 0 0;padding-right:2rem !important}.brand-row{border-bottom:1px solid var(--grey-light) !important;transition:all 0.3s ease;cursor:pointer;position:relative;background:transparent !important}.brand-row:hover{background:rgba(0, 255, 157, 0.05) !important}.brand-row td{padding:1.5rem 1.5rem !important;border:none !important;vertical-align:middle;position:relative;z-index:1;overflow-wrap:break-word !important;word-wrap:break-word !important}.brand-row td:first-child{padding-left:2rem !important}.brand-row td:last-child{padding-right:2rem !important}.brand-row .actions-cell{text-align:right !important}.brand-table tr.brand-row{border-left:none;border-right:none;border-top:none}.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}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}.controls-container{display:flex;width:100%}.view-toggle-wrapper{flex-shrink:0}.search-wrapper{min-width:0}.card-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:1.5rem;margin-top:1.5rem}.data-card{background:var(--white);border:1px solid var(--grey-light);border-radius:0.75rem;padding:1.5rem;transition:all 0.3s ease;display:flex;flex-direction:column;gap:1rem}.data-card:hover{border-color:var(--brand-green);box-shadow:0 4px 12px rgba(0, 255, 157, 0.1);transform:translateY(-2px)}.card-content{display:flex;flex-direction:column;gap:0.75rem;flex:1}.card-field{display:flex;flex-direction:column;gap:0.25rem}.card-label{font-family:var(--f-ui-03-fontFamily);font-size:var(--f-ui-03-fontSize);font-weight:var(--f-ui-03-fontWeight);line-height:var(--f-ui-03-lineHeight);text-transform:uppercase;letter-spacing:0.05em;color:var(--grey-dark)}.card-value{font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);color:var(--brand-black);word-wrap:break-word}.card-actions{display:flex;gap:0.5rem;justify-content:flex-end;padding-top:0.75rem;border-top:1px solid var(--grey-light)}@media (min-width: 640px){.card-grid{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}}@media (min-width: 1024px){.card-grid{grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:2rem}}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-16{gap:1rem}.mb-16{margin-bottom:1rem}.w-full{width:100%}.w-auto{width:auto}@media (min-width: 750px){.flex-md-row{flex-direction:row}.items-md-center{align-items:center}.w-md-auto{width:auto}.w-md-400{width:400px}}";
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.brand-table-wrapper{margin-top:2rem;width:100%}.brand-table{width:100% !important;border-collapse:separate !important;border-spacing:0 !important;display:table !important;table-layout:fixed !important}.brand-thead{background:var(--grey-light)}.brand-header-row{border:none !important}.brand-header-row th{padding:1rem 1.5rem !important;text-align:center !important;font-weight:600 !important;font-size:0.9rem !important;text-transform:uppercase;letter-spacing:0.05em;color:var(--grey-dark) !important;border:none !important;overflow-wrap:break-word !important;word-wrap:break-word !important}.brand-header-row th:first-child{border-radius:0.5rem 0 0 0;padding-left:2rem !important}.brand-header-row th:last-child{border-radius:0 0.5rem 0 0;padding-right:2rem !important}.brand-row{border-bottom:1px solid var(--grey-light) !important;transition:all 0.3s ease;position:relative;background:transparent !important}.brand-row.has-actions{cursor:pointer}.brand-row:hover{background:rgba(0, 255, 157, 0.05) !important}.brand-row td{padding:1.5rem 1.5rem !important;border:none !important;vertical-align:middle;position:relative;z-index:1;overflow-wrap:break-word !important;word-wrap:break-word !important}.brand-row td:first-child{padding-left:2rem !important}.brand-row td:last-child{padding-right:2rem !important}.brand-row .actions-cell{text-align:right !important}.brand-table tr.brand-row{border-left:none;border-right:none;border-top:none}.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}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){background-color:rgba(255, 255, 255, .15)}.px-8{padding-left:0.5rem;padding-right:0.5rem}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}.controls-container{display:flex;width:100%}.view-toggle-wrapper{flex-shrink:0}.search-wrapper{min-width:0}.card-grid{display:grid;grid-template-columns:repeat(auto-fill, minmax(300px, 1fr));gap:1.5rem;margin-top:1.5rem}.data-card{background:var(--white);border:1px solid var(--grey-light);border-radius:0.75rem;padding:1.5rem;transition:all 0.3s ease;display:flex;flex-direction:column;gap:1rem}.data-card:hover{border-color:var(--brand-green);box-shadow:0 4px 12px rgba(0, 255, 157, 0.1);transform:translateY(-2px)}.card-content{display:flex;flex-direction:column;gap:0.75rem;flex:1}.card-field{display:flex;flex-direction:column;gap:0.25rem}.card-label{font-family:var(--f-ui-03-fontFamily);font-size:var(--f-ui-03-fontSize);font-weight:var(--f-ui-03-fontWeight);line-height:var(--f-ui-03-lineHeight);text-transform:uppercase;letter-spacing:0.05em;color:var(--grey-dark)}.card-value{font-family:var(--f-ui-02-fontFamily);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);color:var(--brand-black);word-wrap:break-word}.card-field:first-child .card-value{font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight)}.card-actions{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:0.5rem;padding-top:0.75rem;border-top:1px solid var(--grey-light)}@media (min-width: 640px){.card-grid{grid-template-columns:repeat(auto-fill, minmax(320px, 1fr))}}@media (min-width: 1024px){.card-grid{grid-template-columns:repeat(auto-fill, minmax(350px, 1fr));gap:2rem}}.flex-col{flex-direction:column}.flex-row{flex-direction:row}.items-start{align-items:flex-start}.items-center{align-items:center}.gap-16{gap:1rem}.mb-16{margin-bottom:1rem}.w-full{width:100%}.w-auto{width:auto}@media (min-width: 750px){.flex-md-row{flex-direction:row}.items-md-center{align-items:center}.w-md-auto{width:auto}.w-md-400{width:400px}}";
 const EdsTableStyle0 = edsTableCss;
 
 const EdsTable = class {
@@ -9792,11 +10408,10 @@ const EdsTable = class {
         this.paginationEnabled = true;
         this.searchEnabled = false;
         this.hostWidth = undefined;
-        this.columnSize = 'default';
         this.actions = [];
         this.actionTemplate = undefined;
         this.sortingEnabled = false;
-        this.theme = 'color';
+        this.theme = 'brand';
         this.view = 'table';
         this.showViewToggle = false;
         this.parsedActions = [];
@@ -9828,6 +10443,8 @@ const EdsTable = class {
         }
     }
     componentWillLoad() {
+        // 'default' / 'color' themes are disabled — always render the brand theme.
+        this.theme = 'brand';
         this.parseConfig();
         this.handleActionsChange();
         this.parseData();
@@ -9963,19 +10580,6 @@ const EdsTable = class {
             this.columns.push('actions');
         }
     }
-    getVisibleColumnsCount() {
-        return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
-    }
-    divisionFactor() {
-        let divisionFactor = 1;
-        if (this.columnSize === 'medium') {
-            divisionFactor = 2;
-        }
-        else if (this.columnSize === 'large') {
-            divisionFactor = 4;
-        }
-        return divisionFactor;
-    }
     capitalize(str) {
         return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
     }
@@ -10010,24 +10614,23 @@ const EdsTable = class {
         const dataColumns = this.columns.filter((col) => { var _a; return col !== 'actions' && !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); });
         return (index.h("div", { class: "card-grid" }, rows.map((row) => (index.h("div", { class: "data-card" }, index.h("div", { class: "card-content" }, dataColumns.map((col) => (index.h("div", { class: "card-field" }, index.h("span", { class: "card-label" }, this.capitalize(col)), index.h("span", { class: "card-value" }, this.renderCell(row[col], col)))))), this.parsedActions.length > 0 && (index.h("div", { class: "card-actions" }, this.parsedActions.map((act) => (index.h("span", null, this.renderSingleActionCell(act.name, row)))))))))));
     }
-    renderTableView(paginatedRows, currentContainerWidth, visibleColumnsCount) {
-        const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
+    renderTableView(paginatedRows) {
         return (index.h("div", { class: `mt-20 ${this.theme === 'brand' ? 'brand-table-wrapper' : ''}` }, index.h("table", { class: `${this.theme === 'brand' ? '' : 'block overflow-x-auto'} mt-6 p-0 ${this.theme === 'brand' ? 'brand-table' : ''}` }, index.h("thead", { class: this.theme === 'brand' ? 'brand-thead' : '' }, index.h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-header-row' : ''}` }, this.columns
             .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
             .map((col) => {
             if (col === 'actions') {
-                return (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }));
+                return (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words" }));
             }
-            return (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }, index.h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, index.h("span", null, this.capitalize(col)), this.sortingEnabled && (index.h("eds-icon-wrapper", { name: this.sortColumn === col
+            return (index.h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words" }, index.h("div", { style: { display: 'flex', alignItems: 'center', justifyContent: 'center', gap: '0.25rem' } }, index.h("span", null, this.capitalize(col)), this.sortingEnabled && (index.h("eds-icon-wrapper", { name: this.sortColumn === col
                     ? this.sortDirection === 'asc'
                         ? 'chevron-up'
                         : 'chevron-down'
                     : 'chevron-down', "aria-label": `Sort by ${col}`, onClick: () => this.handleSort(col), style: { cursor: 'pointer' } })))));
-        }))), index.h("tbody", null, paginatedRows.map((row) => (index.h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-row' : ''}` }, this.columns
+        }))), index.h("tbody", null, paginatedRows.map((row) => (index.h("tr", { class: `m-0 p-0 border border-softer table-row-${this.theme} ${this.theme === 'brand' ? 'brand-row' : ''} ${this.parsedActions.length > 0 ? 'has-actions' : ''}` }, this.columns
             .filter((col) => { var _a; return col === 'actions' || !((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden); })
             .map((col) => {
             if (col === 'actions') {
-                return (index.h("td", { class: "text-center border border-softer m-0 f-ui-01 break-words actions-cell", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }, index.h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
+                return (index.h("td", { class: "text-center border border-softer m-0 f-ui-01 break-words actions-cell" }, index.h("div", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, style: {
                         display: 'flex',
                         gap: '0.5rem',
                         justifyContent: 'center',
@@ -10035,18 +10638,16 @@ const EdsTable = class {
                     } }, this.parsedActions.map((act) => (index.h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
             }
             // Regular data cell
-            return (index.h("td", { class: "text-center border border-softer m-0 py-8 f-ui-02 break-words", style: this.theme === 'brand' ? {} : { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
+            return (index.h("td", { class: "text-center border border-softer m-0 py-8 f-ui-02 break-words" }, this.renderCell(row[col], col)));
         }))))))));
     }
     render() {
-        const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        const visibleColumnsCount = this.getVisibleColumnsCount();
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
         const showControls = this.showViewToggle || this.searchEnabled;
-        return (index.h("div", { key: 'ca547566767c7bccd7b894dad5819ed74e9e281d' }, showControls && (index.h("div", { key: '47c6fa14c2dbe499617dc31df1fd578bde473c6f', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (index.h("div", { key: '7f63fd07e67eaca9abc9d0700d7824e0f474dc23', class: "view-toggle-wrapper" }, index.h("eds-switch", { key: 'f52b744b0e83295c1641f338212bae5843970ab9', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (index.h("div", { key: '5ebb3620be6161a1d7e1881cb5d33f5aac2e12a4', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, index.h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card'
+        return (index.h("div", { key: '1e8a2f5f19df240ee3a57951641b60b947342fad' }, showControls && (index.h("div", { key: '778fe091226330448bba089189e9dd6a6aa977a9', class: "controls-container flex-col flex-md-row items-start items-md-center justify-between gap-16 mb-16" }, this.showViewToggle && (index.h("div", { key: '7ef287464bb2fba846be5341f4bb0e71d982be0e', class: "view-toggle-wrapper" }, index.h("eds-switch", { key: '2d3a494a5b354a14c8e882a153633bd5e85a40ab', variant: "segmented", labelOff: "Table View", labelOn: "Card View", checked: this.view === 'card', onUiswitch: this.handleViewChange }))), this.searchEnabled && (index.h("div", { key: 'dfcf6d0bdc23cb10481121881a7656b02a0599c1', class: `search-wrapper w-full ${this.showViewToggle ? 'w-md-400' : ''}` }, index.h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))))), this.view === 'card'
             ? this.renderCardView(paginatedRows)
-            : this.renderTableView(paginatedRows, currentContainerWidth, visibleColumnsCount), this.shouldEnablePagination() && (index.h("div", { key: 'bed5232d5ff9d7cac22ac2537876a388f35c85a6', class: "mt-20" }, index.h("eds-pagination", { key: 'ec91525689028f6cfe2721e290f5c5c7097ab67a', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            : this.renderTableView(paginatedRows), this.shouldEnablePagination() && (index.h("div", { key: '3f7faafdd6147855cb8812ff6303c335c7fd1f35', class: "mt-20" }, index.h("eds-pagination", { key: '17705ba01a8ca8cc79bacfce34e55f11ce53d70c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return index.getElement(this); }
     static get watchers() { return {
@@ -10057,7 +10658,7 @@ const EdsTable = class {
 };
 EdsTable.style = EdsTableStyle0;
 
-const edsTabsCss = ":host{display:block}.tabs-container{display:flex;gap:0.25rem;padding:0.25rem;border-radius:10px;width:fit-content;margin-bottom:3rem}.tabs-container-default{background-color:var(--brand-black, #07140D);border:1px solid rgba(255, 255, 255, 0.06)}.tabs-container-inverse{background:rgba(0, 0, 0, 0.02);border:1px solid rgba(0, 0, 0, 0.06)}.tabs-nav{display:flex;gap:0.25rem}.tab{padding:0.625rem 1.25rem;border-radius:8px;font-size:1.125rem;cursor:pointer;transition:all 0.2s ease;border:none;background:transparent;font-family:'IBM Plex Sans', sans-serif;white-space:nowrap;outline:none}.tab:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px}.tab-default{color:var(--grey-700)}.tab-default:hover{color:var(--white)}.tab-default.tab-active{background:rgba(0, 255, 157, 0.1);color:var(--brand-green)}.tab-inverse{color:var(--grey-700)}.tab-inverse:hover{color:var(--brand-black)}.tab-inverse.tab-active{background:rgba(0, 200, 123, 0.1);color:var(--brand-green-dark)}.tab-panels{margin-top:2rem}.tab-panels>div{outline:none}.tab-panels>div:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px;border-radius:4px}@media (max-width: 768px){.tabs-container{width:100%;overflow-x:auto}.tabs-nav{width:100%;min-width:fit-content}}";
+const edsTabsCss = ":host{display:block}.tabs-container{display:flex;gap:0.25rem;padding:0.25rem;border-radius:10px;width:fit-content;margin-bottom:3rem}.tabs-container-default{background-color:var(--brand-black, #07140D);border:1px solid rgba(255, 255, 255, 0.06)}.tabs-container-inverse{background:rgba(0, 0, 0, 0.02);border:1px solid rgba(0, 0, 0, 0.06)}.tabs-nav{display:flex;gap:0.25rem}.tab{padding:0.625rem 1.25rem;border-radius:8px;font-size:1.125rem;cursor:pointer;transition:color 0.15s ease;border:none;background:transparent;font-family:'IBM Plex Sans', sans-serif;white-space:nowrap;outline:none}.tab:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px}.tab-default{color:var(--grey-700)}.tab-default:hover{color:var(--white)}.tab-default.tab-active{background:rgba(0, 255, 157, 0.1);color:var(--brand-green)}.tab-inverse{color:var(--grey-700)}.tab-inverse:hover{color:var(--brand-black)}.tab-inverse.tab-active{background:rgba(0, 200, 123, 0.1);color:var(--brand-green-dark)}.tab-panels{margin-top:2rem}.tab-panels>div{outline:none}.tab-panels>div:focus-visible{outline:3px solid var(--brand-green);outline-offset:2px;border-radius:4px}@media (max-width: 768px){.tabs-container{width:100%;overflow-x:auto}.tabs-nav{width:100%;min-width:fit-content}}";
 const EdsTabsStyle0 = edsTabsCss;
 
 const EdsTabs = class {
@@ -10084,14 +10685,28 @@ const EdsTabs = class {
     }
     /**
      * Parses the `tabs` prop into an array of tab objects.
+     *
+     * Note: we deliberately do NOT clear `tabRefs` here. Consumers
+     * often re-pass `tabs` with an updated `active` flag every time
+     * the user switches tabs (Vue/React re-render on event). Wiping
+     * the refs leaves a window in which a queued focus() call sees
+     * `tabRefs[index] === undefined` and silently no-ops — focus
+     * gets stuck on the previous tab even though `aria-selected` and
+     * the background already moved. Stencil re-binds refs on render,
+     * so the array stays in sync without us emptying it; we only
+     * truncate when the new list is shorter to drop stale entries.
      */
     parseTabs() {
         this.parsedTabs = sharedUtils.parseData(this.tabs);
-        this.tabRefs = [];
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
+        }
     }
     componentDidUpdate() {
-        if (this.tabRefs.length !== this.parsedTabs.length) {
-            this.tabRefs = new Array(this.parsedTabs.length).fill(null);
+        // Same reasoning as parseTabs: only shrink, never re-allocate
+        // to nulls — that would re-introduce the silent-no-op window.
+        if (this.tabRefs.length > this.parsedTabs.length) {
+            this.tabRefs.length = this.parsedTabs.length;
         }
     }
     setActiveIndex() {
@@ -10102,6 +10717,7 @@ const EdsTabs = class {
         }
     }
     handleTabClick(index, tabLabel, shouldFocus = true) {
+        var _a;
         if (index < 0 || index >= this.parsedTabs.length) {
             return;
         }
@@ -10116,11 +10732,34 @@ const EdsTabs = class {
                 action: 'click'
             });
         }
-        if (shouldFocus && this.tabRefs[index]) {
-            setTimeout(() => {
+        if (shouldFocus) {
+            // Focus must move SYNCHRONOUSLY, while the keydown event
+            // that triggered this call is still on the stack. Otherwise
+            // the browser's `:focus-visible` heuristic doesn't flag the
+            // focus move as keyboard-driven and the outline never paints
+            // — accessibility regression (WCAG 2.4.7).
+            //
+            // We query by static id (`#tab-${index}`) instead of using
+            // `tabRefs[index]` because consumer-driven prop changes can
+            // briefly drop the cached ref. The button id is set in
+            // `render()` and doesn't depend on active state, so it is
+            // always findable.
+            const findBtn = () => { var _a; return ((_a = this.el.shadowRoot) !== null && _a !== void 0 ? _a : this.el).querySelector(`#tab-${index}`); };
+            (_a = findBtn()) === null || _a === void 0 ? void 0 : _a.focus();
+            // Belt-and-suspenders: if a consumer reacts to the `tab`
+            // event by re-rendering our buttons (rare, but possible
+            // when the `tabs` prop is recomputed), the sync focus above
+            // landed on a button that is now detached. Re-focus once
+            // the next frame's DOM is in place. We only act if focus
+            // genuinely isn't on the right element, to avoid a redundant
+            // focus call that would reset selection/IME state.
+            requestAnimationFrame(() => {
                 var _a;
-                (_a = this.tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
-            }, 0);
+                const after = findBtn();
+                if (after && ((_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.activeElement) !== after) {
+                    after.focus();
+                }
+            });
         }
     }
     onKeyDown(ev, idx) {
@@ -10154,7 +10793,7 @@ const EdsTabs = class {
             'tabs-container',
             `tabs-container-${this.variant}`
         ].join(' ');
-        return (index.h("div", { key: '66e0871d6cd917c15598b6e3ea80e5ff82970029', id: `${this.identifier}` }, index.h("div", { key: 'c65163e33fcf4960bbcc367a2abf62c0aec99446', class: containerClasses }, index.h("nav", { key: 'fae5e0f23904318299d60e1d3212f84b8c5a0bed', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
+        return (index.h("div", { key: '646f43031cde2e0ab84d2830fd9477841b3c757b', id: `${this.identifier}` }, index.h("div", { key: '2eb01c96640c6fc602777f227525066e5970489e', class: containerClasses }, index.h("nav", { key: 'b419fc7414574ea70b19433a3c5daa63b5ad6652', role: "tablist", class: "tabs-nav", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index$1) => {
             const isActive = index$1 === this.activeIndex;
             const tabClasses = [
                 'tab',
@@ -10162,7 +10801,7 @@ const EdsTabs = class {
                 isActive ? 'tab-active' : ''
             ].filter(Boolean).join(' ');
             return (index.h("button", { class: tabClasses, type: "button", role: "tab", "aria-selected": isActive ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index$1}`, id: `tab-${index$1}`, ref: (el) => this.setTabRef(el, index$1), onClick: () => this.handleTabClick(index$1, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index$1) }, tab.label || tab.ariaLabel));
-        }))), index.h("div", { key: 'a259d3e45fbcc5f75303cf8eb256374c67c62db1', class: "tab-panels" }, this.parsedTabs.map((_, index$1) => (index.h("div", { role: "tabpanel", id: `panel-${index$1}`, "aria-labelledby": `tab-${index$1}`, hidden: index$1 !== this.activeIndex, tabIndex: index$1 === this.activeIndex ? 0 : -1 }, index.h("slot", { name: `panel-${index$1}` })))))));
+        }))), index.h("div", { key: '0ce244b3d2b2120d1bdf127144e9b42e2ad34e52', class: "tab-panels" }, this.parsedTabs.map((_, index$1) => (index.h("div", { role: "tabpanel", id: `panel-${index$1}`, "aria-labelledby": `tab-${index$1}`, hidden: index$1 !== this.activeIndex, tabIndex: index$1 === this.activeIndex ? 0 : -1 }, index.h("slot", { name: `panel-${index$1}` })))))));
     }
     get el() { return index.getElement(this); }
     static get watchers() { return {
@@ -10206,7 +10845,7 @@ const EdsTag = class {
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return (index.h("span", { key: 'ca20e54df5fc895110b39ce7875c3c0026e94fc3', class: classes }, index.h("span", { key: '5ad7ada1ae051ff2840bb033ec683b44477f6684', style: { position: 'relative', zIndex: '1' } }, this.label)));
+        return (index.h("span", { key: '20e1625ac01b0dc1f40356d02622e0649faa7fa7', class: classes }, index.h("span", { key: '313c3f18c0a5df285afe6a40ded9e68035d9648f', style: { position: 'relative', zIndex: '1' } }, this.label)));
     }
 };
 EdsTag.style = EdsTagStyle0;
@@ -10304,7 +10943,7 @@ const EdsTooltip = class {
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (index.h("div", { key: '240956acf8218cb0b36254aecd629058ad39f4eb', class: "relative w-full inline-block group" }, index.h("slot", { key: '4424c8de31fd4e2aa702369314cf0819447ca364' }), index.h("div", { key: 'f260ef6ee9700231dc77ddc9debc7f5b92f546c6', class: `absolute ${positionClass}
+        return (index.h("div", { key: '8b4396894b1ec7cc1c2d928ffa5b3d7628f8c4ee', class: "relative w-full inline-block group" }, index.h("slot", { key: 'c2547098aacc584960f217edcafeb060ce742adc' }), index.h("div", { key: '1e6beac7e4294456f7a6130c4b0573cce3e4b548', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
@@ -10359,7 +10998,7 @@ const EdsUser = class {
     render() {
         const user = this.parsedUser;
         //const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
-        return (index.h("div", { key: 'd23f741600ca86103642bfe17058e8e966ed00e0', class: "block" }, index.h("div", { key: 'cf73f261fdd219f236a93b4162656ef3178ca419', class: "flex items-center" }, index.h("eds-dropdown", { key: 'c69a3c95348c765d893aa01d5631d122de428970', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, index.h("div", { key: 'f142afdf77953f791ca0478af862934d0904dabb', class: "min-w-[280px] p-8" }, index.h("div", { key: '7ee37a9f2175e626c278071a409a5c26f4331c8a', class: "flex gap-x-16", "data-dropdown-no-close": true }, index.h("eds-avatar", { key: '7248877a0579d8d15dec94b994af5150c9dbf2c2', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), index.h("div", { key: '1766fb5e2613b434c8de825c90141b4f95be00e1', class: "max-w-full" }, user.name && index.h("p", { key: 'd36907607f575eeb5425c1f2e32e91034fad6dde', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && index.h("p", { key: '73e02010d3d54151252903071bbe30168ea7d64a', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && index.h("p", { key: 'eb522e6c95f15ef0584c7a90c20bb815ccc5d1a1', class: "f-ui-03-light text-light mt-4" }, user.email))), index.h("div", { key: 'c4284f4dba1964a949380aa0154419e3215daac4', class: "text-default flex w-full flex-col gap-y-8" }, index.h("slot", { key: '6476e03cf61ad7517e9742e67b44b9c917d9f329' })))))));
+        return (index.h("div", { key: '1a9c56a4868b68ea95fdbb19a61435f5fa23b1b5', class: "block" }, index.h("div", { key: '242beb1cf3dc3e545be84003615eaed119be3e20', class: "flex items-center" }, index.h("eds-dropdown", { key: 'e75e0305a60936df4deb5b012fa139ca9a6b024f', ref: (el) => (this.dropdownEl = el), intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "user", label: this.dropdownLabel, class: "text-default", onDropdown: this.handleDropdown }, index.h("div", { key: '09c74d1320e9637e50f7e0f8482e435db7a3319a', class: "min-w-[280px] p-8" }, index.h("div", { key: 'fa70ecc13e477cf2d2ead8e8dbab4fa3c3587149', class: "flex gap-x-16", "data-dropdown-no-close": true }, index.h("eds-avatar", { key: '69f059e2002237dd874ba62952c2b014ad94cb8a', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), index.h("div", { key: 'c300f3bbe7f57d82913cef614637188babb82818', class: "max-w-full" }, user.name && index.h("p", { key: 'dc1a4a26f6c1da6c6e88e5aae484ca2ada2864e6', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && index.h("p", { key: '76f94c7b0394125d9a6b547722df5545c6b479fd', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && index.h("p", { key: '8be3fe5ba1c302d5ef9bfb6d563070c07ed722ca', class: "f-ui-03-light text-light mt-4" }, user.email))), index.h("div", { key: '191e365fa893122e09c07aa36d1fde5d28b9b3de', class: "text-default flex w-full flex-col gap-y-8" }, index.h("slot", { key: '8d3fbd032340d5c32fd93ab89b034e7de25ef2e3' })))))));
     }
     get hostEl() { return index.getElement(this); }
 };
@@ -10395,8 +11034,8 @@ exports.eds_input_file = EdsInputFile;
 exports.eds_input_footer = EdsInputFooter;
 exports.eds_input_label = EdsInputLabel;
 exports.eds_input_range = EdsInputRange;
-exports.eds_input_search = EdsInputSearch;
 exports.eds_input_select = EdsInputSelect;
+exports.eds_kg_learning_resources = EdsKgLearningResources;
 exports.eds_kg_web_services_select = EdsKgWebServicesSelect;
 exports.eds_link = EdsLink;
 exports.eds_logo = EdsLogo;
@@ -10405,6 +11044,7 @@ exports.eds_nps = EdsNps;
 exports.eds_pagination = EdsPagination;
 exports.eds_progress_bar = EdsProgressBar;
 exports.eds_rating = EdsRating;
+exports.eds_search_select = EdsSearchSelect;
 exports.eds_sidebar = EdsSidebar;
 exports.eds_social_networks = EdsSocialNetworks;
 exports.eds_spinner = EdsSpinner;