@ebrains/components 2.0.0 → 2.2.0

package/dist/components/eds-steps2.js

@@ -3,7 +3,7 @@ import { p as parseData } from './sharedUtils.js';
 import { d as defineCustomElement$2 } from './eds-button2.js';
 import { d as defineCustomElement$1 } from './eds-icon-wrapper2.js';
 
-const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before{content:counter(step);position:absolute;left:-40px;top:0;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mb-28{margin-bottom:1.75rem}";
+const edsStepsCss = ".steps{position:sticky;margin-left:16px;margin-bottom:12px;border-left:1px solid var(--soft-color, #ddd);padding-left:23px;counter-reset:step}.steps h3{counter-increment:step;font-size:var(--f-heading-05-fontSize);font-weight:var(--f-heading-05-fontWeight);line-height:var(--f-heading-05-lineHeight);position:relative}.steps h3::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:32px;height:32px;font-size:1rem;border:1px solid #ccc;background:var(--grey-900);color:#fff;border-radius:50%}.steps h4,.steps h5{counter-increment:step;font-size:var(--f-heading-06-fontSize);font-weight:var(--f-heading-06-fontWeight);line-height:var(--f-heading-06-lineHeight);position:relative}.steps h4::before,.steps h5::before{content:counter(step);position:absolute;left:-40px;top:-2px;display:flex;align-items:center;justify-content:center;width:30px;height:30px;font-size:0.875rem;border:1px solid #ccc;background:#333;color:#fff;border-radius:50%}.steps blockquote{margin-top:16px;margin-bottom:16px;font-style:italic;color:#aaa;padding-left:6px}.f-body-02{font-family:var(--f-body-02-fontFamily);font-weight:var(--f-body-02-fontWeight);font-size:var(--f-body-02-fontSize);line-height:var(--f-body-02-lineHeight);letter-spacing:var(--f-body-02-letterSpacing)}.text-light{color:var(--grey-700)}.text-lighter{color:var(--grey-600)}.my-16{margin-top:1rem;margin-bottom:1rem}.mt-16{margin-top:1rem}.mb-28{margin-bottom:1.75rem}.ml-8{margin-left:0.5rem}.gap-y-16{row-gap:1rem}.gap-x-16{-moz-column-gap:1rem;column-gap:1rem}.flex{display:flex}.grid{display:grid}.hidden{display:none}.block{display:block}.cursor-pointer{cursor:pointer}";
 const EdsStepsStyle0 = edsStepsCss;
 
 const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLElement {
@@ -12,33 +12,53 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.step = createEvent(this, "step", 7);
+        this.finished = createEvent(this, "finished", 7);
+        this.next = createEvent(this, "next", 7);
+        this.back = createEvent(this, "back", 7);
         this.handleNext = () => {
-            this.activeStep = this.activeStep + 1;
-            if (this.activeStep < this.parsedSteps.length) {
-                this.step.emit(this.activeStep);
+            const lastIndex = this.parsedSteps.length - 1;
+            if (this.activeStep >= lastIndex) {
+                this.finished.emit();
+                return;
+            }
+            const target = this.activeStep + 1;
+            this.next.emit(target);
+            if (this.isNextDisabledFor(this.activeStep)) {
+                return;
+            } // block advance only if current is disabled
+            this.activeStep = target;
+            this.step.emit(this.activeStep);
+            // 2) if using the boolean form, clear it when moving away from a step
+            if (!Array.isArray(this.disableNext)) {
+                this.disableNext = false;
             }
         };
         this.handleBack = () => {
             if (this.activeStep > 0) {
-                this.activeStep = this.activeStep - 1;
+                const target = this.activeStep - 1;
+                this.back.emit(target);
+                this.activeStep = target;
                 this.step.emit(this.activeStep);
+                // also clear boolean form on back
+                if (!Array.isArray(this.disableNext)) {
+                    this.disableNext = false;
+                }
             }
         };
         this.steps = [];
         this.type = 'static';
+        this.nextLabel = 'Next';
+        this.backLabel = 'Back';
+        this.finishLabel = 'Finish';
+        this.disableNext = false;
+        this.headingLevel = 'h4';
         this.activeStep = 0;
     }
-    /**
-     * Lifecycle method that runs when the component has fully loaded.
-     * It emits a custom event for each `eds-button` element contained within the breadcrumb.
-     */
     componentDidLoad() {
         var _a;
         if (this.type === 'linear') {
             const btns = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('eds-button');
-            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => {
-                this.emitContext(btn);
-            });
+            btns === null || btns === void 0 ? void 0 : btns.forEach((btn) => this.emitContext(btn));
         }
     }
     activeStepChanged(newValue) {
@@ -46,19 +66,10 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
             var _a;
             const activeStepContainer = (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelectorAll('.step')[newValue];
             if (activeStepContainer) {
-                const btns = activeStepContainer.querySelectorAll('eds-button');
-                btns.forEach((btn) => {
-                    this.emitContext(btn);
-                });
+                activeStepContainer.querySelectorAll('eds-button').forEach((btn) => this.emitContext(btn));
             }
         }, 50);
     }
