@ebrains/components 0.3.0-alpha.0 → 0.5.0-alpha.0

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

@@ -10,7 +10,7 @@ const EdsInputLabel = /*@__PURE__*/ proxyCustomElement(class EdsInputLabel exten
         this.disabled = false;
     }
     render() {
-        return (h("label", { key: 'd83f8267317c2d5ef500460e938b166c0e6517b1', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '85ad9e44af342c191d8aa7aeb7e4c6288c544d6d' }, h("span", { key: 'b350ee023f80bc9d5f24ef2fac9f74b2461d27b9', "aria-hidden": "true" }, "*"), h("span", { key: 'af55a83d8998ac70817cb2f7cebfb74f276a6387', class: "sr-only" }, "required")))));
+        return (h("label", { key: '38be7206acfad300657a99218c3138e91069d710', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '1e80610f66d51a1c46918086bb5b5153c0e35a3c' }, h("span", { key: '83d15d62c0539f1847746b4a2b9c9971b4852da8', "aria-hidden": "true" }, "*"), h("span", { key: '3f45f5a436c41cf7e55570a2abe8844c8daa7525', class: "sr-only" }, "required")))));
     }
 }, [0, "eds-input-label", {
         "label": [1],

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

@@ -26,9 +26,9 @@ const EdsInputRange = /*@__PURE__*/ proxyCustomElement(class EdsInputRange exten
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '8927f714cae6dd2237202190eade7b31cc7adc03', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '1b3ba13453992c84e00d3b3261a9d2008f45634f', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input",
+        return (h("div", { key: '6a70b857cfbeb152e6f099b6dfc91cc9fec5bf11', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: 'da4c0158b1d33804404f4373b3c55c53b5b2f53b', id: this.inputId || this.name, name: this.name, min: this.min, max: this.max, step: this.step, value: this.sliderVal, required: this.required, disabled: this.disabled, type: "range", class: "w-full py-6 input",
             //aria-describedby={describedBy}
-            onInput: this.onInput }), h("p", { key: 'e04c275e51710ae09eec1603911446e1e65bf648', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+            onInput: this.onInput }), h("p", { key: '66bc2e755e4eb38015e32441599a9f9bade7c679', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
     }
     get el() { return this; }
 }, [0, "eds-input-range", {

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

@@ -29,7 +29,7 @@ const EdsInputSearch = /*@__PURE__*/ proxyCustomElement(class EdsInputSearch ext
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '4a6a629fcaefa3ec3bbfb577e1a1f85e8d4f0ee0', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '7cb203fabdf6f1160d95d7ca125f0ca33affd1c6', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'fe32c40b6e438526b8ef6a74783a6455fb91a467', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
+        return (h("div", { key: 'df7ee546beed6eedfba5a19e0fdf349d9aaece90', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: '4663fdd0a9ba4eace47dc90f9c7f50fc2e6f7925', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest" }), h("input", { key: 'e3e72f3dea068cbab3d398de36dd09e4a7f1ce93', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", class: "search-input w-full py-6 input input-icon pl-36",
             //aria-describedby={describedBy}
             onInput: this.onInput, onChange: this.onChange })));
     }

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

@@ -32,6 +32,7 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         this.loading = false;
         this.dynamicValueKey = 'value';
         this.dynamicLabelKey = 'label';
+        this.hasFetched = false;
     }
     componentWillLoad() {
         this.loadOptions();
@@ -48,6 +49,9 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
     async loadOptions() {
         // If the first option contains an "endpoint" key, assume dynamic fetch mode.
         if (this.options && this.options.length > 0 && this.options[0].endpoint) {
+            if (this.hasFetched) {
+                return;
+            }
             const config = this.options[0];
             const endpoint = config.endpoint;
             this.dynamicValueKey = config.value || 'value';
@@ -61,6 +65,7 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
                 const data = await response.json();
                 // Assume the API returns an array of objects.
                 this.dynamicOptions = data;
+                this.hasFetched = true;
             }
             catch (error) {
                 //console.error('Error fetching dynamic options:', error);
@@ -77,8 +82,11 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
             this.dynamicLabelKey = this.labelKey;
         }
     }
+    getValueByPath(obj, path) {
+        return path.split('.').reduce((acc, part) => acc && acc[part], obj);
+    }
     render() {
-        return (h("div", { key: '0b45eaae992171cd9795f7bf01883b0f3efbcc13', class: "relative" }, h("select", { key: '0ee8bccb24f7bd65e9347c0b79905154db39dca7', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: 'b1b53dcf8dd3155e8dba28327f05b4725a013435', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: option[this.dynamicValueKey] }, option[this.dynamicLabelKey])))), h("span", { key: '3f652e7ed7570b602565af3f0e3c5c91506e4089', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '2237727060af6286c346f749d2e8e3f7f86c7c70', class: "w-20 h-20", icon: "chevron-right" }))));
+        return (h("div", { key: 'c1469a270fa5e775ac4d17f1c7e259d02477d7a2', class: "relative" }, h("select", { key: '3aab6ec60d386e51ce27c1cfc26059132d96957f', id: this.inputId || this.name, name: this.name, class: `input invalid:text-lightest pr-32 ${this.error ? 'input-error' : ''}`, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": this.hasMessage || this.error ? `${this.name}-error` : '', disabled: this.disabled || this.loading, required: this.required, onChange: this.handleChange }, h("option", { key: 'ee3aa20ed1b99bddd7bafa3aac43f3c06db07b8f', value: "", disabled: true, hidden: true }, this.loading ? 'Loading options...' : `Please select ${this.name}`), this.dynamicOptions.map((option, index) => (h("option", { key: index, value: this.getValueByPath(option, this.dynamicValueKey) }, this.getValueByPath(option, this.dynamicLabelKey))))), h("span", { key: '7e70051ac49efd053f00521b51ad19e88cf5cdb7', class: `bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center ${this.disabled || this.loading ? 'text-lightest bg-transparent' : ''}` }, h("eds-icon-wrapper", { key: '2ef2d0d744216a1f931ac0bfe1058f54c9af4402', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get watchers() { return {
         "options": ["loadOptions"]
@@ -98,7 +106,8 @@ const EdsInputSelect = /*@__PURE__*/ proxyCustomElement(class EdsInputSelect ext
         "dynamicOptions": [32],
         "loading": [32],
         "dynamicValueKey": [32],
-        "dynamicLabelKey": [32]
+        "dynamicLabelKey": [32],
+        "hasFetched": [32]
     }, undefined, {
         "options": ["loadOptions"]
     }]);

package/dist/components/eds-input2.js

@@ -50,12 +50,12 @@ 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: 'aed6c5b0bc70ed712c74041b1bafce771c0da2d3', 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", { 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, class: `
+        return (h("div", { key: 'e67c7566fe5a1574d6ff0fff61178b163c5881f9', 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", { 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, class: `
               ${this.extraClass || ''} 
               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: '2a95bcd05820c60e428c9e5de3cc2c3fc6ceb3db', 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: 'd20b1b17f45c77e1e7ad63ca5cb12db777074601', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: 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: '35bc563715e65073898259d12b4ef2c467b14439', 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: '54cab667a1b8b1bb906c2359cdbd2fb23171ba8b', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-link2.js

@@ -1,5 +1,4 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import './color.js';
 import { s as sendAnalytics } from './analytics.js';
 import { c as cva } from './index2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
@@ -147,12 +146,11 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         this.hideLabelOnSmallScreen = false;
         this.extraClass = undefined;
     }
-    handleBreadcrumbContext(event) {
+    handleParentContext(event) {
         if (event.target !== this.el) {
             // Ignore the event if it's not targeted at this specific instance
             return;
         }
-        //console.log(event.detail);
         this.parentContext = event.detail;
         event.stopPropagation();
     }
@@ -185,7 +183,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
     }
     renderRightIcon() {
         if (this.icon && this.iconPos === 'right') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: !this.external && !this.label ? '' : 'flex ml-4' }, h("eds-icon-wrapper", { class: `
               flex inline-flex items-center justify-center
               ${this.size === 'large' ? 'h-32 w-32' : 'h-20 w-20'}
             `, icon: this.icon })));
@@ -193,6 +191,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         return null;
     }
     render() {
+        // If the link is disabled, use a <span>; otherwise, use an <a> element.
         const ComponentType = this.disabled ? 'span' : 'a';
         const classes = linkStyles({
             intent: this.intent,
@@ -200,10 +199,12 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
             iconSmall: this.iconSmall,
             isActive: this.current
         });
+        // If no visible label is provided, ensure ariaLabel is set.
+        const computedAriaLabel = this.ariaLabel || this.label || 'link';
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: '287497bf5ba99fe467ba08d59f65d24204fbecbc', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": this.label || this.ariaLabel || undefined, "aria-disabled": this.disabled ? 'true' : null, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: 'a244b21dffaad38cb149a925df1feb3d78beed03', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '2ef69a91351ea622d6425699b90b45a0bd5989b1', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: '965b2bf54c59752e7ed3cafbc167a8f2d1a2a9b1', class: `${classes || ''} ${this.extraClass || ''}`, href: !this.disabled ? this.url : undefined, target: this.external && !this.disabled ? '_blank' : undefined, rel: this.external && !this.disabled ? 'noopener noreferrer' : undefined, "aria-label": computedAriaLabel, "aria-disabled": this.disabled ? 'true' : null, "aria-current": this.current ? 'page' : undefined, download: this.download ? '' : undefined, onClick: (event) => this.handleClick(event) }, h("span", { key: '7df72410c98bab3c0ef204e5cd33f1e069976d24', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '208b4fa88695bd8e8ed961d4c7639b117341110c', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     get el() { return this; }
     static get style() { return EdsLinkStyle0; }
@@ -222,7 +223,7 @@ const EdsLink = /*@__PURE__*/ proxyCustomElement(class EdsLink extends HTMLEleme
         "disabled": [4],
         "hideLabelOnSmallScreen": [4, "hide-label-on-small-screen"],
         "extraClass": [1, "extra-class"]
-    }, [[0, "parentContext", "handleBreadcrumbContext"]]]);
+    }, [[0, "parentContext", "handleParentContext"]]]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/eds-login.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
-import { a as logout, i as initKeycloak, b as isAuthenticated, g as getUser, l as login } from './keycloak.js';
+import { l as login, a as logout, i as initKeycloak, b as isAuthenticated, g as getUser } from './keycloak.js';
+import { t as toast } from './toastManager.js';
 import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 
