@ebrains/components 1.0.0 → 1.1.0

package/dist/collection/components/eds-icons/social/eds-icon-twitter/eds-icon-twitter.js

@@ -8,7 +8,7 @@ export class EdsIconTwitter {
         this.class = '';
     }
     render() {
-        return h("span", { key: '1a7ad8d7cbef70822ebda2f152d8b537df1eaf27', class: this.class, innerHTML: twitter });
+        return h("span", { key: 'c2ee643b5da517a53bd97ec6263161927ad229a7', class: this.class, innerHTML: twitter });
     }
     static get is() { return "eds-icon-twitter"; }
     static get properties() {

package/dist/collection/components/eds-icons/social/eds-icon-youtube/eds-icon-youtube.js

@@ -8,7 +8,7 @@ export class EdsIconYoutube {
         this.class = '';
     }
     render() {
-        return h("span", { key: '2236f8f5ede15d7eef54f2fd4fe6ca81c996166f', class: this.class, innerHTML: youtube });
+        return h("span", { key: '0a6abd6b62e24c07b4338f0f1f6febbec876791f', class: this.class, innerHTML: youtube });
     }
     static get is() { return "eds-icon-youtube"; }
     static get properties() {

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

@@ -57,10 +57,10 @@ export class EdsImg {
             imgOpts['loading'] = 'lazy';
             imgOpts['decoding'] = 'async';
         }
-        return (h("div", { key: 'de3328e21b2b038984e74c08cd757cd85c7a7e01', class: {
+        return (h("div", { key: '13ed3aa346c99321c609e49ce045b6361921350f', class: {
                 'items-center justify-center': true,
                 'effect-bg-pattern': this.lazyload && this.showBg
-            } }, h("picture", { key: '4e623a25c64ce1b2c09adf3519f12bde04280ba3' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '6d87af22189017aa1e158c01a8295c98381a1ba1', ref: (el) => (this.img = el), class: {
+            } }, h("picture", { key: '56aa0ed8fd1ef8f9faf6ad576dd05edc34139c9b' }, this.formats.map((format) => (h("source", { type: format.type, srcSet: format.srcset, media: format.media, sizes: this.sizes }))), h("img", Object.assign({ key: '78e3ed9adcfe423d48388bf30140f4b70649faf7', ref: (el) => (this.img = el), class: {
                 'effect-opacity object-cover object-center': true,
                 'opacity-100': this.loaded,
                 'opacity-0': !this.loaded

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

@@ -47,12 +47,12 @@ export class EdsInput {
     render() {
         const withIcon = !!this.icon;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : '';
-        return (h("div", { key: 'bb88b782042a37d2fcbd8a93f03056199d822559', 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: '5c66c14b19aa3d5fc37e7a77a2d1194fa0be9b8c', 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: '7b1cc490731455d00d500308458e6b2cd320fccf', 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: 'ce4d5548bc0fa1e681e3b74b03d071d73d8372d5', 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: '4326db3729dea8bbddb7a109a90424aa832aded7', 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: 'df2f5598aedd36b9cb2ce886fb8ea08da58dc5ff', class: `absolute top-1/2 left-[4px] -translate-y-1/2 ${this.disabled ? 'text-lightest' : 'text-lightest'}`, icon: this.icon }))));
     }
     static get is() { return "eds-input"; }
     static get properties() {

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: 'c3dbdb05ce4cc9244a1ebc9f3ce5718742924ea1', class: "space-y-4 mt-4" }, this.error && this.errorMessage && (h("div", { key: 'ccfde4960e1bec5697774de57da1a7948b5112c4', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: 'cc7171c96a7251c064f7ce527fe715aaac9a74e2', icon: "warning" }), h("p", { key: '99893066c8aeac76793fef4d5cf6d5b34dbbc25f', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '55a6881d02d06440e6adac174a43a1cd59adf34b', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: 'bb84693685aedbe7ba28551a1d944c0e1d8eda57', href: this.link.url, class: "f-ui-05 effect-color hover:text-lighter underline underline-offset-4" }, this.link.label))));
+        return (h("div", { key: 'd5424778da81d6558246efe97917d3e3ccfa9aaa', class: "space-y-4 mt-4" }, this.error && this.errorMessage && (h("div", { key: 'e915fc1f4719f48eca5a831ac72913d2f91f633b', id: `error_${this.name}`, class: "text-error flex items-center" }, h("eds-icon-wrapper", { key: '9cc87cfd4955766947a2581604fe1e072f8d82a9', icon: "warning" }), h("p", { key: '564a2397fb7e8185e43e1c2be216c76060e7498e', class: "f-ui-04 ml-4", innerHTML: this.errorMessage }))), this.message && h("p", { key: '24e0702df7e5c2fe4ef0cc6755159fefe76b70a7', id: `desc_${this.name}`, class: "f-ui-05 text-lighter", innerHTML: this.message }), this.link && (h("a", { key: '9e3720a3ded9d755afd7755104df0942246f1fbe', 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: '815b70d78f4004afb77a0c01772f750478dea1b3', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: 'de2cba1c7e89632b3aac40de573d730cf38a85c6' }, h("span", { key: '58326fb23edd4521b0f1c6e67366e7c589217387', "aria-hidden": "true" }, "*"), h("span", { key: 'e2208159652c9244e49c2c3d476a099a442d28ac', class: "sr-only" }, "required")))));
+        return (h("label", { key: 'd700690a67a8348836aec27d2ff4f4d4ee18b9c8', htmlFor: this.name, class: `input-label ${this.disabled ? 'text-lighter' : ''}` }, this.label, this.required && (h("span", { key: '9b52c053652db132a9bdb2d9fc64c569a529c2d9' }, h("span", { key: 'cd17268b6048ebaa70dc7f905fc7f7bf3ed3fa34', "aria-hidden": "true" }, "*"), h("span", { key: '352d7b5ef080336a5c7b53e0b710d5b0d7aa0efe', 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

@@ -45,7 +45,7 @@ export class EdsInputRange {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '9901432821b3dbdbf67e3b905c75acd7095ec8e9', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '44023ef4a7e3fec22666103ccec3e2346aea885d', 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": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: 'b74e14f619acbe7b98966bac8ea2c5206d05ad62', id: `desc_${this.name}`, class: "block f-ui-05 text-lighter" }, "Current value: ", this.sliderVal)));
+        return (h("div", { key: '5c55f65e2acd6f4554af7d8ba513c9d9dfd445eb', class: "relative flex flex-col items-start space-y-2" }, h("input", { key: '4fcd0d3d978ddba7929958dd22a283c2ba61ee48', 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": `desc_${this.name}`, "aria-valuemin": this.min, "aria-valuemax": this.max, "aria-valuenow": this.sliderVal, onInput: this.onInput, onChange: this.onChange }), h("p", { key: 'c63b223e6af149efb68cabbe5228e77b09ca2168', 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

@@ -66,7 +66,7 @@ export class EdsInputSearch {
         return this.inputElement;
     }
     render() {
-        return (h("div", { key: '2d74c44bf05f4ccbe81df14a3af112a763b01b5f', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'c7c7c479801a9c5e6da0b616448f7b89ba25b040', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '8e4954dc67ae59d46f2e3423325eccda0944363a', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
+        return (h("div", { key: '27d6871df962e2bd27eac38b1a105142b1b68bab', class: "relative flex items-center" }, h("eds-icon-wrapper", { key: 'b4b497cb435c673a550b169dea93fbc7006d0c5e', icon: "search", class: "absolute top-1/2 left-[4px] -translate-y-1/2 text-lightest", "aria-hidden": "true" }), h("input", { key: '1419cd8f5b8791b5b812c57ba649567e1b6ec0bb', id: this.inputId || this.name, name: this.name, placeholder: this.placeholder, value: this.value || '', required: this.required, disabled: this.disabled, type: "search", "aria-label": this.placeholder, class: `input pl-36 ${this.decorate}`,
             //onInput={this.onInput}
             onChange: this.onChange })));
     }

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

@@ -26,12 +26,12 @@ export class EdsInputSelect {
         const selectId = this.inputId || this.name;
         const placeholderText = this.placeholder || `Please select ${this.name}`;
         const describedBy = this.hasMessage || this.error ? `${this.name}-error` : undefined;
-        return (h("div", { key: '0e1bf5f1ebf30d675e0b4927e7812a305f58d2b9', class: "relative" }, h("select", { key: 'b92542caca12d77e3160baa84760b37bbbe172c7', id: selectId, name: this.name, class: {
+        return (h("div", { key: '80cbdab87f5baa21df5edc857685c3af4dee3a58', class: "relative" }, h("select", { key: '4e8f84fd9dbc63df7981898cadc24450f48aa92a', id: selectId, name: this.name, class: {
                 input: true,
                 'input-error': this.error,
                 'px-4': true,
                 'py-2': true
-            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: 'fa911a07fd0053f6c7e5044aac3e6d0846344899', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: 'afa3c7ad3c583dec2ffc2fd5087d7695509a2a25', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '1bb2a24fc9798a7359b9b45019b1432ff2e50e70', class: "w-20 h-20", icon: "chevron-right" }))));
+            }, "aria-invalid": this.error ? 'true' : 'false', "aria-describedby": describedBy, disabled: this.disabled, required: this.required, onChange: this.handleChange }, h("option", { key: '54b90339cae4c5c80711793a8c68c4587e0c2495', value: "", disabled: true, hidden: true }, placeholderText), this.options.map((opt, index) => (h("option", { key: index, value: opt.value, selected: opt.value === this.value }, opt.label)))), h("span", { key: '6c9f0a0606f1d6f282c756f84ace7618584d5fa3', class: "bg-dark rounded-xs absolute top-1/2 right-[6px] flex h-28 w-28 -translate-y-1/2 items-center justify-center" }, h("eds-icon-wrapper", { key: '4524af72468d3b37c01b0252d4b6b2bf7454514e', class: "w-20 h-20", icon: "chevron-right" }))));
     }
     static get is() { return "eds-input-select"; }
     static get properties() {

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

@@ -94,7 +94,7 @@ export class EdsInputField {
             icon: this.icon,
             checked: this.checked
         };
-        return (h("div", { key: '5243586c0bf3acc86d42684dbcd0288b3360b00c', 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' ? ((() => {
+        return (h("div", { key: 'e46f1b26212ee915c2fde3fa0c58a152005d2b50', 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,
@@ -107,7 +107,7 @@ export class EdsInputField {
             const opt = this.parsedOptions;
             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: 'e4e1f28766471d5451f342aa4d60d58fca2ddd01', id: `${this.name}-footer`, 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: 'ecf3ee5c0400749f1d89b53edfdee6fe62ca2a32', 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

@@ -216,7 +216,7 @@ export class EdsLink {
         const labelClasses = this.hideLabelOnSmallScreen
             ? 'hidden lg:flex' // Tailwind example: hidden on small screens, visible on larger
             : '';
-        return (h(ComponentType, { key: 'ee6e8eeb12df62ee801164877a357c075590ebae', 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: '7b35e3ddca346ff09730aa332b9f47b6d6707721', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: 'fe4201815e3791e6e3d6da8856d7a7a9e0211cfc', class: labelClasses }, this.label), this.renderRightIcon())));
+        return (h(ComponentType, { key: '8c7ab8b80b9765e83e4e57d59ba1b45fe36f15b7', 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: '94284b425a331f6a56a3e63db89fed5fa1a207c1', class: "z-1 relative inline-flex items-center justify-center" }, this.renderLeftIcon(), h("span", { key: '7496886c7c975d6795633c36b9cc8d31673d5a4b', class: labelClasses }, this.label), this.renderRightIcon())));
     }
     static get is() { return "eds-link"; }
     static get encapsulation() { return "shadow"; }

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

@@ -76,7 +76,7 @@ export class EdsLogo {
     }
     render() {
         const logoContent = this.getLogo();
-        return (h("a", { key: 'a23e44227ebaa3b999c961e1354c268f2c916a6f', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: 'cba53a54e6d31aabfa62ddcd8aa53bda56b8b706', innerHTML: logoContent })));
+        return (h("a", { key: 'ab11d53e1f417221dcca2de441c7b3efa96f99a5', href: this.href, onClick: () => this.handleClick(), class: "eds-logo-wrapper", "aria-label": this.label }, h("div", { key: '0d4a6b970788534d34d55b28fe83407ce7c4e00e', innerHTML: logoContent })));
     }
     static get is() { return "eds-logo"; }
     static get encapsulation() { return "shadow"; }

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

@@ -121,9 +121,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: '3a2446813eebf215f2c7aafc26d5688f58020c54', 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: '7081928b01c09e692cac0f61dbc58b4f5578271d', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
+        return (h("div", { key: 'affa340307adc5bdd637696b56a59e3f73cbf7e9', 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: 'e4359b32052a155f879070deea34fbca2fb67e3b', class: "fixed inset-0 bg-dark bg-opacity-90" // Add backdrop-blur utility class here
             ,
-            onClick: () => this.close() })), h("div", { key: '0fc5f4716022cb01c2da9a28738586710625c70f', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '8e4bdffba2f69b18e8846e4c2709c5c423b0a99e', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '6e0d237fc95c1b74b1b0c0456848684578367302', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '3499de216da4ba38edb66cdcd688872f51b41aaf', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: 'f723dded796961e925cc2b046c31e7345fd3e159', class: "pt-8 px-20 py-20" }, h("slot", { key: 'ffe1213b65e60dfaf7c220e3c7e3dd8495706dcf' })))));
+            onClick: () => this.close() })), h("div", { key: 'ba95f463e8c807e2ac2e900b3167191908ca2f5d', class: `container absolute bg-inverse z-10 ${this.getModalPositionClasses()} grow justify-center` }, h("div", { key: '1fc4649d6ba728745e4f1ed73e8fb8bdac6eda59', class: `flex justify-between items-center border-b-2 border-softer px-20 py-20  ${this.inverseHeader ? 'bg-strongest text-inverse' : 'bg-dark text-default'}` }, h("span", { key: '731e7cb6c7aaa36bcda8d1c32bd1b8da9d85f253', id: titleId, class: `f-heading-04 ${this.getTruncateClass()}` }, this.heading), h("eds-button", { key: '89657ac29b27ce173569353f3101e998cb756eec', intent: "tertiary", icon: "close", "aria-label": "Close modal", onClick: () => this.close(), "extra-class": "ml-8 text-default" })), h("div", { key: '2e39edaa1f5cc5389873e203c3e4294de8b56678', class: "pt-8 px-20 py-20" }, h("slot", { key: '0fb09f52100042fc5f20f5f443a8f5cff381d944' })))));
     }
     static get is() { return "eds-modal"; }
     static get encapsulation() { return "shadow"; }

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

@@ -173,7 +173,7 @@ export class EdsPagination {
         }
     }
     render() {
-        return (h("div", { key: '1d53f69179791434224f152503c0b81c4cfc7cd3' }, this.total > 0 && this.mode === 'default' && (h("p", { key: '00ae324b49d62a74feee9d1cde21d67cd726ecf0', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: 'dedf2ce2700eae9d1386b305ec1d1904b133f992', 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: '6377e0187e461bcbeac835dd7cb83e93ef199865' }, this.total > 0 && this.mode === 'default' && (h("p", { key: 'ec2a6b6a40c76352743d012c51cda5d7fe1137df', class: "f-ui-03 text-lightest mb-28 w-full text-center" }, h("span", { key: '3a23e3d156f87167b0dacb4085870958ce19e793', 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

@@ -39,7 +39,7 @@ export class EdsProgressBar {
         ]
             .filter(Boolean)
             .join(' ');
-        return (h("div", { key: '8760afff9f85f05fec52b0a7fb668661e49dc06f', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '06165b69fe7e170f4f61d9f95b5a44342d4ee67a', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '0c48e65c5a6cb0b4dff7a7e3e248052cdc29957d', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: 'fc6f7396cf741ba18d1b5d065bdd1b7bfff12abe', class: "text-default f-body-02" }, progressValue, "%"))));
+        return (h("div", { key: '3360c1a9e61c83fee5312d007f6d2965a8983eba', role: "progressbar", "aria-valuemin": "0", "aria-valuemax": "100", "aria-valuenow": progressValue, "aria-valuetext": `${progressValue}%`, class: outerClasses }, h("div", { key: '7210dc5931f08626b286c30ae790a3a864533632', class: fillClasses, style: { width: `${progressValue}%` } }), h("div", { key: '7586cd593b4e851f4605ad33b96781841ee0b1aa', class: "absolute inset-0 flex items-center justify-center pointer-events-none z-10" }, h("span", { key: '21fa3de543e5e717ed4fd76c689aa47c3fa6a853', class: "text-default f-body-02" }, progressValue, "%"))));
     }
     static get is() { return "eds-progress-bar"; }
     static get encapsulation() { return "shadow"; }

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

@@ -39,7 +39,7 @@ export class EdsRating {
         this.rating.emit(rating);
     }
     render() {
-        return (h("div", { key: '685ac01e4db577b07d00030b0c25e10b9b0defa8', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
+        return (h("div", { key: '6686575f0b8b9017bf19b105208f6adbfd46dabd', role: "radiogroup", class: "stars flex space-x-1 my-8" }, Array.from({ length: this.ratingCount }, (_, index) => {
             const starRating = index + 1;
             const isSelected = starRating <= this.selectedRating;
             // Use the mapping text if available; otherwise, fall back to a generic label.

package/dist/collection/components/eds-section/eds-section-core/eds-section-core.js

@@ -20,7 +20,7 @@ export class EdsSectionCore {
     }
     render() {
         const TagType = this.tag; // Set dynamic tag type (div or section)
-        return (h(TagType, { key: 'ff0b28dffb8aca2ad0ac1ee3eea7ebda75078f96' }, h("eds-section-heading", { key: '23e9bb2b084c6b8a534dd310fbe10e0de0211187', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9cae6378bdb5304191d393967025570f94fdcdb2' })));
+        return (h(TagType, { key: '43f8d599041ae0c9761988fdec4872ec4a8ca037' }, h("eds-section-heading", { key: 'd120ddd851a0485e2edb43e2a6f508a661f35c07', headingLevel: this.headingLevel, sectionTitle: this.sectionTitle }), h("slot", { key: '9818b82a3eebcb741f5bccc9781e4212f2c5fa3d' })));
     }
     static get is() { return "eds-section-core"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/eds-section/eds-section-heading/eds-section-heading.js

@@ -36,12 +36,12 @@ export class EdsSectionHeading {
     render() {
         const TagType = this.tag; // Dynamically set tag type for the container
         const HeadingTag = this.headingLevel; // Dynamically set heading level
-        return (h(TagType, { key: 'bb32f87fd944ebf08ebcde3980c18cd4bed18783', class: {
+        return (h(TagType, { key: '740ed8b3208e07091a1f4c79888e172dec33773a', class: {
                 'ui-section-header flex flex-wrap items-center justify-between gap-x-12 gap-y-8': true,
                 container: this.withContainer,
                 'pt-48': this.spacingLarge,
                 'pt-28': !this.spacingLarge
-            } }, h(HeadingTag, { key: '0cd8ea8aada58e30675579c82ba130b40257c7c6', class: this.getHeadingClass() }, this.sectionTitle)));
+            } }, h(HeadingTag, { key: '4d4ceef35b7cb06bfbff2fdae47e66dd7ac10c49', class: this.getHeadingClass() }, this.sectionTitle)));
     }
     static get is() { return "eds-section-heading"; }
     static get properties() {

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

@@ -37,7 +37,7 @@ export class EdsSpinner {
                 alignItems: 'center',
                 justifyContent: 'center'
             };
-        return (h(Host, { key: '214876a56949c147e74c1a7072406234c2fb1a02' }, h("div", { key: 'b75b639fa38aafaf13e1eb727e28c5e67f3edafe', class: "spinner-overlay", style: overlayStyle }, h("span", { key: '87ba2ef7e1e9601ac0ae8132e9c891b4149a20b5', class: "spinner", style: spinnerStyle }))));
+        return (h(Host, { key: 'f687ccbbb05840b7699202f3758ec4a8d0de1bc4' }, h("div", { key: '4bb5c697f1ccd90d2d65d519fcfb3ec809b106ac', class: "spinner-overlay", style: overlayStyle }, h("span", { key: 'a07722d9ee9c94d03d9766a4b297a498998c00be', class: "spinner", style: spinnerStyle }))));
     }
     static get is() { return "eds-spinner"; }
     static get encapsulation() { return "shadow"; }

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

@@ -23,11 +23,11 @@ export class EdsSwitch {
     render() {
         // Compute an accessible name based on state.
         const accessibleLabel = this.labelOn || this.labelOff ? (this.checked ? this.labelOn : this.labelOff) : 'Toggle switch';
-        return (h("div", { key: '442876be1bad7ea8c9e383bc68b192a2744c38f9', class: "switch-container" }, this.labelOff && h("span", { key: 'e4a7b01c0188d26e5b6524741b1c8ef66e357e35', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'f56b3762622671acf793568a96567193c38999c7', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        return (h("div", { key: '385c1463b11e83ff5b982218e0f28c54299210fd', class: "switch-container" }, this.labelOff && h("span", { key: 'f7e825a34487a1cec466b5172d77c2802029607c', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'fd1e8ffab675ee79edc6b99de4dfff42545d91af', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: 'b76e89a1e37130542dd86ce3aed8c5690aeeda63', class: "switch-handle" })), this.labelOn && h("span", { key: '4e5d4f8a2f19bb612a17fa73e441e7e718b71508', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '0d185957ffe2577ffc8798c298820c84c838a2a4', class: "switch-handle" })), this.labelOn && h("span", { key: 'f12b752ff94a363bb9593bd00cf43e7110e4399e', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
     }
     static get is() { return "eds-switch"; }
     static get encapsulation() { return "shadow"; }

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

@@ -95,6 +95,11 @@ table {
     background-color: rgba(255, 255, 255, .15);
 }
 
+.px-8 {
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
+}
+
 .px-20 {
     padding-left: 1.25rem;
     padding-right: 1.25rem;

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

@@ -1,3 +1,31 @@
+/**
+ * <eds-table
+      table-data='[
+        { "Property": "username", "Type": "string", "Required": "Yes" },
+        { "Property": "password", "Type": "string", "Required": "Yes" },
+        { "Property": "email", "Type": "string", "Required": "No" }
+      ]'
+      config='{
+        "Type": { "format": "uppercase" },
+        "Property": { "format": "code" },
+        "Required": { "hidden": true }
+      }'
+      actions='[
+        { "name": "view",  "label": "View"  },
+        { "name": "edit",  "label": "Edit"  },
+        { "name": "delete", "type": "checkbox" }
+      ]'
+    ></eds-table>
+
+    <script>
+      const table = document.querySelector('eds-table');
+      table.addEventListener('rowaction', e => {
+        const { action, row } = e.detail;
+        console.log(e.detail)
+        // etc.
+      });
+    </script>
+ */
 import { sendAnalytics } from "../../utils/analytics";
 import { h } from "@stencil/core";
 import { parseData } from "../../utils/sharedUtils";
@@ -25,6 +53,10 @@ export class EdsTable {
         this.searchEnabled = false;
         this.hostWidth = undefined;
         this.columnSize = 'default';
+        this.actions = [];
+        this.actionTemplate = undefined;
+        this.parsedActions = [];
+        this.dataColumns = [];
         this.tbData = [];
         this.columns = [];
         this.currentPage = 1;
@@ -39,8 +71,18 @@ export class EdsTable {
     handleConfigChange() {
         this.parseConfig();
     }
+    handleActionsChange() {
+        try {
+            this.parsedActions = typeof this.actions === 'string' ? JSON.parse(this.actions) : this.actions;
+        }
+        catch (_a) {
+            console.error('Failed to parse actions JSON');
+            this.parsedActions = [];
+        }
+    }
     componentWillLoad() {
         this.parseConfig();
+        this.handleActionsChange();
         this.data ? this.parseData() : this.endpoint && this.fetchData();
     }
     componentDidLoad() {
@@ -69,24 +111,20 @@ export class EdsTable {
     parseData() {
         try {
             this.tbData = parseData(this.data);
-            //this.tbData = typeof this.data === 'string' ? JSON.parse(this.data) : this.data || [];
             this.totalRows = this.tbData.length;
             this.updateColumns();
             this.currentPage = 1;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse data:', error);
             this.tbData = [];
         }
     }
     parseConfig() {
         try {
-            //this.parsedConfig = parseData(this.config);
             this.parsedConfig = typeof this.config === 'string' ? JSON.parse(this.config) : this.config;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to parse config:', error);
             this.parsedConfig = {};
         }
@@ -98,7 +136,6 @@ export class EdsTable {
             this.data = data;
         }
         catch (error) {
-            // eslint-disable-next-line
             console.error('Failed to fetch data:', error);
         }
     }
@@ -134,24 +171,52 @@ export class EdsTable {
     handleSearch(event) {
         this.searchQuery = event.target.value;
         this.currentPage = 1;
-        /*sendAnalytics({
-          category: 'ui-component',
-          parentContext: null,
-          tag: `${this.hostEl.tagName.toLowerCase()}/eds-input-field/search`,
-          name: `${this.searchQuery}` || '',
-          action: 'page'
-        });*/
     }
     renderCell(value, column) {
         var _a;
         const format = (_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.format;
         return format === 'uppercase' ? (value === null || value === void 0 ? void 0 : value.toString().toUpperCase()) : format === 'svg' ? (h("div", { innerHTML: value })) : format === 'bold' ? (h("strong", null, value)) : format === 'code' ? (h("code", null, value)) : (value);
     }
+    /**
+     * Renders one action (button or checkbox) for a specific action‐name.
+     * Used by the “Actions” column below.
+     */
+    renderSingleActionCell(actionName, row) {
+        var _a;
+        const act = this.parsedActions.find((a) => a.name === actionName);
+        if (this.actionTemplate) {
+            return this.actionTemplate(row);
+        }
+        const type = act.type || 'button';
+        if (type === 'checkbox') {
+            const boundField = (_a = act.field) !== null && _a !== void 0 ? _a : act.name;
+            const checked = !!row[boundField];
+            return (h("eds-input-field", { name: `chc-${actionName}`, label: act.label, type: "checkbox", checked: checked, onChange: (e) => this.emitAction(act.name, row, e.target.checked) }));
+        }
+        return h("eds-link", { label: act.label, intent: "weak", onClick: () => this.emitAction(act.name, row) });
+    }
+    emitAction(actionName, row, checked) {
+        sendAnalytics({
+            category: 'ui-component',
+            parentContext: null,
+            tag: `${this.hostEl.tagName.toLowerCase()}/action`,
+            name: actionName,
+            action: 'click'
+        });
+        this.rowaction.emit({ action: actionName, row, checked: !!checked });
+    }
     shouldEnablePagination() {
         return this.paginationEnabled && this.totalRows > this.rowsPerPage;
     }
     updateColumns() {
+        var _a, _b;
+        // 1) Grab all data‐keys from the first row (if any) as before:
         this.columns = this.tbData.length > 0 ? Object.keys(this.tbData[0]) : [];
+        // 2) Instead of pushing each action.name, we add just a single “actions” column
+        //    (you can call it anything; we’ll detect it in render())
+        if (((_b = (_a = this.parsedActions) === null || _a === void 0 ? void 0 : _a.length) !== null && _b !== void 0 ? _b : 0) > 0 && this.tbData.length > 0) {
+            this.columns.push('actions');
+        }
     }
     getVisibleColumnsCount() {
         return this.columns.filter((column) => { var _a; return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden); }).length;
@@ -166,23 +231,39 @@ export class EdsTable {
         }
         return divisionFactor;
     }
+    capitalize(str) {
+        return str.charAt(0).toUpperCase() + str.slice(1).toLowerCase();
+    }
     render() {
-        // Use containerWidth state that is updated on resize.
         const currentContainerWidth = this.hostWidth && this.hostWidth.trim() !== '' ? Number(this.hostWidth) : this.containerWidth || 400;
-        // Calculate the number of visible columns and the column width.
         const visibleColumnsCount = this.getVisibleColumnsCount();
         const columnWidth = visibleColumnsCount > 0 ? Math.floor((currentContainerWidth / visibleColumnsCount) * this.divisionFactor()) : 100;
         const paginatedRows = this.getPaginatedRows();
         const lastPage = Math.ceil(this.totalRows / this.rowsPerPage);
-        return (h("div", { key: '81735ac374853c8c92b3f50e26263ff9d71b326c' }, this.searchEnabled && (h("div", { key: '0b2ab8dbb343033f605e2028890bd963cd650998' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...",
-            // @ts-ignore
-            onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'eb3eebe6fb124d4e1983b2fb7e636707817d36bd', class: "mt-20" }, h("table", { key: '03b312ac20bdec28843a46907a3cc4fba69f62ae', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'ccab58dc46ae765df28da97ded6b1dd14d45d7f1' }, h("tr", { key: '904a125aad610cebe42b0bce46615be38f0ee17a', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+        return (h("div", { key: '5034177431626ab2bfc5fd0118c006d11a4f6e96' }, this.searchEnabled && (h("div", { key: '86e1a6ffc4bed69f290b3a53031341ab276eaf04' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'bc11838d819ecf89c5ba1cc1cfe7ac0af0e82b59', class: "mt-20" }, h("table", { key: '97f16b65eb1d9387e9ca7588184c9e68c1afcc2e', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'f4d64ada28c225db1b224277513e663a99de1cec' }, h("tr", { key: 'c6a69e159cceada0f7143c0acb787e5c23242ae7', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, column));
-        }))), h("tbody", { key: 'a4c54c9c89d15546020dbb684e5486decde33f30' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((column) => {
+            // 3) For the “actions” column, override the header to “Actions”
+            if (col === 'actions') {
+                // You can choose a smaller min‐width here if you wish:
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, "Actions"));
+            }
+            // Otherwise, render column name or action label if you do want to override:
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.capitalize(col)));
+            }
+            return null;
+        }))), h("tbody", { key: '133af82fdd1f820e853734ab48123cb3db527e15' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
-            return !((_a = this.parsedConfig[column]) === null || _a === void 0 ? void 0 : _a.hidden) && (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[column], column)));
-        }))))))), this.shouldEnablePagination() && (h("div", { key: '2a248cbbe81ac8c1ad4dfbb49a9615f15931bac6', class: "mt-20" }, h("eds-pagination", { key: '11701d81922ca4c8b36fe82be32316a175eddbcd', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+            if (col === 'actions') {
+                // 4) Render ALL actions inside a single <td> for this row:
+                return (h("td", { class: "text-center border border-softer m-0 f-ui-02 break-words actions-cell", style: { minWidth: `${columnWidth - 4}px` } }, h("div", { style: { display: 'flex', gap: '0.5rem', justifyContent: 'center', flexWrap: 'wrap' } }, this.parsedActions.map((act) => (h("span", { style: { whiteSpace: 'nowrap' } }, this.renderSingleActionCell(act.name, row)))))));
+            }
+            if (!((_a = this.parsedConfig[col]) === null || _a === void 0 ? void 0 : _a.hidden)) {
+                // Regular data cell:
+                return (h("td", { class: "text-center border border-softer m-0 py-8 f-ui-2 break-words", style: { minWidth: `${columnWidth - 4}px` } }, this.renderCell(row[col], col)));
+            }
+            return null;
+        }))))))), this.shouldEnablePagination() && (h("div", { key: '85032d06cd0ac5dae9b504d423fceba3cd074861', class: "mt-20" }, h("eds-pagination", { key: '8caf6f57960e222c04d45f57a5811cd7bd524f4c', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     static get is() { return "eds-table"; }
     static get encapsulation() { return "shadow"; }
@@ -239,7 +320,7 @@ export class EdsTable {
                 "mutable": false,
                 "complexType": {
                     "original": "| string\n    | {\n        [key: string]: {\n          hidden?: boolean;\n          format?: 'uppercase' | 'bold' | 'code';\n        };\n      }",
-                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"bold\" | \"uppercase\"; }; }",
+                    "resolved": "string | { [key: string]: { hidden?: boolean; format?: \"code\" | \"uppercase\" | \"bold\"; }; }",
                     "references": {}
                 },
                 "required": false,
@@ -340,11 +421,58 @@ export class EdsTable {
                 "attribute": "column-size",
                 "reflect": false,
                 "defaultValue": "'default'"
+            },
+            "actions": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string | TableAction[]",
+                    "resolved": "TableAction[] | string",
+                    "references": {
+                        "TableAction": {
+                            "location": "local",
+                            "path": "/Users/nigeor/Documents/Projects/EBRAINS/ebrains-ui-ecosystem/packages/components/src/components/eds-table/eds-table.tsx",
+                            "id": "../../../packages/components/src/components/eds-table/eds-table.tsx::TableAction"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Array of actions to render in each row.\nEach action should have:\n - `name`: a unique key (e.g. \"view\", \"delete\")\n - `label`: what shows in the button (or you could pass an icon name here)"
+                },
+                "attribute": "actions",
+                "reflect": false,
+                "defaultValue": "[]"
+            },
+            "actionTemplate": {
+                "type": "unknown",
+                "mutable": false,
+                "complexType": {
+                    "original": "(row: any) => VNode",
+                    "resolved": "(row: any) => VNode",
+                    "references": {
+                        "VNode": {
+                            "location": "import",
+                            "path": "@stencil/core",
+                            "id": "../../../node_modules/@stencil/core/internal/stencil-core/index.d.ts::VNode"
+                        }
+                    }
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional: allow the consumer to supply a full JSX render\u2010prop\ninstead of simple name/label pairs. If provided, this takes priority."
+                }
             }
         };
     }
     static get states() {
         return {
+            "parsedActions": {},
+            "dataColumns": {},
             "tbData": {},
             "columns": {},
             "currentPage": {},
@@ -354,6 +482,24 @@ export class EdsTable {
             "containerWidth": {}
         };
     }
+    static get events() {
+        return [{
+                "method": "rowaction",
+                "name": "rowaction",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Define the event with the payload type"
+                },
+                "complexType": {
+                    "original": "{ action: string; row: any; checked: boolean }",
+                    "resolved": "{ action: string; row: any; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
     static get elementRef() { return "hostEl"; }
     static get watchers() {
         return [{
@@ -362,6 +508,9 @@ export class EdsTable {
             }, {
                 "propName": "config",
                 "methodName": "handleConfigChange"
+            }, {
+                "propName": "actions",
+                "methodName": "handleActionsChange"
             }, {
                 "propName": "data",
                 "methodName": "parseData"