-    /**
-     * Emits a custom event called `parentContext` for a given link element.
-     * This event provides context information about the breadcrumb component.
-     *
-     * @param linkElement - The link element to which the event will be dispatched.
-     */
     emitContext(linkElement) {
         const event = new CustomEvent('parentContext', {
             detail: {
@@ -68,26 +79,29 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
         });
         linkElement.dispatchEvent(event);
     }
-    handleStepClick(index) {
-        this.step.emit(index);
-        // In linear mode, update the active step on header click.
-        if (this.type === 'linear') {
-            this.activeStep = index;
-        }
-    }
-    /**
-     * Parse the JSON string into an array of steps.
-     */
     get parsedSteps() {
         return parseData(this.steps);
     }
+    isNextDisabledFor(index) {
+        return Array.isArray(this.disableNext)
+            ? !!this.disableNext[index] // per-step
+            : index === this.activeStep && !!this.disableNext; // only active step
+    }
+    /** Render the semantic heading element */
+    renderHeading(title) {
+        const Tag = this.headingLevel;
+        return h(Tag, null, title);
+    }
     render() {
         const steps = this.parsedSteps;
         if (this.type === 'linear') {
-            return (h("div", null, h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", { onClick: () => this.handleStepClick(index) }, step.title), this.activeStep === index && (h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content })), h("eds-button", { label: index === steps.length - 1 ? 'Finish' : 'Continue', intent: "primary", class: "next-btn", onClick: this.handleNext }), h("eds-button", { label: "Back", intent: "ghostInverse", onClick: this.handleBack, disabled: index === 0, "extra-class": index === 0 ? 'hidden' : 'ml-8 block' })))))))));
+            return (h("div", { class: "steps" }, steps.map((step, index) => {
+                const isLast = index === steps.length - 1;
+                return (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title), this.activeStep === index && (h("div", { class: "content grid gap-y-16" }, h("slot", { name: `step-${index}` }, h("div", { class: isLast ? 'f-body-02 text-lighter' : 'f-body-02 text-lighter', innerHTML: step.content })), h("div", { class: "flex items-center mt-16" }, h("eds-button", { label: this.backLabel, intent: "ghost", icon: "chevron-left", iconPos: "left", iconSmall: true, onClick: this.handleBack, disabled: index === 0, class: index === 0 ? 'hidden' : 'block', size: "small" }), h("eds-button", { label: isLast ? this.finishLabel : this.nextLabel, intent: "primary", icon: "chevron-right", iconSmall: true, onClick: this.handleNext, disabled: this.isNextDisabledFor(index), size: "small", class: "ml-8" })), h("slot", { name: `actions-${index}` })))));
+            })));
         }
-        // Static mode: show all steps with their content, no navigation buttons.
-        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, h("h3", null, step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
+        // Static: no navigation buttons
+        return (h("div", { class: "steps" }, steps.map((step, index) => (h("div", { class: "step mb-28", key: index }, this.renderHeading(step.title), h("div", { class: "content" }, h("slot", { name: `step-${index}` }, h("div", { class: index === steps.length - 1 ? 'f-body-02 text-lighter mt-16' : 'f-body-02 text-lighter my-16', innerHTML: step.content }))))))));
     }
     get el() { return this; }
     static get watchers() { return {
@@ -97,6 +111,11 @@ const EdsSteps = /*@__PURE__*/ proxyCustomElement(class EdsSteps extends HTMLEle
 }, [1, "eds-steps", {
         "steps": [1],
         "type": [1],
+        "nextLabel": [1, "next-label"],
+        "backLabel": [1, "back-label"],
+        "finishLabel": [1, "finish-label"],
+        "disableNext": [1028, "disable-next"],
+        "headingLevel": [513, "heading-level"],
         "activeStep": [32]
     }, undefined, {
         "activeStep": ["activeStepChanged"]

package/dist/components/eds-switch.js

@@ -1,7 +1,7 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 
-const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch:focus{outline:none;box-shadow:0 0 0 2px #007aff}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}";
+const edsSwitchCss = ":host{display:inline-block}.switch-container{display:inline-flex;align-items:center}.switch-label{font-family:var(--f-ui-02-light-fontFamily);font-weight:var(--f-ui-02-light-fontWeight);font-size:var(--f-ui-02-light-fontSize);line-height:var(--f-ui-02-light-lineHeight);letter-spacing:var(--f-ui-02-light-letterSpacing)}button.switch{position:relative;display:inline-flex;align-items:center;width:50px;height:26px;border:none;border-radius:13px;background-color:#ccc;padding:0;cursor:pointer;transition:background-color 0.2s}button.switch.switch--checked{background-color:var(--green-500)}button.switch.switch--disabled{opacity:0.6;cursor:not-allowed}.switch-handle{position:absolute;width:22px;height:22px;border-radius:50%;background-color:#fff;top:2px;left:2px;transition:transform 0.2s}button.switch.switch--checked .switch-handle{transform:translateX(24px)}.ml-8{margin-left:0.5rem}.mr-8{margin-right:0.5rem}.switch:focus{outline:2px solid #005fcc;outline-offset:2px}.switch:focus:not(:focus-visible){outline:none}.switch:focus-visible{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}";
 const EdsSwitchStyle0 = edsSwitchCss;
 
 const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTMLElement {
@@ -23,19 +23,41 @@ const EdsSwitch$1 = /*@__PURE__*/ proxyCustomElement(class EdsSwitch extends HTM
                 action: 'checked'
             });
         };
+        this.handleKeyDown = (e) => {
+            if (this.disabled) {
+                return;
+            }
+            if (e.key === 'Enter' || e.key === ' ') {
+                e.preventDefault();
+                this.toggleSwitch();
+            }
+        };
         this.checked = false;
         this.disabled = false;
         this.labelOn = '';
         this.labelOff = '';
     }
     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: '1de6f7afd451f5d0276b62ef7bbf817f132e4440', class: "switch-container" }, this.labelOff && h("span", { key: 'd2d1017d7d26537eb2e65fa74b1f86453edc93d2', class: "switch-label switch-label--off mr-8" }, this.labelOff), h("button", { key: 'ade3ba909f5744a2b87238da52fcc33f600721cf', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": accessibleLabel, class: {
+        const switchId = `switch-${Math.random().toString(36).substr(2, 9)}`;
+        const labelledBy = [];
+        if (this.labelOff) {
+            labelledBy.push(`${switchId}-off`);
+        }
+        if (this.labelOn) {
+            labelledBy.push(`${switchId}-on`);
+        }
+        const accessibleLabel = labelledBy.length === 0
+            ? this.labelOn || this.labelOff
+                ? this.checked
+                    ? this.labelOn
+                    : this.labelOff
+                : 'Toggle switch'
+            : undefined;
+        return (h("div", { key: '95a833cbe8e736d7e747f6fdd8504dd8c169ea60', class: "switch-container" }, this.labelOff && (h("span", { key: 'a88de63c35409ab244a6cba5bd70a10728a08b2a', id: `${switchId}-off`, class: "switch-label switch-label--off mr-8" }, this.labelOff)), h("button", { key: 'd6573f05164f2b57063e9a97c3b983f32700bd7a', id: switchId, tabindex: this.disabled ? '-1' : '0', type: "button", role: "switch", "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', "aria-labelledby": labelledBy.length > 0 ? labelledBy.join(' ') : undefined, "aria-label": accessibleLabel, class: {
                 switch: true,
                 'switch--checked': this.checked,
                 'switch--disabled': this.disabled
-            }, onClick: this.toggleSwitch, disabled: this.disabled }, h("span", { key: '64034f73021623f63523c7bb52ec5233ad291c55', class: "switch-handle" })), this.labelOn && h("span", { key: 'a96a35565ac28ed6a27855b90b180f15adb0e711', class: "switch-label switch-label--on ml-8" }, this.labelOn)));
+            }, onClick: this.toggleSwitch, onKeyDown: this.handleKeyDown, disabled: this.disabled }, h("span", { key: '35e6da3bb76779bfaad04d8990dec419524fb543', class: "switch-handle" })), this.labelOn && (h("span", { key: 'b14243d9d45dbdddb9473ad2c5696e07be9831d3', id: `${switchId}-on`, class: "switch-label switch-label--on ml-8" }, this.labelOn))));
     }
     get el() { return this; }
     static get style() { return EdsSwitchStyle0; }

