@ebrains/components 2.0.0 → 2.1.0

package/dist/components/eds-table2.js

@@ -1,6 +1,7 @@
 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$b } from './eds-button2.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';
@@ -24,8 +25,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 +89,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,17 +137,6 @@ 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;
@@ -176,7 +191,8 @@ 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
+        return (h("eds-button", { label: act.label, icon: act.icon, pill: true, size: "small", intent: "ghost", tabIndex: 0, onClick: () => this.emitAction(act.name, row) }));
     }
     emitAction(actionName, row, checked) {
         sendAnalytics({
@@ -222,7 +238,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: '87e7cc3c87618ede91bb51d7a07cd597a438d6c5' }, this.searchEnabled && (h("div", { key: '6b77700a913e272eef4c932d40c5c5d001ff6b5c' }, h("eds-input-field", { key: 1, name: "search", "aria-label": "Search", type: "text", placeholder: "Search...", onInput: (event) => this.handleSearch(event) }))), h("div", { key: '6f2ffc7a3ba2cc8e8194670a7ecb9e237f7dc60a', class: "mt-20" }, h("table", { key: '0227d3029f30ab9928cd01ba8dc2eccde2073f47', class: "block overflow-x-auto mt-6 p-0" }, h("thead", { key: 'c1f844d8413b596d5ca07d6b79ebd36c8a17f51f' }, h("tr", { key: 'caadaaf66314e3ea7d47a748b6e899389a7e2d55', 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 +247,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: 'da9286063f16a5c346ce8854361cb15573166a19' }, 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: 'b7e7991225cf9fb16ca882dc42c7adead202aac5', class: "mt-20" }, h("eds-pagination", { key: '011f209f89300357e6052ee4d118f353419d5a45', currentPage: this.currentPage, lastPage: lastPage, perPage: this.rowsPerPage, total: this.totalRows, mode: "default" })))));
     }
     get hostEl() { return this; }
     static get watchers() { return {
@@ -252,7 +273,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,13 +299,18 @@ 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"];
     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$b();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$a();

package/dist/components/eds-tabs.js

@@ -3,7 +3,7 @@ import { s as sendAnalytics } from './analytics.js';
 import { c as cva } from './index2.js';
 import { p as parseData } from './sharedUtils.js';
 
-const edsTabsCss = "*,::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-scroll-snap-strictness:proximity;--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;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.whitespace-nowrap{white-space:nowrap}.effect-color{transition-property:color, background-color, border-color, text-decoration-color, fill, stroke;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:300ms;transition-timing-function:cubic-bezier(0, 0, 0.2, 1)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";
+const edsTabsCss = "*,::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-scroll-snap-strictness:proximity;--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;}*,::before,::after{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor;}::before,::after{--tw-content:''}a{color:inherit;text-decoration:inherit}.relative{position:relative}.f-ui-03{font-family:var(--f-ui-03-fontFamily);font-weight:var(--f-ui-03-fontWeight);font-size:var(--f-ui-03-fontSize);line-height:var(--f-ui-03-lineHeight);letter-spacing:var(--f-ui-03-letterSpacing)}.whitespace-nowrap{white-space:nowrap}.effect-focus{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.effect-focus:focus-visible{outline-style:solid}.effect-focus-within{outline-width:3px;outline-offset:2px;outline-color:var(--green-500)}.focus-visible\\:text-default:focus-visible{color:var(--black)}.hover\\:text-default:hover{color:var(--black)}.border-2{border-width:2px}.after\\:content-\\[\\'\\'\\]::after{--tw-content:'';content:var(--tw-content)}.after\\:bottom-0::after{bottom:0rem}.after\\:border-0::after{border-width:0px}.after\\:border-b-2::after{border-bottom-width:2px}.after\\:absolute::after{position:absolute}.after\\:inset-0::after{inset:0rem}.after\\:rounded-lg::after{border-radius:16px}.after\\:border-solid::after{border-style:solid}.after\\:border-3::after{border-width:3px}.after\\:border-accent::after{border-color:var(--green-500)}.after\\:opacity-0::after{opacity:0}.outline-none{outline:2px solid transparent;outline-offset:2px}.focus\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:outline-none:focus{outline:2px solid transparent;outline-offset:2px}.focus-visible\\:after\\:opacity-100:focus-visible::after{opacity:1}.rounded-t-lg{border-top-left-radius:16px;border-top-right-radius:16px}.rounded-tl-lg{border-top-left-radius:16px}.rounded-tr-lg{border-top-right-radius:16px}.border-l-0{border-left-width:0px}.border-r-0{border-right-width:0px}.border-b-0{border-bottom-width:0px}.pr-28{padding-right:1.75rem}.pl-28{padding-left:1.75rem}.-mr-16{margin-right:-1rem}.-ml-16{margin-left:-1rem}.px-16{padding-left:1rem;padding-right:1rem}.py-12{padding-top:0.75rem;padding-bottom:0.75rem}.after\\:left-16::after{left:1rem}.after\\:right-16::after{right:1rem}.text-lighter{color:var(--grey-600)}.bg-dark{background-color:var(--grey-300)}.hover\\:bg-darker:hover{background-color:var(--grey-400)}.border-soft{border-color:var(--grey-400)}.border-softest{border-color:rgba(0, 0, 0, .05)}.bg-default{background-color:var(--grey-200)}.text-default{color:var(--black)}.z-99{z-index:99}.after\\:z-10::after{z-index:10}.before\\:bottom-0::before{bottom:0rem}.before\\:h-12::before{height:0.75rem}.before\\:opacity-5::before{opacity:0.05}.before\\:content-\\[\\'\\'\\]::before{--tw-content:'';content:var(--tw-content)}.before\\:absolute::before{position:absolute}.before\\:-bottom-2::before{bottom:-0.125rem}.after\\:inset-x-0::after{left:0rem;right:0rem}.before\\:inset-x-0::before{left:0rem;right:0rem}.before\\:h-3::before{height:0.1875rem}.before\\:bg-default::before{background-color:var(--grey-200)}.after\\:border-soft::after{border-color:rgba(0, 0, 0, .15 )}.after\\:border-softest::after{border-color:rgba(0, 0, 0, .05)}.overflow-x-hidden{overflow-x:hidden}.overflow-y-auto{overflow-y:auto}.before\\:bg-gradient-y::before{background:linear-gradient(to bottom, transparent, ease-in-out, black)}.scroller-x{-ms-overflow-style:none;scrollbar-width:none}.overflow-x-auto{overflow-x:auto}.max-w-xxxl{max-width:2200px}.z-1{z-index:1}.mx-auto{margin-left:auto;margin-right:auto}.pt-8{padding-top:0.5rem}.pr-16{padding-right:1rem}.pl-16{padding-left:1rem}.inline-flex{display:inline-flex}@media (min-width: 900px){.lg\\:px-28{padding-left:1.75rem;padding-right:1.75rem}}@media (min-width: 2200px){.xxxl\\:px-0{padding-left:0rem;padding-right:0rem}}";
 const EdsTabsStyle0 = edsTabsCss;
 
 const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLElement {
@@ -12,15 +12,20 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
         this.__registerHost();
         this.__attachShadow();
         this.tab = createEvent(this, "tab", 7);
+        this.tabRefs = [];
+        // Store tab reference
+        this.setTabRef = (el, index) => {
+            if (el) {
+                this.tabRefs[index] = el;
+            }
+        };
         // cva configuration
         this.tabCva = cva([
             'relative py-12',
             'f-ui-03 whitespace-nowrap',
-            'effect-color',
+            'effect-color effect-focus',
             'focus-visible:text-default hover:text-default',
-            'border-2',
-            "after:content-[''] after:absolute after:inset-0 after:rounded-t-lg after:opacity-0",
-            'outline-none focus:outline-none focus-visible:outline-none focus-visible:after:opacity-100'
+            'border-2'
         ], {
             variants: {
                 position: {
@@ -30,7 +35,10 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
                     right: 'pl-28 pr-16 rounded-tr-lg border-l-0 -ml-16 after:left-16'
                 },
                 active: {
-                    false: 'text-lighter bg-dark hover:bg-darker border-softest after:border-0',
+                    false: [
+                        'text-lighter bg-dark hover:bg-darker border-softest border-b-0 z-1',
+                        "after:content-[''] after:absolute after:bottom-0 after:inset-x-0 after:h-2 after:border-soft"
+                    ],
                     true: [
                         'bg-default text-default z-99',
                         'rounded-t-lg',
@@ -49,28 +57,35 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
     componentWillLoad() {
         this.parseTabs();
         this.setActiveIndex();
-        this.tab.emit({ tabId: this.identifier, index: 0 });
+        this.tab.emit({ tabId: this.identifier, index: this.activeIndex });
     }
     /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
-     *
-     * @returns {any[]} Array of parsed link objects
-     */
-    /**
-     * Parses the `links` prop into an array of link objects.
-     * Returns an empty array if parsing fails or if `links` is not a valid JSON string or object.
+     * Parses the `tabs` prop into an array of tab objects.
+     * Returns an empty array if parsing fails or if `tabs` is not a valid JSON string or object.
      *
-     * @returns {any[]} Array of parsed link objects
+     * @returns {any[]} Array of parsed tab objects
      */
     parseTabs() {
         this.parsedTabs = parseData(this.tabs);
+        // Reset tab refs when tabs change
+        this.tabRefs = [];
     }
     componentDidLoad() {
         this.scrollToActiveTab();
     }
+    componentDidUpdate() {
+        // Ensure we have the correct number of tab refs after render
+        if (this.tabRefs.length !== this.parsedTabs.length) {
+            this.tabRefs = new Array(this.parsedTabs.length).fill(null);
+        }
+    }
     setActiveIndex() {
         this.activeIndex = this.parsedTabs.findIndex((tab) => tab.active);
+        // If no active tab found, default to first tab
+        if (this.activeIndex === -1 && this.parsedTabs.length > 0) {
+            this.activeIndex = 0;
+            this.parsedTabs[0].active = true;
+        }
     }
     scrollToActiveTab() {
         var _a;
@@ -92,31 +107,74 @@ const EdsTabs$1 = /*@__PURE__*/ proxyCustomElement(class EdsTabs extends HTMLEle
                 : index < this.activeIndex
                     ? 'left'
                     : 'right';
-        return Object.assign({ class: this.tabCva({
-                active,
-                position
-            }), style: {
-                zIndex: `${active ? this.parsedTabs.length + 99 : position === 'left' ? index : this.parsedTabs.length + 1 - index}`
+        const rawZ = position === 'left' ? index : this.parsedTabs.length + 1 - index;
+        // clamp inactive to at least 1
+        const z = active ? this.parsedTabs.length + 99 : Math.max(rawZ, 1);
+        return Object.assign({ class: this.tabCva({ active, position }), style: {
+                // stringify the number so it matches { [key: string]: string }
+                zIndex: `${z}`
             } }, (active ? { 'data-tab-active': 'true' } : {}));
     }
-    handleTabClick(index, tabLabel) {
+    handleTabClick(index, tabLabel, shouldFocus = true) {
+        // Validate index
+        if (index < 0 || index >= this.parsedTabs.length) {
+            return;
+        }
         // Update the active index and set all tabs' active state accordingly
         this.activeIndex = index;
         this.parsedTabs = this.parsedTabs.map((tab, tabIndex) => (Object.assign(Object.assign({}, tab), { active: tabIndex === index })));
         this.tab.emit({ tabId: this.identifier, index: index, name: tabLabel });
-        sendAnalytics({
-            category: 'ui-component',
-            tag: this.el.tagName.toLowerCase(),
-            name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
-            action: 'click'
-        });
+        // Only send analytics for actual clicks, not keyboard navigation
+        if (shouldFocus) {
+            sendAnalytics({
+                category: 'ui-component',
+                tag: this.el.tagName.toLowerCase(),
+                name: (tabLabel === null || tabLabel === void 0 ? void 0 : tabLabel.toLowerCase()) || '',
+                action: 'click'
+            });
+        }
+        // Focus management for keyboard navigation
+        if (shouldFocus && this.tabRefs[index]) {
+            // Use a small timeout to ensure the DOM has updated
+            setTimeout(() => {
+                var _a;
+                (_a = this.tabRefs[index]) === null || _a === void 0 ? void 0 : _a.focus();
+            }, 0);
+        }
+    }
+    onKeyDown(ev, idx) {
+        let newIndex = idx;
+        switch (ev.key) {
+            case 'ArrowRight':
+                newIndex = (idx + 1) % this.parsedTabs.length;
+                ev.preventDefault();
+                break;
+            case 'ArrowLeft':
+                newIndex = (idx - 1 + this.parsedTabs.length) % this.parsedTabs.length;
+                ev.preventDefault();
+                break;
+            case 'Home':
+                newIndex = 0;
+                ev.preventDefault();
+                break;
+            case 'End':
+                newIndex = this.parsedTabs.length - 1;
+                ev.preventDefault();
+                break;
+            default:
+                return; // Don't handle other keys
+        }
+        if (newIndex !== idx) {
+            this.handleTabClick(newIndex, this.parsedTabs[newIndex].label, true);
+        }
     }
     render() {
-        return (h("div", { key: 'ef6902f4dafc40f290f8b63627f4534d665aa01d', id: `${this.identifier}` }, h("div", { key: 'a120ea68061894c2d9e2e3f0b8e61f53732c8753', class: "scroller-x overflow-x-auto max-w-xxxl xxxl:px-0 relative z-[1] mx-auto px-16 pt-8 lg:px-28" }, h("nav", { key: 'fb2bb608addcc777a55be828367e92268c676e16', ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
-            const TabComponent = tab.active ? 'span' : 'a';
+        return (h("div", { key: 'e3bd802f08f460d5f3e89860669fefe2a8006e59', id: `${this.identifier}` }, h("div", { key: 'bcbd4afb8febec0520075c8e34269f184e2d9738', class: "scroller-x overflow-x-auto relative z-[1] mx-auto px-16 pt-8 lg:px-28 after:border-soft before:bg-gradient-y relative overflow-x-hidden before:absolute before:inset-x-0 before:bottom-0 before:h-12 before:opacity-5 before:content-[''] after:absolute after:inset-x-0 after:bottom-0 after:border-b-2 after:content-['']" }, h("nav", { key: '32e93b3ee6831918fd863fb23f1a5af1ae979201', role: "tablist", ref: (el) => (this.tabContainer = el), class: "inline-flex", "aria-label": this.navAriaLabel }, this.parsedTabs.map((tab, index) => {
+            const TabComponent = 'button';
             const tabProps = this.getTabOptions(tab.active, index);
-            return (h(TabComponent, Object.assign({}, tabProps, { "aria-label": tab.label, "aria-current": index === this.activeIndex, onClick: () => this.handleTabClick(index, tab.label) }), tab.label || tab.ariaLabel));
-        }))), h("div", { key: '82d6a43a9c326b6be73c81205201b18f148641ad', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { hidden: index !== this.activeIndex }, h("slot", { name: `panel-${index}` })))))));
+            const isActive = index === this.activeIndex;
+            return (h(TabComponent, Object.assign({}, tabProps, { type: "button", role: "tab", "aria-selected": tab.active ? 'true' : 'false', tabIndex: isActive ? 0 : -1, "aria-label": tab.ariaLabel || tab.label, "aria-controls": `panel-${index}`, id: `tab-${index}`, ref: (el) => this.setTabRef(el, index), onClick: () => this.handleTabClick(index, tab.label, true), onKeyDown: (e) => this.onKeyDown(e, index) }), tab.label || tab.ariaLabel));
+        }))), h("div", { key: 'ffe610574d342933121cbaca9bcb8fb483fde60b', class: "tab-panels" }, this.parsedTabs.map((_, index) => (h("div", { role: "tabpanel", id: `panel-${index}`, "aria-labelledby": `tab-${index}`, hidden: index !== this.activeIndex, tabIndex: index === this.activeIndex ? 0 : -1, class: "effect-focus" }, h("slot", { name: `panel-${index}` })))))));
     }
     get el() { return this; }
     static get watchers() { return {

package/dist/components/eds-tag2.js

@@ -39,7 +39,7 @@ const EdsTag = /*@__PURE__*/ proxyCustomElement(class EdsTag extends HTMLElement
     }
     render() {
         const classes = tagStyles({ intent: this.intent, size: this.size });
-        return h("span", { key: '153cb5a6ab669555dd8e5815413dc0d1be5bee6d', class: classes }, this.label);
+        return h("span", { key: '939fafa4bc525b747956931f49b27e6125ecbb34', class: classes }, this.label);
     }
     static get style() { return EdsTagStyle0; }
 }, [1, "eds-tag", {

package/dist/components/eds-timeline.js

@@ -51,7 +51,7 @@ const EdsTimeline$1 = /*@__PURE__*/ proxyCustomElement(class EdsTimeline extends
         }
     }
     render() {
-        return (h("div", { key: '58f12a81691ac711c82aa0db5786101cecadf7eb', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '9b9d5e83a7f9c93850b95590dda1ba38eef56131', class: "relative" }, h("div", { key: 'fd97d75bb70cbe629310e73f2017f3f188b3160a', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'c69f1e3755fadfa9234f51a5d9b3196f339164f5', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
+        return (h("div", { key: '3abe8b96a25fa575acc503eafa345c63b0c4c971', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '23039a03d10a38aa96310be6456283b5d36041e7', class: "relative" }, h("div", { key: '2bf447e7dd77a33b953ee1c7b49c72bb3e79a938', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: 'db44af20a0e09666b402e77ec739262a3506da48', class: "space-y-16" }, this.parsedEvents.map((event, index) => (h("div", { class: "relative flex" }, h("div", { class: `w-1/2 ${index % 2 === 0 ? 'pr-4' : ''}` }, index % 2 === 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]
                 : [{ label: 'pending', style: 'default' }]), onClick: () => this.handleEventClick(event) }))), h("div", { class: "flex items-center justify-center relative" }, event.completed ? (h("div", { class: "w-32 h-32 bg-accent rounded-full shadow flex items-center justify-center" })) : (h("div", { class: "w-32 h-32 bg-strong rounded-full shadow flex items-center justify-center" }))), h("div", { class: `w-1/2 ${index % 2 !== 0 ? 'pl-4' : ''}` }, index % 2 !== 0 && (h("eds-card-generic", { cardTitle: event.title, url: "#", description: event.description, "heading-level": "h2", tiny: true, bg: !event.completed, "with-hover": "false", tags: JSON.stringify(event.completed
                 ? [{ label: 'completed', style: 'accent' }]

package/dist/components/eds-toast-manager.js

@@ -67,7 +67,7 @@ const EdsToastManager$1 = /*@__PURE__*/ proxyCustomElement(class EdsToastManager
         this.toasts = this.toasts.filter((t) => t.id !== id);
     }
     render() {
-        return (h("div", { key: '5724dea66c7025b67571699860af8ff1c318ef48', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
+        return (h("div", { key: '85027aad9484f391686c4126e984a84e8045511c', class: "toast-container" }, this.toasts.map((t) => (h("div", { key: t.id }, h("eds-toast", { message: t.message, intent: t.intent, onClick: () => this.removeToast(t.id) }))))));
     }
     get hostElement() { return this; }
     static get style() { return EdsToastManagerStyle0; }

package/dist/components/eds-tooltip.js

@@ -23,7 +23,7 @@ const EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends H
     }
     render() {
         const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
-        return (h("div", { key: 'cacea6fc1f32c6d9bef2288f9e30744cf2dacc9a', class: "relative w-full inline-block group" }, h("slot", { key: '19862715e9575583caa7cc3f818294e43196d305' }), h("div", { key: '35fa38cf5993498d61a6941a6c11204e5e66a7d5', class: `absolute ${positionClass}
+        return (h("div", { key: 'ee76b787881bdaef986b73fb2775c900a8c33d05', class: "relative w-full inline-block group" }, h("slot", { key: 'a5f9ade50e829efab02ef28ecff3edeedae9d469' }), h("div", { key: '31bdc63d6263090578f6600ae32027c2b050b2bf', class: `absolute ${positionClass}
             rounded-xs bg-strongest text-inverse 
             f-ui-03-light pointer-events-none 
             z-10 p-4 opacity-0 transition-opacity duration-150 ease-in-out

package/dist/components/eds-trl.js

@@ -1,4 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { d as defineCustomElement$e } from './eds-button2.js';
 import { d as defineCustomElement$d } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$c } from './eds-input2.js';
 import { d as defineCustomElement$b } from './eds-input-field2.js';
@@ -53,7 +54,7 @@ const EdsTrl$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrl extends HTMLEleme
             Application: { format: 'code' },
             'Current TRL Stage': { format: 'text' }
         };
-        return (h("div", { key: '0fe3bb33948017691e8d0d10a7b1f75881a9c2e8', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'f45942902dec74d57cd4d2aee7643c809263abb9', "table-data": JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
+        return (h("div", { key: '51e2ef0877ef34a3c413d8bb690d659525845a92', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: 'b682cb9ce8182302b82042173fcc93aed65f7006', "table-data": JSON.stringify(tableData), config: JSON.stringify(tableConfig), "rows-per-page": "2", "pagination-enabled": "true", "search-enabled": "true", "column-size": "default" })));
     }
 }, [0, "eds-trl", {
         "applications": [1]
@@ -62,13 +63,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-trl", "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-progress-bar", "eds-table"];
+    const components = ["eds-trl", "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-progress-bar", "eds-table"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-trl":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, EdsTrl$1);
             }
             break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$e();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$d();

package/dist/components/eds-user.js

@@ -1,6 +1,5 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$7 } from './eds-avatar2.js';
-import { d as defineCustomElement$6 } from './eds-block-break2.js';
+import { d as defineCustomElement$6 } from './eds-avatar2.js';
 import { d as defineCustomElement$5 } from './eds-button2.js';
 import { d as defineCustomElement$4 } from './eds-dropdown2.js';
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
@@ -40,7 +39,7 @@ const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLEle
     }
     render() {
         const user = this.parsedUser;
-        return (h("div", { key: 'e1413d070d6f5ce0a5f7a45e8eed7a27941bda10', class: "block" }, h("div", { key: 'f59cf79c2f09069d9e5bbae2bc126a0e3ef23564', class: "flex items-center" }, h("eds-dropdown", { key: '7316554277baffb16b6a2cc0ab0b4606a46ccfc8', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: 'df80f62cd5c6e0876fcc20c54dbd25d6db031ce0', class: "min-w-[280px] p-8" }, h("div", { key: '34f0bd24c4c8ec55d5e99f77d0378bc14fb6943f', class: "flex gap-x-16" }, h("eds-avatar", { key: '73e45e3d20d02711af982a7a801cb7d6e18e201e', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: '1070df12372893476cc5ed2909ac735d0655cdb7', class: "max-w-full" }, user.name && h("p", { key: '4d6ca560545810da42d6acd5780c354565dc0d2d', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: 'f7e618449d15fc899484afda94e7837408f0b251', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e6ca46f9863cea6d6bfa7021ead181509a5806f0', class: "f-ui-03-light text-light mt-4" }, user.email))), h("eds-block-break", { key: '76c0ba26ef63e046b7a01e12332b812ad5873776' }), h("div", { key: '448e592221de4406477bb0eb6bc84975699008f3', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '47e2d49bef131c827f49d3eaf68f6a09ba948707' })))))));
+        return (h("div", { key: '8a1f10cc85d8e2707042c85bc597b76fb2d25da4', class: "block" }, h("div", { key: 'a744de3d113920b8ff0d01ce273672b2bff57c97', class: "flex items-center" }, h("eds-dropdown", { key: 'e9230372d79936a785050ebb3e41f40e73282a57', label: `Hi, ${user.preferred_username}`, intent: "tertiary", "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: "chevron-down", class: "text-default" }, h("div", { key: '7d4bd0ee0985c840a18764cac784726ff1c987fb', class: "min-w-[280px] p-8" }, h("div", { key: '603d6807988dd79cd4e7827918ff8932d8463fc3', class: "flex gap-x-16" }, h("eds-avatar", { key: '65ba89139cb6e3b6cb90c2072eb68cc7dc1da49c', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "grey" }), h("div", { key: 'df35b758918ebccbdfe6630bd356e647522404e1', class: "max-w-full" }, user.name && h("p", { key: '7174f34445bb1a0b77a3c1b893421bd104832485', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '72d853f5014c03803dce7aa0a74d96847ed8c875', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: 'e406e2f3ca8504220ee9586a1d176c15c7236502', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '8fd3b42ab4eb3d1d70a0b827e3a03af8503c55d1', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '6a477155c256543b7793947d52feb3f5abb0df6e' })))))));
     }
     get hostEl() { return this; }
     static get style() { return EdsUserStyle0; }
@@ -51,7 +50,7 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["eds-user", "eds-avatar", "eds-block-break", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img"];
+    const components = ["eds-user", "eds-avatar", "eds-button", "eds-dropdown", "eds-icon-wrapper", "eds-img"];
     components.forEach(tagName => { switch (tagName) {
         case "eds-user":
             if (!customElements.get(tagName)) {
@@ -59,11 +58,6 @@ function defineCustomElement$1() {
             }
             break;
         case "eds-avatar":
-            if (!customElements.get(tagName)) {
-                defineCustomElement$7();
-            }
-            break;
-        case "eds-block-break":
             if (!customElements.get(tagName)) {
                 defineCustomElement$6();
             }

package/dist/components/incorrect-use-of-colors.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { d as defineCustomElement$4 } from './eds-alert2.js';
+import { d as defineCustomElement$5 } from './eds-alert2.js';
+import { d as defineCustomElement$4 } from './eds-button2.js';
 import { d as defineCustomElement$3 } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$2 } from './eds-link2.js';
 
@@ -43,14 +44,14 @@ const IncorrectUseOfColors$1 = /*@__PURE__*/ proxyCustomElement(class IncorrectU
         this.__registerHost();
     }
     render() {
-        return (h("div", { key: 'b427fbd92f4f89e62f36580788385d16f7f5ee4b', class: "container" }, h("div", { key: 'e17b8667edf995fa38982db1fd2dd3e32e3d8ade', class: "mb-8" }, h("eds-alert", { key: '6fc136da4684f38d95031e35ada158955ea7a776', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: '2848ccb3f69d6eb0bbe644e5620615f475d00b63', class: "flex" }, h("div", { key: '8ab6a087dec45752a3dd31942f6d8595ea52c0fd', class: "w-full" }, h("ul", { key: '2b0d87c54641831b7b9c77af791fb95837061488', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: '1748b5ef933d36eaa630dcf892451cf165d91156', class: "w-full" }, h("ul", { key: 'cabcc252675bde368e5d884c870bee4e11a1a7a5', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
+        return (h("div", { key: '99f72ce6be806d58cdbe053d86a07e7769e7c298', class: "container" }, h("div", { key: '4689bc35f56681d07747158f45bed8960bd764bb', class: "mb-8" }, h("eds-alert", { key: 'bda983921ff3779dc947d13ff7b3c4f0509154ea', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'ef02b05fb6fb761cae3cc5120478d9670ae65508', class: "flex" }, h("div", { key: '968ccc8bc1acec2856325c921d737f0ac2d0e26d', class: "w-full" }, h("ul", { key: 'aafe0547a6f6185216cf5ba08cca1e5ed97f7fb8', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, primary.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[150px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))), h("div", { key: 'f8af94ee21c7ed37b177fa3b5285e9bfe76e8e46', class: "w-full" }, h("ul", { key: 'ef52e37263e0bfda9d631f7aa6abe2074cbebe78', class: "not-prose gap-y-8 md:gap-y-12 lg:gap-y-16" }, incorrect.map((color) => (h("li", { class: "grid-col-span-12 md:grid-col-span-6 flex flex-col" }, h("div", { class: "w-full min-h-[90px] effect-height flex items-center justify-between p-16", style: { backgroundColor: color.background } })))))))));
     }
 }, [0, "incorrect-use-of-colors"]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["incorrect-use-of-colors", "eds-alert", "eds-icon-wrapper", "eds-link"];
+    const components = ["incorrect-use-of-colors", "eds-alert", "eds-button", "eds-icon-wrapper", "eds-link"];
     components.forEach(tagName => { switch (tagName) {
         case "incorrect-use-of-colors":
             if (!customElements.get(tagName)) {
@@ -58,6 +59,11 @@ function defineCustomElement$1() {
             }
             break;
         case "eds-alert":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$5();
+            }
+            break;
+        case "eds-button":
             if (!customElements.get(tagName)) {
                 defineCustomElement$4();
             }

package/dist/components/logo-space.js

@@ -1,5 +1,6 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
 import { v as vLogoMargins } from './logo-color-margins.js';
+import { d as defineCustomElement$d } from './eds-button2.js';
 import { d as defineCustomElement$c } from './eds-icon-wrapper2.js';
 import { d as defineCustomElement$b } from './eds-input2.js';
 import { d as defineCustomElement$a } from './eds-input-field2.js';
@@ -22,7 +23,7 @@ const LogoSpace$1 = /*@__PURE__*/ proxyCustomElement(class LogoSpace extends HTM
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: '7872766c3ef2db174e35ace73019dedb0851bc0a', class: "container" }, h("ul", { key: '3e8415ab8996258e660a3f06579be6c532e1f123', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'd688491de23cd2b290c921bb9388dcb3b4dde884', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '4be955235235c5833690d737715df93fa04b3571', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: '8e897cbbf86cfcfd89f4aaf5d93730e931c0b9e2', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '7447bbe0fe3046387d366d245a5fd7537fa3121b', class: "text-center mt-16" }, h("p", { key: '7f682977b3781fa8dfebb3115f25c9bf63d8592b', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '1bfec0fd0cb6d3a8316fb4e7632da601f5c1d40d', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), h("li", { key: '7c37fadabd572458f5e2e8d689b3fc32faa4da8d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
+        return (h("div", { key: '715c9aab5f553f14a183efcec753ac3a7d2a6ef7', class: "container" }, h("ul", { key: 'd552744d7c502654c1863a0e2bfe939aa5ab0447', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '06ea3756aa8416e11a0f8c3995e70112808791e8', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: '186172fddc2a100fb5f757ce7175501f7b838896', class: "logo-container mx-auto w-[300px]", innerHTML: vLogoMargins })), h("li", { key: '6131a46a1f7d4efac1feb05ffbd88ca35ba07d08', class: "grid-col-span-6 xxl:grid-col-span-3 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("div", { key: 'df5acbe2348d1fcf069ddb55ce8c7180ecea0959', class: "text-center mt-16" }, h("p", { key: '65b120c29fd408808ab2b6ca3e038915f386c033', class: "f-body-01" }, "To ensure legibility, follow these minimum size guidelines:"), h("eds-table", { key: '137055ef0dd2e79db8dd0cfac8c297385c693338', data: '[\n                  { "Media": "Print", "Landscape": "0.75 cm", "Portrait": "1.75 cm" },\n                  { "Media": "Web", "Landscape": "29 px", "Portrait": "50 px" }\n                ]', config: '{\n                  "Media": { "format": "bold" }\n                }' }))), h("li", { key: 'cbaf5b78b83fa1874d2555ae07dcd849007d9b28', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }))));
     }
     static get style() { return LogoSpaceStyle0; }
 }, [1, "logo-space"]);
@@ -30,13 +31,18 @@ function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;
     }
-    const components = ["logo-space", "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-table"];
+    const components = ["logo-space", "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-table"];
     components.forEach(tagName => { switch (tagName) {
         case "logo-space":
             if (!customElements.get(tagName)) {
                 customElements.define(tagName, LogoSpace$1);
             }
             break;
+        case "eds-button":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$d();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
                 defineCustomElement$c();

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

@@ -11,7 +11,7 @@ const LogoVariationsHorizontal = /*@__PURE__*/ proxyCustomElement(class LogoVari
         this.__attachShadow();
     }
     render() {
-        return (h("div", { key: 'ceda78e6258973d2de36caeed10ab579cc1dcf49', class: "container" }, h("ul", { key: '1400feede2a5c2ef8bd6fd2bd0549a8d2e62abc6', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'eac602da79fa9c94d0c8ae3cb18a49cf590a208d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '2508e10bab0731bc502870b4a68825df225dbabe', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '172e9d8329de02e17e2cee6a0186e4ae880252df', class: "coloured" }, h("eds-logo", { key: 'da041b3f7bbd97e62e7372a1c1dbc0110a44e4ec', type: "no-bg", href: "#" }))), h("li", { key: 'ad36fc3d41f7bc2e98d076b7b0d2aa95caf80fa9', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'e13de3f4225b22d17caf446451b2c93a4a735f1e', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'ee257b9b82b558831c0e7e962867d22f0d27b261', class: "bg-default" }, h("eds-logo", { key: 'd251ae3827082802f0d435d8d88f0d636980997f', type: "black", href: "#" }))), h("li", { key: '3c6caa0029039e51e72ffeb8bb858ea20e54fc3d', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'bd21269ccce938450e5636ea4ea59cfa3f8509be', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: '89f4eea5eb6e1a0230d4ff88906f8113a2d91624' }, h("eds-logo", { key: '0859320cfc614dd5d07dea5e670b4bd9b9796637', type: "color-white", href: "#" }))))));
+        return (h("div", { key: '42b4022e993bb4e340a4f930706ed61d487856af', class: "container" }, h("ul", { key: '368cb376390f9cd4f311c34f35e227916bccc3aa', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: 'c144cf24fe85d4ca731cbcb47aee2ae6bbfb9500', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '9ebdf9fae31f6370bd469cf4c3964e5fa5dae53b', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '347dfdc62a77f9bc2774870d0bce4803a9def6a1', class: "coloured" }, h("eds-logo", { key: '642ed4f4dd0720b457e8871d8d39a3e6f8817919', type: "no-bg", href: "#" }))), h("li", { key: '4b97f489fdc512de54c0f2c0bbf206f6d64fec57', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '217c5485599de77021d5b008952a7463a95e8d22', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: 'c3e7f3b4b770662cc83c261af241306e8449cddb', class: "bg-default" }, h("eds-logo", { key: '1d0a90da209d8dbc28b91ccd3d3e112ed189428d', type: "black", href: "#" }))), h("li", { key: 'f8879a7c790e1b5f0555d6d764e828fbc6a4e263', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '93f6729dc8f3e4cf0257e57c4b034e94cfefa99d', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'd45eaff596387f93aabc377fa96f1b386b8c5e42' }, h("eds-logo", { key: '4a8209824ad3dcec06be65303dc9f0cf01613a8f', type: "color-white", href: "#" }))))));
     }
     static get style() { return LogoVariationsHorizontalStyle0; }
 }, [1, "logo-variations-horizontal"]);

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

@@ -20,7 +20,7 @@ const LogoVariationsTabs$1 = /*@__PURE__*/ proxyCustomElement(class LogoVariatio
         }
     }
     render() {
-        return h("div", { key: 'cbe9d3d2a53196ea35ea9d7d197265209da4b4c6', class: "container" }, this.renderContent());
+        return h("div", { key: 'ac936a8594bc4f5f8573da7ac2751103fe287e48', class: "container" }, this.renderContent());
     }
 }, [0, "logo-variations-tabs", {
         "tabIndex": [2, "tab-index"]

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

@@ -13,7 +13,7 @@ const LogoVariationsVertical = /*@__PURE__*/ proxyCustomElement(class LogoVariat
         this.type = undefined;
     }
     render() {
-        return (h("div", { key: 'ec0d8cd7cb747510c50e7cec7fc7c34c6f478720', class: "container" }, h("ul", { key: 'b113e7c74a5821a3bb22b7d891e3ad9855865fb3', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '3435fb57f8c6bd402db8c4fffcb5b82b2d85f445', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '909917d2636aa6cfd2cd80dedc58a4e2cf4b1c75', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '6e5dca528cfc829a53372682cb38ed704c86afcf', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '4aa473af9b74186159434a182fc1b0ebe3d3f5bb', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: 'fe252c1da4e186a3e0d27c1972b2d72a76cce3ed', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '337437fd2a6ffa9b41c5d38b35c4bac5e43d91ea', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '6cd8796a987ecf918ea4d3a4ee72a87bfbbef83a', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: 'c65fb600fe8e69173d2d3651a519110c73d3b8a0', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: 'f9015fa8dc76b18abb2b3279c133022994ef74a9', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'b133e3e546056310e881de0e90d2ced7ff1f656c', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'bd7d7c6cf9be668644743cd0b45774a70f4d05a7', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'a7af6456daa78ac66968c4a9f36fe69872052104', orientation: "vertical", type: "color-white", href: "#" }))))));
+        return (h("div", { key: '9384d3b91a4b09c780a1bb8d6b49f441f7a7a22a', class: "container" }, h("ul", { key: '60a89752afab4d76da7a3fc070bff2f7cc98d4b0', class: "not-prose grid-layout grid-cols-6 gap-y-8 md:gap-y-12 lg:gap-y-16" }, h("li", { key: '6a8b35e2eaa5b0b5f4aa233fbcaa2a21b1e340c7', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: 'f9893c662898f97567d4a56eaf2d5a620e087743', class: "f-body-01 text-center my-4" }, "#1 Coloured"), h("div", { key: '6fad2d66a3e34c11344210c3b8d92279d566f866', class: "mx-auto coloured w-[300px]" }, h("eds-logo", { key: '66740c018c8f3aa3fbeb2cab8c392713b7e004ed', orientation: "vertical", type: "no-bg", href: "#" }))), h("li", { key: '7a5a2ee2fab87b6ea7892134b5b1fb939cc5665c', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '79bd10816b9dfe8ab28d444d7dfb4b361afea94f', class: "f-body-01 text-center my-4" }, "#2 Black & White"), h("div", { key: '10f00983923848d8e89b6d7c7990972a76fbaf80', class: "mx-auto bg-default w-[300px]" }, h("eds-logo", { key: '3e10d0887921355c0974ad8a4c04cc86e901440d', orientation: "vertical", type: "black", href: "#" }))), h("li", { key: 'eeaabdfa7d788647845d5488decfd06815fc2c47', class: "grid-col-span-6 xxl:grid-col-span-2 xl:grid-col-span-3 lg:grid-col-span-3 md:grid-col-span-3 flex flex-col" }, h("p", { key: '1b058b1513f09eb8a1043ab3ff8a4cda28246576', class: "f-body-01 text-center my-4" }, "#3 Dark"), h("div", { key: 'bd3698e6210ecbe356f0c334a983b21ef6b7b5e3', class: "mx-auto w-[300px]" }, h("eds-logo", { key: 'c9321f6b80b68e74a02dbf77ba83f2bc2567c538', orientation: "vertical", type: "color-white", href: "#" }))))));
     }
     static get style() { return LogoVariationsVerticalStyle0; }
 }, [1, "logo-variations-vertical", {