@ebrains/components 3.0.0 → 3.1.0

package/dist/components/eds-input-range2.js

@@ -45,7 +45,7 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
     render() {
         var _a;
         const currentValue = (_a = this.sliderVal) !== null && _a !== void 0 ? _a : Math.round(this.min + (this.max - this.min) / 2);
-        return (h("div", { key: '9be1a9d4241844c03d7e2b851ebc5ce181bfadf6', class: "relative flex flex-col items-start" }, 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 }), h("p", { key: '97b516ab9c20d9b5c7a783b369081b29eb3a83f0', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
+        return (h("div", { key: '231ae0f34900dfa3b8edeb9745ce07220735c613', class: "relative flex flex-col items-start" }, 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 }), h("p", { key: '8e7036cbaeebb62c6cd4b7f2105d3fa487ad463e', id: `desc_${this.name}`, class: "block f-ui-05 mt-4 text-light" }, "Current value: ", currentValue)));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-input-search.js

@@ -1,4 +1,103 @@
-import { E as EdsInputSearch$1, d as defineCustomElement$1 } from './eds-input-search2.js';
+import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
+
+const EdsInputSearch$1 = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.search = 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
+            });
+            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 (h("div", { key: '52676b3559e14b5153f7d8f0fa6cd12e49354d87', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '754e8753607c01dab63d156d306f3325547049aa', name: "search", class: "absolute top-1/2 left-[14px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: 'b49d523195711316c0817de67776d379a6c7248b', 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 this; }
+}, [0, "eds-input-search", {
+        "name": [1],
+        "inputId": [1, "input-id"],
+        "placeholder": [1],
+        "value": [1],
+        "disabled": [4],
+        "required": [4],
+        "decorate": [1],
+        "label": [1],
+        "getInputElement": [64]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-input-search", "eds-icon-wrapper"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-input-search":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsInputSearch$1);
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
 
 const EdsInputSearch = EdsInputSearch$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/eds-input-select2.js

@@ -24,12 +24,12 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         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 (h("div", { key: 'c2f809a88f8b9eab6a36b86bb49daaa39ac1a832', class: "relative" }, h("select", { key: '0847d6526bd118db744627279d96a979dafd19d1', id: selectId, name: this.name, class: {
+        return (h("div", { key: '8365ffbc8f6f6386edfc1626d16c9152fd3cce9f', class: "relative" }, 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 }, h("option", { key: '1d66602cc92028fddfd047bb2fc79c8f3602ba8e', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), 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" }, 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 }, h("option", { key: 'd52c376ffb683abc0dec72177dba445273d148f7', value: "", disabled: true, selected: !this.value || this.value === '' }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), 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" }, h("eds-icon-wrapper", { key: '4fda1345a62eeb212093057382d877f31bb6112d', class: "w-20 h-20", name: "chevron-right" }))));
     }
 }, [0, "eds-input-select", {
         "inputId": [1, "input-id"],

package/dist/components/eds-input2.js

@@ -29,6 +29,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
         this.min = undefined;
         this.max = undefined;
         this.step = undefined;
+        this.inputTabIndex = undefined;
         this.innerVal = '';
         this.maxLengthReached = false;
     }
@@ -51,7 +52,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: '5e5aabb89e931e0129ad606f9ed6070e336f9d98', class: "relative flex items-center" }, this.type === 'textarea' ? (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' ? (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) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (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 (h("div", { key: '0261b14034860a2f59dde8de72d6729ec411d2cf', class: "relative flex items-center" }, this.type === 'textarea' ? (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' ? (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) => (h("option", { value: option.value, selected: option.value === this.innerVal, key: option.value }, option.label))))) : (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,
@@ -62,7 +63,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
               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' && (h("span", { key: 'b3f75c5b363dc5320d4552ca9d9544975fdd89e0', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (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' && (h("span", { key: 'f2a7b410ee586d3266d05d422f3376488392fc6b', class: `input-counter f-ui-05 absolute bottom-8 right-8 ${this.maxLengthReached ? 'input-counter-error' : ''}` }, this.maxLength)), this.icon && (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 this; }
     static get watchers() { return {
@@ -86,6 +87,7 @@ const EdsInput = /*@__PURE__*/ proxyCustomElement(class EdsInput extends HTMLEle
         "min": [2],
         "max": [2],
         "step": [2],
+        "inputTabIndex": [2, "input-tab-index"],
         "innerVal": [32],
         "maxLengthReached": [32]
     }, undefined, {

package/dist/components/eds-kg-learning-resources.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface EdsKgLearningResources extends Components.EdsKgLearningResources, HTMLElement {}
+export const EdsKgLearningResources: {
+    prototype: EdsKgLearningResources;
+    new (): EdsKgLearningResources;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/eds-kg-learning-resources.js

@@ -0,0 +1,221 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$8 } from './eds-accordion2.js';
+import { d as defineCustomElement$7 } from './eds-alert2.js';
+import { d as defineCustomElement$6 } from './eds-button2.js';
+import { d as defineCustomElement$5 } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$4 } from './eds-link2.js';
+import { d as defineCustomElement$3 } from './eds-spinner2.js';
+import { d as defineCustomElement$2 } from './eds-tag2.js';
+
+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$1 = /*@__PURE__*/ proxyCustomElement(class EdsKgLearningResources extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        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 (h("div", { class: "resources-content" }, sw.kg_search_url && (h("div", { class: "kg-link" }, h("eds-link", { url: sw.kg_search_url, label: "View in EBRAINS Knowledge Graph", intent: "cta", external: true }))), h("table", { class: "resources-table" }, h("thead", null, h("tr", null, h("th", { class: "col-name" }, "Name"), h("th", { class: "col-type" }, "Type"), h("th", { class: "col-level" }, "Level"))), h("tbody", null, filtered.map(lr => (h("tr", { class: `resource-row ${lr.iri ? 'resource-row--clickable' : ''}`, onClick: () => {
+                if (lr.iri) {
+                    window.open(lr.iri, '_blank', 'noopener,noreferrer');
+                }
+            } }, h("td", { class: "col-name" }, h("span", { class: "resource-name" }, lr.name || 'Untitled'), lr.abstract && (h("p", { class: "resource-desc" }, lr.abstract))), h("td", { class: "col-type" }, lr.type && (h("eds-tag", { label: lr.type, intent: this.getTagIntent(lr.type), size: "medium" }))), h("td", { class: "col-level" }, lr.educational_level && (h("eds-tag", { label: lr.educational_level, intent: this.getLevelTagIntent(lr.educational_level), size: "medium" })))))))), filtered.length === 0 && (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 (h("div", { key: '154b59a74cb32996f1bee10ee7758d916bebdd43', class: "lr-container" }, h("div", { key: '0c5c04b65f0c4e4c032b1b1a7d96e98fd6775563', class: "lr-header" }, h("h2", { key: '01ef66537b31a63521f0406cd2ec9976b532d18f', class: "lr-heading" }, this.heading)), this.loading && (h("div", { key: '134ca8e5f7349127b40aa1ae0967cd12dc12cc0b', class: "loading", role: "status", "aria-live": "polite" }, h("eds-spinner", { key: 'a3a0621b6ea041f8da4ef6f36c1688974f3c5591', size: "sm", variant: "primary", background: "transparent", message: "Loading learning resources..." }))), this.error && !this.loading && (h("eds-alert", { key: 'a0334442c175374daf8ce2be4da60ac004e4d0e2', intent: "error", message: this.error })), !this.loading && !this.error && (h("div", { key: 'f2b8244f1ee5c052cabd5eec8cbfc36d06f4d08d', class: "accordion-list" }, filtered.map(sw => (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 && (h("p", { key: 'd572c9eb76279c93ba2bd5f0fae20b4e1d9fc816', class: "no-results" }, "No software matches the current filters."))))));
+    }
+    get el() { return this; }
+    static get style() { return EdsKgLearningResourcesStyle0; }
+}, [1, "eds-kg-learning-resources", {
+        "apiEndpoint": [1, "api-endpoint"],
+        "resolveNames": [4, "resolve-names"],
+        "size": [2],
+        "heading": [1],
+        "variant": [1],
+        "loading": [32],
+        "error": [32],
+        "software": [32],
+        "meta": [32],
+        "filterType": [32],
+        "filterLevel": [32],
+        "searchQuery": [32]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-kg-learning-resources", "eds-accordion", "eds-alert", "eds-button", "eds-icon-wrapper", "eds-link", "eds-spinner", "eds-tag"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-kg-learning-resources":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsKgLearningResources$1);
+            }
+            break;
+        case "eds-accordion":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$8();
+            }
+            break;
+        case "eds-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$7();
+            }
+            break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$6();
+            }
+            break;
+        case "eds-icon-wrapper":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-link":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$4();
+            }
+            break;
+        case "eds-spinner":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tag":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+    } });
+}
+
+const EdsKgLearningResources = EdsKgLearningResources$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { EdsKgLearningResources, defineCustomElement };

package/dist/components/eds-kg-web-services-select2.js

@@ -1,13 +1,12 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$b } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$a } from './eds-input2.js';
-import { d as defineCustomElement$9 } from './eds-input-dropzone2.js';
-import { d as defineCustomElement$8 } from './eds-input-field2.js';
-import { d as defineCustomElement$7 } from './eds-input-file2.js';
-import { d as defineCustomElement$6 } from './eds-input-footer2.js';
-import { d as defineCustomElement$5 } from './eds-input-label2.js';
-import { d as defineCustomElement$4 } from './eds-input-range2.js';
-import { d as defineCustomElement$3 } from './eds-input-search2.js';
+import { d as defineCustomElement$a } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$9 } from './eds-input2.js';
+import { d as defineCustomElement$8 } from './eds-input-dropzone2.js';
+import { d as defineCustomElement$7 } from './eds-input-field2.js';
+import { d as defineCustomElement$6 } from './eds-input-file2.js';
+import { d as defineCustomElement$5 } from './eds-input-footer2.js';
+import { d as defineCustomElement$4 } from './eds-input-label2.js';
+import { d as defineCustomElement$3 } from './eds-input-range2.js';
 import { d as defineCustomElement$2 } from './eds-input-select2.js';
 import { d as defineCustomElement$1 } from './eds-link2.js';
 
@@ -124,7 +123,7 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-kg-web-services-select", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link"];
+    const components = ["eds-kg-web-services-select", "eds-icon-wrapper", "eds-input", "eds-input-dropzone", "eds-input-field", "eds-input-file", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-select", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-kg-web-services-select":
             if (!customElements.get(tagName)) {
@@ -132,46 +131,41 @@ function defineCustomElement() {
             }
             break;
         case "eds-icon-wrapper":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$b();
-            }
-            break;
-        case "eds-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();
             }
             break;
