@ebrains/components 0.7.0-alpha.1 → 0.9.0-beta

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

@@ -12,6 +12,28 @@ import { h } from "@stencil/core";
  */
 export class EdsInputField {
     constructor() {
+        this.handleNativeInput = (ev) => {
+            var _a;
+            // 1) Call any passed-in handler
+            (_a = this.onInput) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            // 2) Re-emit on host so Vue/others can catch it
+            const newValue = ev.target.value;
+            this.hostEl.dispatchEvent(new CustomEvent('oninput', {
+                detail: { value: newValue },
+                bubbles: true,
+                composed: true
+            }));
+        };
+        this.handleNativeChange = (ev) => {
+            var _a;
+            (_a = this.onChange) === null || _a === void 0 ? void 0 : _a.call(this, ev);
+            const target = ev.target;
+            this.hostEl.dispatchEvent(new CustomEvent('onchange', {
+                detail: { value: target.value },
+                bubbles: true,
+                composed: true
+            }));
+        };
         this.name = undefined;
         this.inputId = undefined;
         this.placeholder = undefined;
@@ -54,8 +76,8 @@ export class EdsInputField {
             id: this.inputId,
             placeholder: this.placeholder,
             disabled: this.disabled,
-            onChange: this.onChange,
-            onInput: this.onInput,
+            onInput: this.handleNativeInput,
+            onChange: this.handleNativeChange,
             type: this.type,
             required: this.required,
             value: this.value,
@@ -63,11 +85,20 @@ export class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: 'c165e8550b24f369e6a590377162d9b6265bf418', 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' ? ((() => {
+        return (h("div", { key: 'd8d68bdff663749f22dcd25986a22b0459346f0d', 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, checked: (typeof this.value === 'string' ? this.value.split(',') : []).includes(String(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, { value: this.value, checked: this.value === 'on' })), 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 rangeProps = {
+                name: inputOpts.name,
+                inputId: inputOpts.id || inputOpts.name,
+                disabled: inputOpts.disabled,
+                required: inputOpts.required,
+                onInput: inputOpts.onInput,
+                onChange: inputOpts.onChange
+            };
             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: '1d2cd632eab2ce62806d32c4828c25543cf97073', id: `${this.name}-footer`, name: this.name, message: this.message, "error-message": this.errorMessage, error: this.error, link: this.link })));
+            const numberValue = typeof this.value === 'string' ? parseFloat(this.value) : this.value || 0;
+            return (h("eds-input-range", Object.assign({}, rangeProps, { min: (_a = opt[0]) === null || _a === void 0 ? void 0 : _a.value, max: (_b = opt[1]) === null || _b === void 0 ? void 0 : _b.value, step: (_c = opt[2]) === null || _c === void 0 ? void 0 : _c.value, value: numberValue })));
+        })()) : (h("eds-input", Object.assign({}, inputOpts))))), h("eds-input-footer", { key: 'ecf472d91e754c93899d3bbece01f03babfbe985', 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"; }
@@ -416,4 +447,5 @@ export class EdsInputField {
             }
         };
     }
+    static get elementRef() { return "hostEl"; }
 }

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

@@ -50,6 +50,7 @@ const Template = (args) => {
       ${args.required ? `required="${args.required}"` : ''}
       ${args.label ? `label="${args.label}"` : ''}
       ${args.hint ? `hint="${args.hint}"` : ''}
+      ${args.link ? `link="${args.link}"` : ''}
       ${args.icon ? `icon="${args.icon}"` : ''}
       ${linkJson ? `link='${linkJson}'` : ''}
       ${args.message ? `message="${args.message}"` : ''}

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

@@ -1,21 +1,3 @@
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: normal;
-  src: url("../fonts/Inter.var.woff2") format("woff2-variations"),
-  url("../fonts/Inter.var.woff2") format("woff2");
-  src: url("../fonts/Inter.var.woff2") format("woff2") tech("variations");
-}
-@font-face {
-  font-family: "Inter";
-  font-weight: 100 900;
-  font-display: swap;
-  font-style: italic;
-  src: url("../fonts/Inter-Italic.var.woff2") format("woff2-variations"),
-  url("../fonts/Inter-Italic.var.woff2") format("woff2");
-  src: url("../fonts/Inter-Italic.var.woff2") format("woff2") tech("variations");
-}
 :root {
   font-optical-sizing: auto;
 }