package/dist/components/eds-table2.js

@@ -1,18 +1,20 @@
 import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
 import { s as sendAnalytics } from './analytics.js';
 import { p as parseData } from './sharedUtils.js';
-import { d as defineCustomElement$a } from './eds-icon-wrapper2.js';
-import { d as defineCustomElement$9 } from './eds-input2.js';
-import { d as defineCustomElement$8 } from './eds-input-field2.js';
-import { d as defineCustomElement$7 } from './eds-input-footer2.js';
-import { d as defineCustomElement$6 } from './eds-input-label2.js';
-import { d as defineCustomElement$5 } from './eds-input-range2.js';
-import { d as defineCustomElement$4 } from './eds-input-search2.js';
-import { d as defineCustomElement$3 } from './eds-input-select2.js';
-import { d as defineCustomElement$2 } from './eds-link2.js';
-import { d as defineCustomElement$1 } from './eds-pagination2.js';
+import { d as defineCustomElement$c } from './eds-button2.js';
+import { d as defineCustomElement$b } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$a } from './eds-input2.js';
+import { d as defineCustomElement$9 } from './eds-input-field2.js';
+import { d as defineCustomElement$8 } from './eds-input-footer2.js';
+import { d as defineCustomElement$7 } from './eds-input-label2.js';
+import { d as defineCustomElement$6 } from './eds-input-range2.js';
+import { d as defineCustomElement$5 } from './eds-input-search2.js';
+import { d as defineCustomElement$4 } from './eds-input-select2.js';
+import { d as defineCustomElement$3 } from './eds-link2.js';
+import { d as defineCustomElement$2 } from './eds-pagination2.js';
+import { d as defineCustomElement$1 } from './eds-tooltip2.js';
 