@@ -9,63 +10,81 @@ const EdsLogin$1 = /*@__PURE__*/ proxyCustomElement(class EdsLogin extends HTMLE
         this.__registerHost();
         this.__attachShadow();
         this.authStatusChanged = createEvent(this, "authStatusChanged", 7);
-        // Method to handle user logout
-        this.handleLogout = () => {
-            logout();
-            this.authenticated = false; // Reset authentication state after logout
+        /**
+         * Handles user login by invoking the Keycloak `login` function.
+         * Only triggers login if the user is not already authenticated.
+         */
+        this.handleLogin = async () => {
+            if (!this.authenticated) {
+                try {
+                    await login();
+                    toast.show('You are authenticated', 'success');
+                }
+                catch (error) {
+                    toast.show(error.message, 'error');
+                }
+            }
+        };
+        /**
+         * Handles user logout by invoking the Keycloak `logout` function.
+         * Resets the `authenticated` state to `false` after logout.
+         */
+        this.handleLogout = async () => {
+            try {
+                await logout();
+            }
+            catch (error) {
+                toast.show(error.message, 'error');
+            }
+            this.authenticated = false;
+            this.user = null;
         };
-        this.keycloakUrl = '';
-        this.keycloakRealm = '';
-        this.keycloakClientId = '';
+        this.keycloakUrl = undefined;
+        this.keycloakRealm = undefined;
+        this.keycloakClientId = undefined;
         this.authenticated = false;
         this.user = null;
     }
-    // Lifecycle method to check authentication status before the component loads
+    /**
+     * Lifecycle method that runs when the component is about to load.
+     * It initializes authentication by calling the `initAuth` method.
+     */
     async componentWillLoad() {
-        await this.checkAuthentication();
+        // Check if required props are provided (optional check)
+        if (!this.keycloakUrl || !this.keycloakRealm || !this.keycloakClientId) {
+            // eslint-disable-next-line
+            console.error('Keycloak configuration props are missing.');
+            return;
+        }
+        await this.initAuth();
     }
-    // Method to initialize Keycloak and check if the user is authenticated
-    async checkAuthentication() {
+    /**
+     * Initializes the Keycloak authentication by configuring Keycloak with the provided props.
+     * Sets the `authenticated` state and `user` data if the user is authenticated.
+     * Emits `authStatusChanged` event with the authentication status.
+     */
+    async initAuth() {
         try {
-            const keycloakConfig = {
+            await initKeycloak({
                 url: this.keycloakUrl,
                 realm: this.keycloakRealm,
                 clientId: this.keycloakClientId
-            };
-            await initKeycloak(keycloakConfig);
-            // eslint-disable-next-line
-            // Set authentication state and fetch user data if authenticated
-            this.authenticated = isAuthenticated();
-            if (this.authenticated) {
+            }, true);
+            if (isAuthenticated()) {
                 this.user = getUser();
-            }
-            this.authStatusChanged.emit({
-                authenticated: this.authenticated,
-                user: this.user
-            }); // Emit auth status change
-        }
-        catch (error) {
-            // eslint-disable-next-line
-            console.error('Keycloak initialization or login check failed:', error);
-        }
-    }
-    // Method to handle user login
-    async handleLogin() {
-        try {
-            if (!this.authenticated) {
-                login(); // Start the Keycloak login process
+                this.authenticated = true;
+                this.authStatusChanged.emit({
+                    authenticated: this.authenticated,
+                    user: this.user
+                }); // Emit auth status change
             }
         }
         catch (error) {
-            // eslint-disable-next-line
-            console.error('Login failed:', error);
+            toast.show(error.message, 'error');
         }
     }
-    getBtnLabel() {
-        return this.authenticated ? 'Logout' : 'Login';
-    }
     render() {
-        return (h("eds-button", { key: '35f298ecf951d5b1087f988262ae7d312c5e2d38', label: this.getBtnLabel(), intent: "primary", "extra-class": "text-default", "aria-label": this.getBtnLabel(), triggerClick: this.authenticated ? this.handleLogout : this.handleLogin.bind(this) }));
+        return (h("div", { key: 'cd30a135920ae77959330a43a8544bb9c231986e', class: "block" }, !this.authenticated && (h("eds-button", { key: '98fa63c46b063a67c215ff9160c6dfbfee2265f7', label: "Login", intent: "primary", "extra-class": "text-default", "aria-label": "Login", triggerClick: this.handleLogin.bind(this) }))));
     }
 }, [1, "eds-login", {
         "keycloakUrl": [1, "keycloak-url"],

package/dist/components/eds-logo-variations.js

@@ -20,7 +20,7 @@ const EdsLogoVariations$1 = /*@__PURE__*/ proxyCustomElement(class EdsLogoVariat
         }
     }
     render() {
-        return h("div", { key: '9d6ce0e75030d6e636aab423181b0ce999f6f1b0', class: "container" }, this.renderContent());
+        return h("div", { key: '0494cbb3e7b4902e91a0c78c691bc3405b9f11cc', class: "container" }, this.renderContent());
     }
 }, [0, "eds-logo-variations", {
         "tabIndex": [2, "tab-index"]

package/dist/components/eds-logo2.js

@@ -1,7 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { h as hLogoColor } from './logo-color.js';
 import { h as hLogoBlack, a as hLogoColorWhite, b as hLogoWhite, c as hLogoWhiteNoBg, v as vLogoColor, d as vLogoBlack, e as vLogoColorWhite, f as vLogoWhite, g as vLogoWhiteNoBg } from './logo-white-no-bg.js';
-import './color.js';
 import { s as sendAnalytics } from './analytics.js';
 
 const edsLogoCss = ".w-\\[130px\\]{width:130px}.mr-auto{margin-right:auto}.text-current{color:currentColor}.text-default{color:var(--black)}.text-inverse{color:var(--white)}.h-full{height:100%}.w-full{width:100%}.flex{display:flex}.inline-flex{display:inline-flex}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}@media (min-width: 900px){.lg\\:w-\\[150px\\]{width:150px}}";
@@ -15,6 +14,7 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
         this.href = '/';
         this.orientation = 'horizontal';
         this.type = undefined;
+        this.label = 'Home';
     }
     /**
      * Handles the click event on the logo link.
@@ -67,14 +67,15 @@ const EdsLogo = /*@__PURE__*/ proxyCustomElement(class EdsLogo extends HTMLEleme
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: '3d9435fbc45427865bfa7bacb36bea4c34f08c4e', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper" }, h("div", { key: '662122c4b687a082c930c034b033e9732ef611be', innerHTML: logoContent })));
+        return (h("a", { key: 'ee8de4071b0137020341982b4c5cb2c938f1c4df', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '1eb620afbcc5a2a5c6914cc1c91a45ca62d0068c', innerHTML: logoContent })));
     }
     get el() { return this; }
     static get style() { return EdsLogoStyle0; }
 }, [1, "eds-logo", {
         "href": [1],
         "orientation": [1],
-        "type": [1]
+        "type": [1],
+        "label": [1]
     }]);
 function defineCustomElement() {
     if (typeof customElements === "undefined") {

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

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { t as toast } from './toastManager.js';
-import './color.js';
 import { m as matomoOptIn } from './analytics.js';
 import { d as defineCustomElement$4 } from './eds-accordion2.js';
 import { d as defineCustomElement$3 } from './eds-button2.js';

package/dist/components/eds-modal.js

@@ -1,8 +1,9 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
 import { d as defineCustomElement$3 } from './eds-button2.js';
 import { d as defineCustomElement$2 } from './eds-icon-wrapper2.js';
 
-const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.top-1\\/2{top: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}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);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:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.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}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
+const edsModalCss = ".block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.inline-flex{display:inline-flex}.hidden{display:none}.fixed{position:fixed}.inset-0{inset:0rem}.z-10{z-index:10}.z-50{z-index:50}.max-w-full{max-width:100%}.absolute{position:absolute}.px-20{padding-left:1.25rem;padding-right:1.25rem}.py-20{padding-top:1.25rem;padding-bottom:1.25rem}.bg-inverse{background-color:var(--white)}.bg-dark{background-color:var(--grey-300)}.rounded-lg{border-radius:16px}.shadow-lg{--tw-shadow:0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow)}.backdrop-blur{--tw-backdrop-blur:blur(8px);-webkit-backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia);backdrop-filter:var(--tw-backdrop-blur) var(--tw-backdrop-brightness) var(--tw-backdrop-contrast) var(--tw-backdrop-grayscale) var(--tw-backdrop-hue-rotate) var(--tw-backdrop-invert) var(--tw-backdrop-opacity) var(--tw-backdrop-saturate) var(--tw-backdrop-sepia)}.p-6{padding:0.375rem}.p-8{padding:0.5rem}.left-1\\/2{left:50%}.left-20{left:1.25rem}.right-20{right:1.25rem}.top-1\\/2{top:50%}.top-20{top:1.25rem}.bottom-20{bottom:1.25rem}.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}.border-b-2{border-bottom-width:2px}.border-softer{border-color:rgba(0, 0, 0, .1)}.pb-8{padding-bottom:0.5rem}.f-heading-03{font-family:var(--f-heading-03-fontFamily);font-weight:var(--f-heading-03-fontWeight);font-size:var(--f-heading-03-fontSize);line-height:var(--f-heading-03-lineHeight);letter-spacing:var(--f-heading-03-letterSpacing)}.f-heading-04{font-family:var(--f-heading-04-fontFamily);font-weight:var(--f-heading-04-fontWeight);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:var(--f-heading-05-fontWeight);font-size:var(--f-heading-05-fontSize);line-height:var(--f-heading-05-lineHeight);letter-spacing:var(--f-heading-05-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.text-lightest{color:var(--grey-500)}.ml-8{margin-left:0.5rem}.pt-8{padding-top:0.5rem}.bg-opacity-90{opacity:0.9}.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}.line-clamp-3{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3}.line-clamp-4{overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4}";
 const EdsModalStyle0 = edsModalCss;
 
 const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLElement {
@@ -14,33 +15,59 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         this.title = '';
         this.truncate = true;
         this.truncateLines = '1';
+        this.position = 'middle';
     }
     getTruncateClass() {
         return this.truncate && this.truncateLines ? `line-clamp-${this.truncateLines}` : '';
     }