-        case "eds-input-dropzone":
+        case "eds-input":
             if (!customElements.get(tagName)) {
                 defineCustomElement$9();
             }
             break;
-        case "eds-input-field":
+        case "eds-input-dropzone":
             if (!customElements.get(tagName)) {
                 defineCustomElement$8();
             }
             break;
-        case "eds-input-file":
+        case "eds-input-field":
             if (!customElements.get(tagName)) {
                 defineCustomElement$7();
             }
             break;
-        case "eds-input-footer":
+        case "eds-input-file":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }
             break;
-        case "eds-input-label":
+        case "eds-input-footer":
             if (!customElements.get(tagName)) {
                 defineCustomElement$5();
             }
             break;
-        case "eds-input-range":
+        case "eds-input-label":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }
             break;
-        case "eds-input-search":
+        case "eds-input-range":
             if (!customElements.get(tagName)) {
                 defineCustomElement$3();
             }

package/dist/components/eds-link2.js

@@ -287,7 +287,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (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) }, h("span", { key: 'c3d5d62b4740ecb9f4fa6330147bb1f23afe22e0', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (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 (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) }, h("span", { key: '000476a609888f5f848722015ce5e6137f26e371', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), this.label && (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 this; }
     static get style() { return EdsLinkStyle0; }

package/dist/components/eds-logo2.js

@@ -43,7 +43,7 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '06321ecfcf456f1870cd080043203258306a2451', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0e9da2f98700553f4898d0f60935f1c5cbd97cbc', innerHTML: logoContent })));
+        return (h("a", { key: '3f8257c9481079f011278b114e13effe9057d823', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '4dac45a1a0c38c6e1613995aad2005b41acac775', innerHTML: logoContent })));
     }
     get el() { return this; }
     static get style() { return EdsLogoStyle0; }

package/dist/components/eds-matomo-notice2.js

@@ -4,7 +4,7 @@ import { d as defineCustomElement$3 } from './eds-accordion2.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice extends HTMLElement {
@@ -117,7 +117,13 @@ const EdsMatomoNotice = /*@__PURE__*/ proxyCustomElement(class EdsMatomoNotice e
         if (!this.showNotice) {
             return null;
         }
-        return (h("div", { class: "p-8" }, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-8" }, h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), 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.
+        h("div", null, h("eds-accordion", { title: this.heading, description: this.hasCookieConsent() ? this.optOutMessage : this.description, switchBg: true, expanded: true }, this.hasCookieConsent() ? (h("div", { class: "flex items-center gap-8" }, this.optedOut() ? (h("eds-button", { intent: "brand", label: "Opt me in again", pill: true, "aria-label": "Opt me in again", onClick: () => this.optInAnalytics() })) : (h("eds-button", { intent: "brand", label: "Keep Me In", pill: true, "aria-label": "Keep Me In", onClick: () => this.keepMeIn() })), h("eds-button", { intent: "ghost", label: "Opt-out", pill: true, "aria-label": "Opt-out from analytics", onClick: () => this.optOutAnalytics() }))) : (h("div", { class: "flex items-center gap-8" }, h("eds-button", { intent: "brand", pill: true, label: "I agree", "aria-label": "Opt-in for analytics", onClick: () => this.optInAnalytics() }), h("eds-button", { intent: "ghost", pill: true, label: "No, thanks", "aria-label": "Opt-out from analytics", onClick: () => this.noThanks() }))))));
     }
     get el() { return this; }
     static get style() { return EdsMatomoNoticeStyle0; }

package/dist/components/eds-nps2.js

@@ -3,7 +3,7 @@ import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$1 } from './eds-input-label2.js';
 
-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 = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement {
@@ -86,14 +86,14 @@ const EdsNps = /*@__PURE__*/ proxyCustomElement(class EdsNps extends HTMLElement
     }
     render() {
         const count = this.max - this.min + 1;
-        return (h("div", { key: '932d0a62e52376c1ddaf71e8d21bf5437c2d0b9f', class: "eds-nps" }, h("eds-input-label", { key: '60f5b6849dcc53f2a0d46fa5e44499076bd46174', id: "nps-question", name: "nps-question", label: this.question }), 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 (h("div", { key: '412ddeabf0cc97829202063af25f17e3309b0754', class: "eds-nps" }, h("eds-input-label", { key: '100a47e710fa75d6a5761a87ca68e8bc8910e248', id: "nps-question", name: "nps-question", label: this.question }), h("div", { key: '9a7a63112e17f4c725005e1ae8e42c98107db7c4', class: "eds-nps__scale" }, 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 (h("div", { class: "flex", key: val }, 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 (h("div", { class: "flex", key: val }, 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;
                 } })));
-        })), h("div", { key: 'f1fd58c7c1003f144b816c9a1d169a2edec4a768', class: "flex justify-between mt-8" }, h("span", { key: '476a3c3b3ef1c43744b8a69e577e597fff887beb', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '275ec0c204781365c2e57283c1096fadb853dbe5', class: "f-ui-04 text-light mr-4" }, this.rightLabel))));
+        })), h("div", { key: 'aa15457591f1edf6e59eed384bcfbb25d49c9fd5', class: "flex justify-between eds-nps__labels" }, h("span", { key: 'a468b290491e368e3084f17ce40c6aa39e00ad3a', class: "f-ui-04 text-light ml-4" }, this.leftLabel), h("span", { key: '146b9eea4bbc360f7765e69e319738c77beae69d', class: "f-ui-04 text-light mr-4" }, this.rightLabel)))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-pagination2.js