-const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){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}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
+const edsTableCss = "table{text-indent:0;border-color:inherit;border-collapse:collapse;}.container{width:calc(var(--container-width, 100%) - (2 * var(--breakout-container-outer-gutter, var(--container-outer-gutter, var(--outer-gutter, 0)))));margin-right:auto;margin-left:auto}.container>*{--container-outer-gutter:0;--breakout-container-outer-gutter:0}.pt-32{padding-top:2rem}.pt-40{padding-top:2.5rem}.pt-48{padding-top:3rem}.pb-28{padding-bottom:1.75rem}.pb-60{padding-bottom:3.75rem}.mt-20{margin-top:1.25rem}.mt-28{margin-top:1.75rem}.block{display:block}.inline-block{display:inline-block}.inline{display:inline}.flex{display:flex}.overflow-x-auto{overflow-x:auto}.mt-6{margin-top:0.375rem}.p-0{padding:0rem}.p-4{padding:0.25rem}.m-0{margin:0rem}.border{border-width:1px}.border-softer{border:1px solid rgba(0, 0, 0, .1)}.even\\:bg-inverse-softer:nth-child(even){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}.py-8{padding-top:0.5rem;padding-bottom:0.5rem}.f-ui-01{font-family:var(--f-ui-01-fontFamily);font-weight:var(--f-ui-01-fontWeight);font-size:var(--f-ui-01-fontSize);line-height:var(--f-ui-01-lineHeight);letter-spacing:var(--f-ui-01-letterSpacing)}.f-ui-02{font-family:var(--f-ui-02-fontFamily);font-weight:var(--f-ui-02-fontWeight);font-size:var(--f-ui-02-fontSize);line-height:var(--f-ui-02-lineHeight);letter-spacing:var(--f-ui-02-letterSpacing)}.items-center{align-items:center}.justify-center{justify-content:center}.justify-between{justify-content:space-between}.text-center{text-align:center}.break-words{overflow-wrap:anywhere}";
 const EdsTableStyle0 = edsTableCss;
 
 const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLElement {
@@ -24,8 +26,33 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         this.handleResize = () => {
             this.updateContainerWidth();
         };
+        this.onActionKeyDown = (e) => {
+            var _a;
+            if (e.key !== 'ArrowRight' && e.key !== 'ArrowLeft') {
+                return;
+            }
+            e.preventDefault();
+            const currentButton = e.target;
+            const toolbar = currentButton.closest('[role="toolbar"]');
+            if (!toolbar) {
+                return;
+            }
+            // Find all focusable action buttons in this row
+            const actionButtons = Array.from(toolbar.querySelectorAll('eds-button'));
+            const currentIndex = actionButtons.indexOf(currentButton);
+            if (currentIndex === -1) {
+                return;
+            }
+            let nextIndex;
+            if (e.key === 'ArrowRight') {
+                nextIndex = (currentIndex + 1) % actionButtons.length;
+            }
+            else {
+                nextIndex = (currentIndex - 1 + actionButtons.length) % actionButtons.length;
+            }
+            (_a = actionButtons[nextIndex]) === null || _a === void 0 ? void 0 : _a.focus();
+        };
         this.data = null;
-        this.endpoint = null;
         this.config = {};
         this.rowsPerPage = 10;
         this.paginationEnabled = true;
@@ -63,7 +90,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     componentWillLoad() {
         this.parseConfig();
         this.handleActionsChange();
-        this.data ? this.parseData() : this.endpoint && this.fetchData();
+        this.parseData();
     }
     componentDidLoad() {
         this.updateContainerWidth();
@@ -111,24 +138,13 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
             this.parsedConfig = {};
         }
     }