+    /**
+     * Returns the Tailwind CSS classes to position the modal based on the `position` prop.
+     *
+     * @private
+     * @returns {string} The concatenated CSS classes for modal positioning.
+     */
+    getModalPositionClasses() {
+        switch (this.position) {
+            case 'top':
+                return 'left-1/2 top-20 -translate-x-1/2';
+            case 'bottom':
+                return 'left-1/2 bottom-20 -translate-x-1/2';
+            case 'left':
+                return 'left-20 top-1/2 -translate-y-1/2';
+            case 'right':
+                return 'right-20 top-1/2 -translate-y-1/2';
+            case 'middle':
+            default:
+                return 'left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2';
+        }
+    }
     /**
      * Opens the modal.
      */
     async open() {
+        var _a;
         this.isOpen = true;
-        /*sendAnalytics({
-          category: 'ui-component',
-          tag: this.el.tagName.toLowerCase(),
-          name: this.title,
-          action: 'show'
-        });*/
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'opened'
+        });
     }
     /**
      * Closes the modal.
      */
     async close() {
+        var _a;
         this.isOpen = false;
-        /*sendAnalytics({
-          category: 'ui-component',
-          tag: this.el.tagName.toLowerCase(),
-          name: this.title,
-          action: 'hide'
-        });*/
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: this.el.tagName.toLowerCase(),
+            name: ((_a = this.title) === null || _a === void 0 ? void 0 : _a.toLowerCase()) || '',
+            action: 'closed'
+        });
     }
     /**
      * Toggles the modal open or closed.
@@ -49,35 +76,19 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         this.isOpen = !this.isOpen;
     }
     /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
+     * Closes the modal when the Escape key is pressed.
      */
