npm - @xplor-education/core-stencil-components - Versions diffs - 2.1.0 → 3.1.1 - Mend

@xplor-education/core-stencil-components 2.1.0 → 3.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (318) hide show

package/dist/components/xplor-links.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-links.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gHAAgH;;MCMzHA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA~~;;;;;;IAErB~~,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,EAAA,EACxC,GAAG,4BACmB,GAAG,CACxB,EACJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6CAA6C,EAAA,EACtD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,wBAAwB,EAAA,EAAA,4CAAA,CAAgD,CAC9E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2DAA2D,EAAA,EACpE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6EAA6E,EAElF,EAAA,qBAAA,CAAA,EACL,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,8BAA8B,EAAA,EAAA,6IAAA,CAGnC,CACA,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE,EAAA,EACpF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,~~CACE~~,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAA~~,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,~~EAAC,~~EAAE,~~EACN~~,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wDAAwD,EAAsB,EAAA,kBAAA,CAAA,EACxF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yCAAyC,EAAA,EAAA,kBAAA,CAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD~~;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorLinks","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-links/xplor-links.css?tag=xplor-links&encapsulation=shadow","src/components/xplor-links/xplor-links.tsx"],"sourcesContent":[":host {\n display: block;\n}\n.x-link {\n display: block;\n padding: 0.5rem 0;\n text-decoration: none;\n color: var(--xplor-link-color);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n tag: 'xplor-links',\n styleUrl: 'xplor-links.css',\n shadow: true,\n})\nexport class XplorLinks {\n @Prop() brand: string;\n render() {\n return (\n <Host class={`theme-${this.brand}`}>\n <a class=\"x-link\" href=\"https://google.com\">\n {' '}\n googole this is a link{' '}\n </a>\n <div class=\"bg-black p-2 rounded-md flex justify-center\">\n <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n </div>\n <div class=\"bg-white py-24 sm:py-32\">\n <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n <div class=\"max-w-xl\">\n <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n Meet our leadership\n </h2>\n <p class=\"mt-6 text-lg/8 text-gray-600\">\n We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n best results for our clients.\n </p>\n </div>\n <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n <li>\n <div class=\"flex items-center gap-x-6\">\n <img\n class=\"size-16 rounded-full\"\n src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\"\n alt~~=\"~~\"\n />\n <div>\n <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-links.js","mappings":";;AAAA,MAAM,aAAa,GAAG,gHAAgH;;MCMzHA,YAAU,iBAAAC,kBAAA,CAAA,MAAA,UAAA,SAAAC,CAAA,CAAA;AALvB,IAAA,WAAA,GAAA;;;;;AASU,QAAA,IAAQ,CAAA,QAAA,GAAW,EAAE;AA0C9B;IAzCC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,CAAA,CAAE,EAAA,EAChC,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB,EAAA,EACxC,GAAG,4BACmB,GAAG,CACxB,EACJ,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6CAA6C,EAAA,EACtD,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,wBAAwB,EAAA,EAAA,4CAAA,CAAgD,CAC9E,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,yBAAyB,EAAA,EAClC,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2DAA2D,EAAA,EACpE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,UAAU,EAAA,EACnB,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,6EAA6E,EAElF,EAAA,qBAAA,CAAA,EACL,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,8BAA8B,EAAA,EAAA,6IAAA,CAGnC,CACA,EACN,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE,EAAA,EACpF,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,2BAA2B,EAAA,EACpC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,EAAE,IAAI,CAAC,QAAQ,EAClB,CAAA,EACF,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACE,CAAI,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,wDAAwD,EAAsB,EAAA,kBAAA,CAAA,EACxF,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yCAAyC,EAAA,EAAA,kBAAA,CAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorLinks","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-links/xplor-links.css?tag=xplor-links&encapsulation=shadow","src/components/xplor-links/xplor-links.tsx"],"sourcesContent":[":host {\n display: block;\n}\n.x-link {\n display: block;\n padding: 0.5rem 0;\n text-decoration: none;\n color: var(--xplor-link-color);\n}\n","import { Component, h, Prop, Host } from '@stencil/core';\n@Component({\n tag: 'xplor-links',\n styleUrl: 'xplor-links.css',\n shadow: true,\n})\nexport class XplorLinks {\n @Prop() brand: string;\n\n /** Alt text for the image */\n @Prop() imageAlt: string = '';\n render() {\n return (\n <Host class={`theme-${this.brand}`}>\n <a class=\"x-link\" href=\"https://google.com\">\n {' '}\n googole this is a link{' '}\n </a>\n <div class=\"bg-black p-2 rounded-md flex justify-center\">\n <h1 class=\"text-primary font-sans\">This is a Stencil component using Tailwind</h1>\n </div>\n <div class=\"bg-white py-24 sm:py-32\">\n <div class=\"mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3\">\n <div class=\"max-w-xl\">\n <h2 class=\"text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl\">\n Meet our leadership\n </h2>\n <p class=\"mt-6 text-lg/8 text-gray-600\">\n We’re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the\n best results for our clients.\n </p>\n </div>\n <ul role=\"list\" class=\"grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2\">\n <li>\n <div class=\"flex items-center gap-x-6\">\n <img\n class=\"size-16 rounded-full\"\n src=\"https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80\"\n alt={this.imageAlt}\n />\n <div>\n <h3 class=\"text-base/7 font-semibold tracking-tight text-gray-900\">Leslie Alexander</h3>\n <p class=\"text-sm/6 font-semibold text-indigo-600\">Co-Founder / CEO</p>\n </div>\n </div>\n </li>\n </ul>\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-modal-persistent.js CHANGED Viewed

@@ -1,5 +1,5 @@
 import { p as proxyCustomElement, H, c as createEvent, h, a as Host } from './index.js';
-import { d as defineCustomElement$2 } from './p-DKh6y3GY.js';
+import { d as defineCustomElement$2 } from './p-04oMLTZR.js';
 const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModalPersistent extends H {
     constructor() {
@@ -28,7 +28,7 @@ const XplorModalPersistent$1 = /*@__PURE__*/ proxyCustomElement(class XplorModal
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '60cd29fcdff8efad4d0b24f4532acb86e4f6220b' }, h("xplor-modal", { key: '6252525de022fcc1098e2e179c4aedb81ebb15d3', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '484eeecc00f647e920878512f5e6bd61b41ba825', name: "title", slot: "title" }), h("slot", { key: 'e3fb52e2f19fdd4346fc4d014a0391dcc3e7c156', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'aa8a47b1afa24229269c08783fe0b69c5a258adc', name: "body", slot: "body" }), h("slot", { key: '8d1711d5e3223922596a26ce4eb9d30288c259ed', name: "actions", slot: "actions" }))));
+        return (h(Host, { key: '884f843600d455676714efef74a7102467cf7fe5' }, h("xplor-modal", { key: 'c3886708722829887adb5213f4eb98470ad16132', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '0f6b7f60e3f9354994b00f15ee7056c2b5f4a454', name: "title", slot: "title" }), h("slot", { key: '03a625acfe4a23677d1e532d56b0797c9d0f6457', name: "subtitle", slot: "subtitle" }), h("slot", { key: '57d9c7c4897299b0bb84de291e202d6c00d3914f', name: "body", slot: "body" }), h("slot", { key: '9290ae4fede095d8e11f32396029e59da7212e16', name: "actions", slot: "actions" }))));
     }
 }, [4, "xplor-modal-persistent", {
         "open": [4],

package/dist/components/xplor-modal.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { X as XplorModal$1, d as defineCustomElement$1 } from './p-DKh6y3GY.js';
+import { X as XplorModal$1, d as defineCustomElement$1 } from './p-04oMLTZR.js';
 const XplorModal = XplorModal$1;
 const defineCustomElement = defineCustomElement$1;

package/dist/components/xplor-nav-tabs.js CHANGED Viewed

@@ -17,8 +17,45 @@ const XplorNavTabs$1 = /*@__PURE__*/ proxyCustomElement(class XplorNavTabs exten
             this.xplorChange.emit(item.value);
         };
     }
+    handleKeyDown(event) {
+        const enabledItems = this.items.filter(item => !item.disabled);
+        if (enabledItems.length === 0)
+            return;
+        const currentIndex = enabledItems.findIndex(item => item.value === this.value);
+        let newIndex = currentIndex;
+        switch (event.key) {
+            case 'ArrowRight':
+                event.preventDefault();
+                newIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;
+                break;
+            case 'ArrowLeft':
+                event.preventDefault();
+                newIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;
+                break;
+            case 'Home':
+                event.preventDefault();
+                newIndex = 0;
+                break;
+            case 'End':
+                event.preventDefault();
+                newIndex = enabledItems.length - 1;
+                break;
+            default:
+                return;
+        }
+        const newItem = enabledItems[newIndex];
+        this.value = newItem.value;
+        this.xplorChange.emit(newItem.value);
+        // Focus the newly active tab button
+        const buttons = this.el.querySelectorAll('button[role="tab"]');
+        const allItemIndex = this.items.indexOf(newItem);
+        const targetButton = buttons[allItemIndex];
+        if (targetButton) {
+            targetButton.focus();
+        }
+    }
     render() {
-        return (h(Host, { key: '30bab02780d071338f386b6a72559bbd65212118' }, h("div", { key: '2684dbbd4a812bbb88d55baeb42b281c2f3bf753', class: {
+        return (h(Host, { key: '1a94314129f0f6c94df3196ef7e2a493b6626fd7' }, h("div", { key: '71b0ee2d2baab1fed571ed88f04fc49754b2952e', class: {
                 'nav-tabs': true,
                 'nav-tabs--grow': this.grow,
                 [`nav-tabs--${this.color}`]: true,
@@ -26,15 +63,16 @@ const XplorNavTabs$1 = /*@__PURE__*/ proxyCustomElement(class XplorNavTabs exten
                 'nav-tabs__tab': true,
                 'nav-tabs__tab--active': this.value === item.value,
                 'nav-tabs__tab--disabled': item.disabled,
-            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', type: "button" }, item.label))), h("slot", { key: 'dae806f8f498015b5837c799cb024fc3d688cc8d' }))));
+            }, onClick: () => this.handleTabClick(item), disabled: item.disabled, role: "tab", "aria-selected": this.value === item.value ? 'true' : 'false', tabIndex: this.value === item.value ? 0 : -1, type: "button" }, item.label))), h("slot", { key: 'fbf08f6785a81babc1c29359f0dff202dca18d6c' }))));
     }
+    get el() { return this; }
     static get style() { return xplorNavTabsCss; }
 }, [6, "xplor-nav-tabs", {
         "value": [1025],
         "items": [16],
         "color": [1],
         "grow": [4]
-    }]);
+    }, [[0, "keydown", "handleKeyDown"]]]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/xplor-nav-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-nav-tabs.js","mappings":";;AAAA,MAAM,eAAe,GAAG,shQAAshQ;;MCajiQA,cAAY,iBAAAC,kBAAA,CAAA,MAAA,YAAA,SAAAC,CAAA,CAAA;AALzB,IAAA,WAAA,GAAA;;;;~~AAOY~~,QAAA,IAAK,CAAA,KAAA,GAAiB,EAAE;AACxB,QAAA,IAAK,CAAA,KAAA,GAA4B,SAAS;AAC1C,QAAA,IAAI,CAAA,IAAA,GAAY,KAAK;AAIrB,QAAA,IAAA,CAAA,cAAc,GAAG,CAAC,IAAgB,KAAI;YAC1C,IAAI,IAAI,CAAC,QAAQ;gBAAE;AAEnB,YAAA,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK;YACvB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;AACrC,SAAC;~~AAmCJ~~;~~IAjCG~~,MAAM,GAAA;QACF,QACI,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACD,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACI,KAAK,EAAE;AACH,gBAAA,UAAU,EAAE,IAAI;gBAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;AAC3B,gBAAA,CAAC,aAAa,IAAI,CAAC,KAAK,CAAE,CAAA,GAAG,IAAI;AACpC,aAAA,EACD,IAAI,EAAC,SAAS,EAAA,EAEb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,MACjB,CAAA,CAAA,QAAA,EAAA,EACI,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE;AACH,gBAAA,eAAe,EAAE,IAAI;AACrB,gBAAA,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;gBAClD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;AAC3C,aAAA,EACD,OAAO,EAAE,MAAM,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,KAAK,~~EACK~~,~~eAAA,EAAA,~~IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,GAAG,MAAM,GAAG,OAAO,EAC3D,IAAI,EAAC,QAAQ,EAAA,EAEZ,IAAI,CAAC,KAAK,CACN,CACZ,CAAC,EACF,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACN,CACH~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorNavTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-nav-tabs/xplor-nav-tabs.scss?tag=xplor-nav-tabs&encapsulation=scoped","src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.nav-tabs {\n display: flex;\n border-bottom: 2px solid #e0e0e0;\n gap: 0;\n\n &--grow {\n .nav-tabs__tab {\n flex: 1;\n }\n }\n}\n\n.nav-tabs__tab {\n background: none;\n border: none;\n padding: 0.75rem 1.5rem;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n color: #757575;\n position: relative;\n transition: color 0.2s;\n white-space: nowrap;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n right: 0;\n height: 2px;\n background-color: transparent;\n transition: background-color 0.2s;\n }\n\n &:hover:not(&--disabled) {\n color: #424242;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: -2px;\n }\n\n &--active {\n color: #1976d2;\n\n &::after {\n background-color: #1976d2;\n }\n\n .nav-tabs--secondary & {\n color: #9c27b0;\n\n &::after {\n background-color: #9c27b0;\n }\n }\n }\n\n &--disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.nav-tabs--secondary {\n .nav-tabs__tab {\n &:hover:not(.nav-tabs__tab--disabled) {\n color: #7b1fa2;\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\nexport interface NavTabItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'xplor-nav-tabs',\n styleUrl: 'xplor-nav-tabs.scss',\n scoped: true,\n})\nexport class XplorNavTabs {\n @Prop({ mutable: true }) value: string;\n @Prop() items: NavTabItem[] = [];\n @Prop() color: 'primary' \| 'secondary' = 'primary';\n @Prop() grow: boolean = false;\n\n @Event() xplorChange: EventEmitter<string>;\n\n private handleTabClick = (item: NavTabItem) => {\n if (item.disabled) return;\n\n this.value = item.value;\n this.xplorChange.emit(item.value);\n };\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'nav-tabs': true,\n 'nav-tabs--grow': this.grow,\n [`nav-tabs--${this.color}`]: true,\n }}\n role=\"tablist\"\n >\n {this.items.map((item) => (\n <button\n key={item.value}\n class={{\n 'nav-tabs__tab': true,\n 'nav-tabs__tab--active': this.value === item.value,\n 'nav-tabs__tab--disabled': item.disabled,\n }}\n onClick={() => this.handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={this.value === item.value ? 'true' : 'false'}\n type=\"button\"\n >\n {item.label}\n </button>\n ))}\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-nav-tabs.js","mappings":"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","names":["XplorNavTabs","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-nav-tabs/xplor-nav-tabs.scss?tag=xplor-nav-tabs&encapsulation=scoped","src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"sourcesContent":[":host {\n display: block;\n}\n\n.nav-tabs {\n display: flex;\n border-bottom: 2px solid #e0e0e0;\n gap: 0;\n\n &--grow {\n .nav-tabs__tab {\n flex: 1;\n }\n }\n}\n\n.nav-tabs__tab {\n background: none;\n border: none;\n padding: 0.75rem 1.5rem;\n font-family: inherit;\n font-size: 0.875rem;\n font-weight: 500;\n cursor: pointer;\n color: #757575;\n position: relative;\n transition: color 0.2s;\n white-space: nowrap;\n text-transform: uppercase;\n letter-spacing: 0.5px;\n\n &::after {\n content: '';\n position: absolute;\n bottom: -2px;\n left: 0;\n right: 0;\n height: 2px;\n background-color: transparent;\n transition: background-color 0.2s;\n }\n\n &:hover:not(&--disabled) {\n color: #424242;\n }\n\n &:focus {\n outline: 2px solid #1976d2;\n outline-offset: -2px;\n }\n\n &--active {\n color: #1976d2;\n\n &::after {\n background-color: #1976d2;\n }\n\n .nav-tabs--secondary & {\n color: #9c27b0;\n\n &::after {\n background-color: #9c27b0;\n }\n }\n }\n\n &--disabled {\n opacity: 0.4;\n cursor: not-allowed;\n }\n}\n\n.nav-tabs--secondary {\n .nav-tabs__tab {\n &:hover:not(.nav-tabs__tab--disabled) {\n color: #7b1fa2;\n }\n }\n}","import { Component, Host, h, Prop, Event, EventEmitter, Element, Listen } from '@stencil/core';\n\nexport interface NavTabItem {\n label: string;\n value: string;\n disabled?: boolean;\n}\n\n@Component({\n tag: 'xplor-nav-tabs',\n styleUrl: 'xplor-nav-tabs.scss',\n scoped: true,\n})\nexport class XplorNavTabs {\n @Element() el: HTMLElement;\n\n @Prop({ mutable: true }) value: string;\n @Prop() items: NavTabItem[] = [];\n @Prop() color: 'primary' \| 'secondary' = 'primary';\n @Prop() grow: boolean = false;\n\n @Event() xplorChange: EventEmitter<string>;\n\n private handleTabClick = (item: NavTabItem) => {\n if (item.disabled) return;\n\n this.value = item.value;\n this.xplorChange.emit(item.value);\n };\n\n @Listen('keydown')\n handleKeyDown(event: KeyboardEvent) {\n const enabledItems = this.items.filter(item => !item.disabled);\n if (enabledItems.length === 0) return;\n\n const currentIndex = enabledItems.findIndex(item => item.value === this.value);\n let newIndex = currentIndex;\n\n switch (event.key) {\n case 'ArrowRight':\n event.preventDefault();\n newIndex = currentIndex < enabledItems.length - 1 ? currentIndex + 1 : 0;\n break;\n case 'ArrowLeft':\n event.preventDefault();\n newIndex = currentIndex > 0 ? currentIndex - 1 : enabledItems.length - 1;\n break;\n case 'Home':\n event.preventDefault();\n newIndex = 0;\n break;\n case 'End':\n event.preventDefault();\n newIndex = enabledItems.length - 1;\n break;\n default:\n return;\n }\n\n const newItem = enabledItems[newIndex];\n this.value = newItem.value;\n this.xplorChange.emit(newItem.value);\n\n // Focus the newly active tab button\n const buttons = this.el.querySelectorAll('button[role=\"tab\"]');\n const allItemIndex = this.items.indexOf(newItem);\n const targetButton = buttons[allItemIndex] as HTMLButtonElement;\n if (targetButton) {\n targetButton.focus();\n }\n }\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'nav-tabs': true,\n 'nav-tabs--grow': this.grow,\n [`nav-tabs--${this.color}`]: true,\n }}\n role=\"tablist\"\n >\n {this.items.map((item) => (\n <button\n key={item.value}\n class={{\n 'nav-tabs__tab': true,\n 'nav-tabs__tab--active': this.value === item.value,\n 'nav-tabs__tab--disabled': item.disabled,\n }}\n onClick={() => this.handleTabClick(item)}\n disabled={item.disabled}\n role=\"tab\"\n aria-selected={this.value === item.value ? 'true' : 'false'}\n tabIndex={this.value === item.value ? 0 : -1}\n type=\"button\"\n >\n {item.label}\n </button>\n ))}\n <slot />\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-radio-btn.js CHANGED Viewed

@@ -1,18 +1,113 @@
-import { p as proxyCustomElement, H, h, a as Host } from './index.js';
+import { p as proxyCustomElement, H, c as createEvent, h } from './index.js';
-const xplorRadioBtnCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: block;\n}";
+const xplorRadioBtnCss = "/* on mobile browsers, I set a width of 100% */\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer base {\n  /* html[data-theme='office'] {\n    --color-primary: rgb(219, 59, 3);\n    --color-secondary: rgb(0, 119, 107);\n    --color-buttons: #89da59;\n    --color-typography: #ff320e;\n  }\n\n  html {\n    --color-primary: #db3b03;\n    --color-primary-50: #db3b03;\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgb(0, 119, 107);\n    --color-tertiary: rgb(128, 104, 186);\n  } */\n  :root {\n    --color-primary: #db3b03;\n    --color-primary-50: rgba(255, 152, 0, 1);\n    --color-secondary: rgb(0, 119, 107);\n    --color-secondary-50: rgba(1, 163, 157, 1);\n    --color-tertiary: rgb(128, 104, 186);\n    --color-tertiary: rgb(223, 242, 241);\n    --color-white: white;\n    --color-emphasis: rgb(8, 8, 9);\n    --color-supergiant: rgb(213, 66, 99);\n    --color-orange: rgb(250, 200, 127);\n    --color-buttons: #fbbc05;\n    --color-typography: #ea4335;\n    --background: 20 66% 99%;\n    --foreground: 20 51% 4%;\n    --muted: 20 25% 86%;\n    --muted-foreground: 20 7% 25%;\n    --popover: 20 66% 98%;\n    --popover-foreground: 20 51% 3%;\n    --card: 20 66% 98%;\n    --card-foreground: 20 51% 3%;\n    --border: 20 15% 94%;\n    --input: 20 15% 94%;\n    --primary: 20 48% 72%;\n    --primary-foreground: 20 48% 12%;\n    --secondary: 20 12% 92%;\n    --secondary-foreground: 20 12% 32%;\n    --accent: 20 12% 92%;\n    --accent-foreground: 20 12% 32%;\n    --destructive: 11 80% 22%;\n    --destructive-foreground: 11 80% 82%;\n    --ring: 20 48% 72%;\n    --radius: 0.5rem;\n    --chart-1: 12 76% 61%;\n    --chart-2: 173 58% 39%;\n    --chart-3: 197 37% 24%;\n    --chart-4: 43 74% 66%;\n    --chart-5: 27 87% 67%;\n  }\n  .dark {\n    --background: 253 43% 3%;\n    --foreground: 253 31% 98%;\n    --muted: 253 7% 13%;\n    --muted-foreground: 253 13% 63%;\n    --popover: 253 43% 3%;\n    --popover-foreground: 253 31% 98%;\n    --card: 253 43% 4%;\n    --card-foreground: 253 31% 99%;\n    --border: 215 27.9% 16.9%;\n    --input: 215 27.9% 16.9%;\n    --primary: 253 91% 58%;\n    --primary-foreground: 253 91% 98%;\n    --secondary: 253 7% 9%;\n    --secondary-foreground: 253 7% 69%;\n    --accent: 253 13% 14%;\n    --accent-foreground: 253 13% 74%;\n    --destructive: 339.2 90.36% 51.18%;\n    --destructive-foreground: 0 0% 100%;\n    --ring: 253 91% 58%;\n    --chart-1: 220 70% 50%;\n    --chart-2: 160 60% 45%;\n    --chart-3: 30 80% 55%;\n    --chart-4: 280 65% 60%;\n    --chart-5: 340 75% 55%;\n  }\n}\n@layer base {\n  * {\n    @apply border-border;\n  }\n  body {\n    @apply box-border bg-background text-foreground;\n  }\n}\n@layer utilities {\n  .min-h-screen {\n    min-height: 100vh;\n    /* Fallback */\n    min-height: 100dvh;\n  }\n  .h-screen {\n    height: 100vh;\n    /* Fallback */\n    height: 100dvh;\n  }\n}\n@tailwind base;\n@tailwind components;\n@tailwind utilities;\n@layer components {\n  .glass {\n    border: none;\n    backdrop-filter: blur(var(--glass-blur, 40px));\n    background-color: transparent;\n    background-image: linear-gradient(135deg, rgb(255, 255, 255, var(--glass-opacity, 30%)), transparent), linear-gradient(var(--glass-reflex-degree, 100deg), rgb(255, 255, 255, var(--glass-reflex-opacity, 10%)) 25%, transparent 0);\n    box-shadow: 0 0 0 1px rgb(255, 255, 255, var(--glass-border-opacity, 10%)) inset, 0 0 0 2px rgba(0, 0, 0, 0.05);\n    text-shadow: 0 1px rgb(0, 0, 0, var(--glass-text-shadow-opacity, 5%));\n  }\n}\n.tox.tox-tinymce {\n  width: 50% !important;\n  height: 400px !important;\n  display: inline-flex;\n}\n\n/* on large screens, I use a different layout, so 600px are sufficient */\n@media only screen and (min-width: 600px) {\n  .tox.tox-tinymce {\n    width: 600px !important;\n  }\n}\nh1 {\n  color: var(--color-primary);\n  /* Header/H1 */\n  font-family: Inter;\n  font-size: 48px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 56px; /* 116.667% */\n}\n\nh2 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H2 Bold */\n  font-family: Inter;\n  font-size: 32px;\n  font-style: normal;\n  font-weight: 600;\n  line-height: 38px; /* 118.75% */\n  letter-spacing: 0.25px;\n}\n\nh3 {\n  color: var(--grey-1100252525, #252525);\n  /* Header/H3 */\n  font-family: Inter;\n  font-size: 24px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 32px; /* 133.333% */\n}\n\n.overline {\n  color: var(--grey-1100252525, #252525);\n  /* Overline/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 500;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 3.2px;\n  text-transform: uppercase;\n}\n\nol,\nul {\n  list-style: none;\n  margin: 1rem;\n  padding: 0;\n}\nol li,\nul li {\n  margin: 1rem;\n  padding: 0;\n}\nol.mdc-list,\nul.mdc-list {\n  list-style-type: none;\n  list-style: none;\n}\nol.mdc-list li.mdc-list-item,\nul.mdc-list li.mdc-list-item {\n  list-style-type: none;\n  list-style: none !important;\n}\n\n.orange-label {\n  color: var(--Orange-900-Primary, #db3b03);\n  /* Caption 1/Regular */\n  font-family: Inter;\n  font-size: 12px;\n  font-style: normal;\n  font-weight: 400;\n  line-height: 16px; /* 133.333% */\n  letter-spacing: 0.4px;\n  margin: 0px 0 -9px 16px;\n  z-index: 1 !important;\n  position: relative;\n  width: fit-content;\n}\n.orange-label.grey-bg {\n  background-color: #fefcfb;\n}\n\n#spinnerLoader {\n  position: fixed;\n  top: 50%;\n  left: 50%;\n  transform: translate(-50%, -50%);\n  background-color: #fff;\n  padding: 20px;\n  border-radius: 5px;\n  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  z-index: 100;\n  pointer-events: none;\n}\n\n#textfield-Title-label {\n  background-color: white;\n}\n\n.mdc-ripple-upgraded .mdc-text-field--outlined .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 1px solid #db3b03 !important;\n  padding: 0;\n  height: 0;\n}\n\n.mdc-text-field--focused .mdc-notched-outline__notch {\n  border: 0px solid transparent !important;\n  border-bottom: 2px solid #db3b03 !important;\n}\n\n.mdc-text-field--outlined .mdc-notched-outline .mdc-notched-outline__notch {\n  max-width: calc(100% - max(12px, var(--mdc-shape-small, 4px)) * 2);\n  border-top: transparent;\n}\n\n.generate-btn {\n  display: flex;\n  height: 48px;\n  padding: 12px 24px;\n  justify-content: center;\n  align-items: center;\n  gap: 10px;\n  border-radius: 16px;\n}\n.generate-btn.link:hover {\n  background-color: var(--Cyan-700-Secondary, #e27046);\n  color: var(--Cyan-700-Secondary-Text, #fff);\n}\n\n.bg-green {\n  background: var(--Cyan-700-Secondary, #00776b);\n}\n\n:host {\n  display: inline-block;\n  font-family: -apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, sans-serif;\n}\n\n.radio-wrapper {\n  display: inline-flex;\n  align-items: center;\n  gap: 8px;\n  cursor: pointer;\n}\n.radio-wrapper--disabled {\n  cursor: not-allowed;\n}\n\n.radio {\n  width: 20px;\n  height: 20px;\n  border-radius: 50%;\n  border: 2px solid #9ca3af;\n  background: white;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  cursor: pointer;\n  transition: all 0.15s ease;\n  outline: none;\n  position: relative;\n  flex-shrink: 0;\n}\n.radio.hover {\n  border-color: #059669;\n  background: #d1fae5;\n}\n.radio.focus {\n  border-color: #059669;\n  background: #a7f3d0;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);\n}\n.radio.pressed {\n  border-color: #059669;\n  background: #6ee7b7;\n}\n.radio.checked {\n  border-color: #059669;\n}\n.radio.checked.hover {\n  background: #d1fae5;\n}\n.radio.checked.hover .radio-inner {\n  background: #059669;\n}\n.radio.checked.focus {\n  background: #a7f3d0;\n  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);\n}\n.radio.checked.focus .radio-inner {\n  background: #059669;\n}\n.radio.checked.pressed {\n  background: #6ee7b7;\n}\n.radio.checked.pressed .radio-inner {\n  background: #059669;\n}\n.radio.error {\n  border-color: #ef4444;\n}\n.radio.error.hover {\n  background: #fee2e2;\n  border-color: #ef4444;\n}\n.radio.error.focus {\n  background: #fecaca;\n  border-color: #ef4444;\n  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);\n}\n.radio.error.pressed {\n  background: #fca5a5;\n  border-color: #ef4444;\n}\n.radio.error.checked .radio-inner {\n  background: #ef4444;\n}\n.radio.disabled {\n  opacity: 0.4;\n  cursor: not-allowed;\n  border-color: #d1d5db;\n  background: white;\n}\n.radio.disabled.checked {\n  border-color: #9ca3af;\n}\n.radio.disabled.checked .radio-inner {\n  background: #9ca3af;\n}\n\n.radio-inner {\n  width: 10px;\n  height: 10px;\n  border-radius: 50%;\n  background: #059669;\n  transform: scale(0);\n  transition: transform 0.15s ease;\n}\n.radio-inner--visible {\n  transform: scale(1);\n}\n\n.label {\n  font-size: 14px;\n  color: #374151;\n  user-select: none;\n}\n\n.radio-wrapper--disabled .label {\n  opacity: 0.4;\n}";
 const XplorRadioBtn$1 = /*@__PURE__*/ proxyCustomElement(class XplorRadioBtn extends H {
     constructor() {
         super();
         this.__registerHost();
         this.__attachShadow();
+        this.radioChange = createEvent(this, "radioChange");
+        /** The label text displayed next to the radio button */
+        this.label = '';
+        /** The value associated with this radio button */
+        this.value = '';
+        /** The name attribute to group radio buttons together */
+        this.name = '';
+        /** Whether this radio button is initially selected */
+        this.initialChecked = false;
+        /** Whether this radio button is disabled */
+        this.disabled = false;
+        /** Whether this radio button is in an error state */
+        this.error = false;
+        this.checked = false;
+        this.isHovered = false;
+        this.isFocused = false;
+        this.isPressed = false;
+        this.handleClick = () => {
+            if (this.disabled || this.checked)
+                return;
+            // Deselect all siblings in the same name group
+            this.getSiblingRadios().forEach(radio => radio.deselect());
+            this.checked = true;
+            this.radioChange.emit({ value: this.value, checked: this.checked });
+        };
+        this.handleKeyDown = (e) => {
+            if (this.disabled)
+                return;
+            if (e.key === ' ' || e.key === 'Enter') {
+                e.preventDefault();
+                this.isPressed = true;
+                this.handleClick();
+            }
+        };
+        this.handleKeyUp = (e) => {
+            if (e.key === ' ' || e.key === 'Enter') {
+                this.isPressed = false;
+            }
+        };
+        this.getRadioClass = () => {
+            const classes = ['radio'];
+            if (this.checked)
+                classes.push('checked');
+            if (this.disabled)
+                classes.push('disabled');
+            if (this.error)
+                classes.push('error');
+            if (this.isHovered && !this.disabled)
+                classes.push('hover');
+            if (this.isFocused && !this.disabled)
+                classes.push('focus');
+            if (this.isPressed && !this.disabled)
+                classes.push('pressed');
+            return classes.join(' ');
+        };
+    }
+    watchCheckedProp(newValue) {
+        this.checked = newValue;
+    }
+    componentWillLoad() {
+        this.checked = this.initialChecked;
+    }
+    /** Programmatically deselect this radio button */
+    async deselect() {
+        this.checked = false;
+    }
+    getSiblingRadios() {
+        if (!this.name)
+            return [];
+        const parent = this.el.parentElement;
+        if (!parent)
+            return [];
+        const all = Array.from(parent.querySelectorAll(`xplor-radio-btn[name="${this.name}"]`));
+        return all.filter(radio => radio !== this.el);
     }
     render() {
-        return (h(Host, { key: '350aae21c138b87e3dfce7ebdb2d74747d5abc93' }, h("h1", { key: 'f7546bbab5c85aa0ed4d180116200790444f8c5f' }, "I'm a button"), h("slot", { key: '79492d83d93da17775f56c21e2a600cafdea2c44' })));
+        return (h("label", { key: '305a0c3d610686e8c11180c15db8d1ce4ca98c60', class: {
+                'radio-wrapper': true,
+                'radio-wrapper--disabled': this.disabled,
+            } }, h("div", { key: 'ed0dd418bf295430c8cf1edd4b43519b3cf04018', class: this.getRadioClass(), onClick: this.handleClick, onMouseEnter: () => (this.isHovered = true), onMouseLeave: () => (this.isHovered = false), onMouseDown: () => (this.isPressed = true), onMouseUp: () => (this.isPressed = false), onFocus: () => (this.isFocused = true), onBlur: () => (this.isFocused = false), onKeyDown: this.handleKeyDown, onKeyUp: this.handleKeyUp, tabIndex: this.disabled ? -1 : 0, role: "radio", "aria-checked": this.checked.toString(), "aria-disabled": this.disabled.toString(), "aria-label": this.label }, h("div", { key: 'ae6dd96a65601ba50d3e6e919b95983d3e47e8e5', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: 'b5647a8ad15d03187ba2f8c670846e9025ffba7e', class: "label" }, this.label))));
     }
+    get el() { return this; }
+    static get watchers() { return {
+        "initialChecked": ["watchCheckedProp"]
+    }; }
     static get style() { return xplorRadioBtnCss; }
-}, [1, "xplor-radio-btn"]);
+}, [1, "xplor-radio-btn", {
+        "label": [1],
+        "value": [1],
+        "name": [1],
+        "initialChecked": [4, "initial-checked"],
+        "disabled": [4],
+        "error": [4],
+        "checked": [32],
+        "isHovered": [32],
+        "isFocused": [32],
+        "isPressed": [32],
+        "deselect": [64]
+    }, undefined, {
+        "initialChecked": ["watchCheckedProp"]
+    }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {
         return;

package/dist/components/xplor-radio-btn.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-radio-btn.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,mnNAAmnN;;MCO/nNA,eAAa,iBAAAC,kBAAA,CAAA,MAAA,aAAA,SAAAC,CAAA,CAAA;;;;;;IACxB,MAAM,GAAA;AACJ,QAAA,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAqB,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,cAAA,CAAA,EACrB,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorRadioBtn","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-radio-btn/xplor-radio-btn.scss?tag=xplor-radio-btn&encapsulation=shadow","src/components/xplor-radio-btn/xplor-radio-btn.tsx"],"sourcesContent":[":host {\n display: block;\n}\n","import { Component, Host, h } from '@stencil/core';\n\n@Component({\n tag: 'xplor-radio-btn',\n styleUrl: 'xplor-radio-btn.scss',\n shadow: true,\n})\nexport class XplorRadioBtn {\n render() {\n return (\n <Host>\n <h1>I'm a button</h1>\n <slot></slot>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-radio-btn.js","mappings":"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","names":["XplorRadioBtn","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-radio-btn/xplor-radio-btn.scss?tag=xplor-radio-btn&encapsulation=shadow","src/components/xplor-radio-btn/xplor-radio-btn.tsx"],"sourcesContent":["$color-gray-300: #d1d5db;\n$color-gray-400: #9ca3af;\n$color-gray-600: #6b7280;\n$color-gray-700: #374151;\n$color-green-100: #d1fae5;\n$color-green-200: #a7f3d0;\n$color-green-300: #6ee7b7;\n$color-green-600: #059669;\n$color-red-100: #fee2e2;\n$color-red-200: #fecaca;\n$color-red-300: #fca5a5;\n$color-red-500: #ef4444;\n$color-white: white;\n\n$radio-size: 20px;\n$radio-inner-size: 10px;\n$border-width: 2px;\n$transition-speed: 0.15s;\n$focus-ring-opacity: 0.2;\n$disabled-opacity: 0.4;\n\n:host {\n display: inline-block;\n font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;\n}\n\n.radio-wrapper {\n display: inline-flex;\n align-items: center;\n gap: 8px;\n cursor: pointer;\n\n &--disabled {\n cursor: not-allowed;\n }\n}\n\n.radio {\n width: $radio-size;\n height: $radio-size;\n border-radius: 50%;\n border: $border-width solid $color-gray-400;\n background: $color-white;\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n transition: all $transition-speed ease;\n outline: none;\n position: relative;\n flex-shrink: 0;\n\n // Hover\n &.hover {\n border-color: $color-green-600;\n background: $color-green-100;\n }\n\n // Focus\n &.focus {\n border-color: $color-green-600;\n background: $color-green-200;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n }\n\n // Pressed\n &.pressed {\n border-color: $color-green-600;\n background: $color-green-300;\n }\n\n // Checked\n &.checked {\n border-color: $color-green-600;\n\n &.hover {\n background: $color-green-100;\n\n .radio-inner {\n background: $color-green-600;\n }\n }\n\n &.focus {\n background: $color-green-200;\n box-shadow: 0 0 0 3px rgba($color-green-600, $focus-ring-opacity);\n\n .radio-inner {\n background: $color-green-600;\n }\n }\n\n &.pressed {\n background: $color-green-300;\n\n .radio-inner {\n background: $color-green-600;\n }\n }\n }\n\n // Error\n &.error {\n border-color: $color-red-500;\n\n &.hover {\n background: $color-red-100;\n border-color: $color-red-500;\n }\n\n &.focus {\n background: $color-red-200;\n border-color: $color-red-500;\n box-shadow: 0 0 0 3px rgba($color-red-500, $focus-ring-opacity);\n }\n\n &.pressed {\n background: $color-red-300;\n border-color: $color-red-500;\n }\n\n &.checked .radio-inner {\n background: $color-red-500;\n }\n }\n\n // Disabled\n &.disabled {\n opacity: $disabled-opacity;\n cursor: not-allowed;\n border-color: $color-gray-300;\n background: $color-white;\n\n &.checked {\n border-color: $color-gray-400;\n\n .radio-inner {\n background: $color-gray-400;\n }\n }\n }\n}\n\n.radio-inner {\n width: $radio-inner-size;\n height: $radio-inner-size;\n border-radius: 50%;\n background: $color-green-600;\n transform: scale(0);\n transition: transform $transition-speed ease;\n\n &--visible {\n transform: scale(1);\n }\n}\n\n.label {\n font-size: 14px;\n color: $color-gray-700;\n user-select: none;\n}\n\n.radio-wrapper--disabled .label {\n opacity: $disabled-opacity;\n}\n","import { Component, Prop, State, Event, EventEmitter, h, Watch, Element, Method } from '@stencil/core';\n\n@Component({\n tag: 'xplor-radio-btn',\n styleUrl: 'xplor-radio-btn.scss',\n shadow: true,\n})\nexport class XplorRadioBtn {\n @Element() el: HTMLElement;\n\n /** The label text displayed next to the radio button /\n @Prop() label: string = '';\n\n /* The value associated with this radio button /\n @Prop() value: string = '';\n\n /* The name attribute to group radio buttons together /\n @Prop() name: string = '';\n\n /* Whether this radio button is initially selected /\n @Prop() initialChecked: boolean = false;\n\n /* Whether this radio button is disabled /\n @Prop() disabled: boolean = false;\n\n /* Whether this radio button is in an error state /\n @Prop() error: boolean = false;\n\n @State() checked: boolean = false;\n @State() isHovered: boolean = false;\n @State() isFocused: boolean = false;\n @State() isPressed: boolean = false;\n\n /* Emitted when the radio button selection changes /\n @Event() radioChange: EventEmitter<{ value: string; checked: boolean }>;\n\n @Watch('initialChecked')\n watchCheckedProp(newValue: boolean) {\n this.checked = newValue;\n }\n\n componentWillLoad() {\n this.checked = this.initialChecked;\n }\n\n /* Programmatically deselect this radio button */\n @Method()\n async deselect() {\n this.checked = false;\n }\n\n private getSiblingRadios(): HTMLXplorRadioBtnElement[] {\n if (!this.name) return [];\n const parent = this.el.parentElement;\n if (!parent) return [];\n const all = Array.from(parent.querySelectorAll<HTMLXplorRadioBtnElement>(`xplor-radio-btn[name=\"${this.name}\"]`));\n return all.filter(radio => radio !== this.el);\n }\n\n private handleClick = () => {\n if (this.disabled \|\| this.checked) return;\n\n // Deselect all siblings in the same name group\n this.getSiblingRadios().forEach(radio => radio.deselect());\n\n this.checked = true;\n this.radioChange.emit({ value: this.value, checked: this.checked });\n };\n\n private handleKeyDown = (e: KeyboardEvent) => {\n if (this.disabled) return;\n if (e.key === ' ' \|\| e.key === 'Enter') {\n e.preventDefault();\n this.isPressed = true;\n this.handleClick();\n }\n };\n\n private handleKeyUp = (e: KeyboardEvent) => {\n if (e.key === ' ' \|\| e.key === 'Enter') {\n this.isPressed = false;\n }\n };\n\n private getRadioClass = () => {\n const classes = ['radio'];\n\n if (this.checked) classes.push('checked');\n if (this.disabled) classes.push('disabled');\n if (this.error) classes.push('error');\n if (this.isHovered && !this.disabled) classes.push('hover');\n if (this.isFocused && !this.disabled) classes.push('focus');\n if (this.isPressed && !this.disabled) classes.push('pressed');\n\n return classes.join(' ');\n };\n\n render() {\n return (\n <label\n class={{\n 'radio-wrapper': true,\n 'radio-wrapper--disabled': this.disabled,\n }}\n >\n <div\n class={this.getRadioClass()}\n onClick={this.handleClick}\n onMouseEnter={() => (this.isHovered = true)}\n onMouseLeave={() => (this.isHovered = false)}\n onMouseDown={() => (this.isPressed = true)}\n onMouseUp={() => (this.isPressed = false)}\n onFocus={() => (this.isFocused = true)}\n onBlur={() => (this.isFocused = false)}\n onKeyDown={this.handleKeyDown}\n onKeyUp={this.handleKeyUp}\n tabIndex={this.disabled ? -1 : 0}\n role=\"radio\"\n aria-checked={this.checked.toString()}\n aria-disabled={this.disabled.toString()}\n aria-label={this.label}\n >\n <div class={{ 'radio-inner': true, 'radio-inner--visible': this.checked }} />\n </div>\n {this.label && (\n <span class=\"label\">{this.label}</span>\n )}\n </label>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-section-card.js CHANGED Viewed

@@ -15,7 +15,7 @@ const XplorSectionCard$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectionCa
                 'section-card': true,
                 'section-card--outlined': this.outlined,
                 'section-card--rounded': this.rounded,
-            }, style: { padding: this.padding } }, h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" })), h("div", { key: 'd71137c24f428c4001c06c3038565368423e71cd', class: "section-card__actions" }, h("slot", { key: '06b994a9fb3626a0054b6192b5bb666b89710f54', name: "actions" })))));
+            }, style: { padding: this.padding } }, h("slot", { key: 'e1a7153c70bf52f1d539dfc4f0b95d571aaa97da', name: "title" }), h("slot", { key: '90d1df5bf54fc04271e0f762a6f6df09f9a5cc32', name: "subtitle" }), h("div", { key: '81c011fa1950cee54769b7940b92722d3dcdd4d5', class: "section-card__body" }, h("slot", { key: '5c8bba79d0900c8db7feb677ff1a6dc379bcad65', name: "body" }), h("slot", { key: '75faafcde4f79d7c7df0be49986420f147ccfde5' })), h("div", { key: 'f1f14d4cacef1580309321953d95d6b64825332e', class: "section-card__actions" }, h("slot", { key: '8e0520be390119389ac64f7fddd86c9e81ccd47c', name: "actions" })))));
     }
     static get style() { return xplorSectionCardCss; }
 }, [6, "xplor-section-card", {

package/dist/components/xplor-section-card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-section-card.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,4woBAA4woB;;MCO3xoBA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAO,CAAA,OAAA,GAAY,IAAI;AACvB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;~~AAyBnC~~;~~IAvBC~~,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;aACtC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAG,CAAA,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,~~CAAA~~,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,~~EAAM~~,IAAI,EAAC,MAAM,EAAA,~~CAAG~~,~~CAChB~~,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-card/xplor-section-card.scss?tag=xplor-section-card&encapsulation=scoped","src/components/xplor-section-card/xplor-section-card.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n.section-card {\n background: white;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &--outlined {\n border: 2px solid #D0C7E5;\n }\n\n &--rounded {\n border-radius: 1rem;\n }\n\n &__body {\n flex: 1;\n }\n\n &__actions {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-top: 0.5rem;\n\n &:empty {\n display: none;\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-card',\n styleUrl: 'xplor-section-card.scss',\n scoped: true,\n})\nexport class XplorSectionCard {\n @Prop() outlined: boolean = true;\n @Prop() rounded: boolean = true;\n @Prop() padding: string = '1.5rem';\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'section-card': true,\n 'section-card--outlined': this.outlined,\n 'section-card--rounded': this.rounded,\n }}\n style={{ padding: this.padding }}\n >\n <slot name=\"title\" />\n <slot name=\"subtitle\" />\n <div class=\"section-card__body\">\n <slot name=\"body\" />\n </div>\n <div class=\"section-card__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-section-card.js","mappings":";;AAAA,MAAM,mBAAmB,GAAG,4woBAA4woB;;MCO3xoBA,kBAAgB,iBAAAC,kBAAA,CAAA,MAAA,gBAAA,SAAAC,CAAA,CAAA;AAL7B,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,IAAI;AACxB,QAAA,IAAO,CAAA,OAAA,GAAY,IAAI;AACvB,QAAA,IAAO,CAAA,OAAA,GAAW,QAAQ;AA0BnC;IAxBC,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;gBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;gBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;aACtC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE,EAAA,EAEhC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EAAG,CAAA,EACrB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,UAAU,EAAG,CAAA,EACxB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,oBAAoB,EAAA,EAC7B,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,MAAM,EAAG,CAAA,EACpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,uBAAuB,EAAA,EAChC,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,SAAS,EAAA,CAAG,CACnB,CACF,CACD;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionCard","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-card/xplor-section-card.scss?tag=xplor-section-card&encapsulation=scoped","src/components/xplor-section-card/xplor-section-card.tsx"],"sourcesContent":["@use '../../styles/colours.scss' as colours;\n@use '../../styles/spacing.scss' as spacing;\n\n:host {\n display: block;\n}\n\n.section-card {\n background: white;\n display: flex;\n flex-direction: column;\n gap: 1rem;\n\n &--outlined {\n border: 2px solid #D0C7E5;\n }\n\n &--rounded {\n border-radius: 1rem;\n }\n\n &__body {\n flex: 1;\n }\n\n &__actions {\n display: flex;\n align-items: center;\n gap: 0.5rem;\n padding-top: 0.5rem;\n\n &:empty {\n display: none;\n }\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-card',\n styleUrl: 'xplor-section-card.scss',\n scoped: true,\n})\nexport class XplorSectionCard {\n @Prop() outlined: boolean = true;\n @Prop() rounded: boolean = true;\n @Prop() padding: string = '1.5rem';\n\n render() {\n return (\n <Host>\n <div\n class={{\n 'section-card': true,\n 'section-card--outlined': this.outlined,\n 'section-card--rounded': this.rounded,\n }}\n style={{ padding: this.padding }}\n >\n <slot name=\"title\" />\n <slot name=\"subtitle\" />\n <div class=\"section-card__body\">\n <slot name=\"body\" />\n <slot />\n </div>\n <div class=\"section-card__actions\">\n <slot name=\"actions\" />\n </div>\n </div>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-section-heading.js CHANGED Viewed

@@ -7,18 +7,24 @@ const XplorSectionHeading$1 = /*@__PURE__*/ proxyCustomElement(class XplorSectio
         super();
         this.__registerHost();
         this.size = 'medium';
+        /**
+         * Heading level (1-6), renders as h1-h6. Defaults to 2.
+         */
+        this.level = 2;
     }
     render() {
-        return (h(Host, { key: '6ee4041528bf178feb4b641c6f6f937c28ed2e8e' }, h("span", { key: 'e9758f23fe78a18f5ebf77092225c4d3b2a29965', class: {
+        const HeadingTag = `h${this.level}`;
+        return (h(Host, { key: '8d792fa1f7111c3de496e616c6c0d59a9f3bff0d' }, h(HeadingTag, { key: '56cc9b857b645d2b6de1d9b736b77c47011bc0aa', class: {
                 'section-heading': true,
                 'section-heading--small': this.size === 'small',
                 'section-heading--large': this.size === 'large',
-            } }, h("slot", { key: 'e0191f9f23da9858ffbb204554fec2c1012d1cd3' }, this.text))));
+            } }, h("slot", { key: 'c5820f563cbb67872c43018493553d9f1fe703f3' }, this.text))));
     }
     static get style() { return xplorSectionHeadingCss; }
 }, [6, "xplor-section-heading", {
         "size": [1],
-        "text": [1]
+        "text": [1],
+        "level": [2]
     }]);
 function defineCustomElement$1() {
     if (typeof customElements === "undefined") {

package/dist/components/xplor-section-heading.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"file":"xplor-section-heading.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,yjOAAyjO;;MCO3kOA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;~~AAkBtD~~;~~IAfC~~,MAAM,GAAA;~~QACJ~~,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,~~CAAA~~,CAAA,~~MAAA~~,~~EAAA~~,EAAA,GAAA,EAAA,0CAAA,~~EACE~~,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC/C,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,~~CACnB~~,~~CACF;;;;;;;;;;;;;;;;;;;;;;;;;;;~~","names":["XplorSectionHeading","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-heading/xplor-section-heading.scss?tag=xplor-section-heading&encapsulation=scoped","src/components/xplor-section-heading/xplor-section-heading.tsx"],"sourcesContent":[":host {\n display: block;\n font-size: 1rem;\n}\n\n.section-heading {\n line-height: 1.33;\n letter-spacing: 3.2px;\n text-transform: uppercase;\n font-weight: 500;\n\n &--small {\n font-size: 0.9em;\n }\n\n &--large {\n font-size: 1.1em;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-heading',\n styleUrl: 'xplor-section-heading.scss',\n scoped: true,\n})\nexport class XplorSectionHeading {\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n @Prop() text: string;\n\n render() {\n return (\n <Host>\n <~~span~~\n class={{\n 'section-heading': true,\n 'section-heading--small': this.size === 'small',\n 'section-heading--large': this.size === 'large',\n }}\n >\n <slot>{this.text}</slot>\n </~~span~~>\n </Host>\n );\n }\n}\n"],"version":3}
1	+ {"file":"xplor-section-heading.js","mappings":";;AAAA,MAAM,sBAAsB,GAAG,yjOAAyjO;;MCO3kOA,qBAAmB,iBAAAC,kBAAA,CAAA,MAAA,mBAAA,SAAAC,CAAA,CAAA;AALhC,IAAA,WAAA,GAAA;;;AAMU,QAAA,IAAI,CAAA,IAAA,GAAiC,QAAQ;AAGrD;;AAEG;AACK,QAAA,IAAK,CAAA,KAAA,GAA0B,CAAC;AAmBzC;IAjBC,MAAM,GAAA;AACJ,QAAA,MAAM,UAAU,GAAG,CAAA,CAAA,EAAI,IAAI,CAAC,KAAK,EAAS;QAE1C,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAC,CAAA,UAAU,EACT,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE;AACL,gBAAA,iBAAiB,EAAE,IAAI;AACvB,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAC/C,gBAAA,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;AAChD,aAAA,EAAA,EAED,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,IAAI,CAAQ,CACb,CACR;;;;;;;;;;;;;;;;;;;;;;;;;;;;","names":["XplorSectionHeading","__stencil_proxyCustomElement","HTMLElement"],"sources":["src/components/xplor-section-heading/xplor-section-heading.scss?tag=xplor-section-heading&encapsulation=scoped","src/components/xplor-section-heading/xplor-section-heading.tsx"],"sourcesContent":[":host {\n display: block;\n font-size: 1rem;\n}\n\n.section-heading {\n line-height: 1.33;\n letter-spacing: 3.2px;\n text-transform: uppercase;\n font-weight: 500;\n\n &--small {\n font-size: 0.9em;\n }\n\n &--large {\n font-size: 1.1em;\n }\n}\n","import { Component, Host, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'xplor-section-heading',\n styleUrl: 'xplor-section-heading.scss',\n scoped: true,\n})\nexport class XplorSectionHeading {\n @Prop() size: 'small' \| 'medium' \| 'large' = 'medium';\n @Prop() text: string;\n\n /*\n Heading level (1-6), renders as h1-h6. Defaults to 2.\n */\n @Prop() level: 1 \| 2 \| 3 \| 4 \| 5 \| 6 = 2;\n\n render() {\n const HeadingTag = `h${this.level}` as any;\n\n return (\n <Host>\n <HeadingTag\n class={{\n 'section-heading': true,\n 'section-heading--small': this.size === 'small',\n 'section-heading--large': this.size === 'large',\n }}\n >\n <slot>{this.text}</slot>\n </HeadingTag>\n </Host>\n );\n }\n}\n"],"version":3}

package/dist/components/xplor-table.js CHANGED Viewed

@@ -185,18 +185,23 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
         if (this.hasScrolled)
             className += ' xpl-table--has-scrolled';
         const paginatedData = this.getPaginatedData();
-        return (h(Host, { key: '3f20eb245a5a7cb281d4d62c4decd5479a4a172f', class: "xplor-table" }, h("div", { key: '1a28e8efbe4743b4dc77cfe62eeb21f317a9cbea', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a20608a0f5d4cde341974fb887f6bf0fcd1bce2d', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
+        return (h(Host, { key: '34a091e309fac05f19d2e895d6eaf9bcd6bd52b2', class: "xplor-table" }, h("div", { key: '63f1baa12c4a579a94e88b6afa955cedc55ebcbc', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: 'a51f74e5a00e6286dc69d1cf63cbedbc52cf2323', class: "xpl-table-container", onScroll: this.onScroll, ref: (el) => {
                 this.container = el;
-            } }, h("div", { key: '179d76f9152adf12775024ab4b8a272539ae1931', class: "mb-6" }, h("h1", { key: '636955cf3e3b34e0dfd96d61b1dc055a8bd25421', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: 'dbb17a39f87faf48f840cb0a0912e766d26fd3c6', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: '093859d4da39cdbda7c9d2bdde59dbe18e6379bc', class: "flex items-center gap-2" }, h("label", { key: '01a133d35d6b97bb2c4e231ae6ebe8f4082f2955', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'df99b873a684c2ae59f4d8ee5f2df68de8d0424d', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
+            } }, h("div", { key: 'dd162973f151d437264803738951403fd118a325', class: "mb-6" }, h("h1", { key: 'cd20f65851fe73c7e22eca544c19460d1e8cfa41', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '4ccbb826c4d36a04d7abb229cb30b33b721302aa', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: '2ec4358cab245173935bfd10750d426a95327649', class: "flex items-center gap-2" }, h("label", { key: '8a42d1fc73b38675efbb4d489ef52f490d355155', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'bf158ae8de2d8350cb4a17882e876374f56d1191', class: "border border-gray-300 rounded px-3 py-1.5 text-sm bg-white focus:outline-none focus:ring-2 focus:ring-teal-500 focus:border-teal-500",
             // value={this.selectedDateRange}
-            onInput: this.handleDateRangeChange }, h("option", { key: '7886a61f2329e9ed9cc8ee7a2cf6addea173cca1', value: "All" }, "All"), h("option", { key: '582f916607bb0cf80e0bae5bc0d6a2a555629139', value: "Today" }, "Today"), h("option", { key: 'e6b1b8b081ee25a4ed86a41e2de2e18a904b0696', value: "This Week" }, "This Week"), h("option", { key: '9db97f27a005fe23d2e5c60f8920b867a8f6c6e5', value: "This Month" }, "This Month"), h("option", { key: '3328f1c88fe0da23ede3010441f0fe4e2063b2ec', value: "Custom" }, "Custom Range")), h("button", { key: '31041e09d90e476f7c795b29eb6f11b014ff7bfd', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: '1bafb7b5f685358f03d9c4aab68ae30eb49118dd', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'e59bce624afdfb75f2c0118fc6ff83daab003246', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("button", { key: '67ff7cd34e44e071f73d5d4e4f46df5ae386aa00', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '5b23efc3355a5e4907b06696e29ca1f5b9d5c4f2', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: 'f787cf0f0759c4536786bc3e1ce2db99324ba085', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '1a21159e06c0371d4d43abc98a1e5d2c4919fa2f', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), h("table", { key: '7ba170b68b794cd1dc031e801405d0f09c8d0e8f', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'e79458ad7b197620a6ba37084fd009a3685340cc' }, this.columns.map((column, i) => {
+            onInput: this.handleDateRangeChange }, h("option", { key: '8d30107e14b3ae11283eab5c0dc5bb5e1625f206', value: "All" }, "All"), h("option", { key: 'e6ff573c014679027844de6fa074987c2af2747b', value: "Today" }, "Today"), h("option", { key: 'b2442d598fd4901bee4864d5eafb73fc36defed6', value: "This Week" }, "This Week"), h("option", { key: 'b8d65f2882d81ba062e005c19d8969df2ddf541b', value: "This Month" }, "This Month"), h("option", { key: 'e64697e70ba6daa1cedb3d4b35318cd473ad55ff', value: "Custom" }, "Custom Range")), h("button", { key: '5aca4cd7f522efa1fb6669a281c2f124a5f3c08a', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'c64b7b245059c5c93abb2f8d1fba598d59d2697e', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'd7f81604c3df7684dd33105f369ece2f25002426', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" })))), h("button", { key: '77e48fda9b868095074045507842dcb32a7ac3fb', onClick: this.handleFilterReports, class: "bg-teal-600 hover:bg-teal-700 text-white px-4 py-1.5 rounded text-sm font-medium transition-colors" }, "Filter Reports"), h("button", { key: '7f7a214ecb2e66828438dce866e134fe75910ebb', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: 'af830e634d4115487fb3e5ebc4ab085a864990ff', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '396c756b2fbe057f019872573f0fb44a6ef882f2', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" })), "Download All"))), h("table", { key: '984119ef9ca031d2cf21f40f888653e508157176', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'a3ffca2c981bfbc8323d537507c2b416f4f39306' }, this.columns.map((column, i) => {
             const iconType = getIconType(this.sortTypeArray[i]);
             const isColumnSortable = !!(this.isSortable &&
                 this.sortableColumns[i]);
-            return (h("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600" }, this.multiselect && i === 0 ? (h("label", { onClick: (e) => {
+            return (h("th", { class: "text-left py-3 px-4 text-sm font-medium text-gray-600", "aria-sort": isColumnSortable && this.sortTypeArray[i]
+                    ? this.sortTypeArray[i] === 'asc'
+                        ? 'ascending'
+                        : 'descending'
+                    : isColumnSortable
+                        ? 'none'
+                        : undefined }, this.multiselect && i === 0 ? (h("label", { onClick: (e) => {
                     e.preventDefault();
                     e.stopPropagation();
-                    debugger;
                     if (isColumnSortable) {
                         this.sortBy(i);
                     }
@@ -210,11 +215,11 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
                     this.selected.some((a) => a), onClick: (e) => {
                     e.stopPropagation();
                     this.selectAll(e);
-                }, type: "checkbox", value: `select-all-${this.selectAllValue}` }), column, isColumnSortable &&
+                }, type: "checkbox", value: `select-all-${this.selectAllValue}`, "aria-label": "Select all rows" }), column, isColumnSortable &&
                 !!this.sortTypeArray[i] && (h("xpl-icon", { icon: iconType, size: 16 })))) : (h("label", { onClick: () => isColumnSortable &&
                     this.sortBy(i), class: isColumnSortable
                     ? 'cursor-pointer'
-                    : '' }, column, isColumnSortable &&
+                    : '', "aria-label": isColumnSortable ? `Sort by ${column}` : undefined }, column, isColumnSortable &&
                 !!this.sortTypeArray[i] && (h("svg", { width: "11", height: "6", viewBox: "0 0 11 6", xmlns: "http://www.w3.org/2000/svg" }, h("path", { d: "M10.5 5.5L5.5 0.5L0.5 5.5L10.5 5.5Z", fill: "currentColor" }))
             // <xpl-icon
             //     icon={iconType}
@@ -222,11 +227,11 @@ const XplorTable$1 = /*@__PURE__*/ proxyCustomElement(class XplorTable extends H
             //     id="__xpl-icon-sort"
             // ></xpl-icon>
             )))));
-        }))), h("tbody", { key: '138ffddb19a8573fc00894a5e9b981cecbe3ac40' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
+        }))), h("tbody", { key: 'b1794bf469839753599bca48a72153c8f53544e6' }, paginatedData.map((row, rowNum) => (h("tr", { class: `border-b border-gray-100 hover:bg-gray-50` }, row.map((cell, i) => (h("td", { class: "py-3 px-4 text-sm text-gray-900" }, this.multiselect && i === 0 ? (h("label", { class: "flex items-center gap-2", htmlFor: `__xpl-table-row-${rowNum}` }, h("input", { id: `__xpl-table-row-${rowNum}`, checked: !!this.selected[rowNum], type: "checkbox", onChange: (e) => this.selectOne(e, rowNum), value: this.selectedValues
                 .length > 0
                 ? this
                     .selectedValues[rowNum]
-                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: 'e82751ff914c2279cecdfbaa176e97f6e935732a', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: '4ed42566de46b43af24a36884832017947f117ef', class: "flex items-center gap-2" }, h("button", { key: 'a0c61305cbcace0eda2964da23085f58a8fc31a7', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '322225c61fc14d0c6d8a201a3ff07cce094822c7', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'ae66792c0cf51383d2657ff5302383e4067761ce', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: 'bc660dbbcf14d7ddf25820c337d212c11804b988', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '365d59f74128819af1f163f125e393994a2e69ad', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '0b7c6305962e722c161d30e3b3ffe804c5d4c73e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '2e0245cf9e2d23a944492432cd5c33bb915ecd2b', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '5692bf81ffa24c2e10c8edb7d7a5ff6655816f7a', class: "flex items-center gap-2" }, h("button", { key: 'f60c4847070a3eb4e19e59c7c25141ce68ddbe81', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '5f45f52d2dd1718691f582e765dd7cc3aa476dce', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'ad63a63e8956c6648781d7160761f8e310c5becc', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: '2ee1f6498fb0ccb4e2ea9a4e4d7651053b97851c', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: 'e247cc56f3cfc8d870a7891fd0c457645473e3e1', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '791f2af81bce193fbfcb41985feccec5338cee80', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
+                : `xpl-table-checkbox-${rowNum}` }), h("div", { innerHTML: cell }))) : (h("div", { innerHTML: cell })))))))))), h("div", { key: '130cceed1d88934092f1a3a92a67d984b8bd465b', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: '616ce36b0aa536f161eb9aa30b41acb18153208b', class: "flex items-center gap-2" }, h("button", { key: '10977dacc1cf364504c1cff031beb62a423f48be', onClick: () => this.handlePagination('first'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '3e7fe6e2411178be935d7c210eb5c6cf081a2d54', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '167a9ccaac38d293a86ff3983e5d0d6a222c91b4', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: '9ee908d6b52468a365c7173e3e3367b7b1945061', onClick: () => this.handlePagination('prev'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === 1 }, h("svg", { key: '286915694ecc0b480bf25e15baf3eb6423b68919', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'f6983747c83e973f777bcadb9045c53da5d10674', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '1c619cd20140f8d73d461b4f2b661116b0059353', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '1201039d99ac6d48f1075b36a602333dfe6d54e5', class: "flex items-center gap-2" }, h("button", { key: '828195335b1064d85f625f476b63da21ff37af71', onClick: () => this.handlePagination('next'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '7c2770e6e31871e8ded8b3831695f1f39bd5b7ec', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '2f260f911a89596b76826930f2d4c5f25aab180a', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: 'aed318f01b51e8f78ab7b2d10543b00154970b0e', onClick: () => this.handlePagination('last'), class: "p-1.5 text-gray-400 hover:text-gray-600 disabled:opacity-50", disabled: this.currentPage === this.totalPages }, h("svg", { key: '70e04a5ce5106d5c1b3c3f653d156608c03dc0f8', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '25d7d949b2aa75ce8d268d8a472becd75b9eb3cb', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
     }
     get el() { return this; }
     static get watchers() { return {