-    async fetchData() {
-        try {
-            const response = await fetch(this.endpoint);
-            const data = await response.json();
-            this.data = data;
-        }
-        catch (error) {
-            // eslint-disable-next-line
-            console.error('Failed to fetch data:', error);
-        }
-    }
     setupPaginationListener() {
         if (!this.shouldEnablePagination()) {
             return;
         }
         const paginationEl = this.hostEl.shadowRoot.querySelector('eds-pagination');
         if (paginationEl && !paginationEl.hasAttribute('listener-attached')) {
-            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail));
+            paginationEl.addEventListener('page', (event) => this.handlePageChange(event.detail.value));
             paginationEl.setAttribute('listener-attached', 'true');
         }
     }
@@ -176,7 +192,10 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
             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) });
+        // Let all action buttons be focusable naturally
+        const showLabel = act.showLabel === true;
+        const btn = (h("eds-button", { icon: act.icon, label: showLabel ? act.label : null, iconPos: "left", pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
+        return showLabel ? btn : h("eds-tooltip", { content: act.label }, btn);
     }
     emitAction(actionName, row, checked) {
         sendAnalytics({
@@ -222,7 +241,7 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
         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: '02339fab49389741529bd4333689e15c0409aecc' }, this.searchEnabled && (h("div", { key: 'a056734ff7bf25d8f561a185f8cf29742643c81d' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: 'cbeb04c8d91034db5b7e6386e45c2dbc87d8f6ee', class: "mt-20" }, h("table", { key: 'd707ffd979bc80da882ea38ce2d43cb5dee0702e', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'b4087412a0da69f0b3177785fb71ef2ce1d481a6' }, h("tr", { key: 'eb4463081686841b3112cab121bf3aa4dcfffe31', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        return (h("div", { key: '67cfdabc741af13585699e43e67ba0d204a60706' }, this.searchEnabled && (h("div", { key: '208240b9832f9b2e9645cc9d7315a43bd47b54b3' }, h("eds-input-field", { key: 1, icon: "search", name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '893924497d1535b7d29bc0b64ba48f4a3e366c43', class: "mt-20" }, h("table", { key: 'a019fa4f2886d4c2aa4bddc88dc7b6d7aa63fdcb', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'a6360fea59c605878e443a23cf45d0f8a9644140' }, h("tr", { key: '09702e8838f32c52bf6314b59ec598c6fa55d609', class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
                 return (h("th", { class: "m-0 py-8 border border-softer f-ui-02 break-words", style: { minWidth: `${columnWidth - 4}px` } }));
@@ -231,17 +250,22 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
                 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: '3c0de8287738ff638a46721ee4e0e07bceffed8f' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
+        }))), h("tbody", { key: '5cdb3697e6c84921a823b40714a497f02c82e360' }, paginatedRows.map((row) => (h("tr", { class: "m-0 p-0 border border-softer even:bg-inverse-softer" }, this.columns.map((col) => {
             var _a;
             if (col === 'actions') {
-                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)))))));
+                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", { role: "toolbar", "aria-label": "Row actions", onKeyDown: this.onActionKeyDown, 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: '27c640dfdd0906abeb7ec77dfb7fb1d052d50093', class: "mt-20" }, h("eds-pagination", { key: '0a74448e3f59098808d8ba1696b891c4ea9a37bc', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
+        }))))))), this.shouldEnablePagination() && (h("div", { key: 'f5af2cd6e65c3ed55ec2810ec4b1e3f891866271', class: "mt-20" }, h("eds-pagination", { key: '32965384707df502fb197712c73bb290e38ce040', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -252,7 +276,6 @@ const EdsTable = /*@__PURE__*/ proxyCustomElement(class EdsTable extends HTMLEle
     static get style() { return EdsTableStyle0; }
 }, [1, "eds-table", {
         "data": [1, "table-data"],
-        "endpoint": [1],
         "config": [1],
         "rowsPerPage": [2, "rows-per-page"],
         "paginationEnabled": [4, "pagination-enabled"],
@@ -279,59 +302,69 @@ function defineCustomElement() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-table", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-pagination"];
+    const components = ["eds-table", "eds-button", "eds-icon-wrapper", "eds-input", "eds-input-field", "eds-input-footer", "eds-input-label", "eds-input-range", "eds-input-search", "eds-input-select", "eds-link", "eds-pagination", "eds-tooltip"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-table":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsTable);
             }
             break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$c();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "eds-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "eds-input-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "eds-input-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "eds-input-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "eds-input-range":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "eds-input-search":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "eds-input-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "eds-link":
             if (!customElements.get(tagName)) {
-                defineCustomElement$2();
+                defineCustomElement$3();
             }
             break;
         case "eds-pagination":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$2();
+            }
+            break;
+        case "eds-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$1();
             }