-    componentDidLoad() {
-        // Emit context for each eds-link element after the component is fully loaded
-        const btns = this.el.shadowRoot.querySelectorAll('eds-button');
-        btns.forEach((btn) => {
-            this.emitContext(btn);
-        });
-    }
-    /**
-     * Emits a custom event called `parentContext` for a given button element.
-     * This event provides context information about the eds-modal component.
-     *
-     * @param btnElement - The link element to which the event will be dispatched.
-     */
-    emitContext(btnElement) {
-        const event = new CustomEvent('parentContext', {
-            detail: {
-                componentName: this.el.tagName.toLowerCase(),
-                identifier: null
-            }
-        });
-        btnElement.dispatchEvent(event);
+    handleKeyDown(event) {
+        if (this.isOpen && event.key === 'Escape') {
+            this.close();
+        }
     }
     render() {
-        return (h("div", { key: '00816ecb900bd9b68b31fdf6e48bef0223f9e10a', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex` }, this.isOpen && (h("div", { key: '570fa8625f9ad4b1ea82633f11e2b289ab01b853', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        // Generate a unique id for the title so we can reference it for aria-labelledby.
+        const titleId = `modal-title-${this.el.tagName.toLowerCase()}`;
+        return (h("div", { key: 'cd976fb0cd0c0663279dcd4dbd5823e26b6c32f7', class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: '40a2febed5d0ec15d5370183c97cfd05abd72007', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: 'ff658c763e3fbc98123f13483076399966b10515', class: "max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 left-1/2 top-1/2 grow -translate-x-1/2 -translate-y-1/2 justify-center " }, h("div", { key: 'd8b72acd90cc59ab1f82384aee4e311319f75aa9', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'ee61fc505c5a3eb93541d3762d37f28a5a788bae', class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '3832772417d05a162eb5f2c4d0733f0ee845ed1c', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'f71b38be8284a37d0d198df0a9858c64202b3d91', class: "pt-8" }, h("slot", { key: '1f80948334e5b4e9fc00a3bf01c6fc402d8220c3' })))));
+            onClick: () => this.close() })), h("div", { key: '50f2c23d80a2007aca4d0a8911816141e43b71ee', class: `max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: 'e1cba5879bc488a99b896c48c8a780336b2195e7', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '8f018e3d2890346d23e7dcb115676051048bcacb', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '4ae4013dd45573648817ac95ee4370ed615aa6a0', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'ac4e3d8f273d04ad02e0123c23b36b89bfc89db2', class: "pt-8" }, h("slot", { key: '60917e9f750bfd7948e580acc817cffe6424608a' })))));
     }
     get el() { return this; }
     static get style() { return EdsModalStyle0; }
