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

package/dist/collection/components/eds-input-elements/eds-input-footer/eds-input-footer.js

@@ -11,7 +11,7 @@ export class EdsInputFooter {
         this.link = undefined;
     }
     render() {
-        return (h("div", { key: '9ce8da179446c0302754f1285b3733d928da042f', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: 'aab7e8ded78e48864b2245603c3987a6ec3f3959', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '152a06328c6cbb40f0d52310ac3ce761de21a26c', icon: "warning" }), h("p", { key: '658825aa4649ad83a150a0dc92d37f1b078de4c3', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '378ae9ef876e087f66302547958af4543262a441', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'cd396f03bdbd12a47544a44de17cfce35b8d206a', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'c088f6c9bf4c3ca1efce1a1ff41ece8d4f8a6756', class: "space-y-4" }, this.error && this.errorMessage && (h("div", { key: '7404a329f2b5da7f9444f986178c5e4dbbe838ad', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '8f9d83b1d8dda824cac17d9c2ce3cb6cc5a58945', icon: "warning" }), h("p", { key: 'f223076bc18088e264b4888d18bb9673f803d875', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '40bdbc35ba4985802177d7f9b2c44f893e4cb40c', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'e6297a49f63ce2ab14bac8df0186fb42fab4416d', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
     }
     static get is() { return "eds-input-footer"; }
     static get properties() {

package/dist/collection/components/eds-input-elements/eds-input-label/eds-input-label.js

@@ -10,7 +10,7 @@ export class EdsInputLabel {
         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")))));
     }
     static get is() { return "eds-input-label"; }
     static get properties() {

package/dist/collection/components/eds-input-elements/eds-input-range/eds-input-range.js

@@ -29,9 +29,9 @@ export class EdsInputRange {
         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)));
     }
     static get is() { return "eds-input-range"; }
     static get properties() {

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

@@ -32,7 +32,7 @@ export class EdsInputSearch {
         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/collection/components/eds-input-elements/eds-input-select/eds-input-select.js

@@ -18,6 +18,9 @@ import { toast } from "../../../utils/toastManager";
  *
  * The component will automatically fetch data if a dynamic configuration is provided.
  */
+/**
+ * @internal
+ */
 export class EdsInputSelect {
     constructor() {
         /**
@@ -45,6 +48,7 @@ export class EdsInputSelect {
         this.loading = false;
         this.dynamicValueKey = 'value';
         this.dynamicLabelKey = 'label';
+        this.hasFetched = false;
     }
     componentWillLoad() {
         this.loadOptions();
@@ -61,6 +65,9 @@ export class EdsInputSelect {
     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';
@@ -74,6 +81,7 @@ export class EdsInputSelect {
                 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);
@@ -90,8 +98,11 @@ export class EdsInputSelect {
             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 is() { return "eds-input-select"; }
     static get properties() {
@@ -295,7 +306,8 @@ export class EdsInputSelect {
             "dynamicOptions": {},
             "loading": {},
             "dynamicValueKey": {},
-            "dynamicLabelKey": {}
+            "dynamicLabelKey": {},
+            "hasFetched": {}
         };
     }
     static get events() {

package/dist/collection/components/eds-input-field/eds-input-field.js

@@ -63,11 +63,11 @@ export class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'e1e4c68a8ca48b9526217b1c1eeaecbf3c73a652', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && h("p", { class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint)), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
+        return (h("div", { key: '6c2e228bc3940212ad4df6ed99bdd69b99342afb', class: "space-y-8" }, this.type === 'checkbox' || this.type === 'radio' ? (this.parsedOptions.length > 0 ? (h("fieldset", { class: "space-y-4 mt-8" }, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.parsedOptions.map((option) => (h("div", { class: "flex items-center gap-x-2", key: option.value }, h("eds-input", Object.assign({}, inputOpts, { value: option.value })), h("eds-input-label", { name: `${this.name}-${option.value}`, label: option.label })))))) : (h("div", { class: "flex items-center gap-x-8" }, h("eds-input", Object.assign({}, inputOpts)), this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required }))))) : (h("div", null, h("div", { class: "flex justify-between" }, this.label && (h("eds-input-label", { name: this.inputId || this.name, label: this.label, disabled: this.disabled, required: this.required })), this.hint && (h("p", { id: `${this.name}-hint`, class: "f-ui-05 text-lighter mt-8 ml-8" }, this.hint))), this.type === 'select' ? (h("eds-input-select", Object.assign({}, inputOpts, { options: this.parsedOptions }))) : this.type === 'file' ? (h("input", { type: "file", id: this.inputId || this.name, name: this.name, onChange: this.onChange, disabled: this.disabled, required: this.required })) : this.type === 'search' ? (h("eds-input-search", { name: "search-box" })) : this.type === 'range' ? ((() => {
             var _a, _b, _c;
             const opt = this.parsedOptions;
             return (h("eds-input-range", { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, name: "range-slider" }));
-        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '7c283d5b193f179cdefbb011862358e3c92685c5', name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: '16f2dd9061fc779b081c973e25d1bf9fb26fcf8b', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
     }
     static get is() { return "eds-input-field"; }
     static get encapsulation() { return "shadow"; }

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

@@ -1,4 +1,4 @@
-import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 import { cva } from "class-variance-authority";
 // Define the CVA for link styles
@@ -149,12 +149,11 @@ export class EdsLink {
         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();
     }
@@ -187,7 +186,7 @@ export class EdsLink {
     }
     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 })));
@@ -195,6 +194,7 @@ export class EdsLink {
         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,
@@ -202,10 +202,12 @@ export class EdsLink {
             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())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }
@@ -473,7 +475,7 @@ export class EdsLink {
     static get listeners() {
         return [{
                 "name": "parentContext",
-                "method": "handleBreadcrumbContext",
+                "method": "handleParentContext",
                 "target": undefined,
                 "capture": false,
                 "passive": false

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

@@ -1,6 +1,6 @@
 import { h } from "@stencil/core";
 import { hLogoColor, hLogoBlack, hLogoColorWhite, hLogoWhite, vLogoBlack, vLogoColor, vLogoColorWhite, vLogoWhite, vLogoWhiteNoBg, hLogoWhiteNoBg } from "../../../../../../../packages/svgs/src/index";
-import { sendAnalytics } from "../../../../../../../packages/utils/src/index";
+import { sendAnalytics } from "../../utils/analytics";
 /**
  * `EdsLogo` is a logo component designed to display a clickable logo that can link to a specified URL.
  *
@@ -23,6 +23,7 @@ export class EdsLogo {
         this.href = '/';
         this.orientation = 'horizontal';
         this.type = undefined;
+        this.label = 'Home';
     }
     /**
      * Handles the click event on the logo link.
@@ -75,7 +76,7 @@ export class EdsLogo {
     }
     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 })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }
@@ -143,6 +144,24 @@ export class EdsLogo {
                 },
                 "attribute": "type",
                 "reflect": false
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "'Home'"
             }
         };
     }

package/dist/collection/components/eds-modal/eds-modal.css

@@ -92,10 +92,26 @@
     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;
 }

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

@@ -1,5 +1,5 @@
+import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
-//import { sendAnalytics } from '@ebrains/utils';
 /**
  * `EdsModal` is a modal dialog component that can be toggled open or closed.
  *
@@ -16,33 +16,59 @@ export class EdsModal {
         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.
@@ -51,35 +77,19 @@ export class EdsModal {
         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' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }
@@ -148,6 +158,24 @@ export class EdsModal {
                 "attribute": "truncate-lines",
                 "reflect": false,
                 "defaultValue": "'1'"
+            },
+            "position": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'middle' | 'top' | 'bottom' | 'left' | 'right'",
+                    "resolved": "\"bottom\" | \"left\" | \"middle\" | \"right\" | \"top\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Specifies the position of the modal.\n\nAcceptable values are:\n- `\"middle\"` (default): The modal is centered both vertically and horizontally.\n- `\"top\"`: The modal is positioned near the top of the viewport.\n- `\"bottom\"`: The modal is positioned near the bottom of the viewport.\n- `\"left\"`: The modal is positioned on the left side of the viewport, centered vertically.\n- `\"right\"`: The modal is positioned on the right side of the viewport, centered vertically."
+                },
+                "attribute": "position",
+                "reflect": false,
+                "defaultValue": "'middle'"
             }
         };
     }
@@ -212,4 +240,13 @@ export class EdsModal {
         };
     }
     static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": "window",
+                "capture": false,
+                "passive": false
+            }];
+    }
 }

package/dist/collection/components/eds-modal/eds-modal.stories.js

@@ -7,41 +7,55 @@ export default {
             control: 'text',
             description: 'Title of the modal',
             defaultValue: 'Default Modal Title'
+        },
+        position: {
+            control: 'select',
+            options: ['middle', 'top', 'bottom', 'left', 'right'],
+            description: 'Position of the modal in the viewport'
         }
+    },
+    args: {
+        title: 'Default Modal Title',
+        position: 'middle'
     }
 };
-const Template = ({ title }) => {
+const Template = ({ title, position }) => {
     const openModal = () => {
-        document.querySelector('eds-modal').open();
+        var _a;
+        // Open the first instance of eds-modal on the page
+        (_a = document.querySelector('eds-modal')) === null || _a === void 0 ? void 0 : _a.open();
     };
     return html `
-    <!-- Modal component with dynamic title -->
-    <eds-modal title="${title}">
+    <!-- Modal component with dynamic title and position -->
+    <eds-modal title="${title}" position="${position}">
       <p>This is the content inside the modal.</p>
     </eds-modal>
 
-    <!-- Buttons to control modal -->
-    <eds-button intent="primary" label="Open Modal with Form" @click="${openModal}"></eds-button>
+    <!-- Button to control modal -->
+    <eds-button intent="primary" label="Open Modal" @click="${openModal}"></eds-button>
   `;
 };
 export const Default = Template.bind({});
 Default.args = {
-    title: 'Default Modal Title'
+    title: 'Default Modal Title',
+    position: 'middle'
 };
-const TemplateWithForm = ({ title }) => {
+const TemplateWithForm = ({ title, position }) => {
     const openModal = () => {
-        document.querySelector('eds-modal').open();
+        var _a;
+        (_a = document.querySelector('eds-modal')) === null || _a === void 0 ? void 0 : _a.open();
     };
-    return html ` <!-- Modal with eds-form inside the slot -->
-    <eds-modal title="${title}">
+    return html `
+    <!-- Modal with eds-form inside the slot -->
+    <eds-modal title="${title}" position="${position}">
       <eds-form
         name="extended-form"
         endpoint="http://127.0.0.1:5000/api/data"
         fields='[
-            {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
-            {"name": "email", "label": "Email", "type": "email", "required": true},
-            {"name": "number", "label": "Number", "type": "number", "required": true}
-          ]'
+          {"name": "username", "label": "Username", "type": "text", "required": true, "maxlength": 10},
+          {"name": "email", "label": "Email", "type": "email", "required": true},
+          {"name": "number", "label": "Number", "type": "number", "required": true}
+        ]'
         success-message="Form submitted successfully!"
         error-message="Please fix the errors in the form."
         submit-btn="true"
@@ -50,15 +64,17 @@ const TemplateWithForm = ({ title }) => {
       ></eds-form>
     </eds-modal>
 
-    <!-- Buttons to control modal -->
+    <!-- Button to control modal -->
     <eds-button
       intent="primary"
       label="Open Modal with Form"
       @click="${openModal}"
       style="margin-right: 10px;"
-    ></eds-button>`;
+    ></eds-button>
+  `;
 };
 export const ModalWithForm = TemplateWithForm.bind({});
 ModalWithForm.args = {
-    title: 'Extended Form Modal'
+    title: 'Extended Form Modal',
+    position: 'middle'
 };

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

@@ -32,7 +32,7 @@ export class EdsNavigator {
         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" })))));
     }
     static get is() { return "eds-navigator"; }
     static get properties() {

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

@@ -32,14 +32,18 @@ export class EdsPagination {
     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.
@@ -169,7 +173,7 @@ export class EdsPagination {
         }
     }
     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/collection/components/eds-progress-bar/eds-progress-bar.js

@@ -12,7 +12,7 @@ export class EdsProgressBar {
     }
     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 is() { return "eds-progress-bar"; }
     static get encapsulation() { return "shadow"; }