@ebrains/components 2.0.0 → 2.2.0

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: '7cb51cf475d45ee3e43877ee4d42565f5930613a', id: `${this.identifier}` }, h("div", { key: '4f3c6d23f9084f07e5728b72310b96798d20b724', 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: '4d55e72e9f437cef8be06931445f619196a973a7', 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: 'e75f877da39c25e912853fea5dc2438fc15c67b5', 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: 'e3fe041e8783a7d1bb5a281eb154e3c07851da38', 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: 'c3362fa23185787a8d5a974f1f53978569e28a63', class: "max-w-sidebar mx-auto px-4 py-8" }, h("div", { key: '59f85c0ae88876cf891b8fd2852cb15426f05c2a', class: "relative" }, h("div", { key: '89fc0969c72ba183dee530a428d6d1d9421b2764', class: "absolute w-4 left-1/2 transform -translate-x-1/2 bg-strong h-full z-0" }), h("div", { key: '190262fe1b382ac41fba398d05e640d0db746fe9', 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: '27172b1f3c76ebb460c35ea070eeff330390ed7d', 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

@@ -1,53 +1,4 @@
-import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-import { s as sendAnalytics } from './analytics.js';
-
-const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";
-const EdsTooltipStyle0 = edsTooltipCss;
-
-const EdsTooltip$1 = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends HTMLElement {
-    constructor() {
-        super();
-        this.__registerHost();
-        this.__attachShadow();
-        this.content = undefined;
-        this.position = 'top';
-    }
-    /** fire analytics on every hover */
-    handleHover() {
-        sendAnalytics({
-            category: 'ui-component',
-            tag: this.el.tagName.toLowerCase(),
-            name: this.content.toLowerCase(),
-            action: 'hover'
-        });
-    }
-    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}
-            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
-            group-hover:opacity-100 whitespace-normal break-words`, role: "tooltip" }, this.content)));
-    }
-    get el() { return this; }
-    static get style() { return EdsTooltipStyle0; }
-}, [1, "eds-tooltip", {
-        "content": [1],
-        "position": [1]
-    }, [[1, "mouseenter", "handleHover"]]]);
-function defineCustomElement$1() {
-    if (typeof customElements === "undefined") {
-        return;
-    }
-    const components = ["eds-tooltip"];
-    components.forEach(tagName => { switch (tagName) {
-        case "eds-tooltip":
-            if (!customElements.get(tagName)) {
-                customElements.define(tagName, EdsTooltip$1);
-            }
-            break;
-    } });
-}
+import { E as EdsTooltip$1, d as defineCustomElement$1 } from './eds-tooltip2.js';
 
 const EdsTooltip = EdsTooltip$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/eds-tooltip2.js

@@ -0,0 +1,52 @@
+import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
+import { s as sendAnalytics } from './analytics.js';
+
+const edsTooltipCss = ".relative{position:relative}.absolute{position:absolute}.inline-block{display:inline-block}.rounded-xs{border-radius:4px}.bg-strongest{background-color:var(--black)}.text-inverse{color:var(--white)}.f-ui-03-light{font-family:var(--f-ui-03-light-fontFamily);font-weight:var(--f-ui-03-light-fontWeight);font-size:var(--f-ui-03-light-fontSize);line-height:var(--f-ui-03-light-lineHeight);letter-spacing:var(--f-ui-03-light-letterSpacing)}.pointer-events-none{pointer-events:none}.left-1\\/2{left:50%}.z-10{z-index:10}.transform{transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.-translate-x-1\\/2{--tw-translate-x:-50%;transform:translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y))}.whitespace-nowrap{white-space:nowrap}.p-6{padding:0.375rem}.px-4{padding-left:0.25rem;padding-right:0.25rem}.top-full{top:100%}.bottom-full{bottom:100%}.right-full{right:100%}.left-full{left:100%}.mr-2{margin-right:0.125rem}.ml-2{margin-left:0.125rem}.mt-2{margin-top:0.125rem}.mb-2{margin-bottom:0.125rem}.opacity-0{opacity:0}.transition-opacity{transition-property:opacity;transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1);transition-duration:150ms}.duration-150{transition-duration:150ms}.ease-in-out{transition-timing-function:cubic-bezier(0.4, 0, 0.2, 1)}.group:hover .group-hover\\:opacity-100{opacity:1}.max-w-\\[20rem\\]{max-width:20rem}.whitespace-normal{white-space:normal}.break-words{overflow-wrap:break-word}.w-full{width:100%}";
+const EdsTooltipStyle0 = edsTooltipCss;
+
+const EdsTooltip = /*@__PURE__*/ proxyCustomElement(class EdsTooltip extends HTMLElement {
+    constructor() {
+        super();
+        this.__registerHost();
+        this.__attachShadow();
+        this.content = undefined;
+        this.position = 'top';
+    }
+    /** fire analytics on every hover */
+    handleHover() {
+        sendAnalytics({
+            category: 'ui-component',
+            tag: this.el.tagName.toLowerCase(),
+            name: this.content.toLowerCase(),
+            action: 'hover'
+        });
+    }
+    render() {
+        const positionClass = this.position === 'bottom' ? 'top-full mt-2' : 'bottom-full mb-2';
+        return (h("div", { key: '135df7d17db03fb3bb7bbcc50ad9ee5d84a2bca2', class: "relative w-full inline-block group" }, h("slot", { key: '4c12874eeb942e33f9c62ea6f1077fd051f683b6' }), h("div", { key: '8bb7173d16889b2ae550dc0269d9e47e1dae00ac', class: `absolute ${positionClass}
+            rounded-xs bg-strongest text-inverse 
+            f-ui-03-light pointer-events-none 
+            z-10 px-4 opacity-0 transition-opacity duration-150 ease-in-out
+            group-hover:opacity-100 whitespace-normal break-words`, role: "tooltip" }, this.content)));
+    }
+    get el() { return this; }
+    static get style() { return EdsTooltipStyle0; }
+}, [1, "eds-tooltip", {
+        "content": [1],
+        "position": [1]
+    }, [[1, "mouseenter", "handleHover"]]]);
+function defineCustomElement() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["eds-tooltip"];
+    components.forEach(tagName => { switch (tagName) {
+        case "eds-tooltip":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, EdsTooltip);
+            }
+            break;
+    } });
+}
+
+export { EdsTooltip as E, defineCustomElement as d };

package/dist/components/eds-trl.js

@@ -1,16 +1,18 @@
 import { proxyCustomElement, HTMLElement, h } from '@stencil/core/internal/client';
-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';
-import { d as defineCustomElement$a } from './eds-input-footer2.js';
-import { d as defineCustomElement$9 } from './eds-input-label2.js';
-import { d as defineCustomElement$8 } from './eds-input-range2.js';
-import { d as defineCustomElement$7 } from './eds-input-search2.js';
-import { d as defineCustomElement$6 } from './eds-input-select2.js';
-import { d as defineCustomElement$5 } from './eds-link2.js';
-import { d as defineCustomElement$4 } from './eds-pagination2.js';
-import { d as defineCustomElement$3 } from './eds-progress-bar2.js';
-import { d as defineCustomElement$2 } from './eds-table2.js';
+import { d as defineCustomElement$f } from './eds-button2.js';
+import { d as defineCustomElement$e } from './eds-icon-wrapper2.js';
+import { d as defineCustomElement$d } from './eds-input2.js';
+import { d as defineCustomElement$c } from './eds-input-field2.js';
+import { d as defineCustomElement$b } from './eds-input-footer2.js';
+import { d as defineCustomElement$a } from './eds-input-label2.js';
+import { d as defineCustomElement$9 } from './eds-input-range2.js';
+import { d as defineCustomElement$8 } from './eds-input-search2.js';
+import { d as defineCustomElement$7 } from './eds-input-select2.js';
+import { d as defineCustomElement$6 } from './eds-link2.js';
+import { d as defineCustomElement$5 } from './eds-pagination2.js';
+import { d as defineCustomElement$4 } from './eds-progress-bar2.js';
+import { d as defineCustomElement$3 } from './eds-table2.js';
+import { d as defineCustomElement$2 } from './eds-tooltip2.js';
 
 const EdsTrl$1 = /*@__PURE__*/ proxyCustomElement(class EdsTrl extends HTMLElement {
     constructor() {
@@ -53,7 +55,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: '42873472d353599cbc2903b00ff03f0f802f1120', class: "container mx-auto px-4 py-8" }, h("eds-table", { key: '980a4d934f0554fefd34f8c4631f305d45f81bc3', "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,69 +64,79 @@ 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", "eds-tooltip"];
     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$f();
+            }
+            break;
         case "eds-icon-wrapper":
             if (!customElements.get(tagName)) {
-                defineCustomElement$d();
+                defineCustomElement$e();
             }
             break;
         case "eds-input":
             if (!customElements.get(tagName)) {
-                defineCustomElement$c();
+                defineCustomElement$d();
             }
             break;
         case "eds-input-field":
             if (!customElements.get(tagName)) {
-                defineCustomElement$b();
+                defineCustomElement$c();
             }
             break;
         case "eds-input-footer":
             if (!customElements.get(tagName)) {
-                defineCustomElement$a();
+                defineCustomElement$b();
             }
             break;
         case "eds-input-label":
             if (!customElements.get(tagName)) {
-                defineCustomElement$9();
+                defineCustomElement$a();
             }
             break;
         case "eds-input-range":
             if (!customElements.get(tagName)) {
-                defineCustomElement$8();
+                defineCustomElement$9();
             }
             break;
         case "eds-input-search":
             if (!customElements.get(tagName)) {
-                defineCustomElement$7();
+                defineCustomElement$8();
             }
             break;
         case "eds-input-select":
             if (!customElements.get(tagName)) {
-                defineCustomElement$6();
+                defineCustomElement$7();
             }
             break;
         case "eds-link":
             if (!customElements.get(tagName)) {
-                defineCustomElement$5();
+                defineCustomElement$6();
             }
             break;
         case "eds-pagination":
             if (!customElements.get(tagName)) {
-                defineCustomElement$4();
+                defineCustomElement$5();
             }
             break;
         case "eds-progress-bar":
             if (!customElements.get(tagName)) {
-                defineCustomElement$3();
+                defineCustomElement$4();
             }
             break;
         case "eds-table":
+            if (!customElements.get(tagName)) {
+                defineCustomElement$3();
+            }
+            break;
+        case "eds-tooltip":
             if (!customElements.get(tagName)) {
                 defineCustomElement$2();
             }

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';
@@ -14,7 +13,12 @@ const EdsUser$1 = /*@__PURE__*/ proxyCustomElement(class EdsUser extends HTMLEle
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.handleDropdown = (e) => {
+            this.expanded = e.detail.expanded;
+        };
         this.user = undefined;
+        this.intent = 'tertiary';
+        this.expanded = false;
     }
     /**
      * Helper getter to ensure we work with a User object.
@@ -40,18 +44,21 @@ 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' })))))));
+        const iconName = this.expanded ? 'chevron-down' : 'chevron-right';
+        return (h("div", { key: '965387104c4bd6cd3223c08f16d90146c098594c', class: "block" }, h("div", { key: '37fe5539cb058112ebe0d910439acb55b5abccd8', class: "flex items-center" }, h("eds-dropdown", { key: '17afc8dbae191aec1202ba04d85c41ed656a8c5b', label: `Hi, ${user.preferred_username}`, intent: this.intent, "aria-label": "User Menu", "dropdown-pos": "right", "dropdown-offset": "false", icon: iconName, class: "text-default", onDropdown: this.handleDropdown }, h("div", { key: '0228c1728b0b73e2504d2608339f9be408be09b8', class: "min-w-[280px] p-8" }, h("div", { key: 'b83148ff8249bde91842b036da5506f9f5cbb145', class: "flex gap-x-16" }, h("eds-avatar", { key: '243a05bae2e4e592dc386b1897d824232d0bcfa6', "first-name": user.given_name, "last-name": user.family_name, initials: this.initials, color: "black" }), h("div", { key: '6938f54621aa89e61aa6639e8c88af4e262e0fec', class: "max-w-full" }, user.name && h("p", { key: '224ce5cf6819a9dd0c3794410a94da30cc4213bf', class: "f-ui-01 text-default w-full text-ellipsis" }, user.name), user.preferred_username && h("p", { key: '096ac761149763ef4305ef5e9bf1f4b593a0fe4f', class: "f-ui-03-light text-light mt-4" }, user.preferred_username), user.email && h("p", { key: '79f7da3c6c5efc1f521991c403184cf050b3d2e7', class: "f-ui-03-light text-light mt-4" }, user.email))), h("div", { key: '52ce98bcc290902605ebd427ee8ab72ac9af3d62', class: "text-default flex w-full flex-col gap-y-8" }, h("slot", { key: '88d1b250c434830347e0eb813214382ce899c485' })))))));
     }
     get hostEl() { return this; }
     static get style() { return EdsUserStyle0; }
 }, [1, "eds-user", {
-        "user": [1025]
+        "user": [1025],
+        "intent": [1],
+        "expanded": [32]
     }]);
 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 +66,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: 'd09d8204f4369476882f0614e96c07c953b34f54', class: "container" }, h("div", { key: 'a80342ee08961192aa3a664f66406b220cd208ed', class: "mb-8" }, h("eds-alert", { key: '242c9bae130e9a7487412da4f75ab30a2db49335', message: "Note that, each of the four colour tones cannot be mixed in the same composition.", intent: "error" })), h("div", { key: 'f9d60933f46189f848938a5beb1ca5fadfa84934', class: "flex" }, h("div", { key: 'd7f33f14834c5a97aafbdb447f723e1a20b5e498', class: "w-full" }, h("ul", { key: '0e3b7baf000534530164f373884a6957419539a7', 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: 'd0422452dbb56de94fee33562b07867fb9bfd6ac', class: "w-full" }, h("ul", { key: 'e5daf06bbcec1227ccf03b3f3a8a6016a33c289c', 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();
             }