@@ -85,11 +96,12 @@ const EdsModal$1 = /*@__PURE__*/ proxyCustomElement(class EdsModal extends HTMLE
         "title": [1],
         "truncate": [4],
         "truncateLines": [1, "truncate-lines"],
+        "position": [1],
         "isOpen": [32],
         "open": [64],
         "close": [64],
         "toggle": [64]
-    }]);
+    }, [[8, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/eds-navigator.js

@@ -34,7 +34,7 @@ const EdsNavigator$1 = /*@__PURE__*/ proxyCustomElement(class EdsNavigator exten
         linkElement.dispatchEvent(event);
     }
     render() {
-        return (h("ul", { key: '1ab60197bbc9ee86d77134138744dce39df2aaa7', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (h("eds-link", { key: 'b29fd121d33c1e919d24a5d460d8d6864f1ff9db', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, h("eds-icon-wrapper", { key: '64620ccfaf2e006a6414bcd7e874a352b9d2d56b', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (h("eds-link", { key: 'ae6425f0f01c8f5bcbdae27d9bea9dc3a5b09d3b', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, h("eds-icon-wrapper", { key: 'd286fc26f17ee6cf6828990e98df7865fbbfd352', icon: "chevron-right", class: "w-20 h-20" })))));
+        return (h("ul", { key: '712287e683436cc98c2d6ef195501add1929522e', class: "flex lg:flex grow items-center justify-center gap-x-8" }, this.prevLabel && (h("eds-link", { key: '4fda36ce37897284d7062f88133f147831d96a6f', label: this.prevLabel, url: this.prevUrl || undefined, disabled: !this.prevUrl, "aria-label": this.prevLabel, size: this.linkSize, intent: this.linkIntent, class: "mr-auto !p-8 lg:!pr-12" }, h("eds-icon-wrapper", { key: '9bfa6bbbdc68641f65bec49f207d96f075b9a5b0', icon: "chevron-left" }), this.prevLabel)), this.nextLabel && (h("eds-link", { key: '6ee8ebee011a2c30a74645b072c7c37929d0a55f', label: this.nextLabel, url: this.nextUrl || undefined, disabled: !this.nextUrl, "aria-label": this.nextLabel, size: this.linkSize, intent: this.linkIntent, class: "ml-auto !p-8 lg:!pl-12" }, this.nextLabel, h("eds-icon-wrapper", { key: '44ebd4dcce0e367df7d9035bb445e49fde35e913', icon: "chevron-right", class: "w-20 h-20" })))));
     }
     get el() { return this; }
 }, [0, "eds-navigator", {

package/dist/components/eds-pagination2.js

@@ -31,14 +31,18 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
     componentDidLoad() {
         // Emit context for each eds-link element after the component is fully loaded
         const links = this.hostEl.shadowRoot.querySelectorAll('eds-link');
-        if (links.length > 0) {
-            // Emit context for the first link
-            this.emitContext(links[0]);
-            // Emit context for the last link, if it's different from the first
-            if (links.length > 1) {
-                this.emitContext(links[links.length - 1]);
-            }
-        }
+        links.forEach((lnk) => {
+            this.emitContext(lnk);
+        });
+        /*if (links.length > 0) {
+          // Emit context for the first link
+          this.emitContext(links[0]);
+    
+          // Emit context for the last link, if it's different from the first
+          if (links.length > 1) {
+            this.emitContext(links[links.length - 1]);
+          }
+        }*/
     }
     /**
      * Emits a custom event called `parentContext` for a given link element.
@@ -168,7 +172,7 @@ const EdsPagination = /*@__PURE__*/ proxyCustomElement(class EdsPagination exten
         }
     }
     render() {
-        return (h("div", { key: '2385b59b0a8b2bbdc40bfc5032b846c0ec20065e' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '6aea281a4df247874f354469bbabae039424ad9e', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'eeb5f0ea902505c3853a30d51026cef9d9785e48', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
+        return (h("div", { key: '8c8418eec263acc153a928b752775458f897504f' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '02a5a69772a4812f10b29e8df117b72df210614d', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'ef9804843100c722643c24e31a05f86f2d55efa0', class: "sr-only" }, "Results:"), this.pageResults())), this.mode === 'navigator' || (this.lastPage && this.lastPage > 1) ? (h("nav", { "aria-label": "Pagination" }, h("ul", { class: "flex items-center justify-center gap-x-8" }, h("li", { class: "mr-auto" }, h("eds-link", { label: this.prevLabel, url: this.mode === 'navigator'
                 ? this.prevUrl || '#' // Use prevUrl if provided, otherwise disable with '#'
                 : this.isFirstPage()
                     ? '#'

package/dist/components/eds-progress-bar2.js

@@ -19,7 +19,7 @@ const EdsProgressBar = /*@__PURE__*/ proxyCustomElement(class EdsProgressBar ext
     }
     render() {
         const progressValue = this.value;
-        return (h("div", { key: '3131f56034a9fd72ca51e448bc2bcc6281669b25', class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'f1665a254f8dbe1ccb9e512e5f2e7c1e5ab88c07', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
+        return (h("div", { key: '0f47fedbf9d44887f65b399e184215f0937b1df1', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: "outer w-full bg-default rounded-lg h-24 border border-softer overflow-hidden" }, h("div", { key: 'a2d095d778842c969832ea6b1ba7f7ef917d1390', class: `inner h-full rounded-lg bg-accent transition-all duration-300 flex items-center justify-center text-default f-body-02`, style: { width: `${progressValue}%` } }, progressValue, "%")));
     }
     static get style() { return EdsProgressBarStyle0; }
 }, [1, "eds-progress-bar", {