@@ -246,7 +246,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
     }
     render() {
         const navigableIndex = -1; // Track index for keyboard navigation
-        return (h("div", { key: '6d7dea7a6d544bf79e944dfeb80cffb2f5a0b0cb' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '77da5262419978bf0806155727f64c2c957e3bb1', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '537551dfe8de1af55d3350cef4fa62f503aba3c1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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 (h("div", { key: '5c11fd306f0ebf47a452e44d633e18b2e3860d78' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'fe8b7f7b6c7785152f1edd90a750f4a9a7e2768b', class: "f-ui-03 text-light mb-28 w-full text-center", "aria-live": "polite", id: "pagination-info" }, h("span", { key: '5e2c67535dbf765dc662770164404f0de69315a1', class: "text-light sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination Navigation", "aria-describedby": this.mode === 'default' ? 'pagination-info' : undefined, onKeyDown: this.handleKeyDown }, h("ul", { class: "flex items-center justify-center gap-x-8", role: "list" }, h("li", { class: "mr-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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);
                 }
@@ -255,7 +255,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
                 : 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) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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)) }))) : (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)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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) => (h("li", { key: index, class: "f-ui-02 flex h-36 items-center justify-center" }, typeof link === 'string' ? (h("span", { class: "flex items-center justify-center", "aria-hidden": "true" }, link)) : this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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)) }))) : (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)) }))))), h("li", { class: "ml-auto" }, this.useButtons ? (h("div", { class: "pagination-button-wrapper", onFocus: () => this.handleItemFocus(navigableIndex) }, 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);
                 }