@@ -25,192 +7,6 @@ body {
   -moz-osx-font-smoothing: grayscale;
 }
 /*
-:focus[data-focus-method="mouse"],
-:focus[data-focus-method="touch"] {
-  outline: none !important;
-}
-*/
-/*FADE*/
-.fade-enter-active,
-.fade-leave-active {
-  transition-duration: 300ms;
-  transition-timing-function: linear;
-  transition-property: opacity;
-}
-.fade-enter-from,
-.fade-leave-to {
-  opacity: 0;
-}
-/*FADE TRANSLATE Y*/
-.fade-down-enter-active,
-.fade-down-leave-active {
-  transition-duration: 300ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-
-  transition-property: opacity, transform;
-}
-.fade-down-enter-from,
-.fade-down-leave-to {
-  opacity: 0;
-  transform: translateY(12px);
-}
-/*SLIDE LEFT*/
-.slide-left-enter-active,
-.slide-left-leave-active {
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  transition-property: opacity, transform;
-}
-.slide-left-enter-from,
-.slide-left-leave-to {
-  transform: translateX(-110%);
-}
-/*SLIDE BOTTOM*/
-.slide-bottom-enter-active,
-.slide-bottom-leave-active {
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
-  transition-property: opacity, transform;
-}
-.slide-bottom-enter-from,
-.slide-bottom-leave-to {
-  transform: translateY(100%);
-}
-.slide-bottom-list-move,
-.slide-bottom-list-enter-active,
-.slide-bottom-list-leave-active {
-  transition-duration: 500ms;
-  transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
-  transition-property: opacity, transform;
-}
-.slide-bottom-list-enter-from,
-.slide-bottom-list-leave-to {
-  opacity: 0;
-  transform: translateY(100%);
-}
-.slide-bottom-list-leave-active {
-  position: absolute;
-}
-/*COLLAPSE Y*/
-.collapseY-enter-active,
-.collapseY-leave-active {
-  transition-duration: 300ms;
-  transition-timing-function: linear;
-  overflow: hidden;
-  max-height: 500px;
-  transition-property: max-height;
-}
-.collapseY-enter-from,
-.collapseY-leave-to {
-  max-height: 0;
-}
-*, ::before, ::after {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(147 197 253 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-::backdrop {
-  --tw-border-spacing-x: 0;
-  --tw-border-spacing-y: 0;
-  --tw-translate-x: 0;
-  --tw-translate-y: 0;
-  --tw-rotate: 0;
-  --tw-skew-x: 0;
-  --tw-skew-y: 0;
-  --tw-scale-x: 1;
-  --tw-scale-y: 1;
-  --tw-pan-x:  ;
-  --tw-pan-y:  ;
-  --tw-pinch-zoom:  ;
-  --tw-scroll-snap-strictness: proximity;
-  --tw-gradient-from-position:  ;
-  --tw-gradient-via-position:  ;
-  --tw-gradient-to-position:  ;
-  --tw-ordinal:  ;
-  --tw-slashed-zero:  ;
-  --tw-numeric-figure:  ;
-  --tw-numeric-spacing:  ;
-  --tw-numeric-fraction:  ;
-  --tw-ring-inset:  ;
-  --tw-ring-offset-width: 0px;
-  --tw-ring-offset-color: #fff;
-  --tw-ring-color: rgb(147 197 253 / 0.5);
-  --tw-ring-offset-shadow: 0 0 #0000;
-  --tw-ring-shadow: 0 0 #0000;
-  --tw-shadow: 0 0 #0000;
-  --tw-shadow-colored: 0 0 #0000;
-  --tw-blur:  ;
-  --tw-brightness:  ;
-  --tw-contrast:  ;
-  --tw-grayscale:  ;
-  --tw-hue-rotate:  ;
-  --tw-invert:  ;
-  --tw-saturate:  ;
-  --tw-sepia:  ;
-  --tw-drop-shadow:  ;
-  --tw-backdrop-blur:  ;
-  --tw-backdrop-brightness:  ;
-  --tw-backdrop-contrast:  ;
-  --tw-backdrop-grayscale:  ;
-  --tw-backdrop-hue-rotate:  ;
-  --tw-backdrop-invert:  ;
-  --tw-backdrop-opacity:  ;
-  --tw-backdrop-saturate:  ;
-  --tw-backdrop-sepia:  ;
-  --tw-contain-size:  ;
-  --tw-contain-layout:  ;
-  --tw-contain-paint:  ;
-  --tw-contain-style:  ;
-}
-/*
 ! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com
 */
 /*
@@ -5861,9 +5657,18 @@ input[type="range"]::-webkit-slider-thumb {
   margin-top: 0.5rem;
   margin-bottom: 0.5rem;
 }
+.-ml-8 {
+  margin-left: -0.5rem;
+}
 .-ml-16 {
   margin-left: -1rem;
 }
+.-mr-4 {
+  margin-right: -0.25rem;
+}
+.-mr-8 {
+  margin-right: -0.5rem;
+}
 .-mr-16 {
   margin-right: -1rem;
 }
@@ -5897,6 +5702,12 @@ input[type="range"]::-webkit-slider-thumb {
 .mr-4 {
   margin-right: 0.25rem;
 }
+.-mr-4 {
+  margin-right: -0.25rem;
+}
+.-mr-8 {
+  margin-right: -0.5rem;
+}
 .mr-8 {
   margin-right: 0.5rem;
 }
@@ -6056,6 +5867,9 @@ input[type="range"]::-webkit-slider-thumb {
 .h-full {
   height: 100%;
 }
+.\!min-h-0 {
+  min-height: 0rem !important;
+}
 .\!min-h-20 {
   min-height: 1.25rem !important;
 }
@@ -6095,6 +5909,9 @@ input[type="range"]::-webkit-slider-thumb {
 .w-20 {
   width: 1.25rem;
 }
+.w-24 {
+  width: 1.5rem;
+}
 .w-28 {
   width: 1.75rem;
 }
@@ -7030,6 +6847,9 @@ input[type="range"]::-webkit-slider-thumb {
   --tw-shadow-colored: 0 0 #0000;
   box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
+.aria-disabled\:no-underline[aria-disabled="true"] {
+  text-decoration-line: none;
+}
 .aria-current-page\:bg-darker[aria-current="page"] {
   background-color: var(--grey-400);
 }

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

@@ -40,15 +40,15 @@ const linkStyles = cva([
                 // aria-disabled:line-through
             ],
             blueish: [
-                '-top-1 !px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4 ',
+                '!px-0 !py-0 !min-h-20 text-[#0034CB] decoration-[#0034CB] underline underline-offset-4',
                 'effect-focus focus-visible:rounded-xs',
-                'hover:before:opacity-100 focus-visible:before:opacity-0',
-                'aria-disabled:bg-transparent'
-                // aria-disabled:line-through
+                'hover:no-underline',
+                'aria-disabled:bg-transparent aria-disabled:no-underline'
+                //aria-disabled:line-through
             ],
             underline: [
-                'decoration-accent underline underline-offset-4 !py-0',
-                'hover:no-underline effect-focus focus-visible:rounded-xs'
+                'decoration-accent underline underline-offset-4 !px-0 !py-0',
+                'hover:no-underline effect-focus focus-visible:rounded-xs !min-h-0'
             ]
         },
         iconSmall: {
@@ -59,8 +59,12 @@ const linkStyles = cva([
             true: '',
             false: ''
         },
+        hasIcon: {
+            true: '',
+            false: ''
+        },
         size: {
-            underline: 'f-body-02',
+            underline: 'f-body-02 ',
             small: 'min-h-36 f-ui-02 px-12',
             large: 'min-h-44 f-ui-01 px-16'
         }
@@ -76,6 +80,8 @@ const linkStyles = cva([
             size: 'large',
             class: 'pr-8'
         },
+        { intent: 'blueish', hasIcon: true, class: '-mr-4 -top-1' },
+        { intent: 'underline', hasIcon: true, class: '-mr-4 -top-1' },
         // Active state
         {
             intent: 'primary',
@@ -117,7 +123,8 @@ const linkStyles = cva([
         //intent: 'primary',
         isActive: false,
         iconSmall: false,
-        size: 'small'
+        size: 'small',
+        hasIcon: false
     }
 });
 /**
@@ -179,16 +186,16 @@ export class EdsLink {
         if (this.icon && this.iconPos === 'left') {
             return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
               flex inline-flex items-center justify-center
-              ${this.size === 'large' ? 'h-32 w-32' : 'h-20 w-20'}
+              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
         }
         return null;
     }
     renderRightIcon() {
         if (this.icon && this.iconPos === 'right') {
-            return (h("span", { class: !this.external && !this.label ? '' : 'flex ml-4' }, h("eds-icon-wrapper", { class: `
+            return (h("span", { class: !this.external && !this.label ? '' : 'flex' }, h("eds-icon-wrapper", { class: `
               flex inline-flex items-center justify-center
-              ${this.size === 'large' ? 'h-32 w-32' : 'h-20 w-20'}
+              ${this.size === 'large' ? 'h-24 w-24' : 'h-20 w-20'}
             `, icon: this.icon })));
         }
         return null;
@@ -200,14 +207,15 @@ export class EdsLink {
             intent: this.intent,
             size: this.getLinkSize(),
             iconSmall: this.iconSmall,
-            isActive: this.current
+            isActive: this.current,
+            hasIcon: !!this.icon
         });
         // 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: '66edcff91c1051899df25c8d214620cf039a52ad', 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: 'f0754612e2c88ea1075266b2fc8e70277fbd63e2', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '17a6de3e392f51057894aeca8f05a7852f8c7f1e', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: 'ef4f274fc66857b4d247449b4aba9a7f45da5eef', 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: '44d300a455e51718fdb2d2414ce472b3a9a3a393', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: 'ebd8528be9d2c7ccfba0cb75476823ac1deade68', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -38,6 +38,14 @@
     z-index: 50;
 }
 
+.z-50 {
+    z-index: 50;
+}
+
+.z-9999999 {
+    z-index: 9999999;
+}
+
 .max-w-full {
     max-width: 100%;
 }
@@ -224,4 +232,27 @@
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 4;
-}
+}
+
+@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));
+    }
+    .md\:gap-y-12 {
+      row-gap: 0.75rem;
+    }
+  }

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

@@ -30,16 +30,16 @@ export class EdsModal {
     getModalPositionClasses() {
         switch (this.position) {
             case 'top':
-                return 'left-1/2 top-20 -translate-x-1/2';
+                return 'md:left-1/2 top-20 md:-translate-x-1/2';
             case 'bottom':
-                return 'left-1/2 bottom-20 -translate-x-1/2';
+                return 'md:left-1/2 bottom-20 md:-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';
+                return 'md:left-1/2 top-1/2 md:-translate-x-1/2 -translate-y-1/2';
         }
     }
     /**
@@ -99,9 +99,9 @@ export class EdsModal {
     render() {
         // 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: '980f396b79c32a36005b5f7813cc52b2e97457fa', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-50 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'a2e4bb022c17c66266809f1a8dd706523a6ff07b', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: 'eb2b985e84912dabea52a9a62eb908087004c958', id: "eds-modal", class: `${this.isOpen ? 'block' : 'hidden'} fixed inset-0 z-9999999 flex`, role: "dialog", "aria-modal": "true", "aria-labelledby": titleId }, this.isOpen && (h("div", { key: 'ad47334539d1a8a8694f34ba1e90a38b7dce07ab', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: '53c0c2a9559a6a5116f88caa2a7d92810560521e', class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '576b58f6bd78a969436c6a892f4dfec84a486cc4', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: '63e682d4297a346426dc7559cf0d80e21cc51f4c', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: 'eed35b30903d65694f2944431e7f387a8ef3f3e9', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: '6c6e673640ed2ef2ae6139ae1931a4b0a0db9aa9', class: "pt-8" }, h("slot", { key: 'eaaf2c17470681dc799b74f5eaebbe2496564c0e' })))));
+            onClick: () => this.close() })), h("div", { key: '69d449b6ec986b5cfd73e50cc060363236035915', class: `container max-w-full absolute px-20 py-20 bg-inverse rounded-lg shadow-lg z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '17395806ef17a06b5465174055087178db9f5356', class: "flex justify-between items-center border-b-2 border-softer pb-8" }, h("span", { key: 'daa5d63b73eab57b9b58ca06d0197f1a7002ca15', id: titleId, class: `f-heading-04 text-lighter ${this.getTruncateClass()}` }, this.title), h("eds-button", { key: '267ee7d1f10819c19af5eed6715465f2ba5f4831', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8" })), h("div", { key: 'fbd3351c851ab1089035117cca2b3ad769c26d18', class: "pt-8" }, h("slot", { key: '9958a61e24320183bef12aef381791f11e421597' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }