@xplor-education/core-stencil-components 2.0.0 → 3.0.0

package/dist/collection/components/xplor-input-title/xplor-input-title.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-input-title.js","sourceRoot":"","sources":["../../../src/components/xplor-input-title/xplor-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAME;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAY1B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;KAkBH;IAhBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-title',\n  styleUrl: 'xplor-input-title.scss',\n  scoped: true,\n})\nexport class XplorInputTitle {\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <input\n          type=\"text\"\n          class=\"xplor-input-title\"\n          value={this.value}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xplor-input-title.js","sourceRoot":"","sources":["../../../src/components/xplor-input-title/xplor-input-title.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAO9E,MAAM,OAAO,eAAe;IAL5B;QAME;;WAEG;QACsB,UAAK,GAAW,EAAE,CAAC;QAE5C;;WAEG;QACK,gBAAW,GAAW,EAAE,CAAC;QAEjC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,aAAQ,GAAY,KAAK,CAAC;QAElC;;WAEG;QACK,cAAS,GAAW,OAAO,CAAC;QAY5B,gBAAW,GAAG,CAAC,KAAY,EAAE,EAAE;YACrC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACnC,CAAC,CAAC;QAEM,iBAAY,GAAG,CAAC,KAAY,EAAE,EAAE;YACtC,MAAM,MAAM,GAAG,KAAK,CAAC,MAA0B,CAAC;YAChD,IAAI,CAAC,KAAK,GAAG,MAAM,CAAC,KAAK,CAAC;YAC1B,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACpC,CAAC,CAAC;KAmBH;IAjBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,8DACE,IAAI,EAAC,MAAM,EACX,KAAK,EAAC,mBAAmB,EACzB,KAAK,EAAE,IAAI,CAAC,KAAK,EACjB,WAAW,EAAE,IAAI,CAAC,WAAW,EAC7B,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBACX,IAAI,CAAC,SAAS,EAC1B,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,QAAQ,EAAE,IAAI,CAAC,YAAY,GAC3B,CACG,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-input-title',\n  styleUrl: 'xplor-input-title.scss',\n  scoped: true,\n})\nexport class XplorInputTitle {\n  /**\n   * Input value\n   */\n  @Prop({ mutable: true }) value: string = '';\n\n  /**\n   * Input placeholder\n   */\n  @Prop() placeholder: string = '';\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is readonly\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * Accessible label for the input\n   */\n  @Prop() ariaLabel: string = 'Title';\n\n  /**\n   * Input event\n   */\n  @Event() xplorInput: EventEmitter<string>;\n\n  /**\n   * Change event\n   */\n  @Event() xplorChange: EventEmitter<string>;\n\n  private handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorInput.emit(this.value);\n  };\n\n  private handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement;\n    this.value = target.value;\n    this.xplorChange.emit(this.value);\n  };\n\n  render() {\n    return (\n      <Host>\n        <input\n          type=\"text\"\n          class=\"xplor-input-title\"\n          value={this.value}\n          placeholder={this.placeholder}\n          disabled={this.disabled}\n          readonly={this.readonly}\n          aria-label={this.ariaLabel}\n          onInput={this.handleInput}\n          onChange={this.handleChange}\n        />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-links/xplor-links.js

@@ -1,7 +1,11 @@
 import { h, Host } from "@stencil/core";
 export class XplorLinks {
+    constructor() {
+        /** Alt text for the image */
+        this.imageAlt = '';
+    }
     render() {
-        return (h(Host, { key: '790a4cfec621e97ea4de475fa53e57a77a3cd12f', class: `theme-${this.brand}` }, h("a", { key: '13cb8ca17ea4717aed386a4a4e2cb3c4402a94f0', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '69005a5165c15a0fb175b8eea7b4d409edede8f6', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '7b02c87ac23ea8ab57b4ed50c5196701574c2e61', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: '43656b47443543dc22c2155c34d0fa48dc837a63', class: "bg-white py-24 sm:py-32" }, h("div", { key: '7d6233d14a660cb47b7e1d819c1cc636219efbf2', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '8b1d3e79dfd215fb70d9a5ffafc337b78bf7f05c', class: "max-w-xl" }, h("h2", { key: 'a124d7943e4c3143850b5ce7411a0c39d17d4646', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: '97687d43671e3fb5138892f16d94a88a53ea2da7', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: 'cbe0df5fe4848e59ab77dcb316283ca072c5601c', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: 'c386756c84360e832fe8ad9673f137b2622d52d1' }, h("div", { key: 'd5f92709313deb415d9868e18f30d33da7f46f9c', class: "flex items-center gap-x-6" }, h("img", { key: '786e4a048269b46c0e3969578de897551496c562', class: "size-16 rounded-full", 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", alt: "" }), h("div", { key: '75d001f9e1670f1f9be6eec0177797c8d9957e2f' }, h("h3", { key: '9f8bf97a2fe329f6c790f40cd8e3a59251a25cc6', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: 'f848b02a1fe071682ca36a4900fb9d19938db71e', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
+        return (h(Host, { key: 'e26ac5962cb44c6e05a39034e76b6f35d076cb60', class: `theme-${this.brand}` }, h("a", { key: '030c76cf101abf498a2828bffef051f5e01d3a65', class: "x-link", href: "https://google.com" }, ' ', "googole this is a link", ' '), h("div", { key: '13ef22eb8e5ddc49976006b138b7bac0e379d85c', class: "bg-black p-2 rounded-md flex justify-center" }, h("h1", { key: '39e7adc65ee5b26b4be9c111eabdb295fc964065', class: "text-primary font-sans" }, "This is a Stencil component using Tailwind")), h("div", { key: 'dae9ed47cdaa4afb6a6b70ca82c9b3c280f39215', class: "bg-white py-24 sm:py-32" }, h("div", { key: '32f746f7ec8c3337fff37e445dfb7e31a42e68c9', class: "mx-auto grid max-w-7xl gap-20 px-6 lg:px-8 xl:grid-cols-3" }, h("div", { key: '309dfd3930301f77cf83eea80579063d1c4aee85', class: "max-w-xl" }, h("h2", { key: '6fac68cca56d79303a1d92b86d059f7f91296b3e', class: "text-pretty text-3xl font-semibold tracking-tight text-gray-900 sm:text-4xl" }, "Meet our leadership"), h("p", { key: 'd759f98a1c30f4636592a5aa5ffa8f06cfa93dbe', class: "mt-6 text-lg/8 text-gray-600" }, "We\u2019re a dynamic group of individuals who are passionate about what we do and dedicated to delivering the best results for our clients.")), h("ul", { key: '978c9a043988f63c53b2ec9f7e0e73367dd72f41', role: "list", class: "grid gap-x-8 gap-y-12 sm:grid-cols-2 sm:gap-y-16 xl:col-span-2" }, h("li", { key: '6ae95678b9ef5ed2ad60c62661aa4a6c966f2740' }, h("div", { key: '0a98faa21b7216205d1ad44d977bcade55ce3162', class: "flex items-center gap-x-6" }, h("img", { key: '58c7a75c098911ca434d5de959ca358a80cb5598', class: "size-16 rounded-full", 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", alt: this.imageAlt }), h("div", { key: '314a9de00a4ac46b67a12cc57ca8392ccea7cfd8' }, h("h3", { key: 'd87b6c4fcdcf68e7bd9b9b29428cfe10de9e03fd', class: "text-base/7 font-semibold tracking-tight text-gray-900" }, "Leslie Alexander"), h("p", { key: '254489d8c64e765276fbfb72cd88221a0e2575ad', class: "text-sm/6 font-semibold text-indigo-600" }, "Co-Founder / CEO")))))))));
     }
     static get is() { return "xplor-links"; }
     static get encapsulation() { return "shadow"; }
@@ -35,6 +39,26 @@ export class XplorLinks {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "imageAlt": {
+                "type": "string",
+                "attribute": "image-alt",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Alt text for the image"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
             }
         };
     }

package/dist/collection/components/xplor-links/xplor-links.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-links.js","sourceRoot":"","sources":["../../../src/components/xplor-links/xplor-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,UAAU;IAErB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE;YAChC,0DAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB;gBACxC,GAAG;;gBACmB,GAAG,CACxB;YACJ,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,2DAAI,KAAK,EAAC,wBAAwB,iDAAgD,CAC9E;YACN,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,2DAA2D;oBACpE,4DAAK,KAAK,EAAC,UAAU;wBACnB,2DAAI,KAAK,EAAC,6EAA6E,0BAElF;wBACL,0DAAG,KAAK,EAAC,8BAA8B,kJAGnC,CACA;oBACN,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE;wBACpF;4BACE,4DAAK,KAAK,EAAC,2BAA2B;gCACpC,4DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,EAAC,EAAE,GACN;gCACF;oCACE,2DAAI,KAAK,EAAC,wDAAwD,uBAAsB;oCACxF,0DAAG,KAAK,EAAC,yCAAyC,uBAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"xplor-links.js","sourceRoot":"","sources":["../../../src/components/xplor-links/xplor-links.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAMzD,MAAM,OAAO,UAAU;IALvB;QAQE,6BAA6B;QACrB,aAAQ,GAAW,EAAE,CAAC;KA0C/B;IAzCC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,SAAS,IAAI,CAAC,KAAK,EAAE;YAChC,0DAAG,KAAK,EAAC,QAAQ,EAAC,IAAI,EAAC,oBAAoB;gBACxC,GAAG;;gBACmB,GAAG,CACxB;YACJ,4DAAK,KAAK,EAAC,6CAA6C;gBACtD,2DAAI,KAAK,EAAC,wBAAwB,iDAAgD,CAC9E;YACN,4DAAK,KAAK,EAAC,yBAAyB;gBAClC,4DAAK,KAAK,EAAC,2DAA2D;oBACpE,4DAAK,KAAK,EAAC,UAAU;wBACnB,2DAAI,KAAK,EAAC,6EAA6E,0BAElF;wBACL,0DAAG,KAAK,EAAC,8BAA8B,kJAGnC,CACA;oBACN,2DAAI,IAAI,EAAC,MAAM,EAAC,KAAK,EAAC,gEAAgE;wBACpF;4BACE,4DAAK,KAAK,EAAC,2BAA2B;gCACpC,4DACE,KAAK,EAAC,sBAAsB,EAC5B,GAAG,EAAC,2JAA2J,EAC/J,GAAG,EAAE,IAAI,CAAC,QAAQ,GAClB;gCACF;oCACE,2DAAI,KAAK,EAAC,wDAAwD,uBAAsB;oCACxF,0DAAG,KAAK,EAAC,yCAAyC,uBAAqB,CACnE,CACF,CACH,CACF,CACD,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -33,6 +33,7 @@ export class XplorModal {
          * Whether to show the title area (for spacing)
          */
         this.showTitle = true;
+        this.previouslyFocusedElement = null;
         this.handleBackdropClick = () => {
             if (!this.persistent) {
                 this.closeModal();
@@ -49,14 +50,68 @@ export class XplorModal {
     handleOpenChange(newValue) {
         if (newValue) {
             document.body.style.overflow = 'hidden';
+            this.previouslyFocusedElement = document.activeElement;
+            requestAnimationFrame(() => {
+                this.setInitialFocus();
+            });
         }
         else {
             document.body.style.overflow = '';
+            if (this.previouslyFocusedElement) {
+                this.previouslyFocusedElement.focus();
+                this.previouslyFocusedElement = null;
+            }
         }
     }
     disconnectedCallback() {
         document.body.style.overflow = '';
     }
+    handleKeyDown(event) {
+        if (!this.open)
+            return;
+        if (event.key === 'Escape' && !this.persistent) {
+            event.preventDefault();
+            this.closeModal();
+            return;
+        }
+        if (event.key === 'Tab') {
+            this.trapFocus(event);
+        }
+    }
+    getFocusableElements() {
+        if (!this.dialogEl)
+            return [];
+        const selectors = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+        return Array.from(this.dialogEl.querySelectorAll(selectors));
+    }
+    trapFocus(event) {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length === 0)
+            return;
+        const firstElement = focusableElements[0];
+        const lastElement = focusableElements[focusableElements.length - 1];
+        if (event.shiftKey) {
+            if (document.activeElement === firstElement) {
+                event.preventDefault();
+                lastElement.focus();
+            }
+        }
+        else {
+            if (document.activeElement === lastElement) {
+                event.preventDefault();
+                firstElement.focus();
+            }
+        }
+    }
+    setInitialFocus() {
+        const focusableElements = this.getFocusableElements();
+        if (focusableElements.length > 0) {
+            focusableElements[0].focus();
+        }
+        else if (this.dialogEl) {
+            this.dialogEl.focus();
+        }
+    }
     render() {
         if (!this.open) {
             return null;
@@ -73,7 +128,10 @@ export class XplorModal {
                 width: this.width,
                 maxWidth: this.maxWidth,
                 maxHeight: this.maxHeight,
-            }, onClick: this.handleCardClick }, h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), h("div", { class: "xplor-modal__title" }, h("slot", { name: "title" })), h("div", { class: "xplor-modal__subtitle" }, h("slot", { name: "subtitle" })), h("div", { class: bodyClasses }, this.loading ? (h("div", { class: "xplor-modal__loading" }, h("div", { class: "xplor-modal__spinner" }))) : (h("slot", { name: "body" }))), h("div", { class: "xplor-modal__actions" }, h("slot", { name: "actions" }))))));
+            }, onClick: this.handleCardClick, role: "dialog", "aria-modal": "true", "aria-labelledby": this.ariaLabel ? undefined : 'xplor-modal-title', "aria-label": this.ariaLabel, tabindex: "-1", ref: (el) => (this.dialogEl = el) }, h("button", { type: "button", class: "xplor-modal__close-btn", onClick: this.closeModal, "aria-label": "Close modal", "data-testid": "common-modal-close-button" }, "\u2715"), h("div", { class: "xplor-modal__title", id: "xplor-modal-title" }, h("slot", { name: "title" })), h("div", { class: "xplor-modal__subtitle" }, h("slot", { name: "subtitle" })), h("div", { class: bodyClasses }, this.loading ? (h("div", { class: "xplor-modal__loading", role: "status", "aria-label": "Loading" }, h("div", { class: "xplor-modal__spinner" }))) : ([
+            h("slot", { name: "body" }),
+            h("slot", null)
+        ])), h("div", { class: "xplor-modal__actions" }, h("slot", { name: "actions" }))))));
     }
     static get is() { return "xplor-modal"; }
     static get encapsulation() { return "scoped"; }
@@ -248,6 +306,25 @@ export class XplorModal {
                 "setter": false,
                 "reflect": false,
                 "defaultValue": "true"
+            },
+            "ariaLabel": {
+                "type": "string",
+                "attribute": "aria-label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Accessible label for the modal (used if no title slot)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
             }
         };
     }
@@ -269,11 +346,21 @@ export class XplorModal {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
     static get watchers() {
         return [{
                 "propName": "open",
                 "methodName": "handleOpenChange"
             }];
     }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=xplor-modal.js.map

package/dist/collection/components/xplor-modal/xplor-modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-modal.js","sourceRoot":"","sources":["../../../src/components/xplor-modal/xplor-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-modal',\n  styleUrl: 'xplor-modal.scss',\n  scoped: true,\n})\nexport class XplorModal {\n  /**\n   * Whether the modal is open\n   */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /**\n   * Modal width\n   */\n  @Prop() width: string = '600px';\n\n  /**\n   * Maximum width\n   */\n  @Prop() maxWidth: string = '90%';\n\n  /**\n   * Maximum height\n   */\n  @Prop() maxHeight: string = '90%';\n\n  /**\n   * Whether the modal content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Persistent mode - prevents closing on backdrop click\n   */\n  @Prop() persistent: boolean = false;\n\n  /**\n   * Loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Whether to show the title area (for spacing)\n   */\n  @Prop() showTitle: boolean = true;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      document.body.style.overflow = 'hidden';\n    } else {\n      document.body.style.overflow = '';\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  private handleBackdropClick = () => {\n    if (!this.persistent) {\n      this.closeModal();\n    }\n  };\n\n  private handleCardClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  private closeModal = () => {\n    this.open = false;\n    this.xplorClose.emit();\n  };\n\n  render() {\n    if (!this.open) {\n      return null;\n    }\n\n    const cardClasses = {\n      'xplor-modal__card': true,\n      'xplor-modal__card--scrollable': this.scrollable,\n    };\n\n    const bodyClasses = {\n      'xplor-modal__body': true,\n      'xplor-modal__body--no-title': !this.showTitle,\n    };\n\n    return (\n      <Host>\n        <div class=\"xplor-modal__backdrop\" onClick={this.handleBackdropClick}>\n          <div\n            class={cardClasses}\n            style={{\n              width: this.width,\n              maxWidth: this.maxWidth,\n              maxHeight: this.maxHeight,\n            }}\n            onClick={this.handleCardClick}\n          >\n            <button\n              type=\"button\"\n              class=\"xplor-modal__close-btn\"\n              onClick={this.closeModal}\n              aria-label=\"Close modal\"\n              data-testid=\"common-modal-close-button\"\n            >\n              ✕\n            </button>\n\n            <div class=\"xplor-modal__title\">\n              <slot name=\"title\" />\n            </div>\n\n            <div class=\"xplor-modal__subtitle\">\n              <slot name=\"subtitle\" />\n            </div>\n\n            <div class={bodyClasses}>\n              {this.loading ? (\n                <div class=\"xplor-modal__loading\">\n                  <div class=\"xplor-modal__spinner\"></div>\n                </div>\n              ) : (\n                <slot name=\"body\" />\n              )}\n            </div>\n\n            <div class=\"xplor-modal__actions\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"xplor-modal.js","sourceRoot":"","sources":["../../../src/components/xplor-modal/xplor-modal.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter, Watch, Element, Listen } from '@stencil/core';\n\n@Component({\n  tag: 'xplor-modal',\n  styleUrl: 'xplor-modal.scss',\n  scoped: true,\n})\nexport class XplorModal {\n  /**\n   * Whether the modal is open\n   */\n  @Prop({ mutable: true }) open: boolean = false;\n\n  /**\n   * Modal width\n   */\n  @Prop() width: string = '600px';\n\n  /**\n   * Maximum width\n   */\n  @Prop() maxWidth: string = '90%';\n\n  /**\n   * Maximum height\n   */\n  @Prop() maxHeight: string = '90%';\n\n  /**\n   * Whether the modal content is scrollable\n   */\n  @Prop() scrollable: boolean = true;\n\n  /**\n   * Persistent mode - prevents closing on backdrop click\n   */\n  @Prop() persistent: boolean = false;\n\n  /**\n   * Loading state\n   */\n  @Prop() loading: boolean = false;\n\n  /**\n   * Whether to show the title area (for spacing)\n   */\n  @Prop() showTitle: boolean = true;\n\n  /**\n   * Accessible label for the modal (used if no title slot)\n   */\n  @Prop() ariaLabel: string;\n\n  /**\n   * Close event\n   */\n  @Event() xplorClose: EventEmitter<void>;\n\n  @Element() el: HTMLElement;\n\n  private previouslyFocusedElement: HTMLElement | null = null;\n  private dialogEl: HTMLElement;\n\n  @Watch('open')\n  handleOpenChange(newValue: boolean) {\n    if (newValue) {\n      document.body.style.overflow = 'hidden';\n      this.previouslyFocusedElement = document.activeElement as HTMLElement;\n      requestAnimationFrame(() => {\n        this.setInitialFocus();\n      });\n    } else {\n      document.body.style.overflow = '';\n      if (this.previouslyFocusedElement) {\n        this.previouslyFocusedElement.focus();\n        this.previouslyFocusedElement = null;\n      }\n    }\n  }\n\n  disconnectedCallback() {\n    document.body.style.overflow = '';\n  }\n\n  @Listen('keydown')\n  handleKeyDown(event: KeyboardEvent) {\n    if (!this.open) return;\n\n    if (event.key === 'Escape' && !this.persistent) {\n      event.preventDefault();\n      this.closeModal();\n      return;\n    }\n\n    if (event.key === 'Tab') {\n      this.trapFocus(event);\n    }\n  }\n\n  private getFocusableElements(): HTMLElement[] {\n    if (!this.dialogEl) return [];\n    const selectors = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex=\"-1\"])';\n    return Array.from(this.dialogEl.querySelectorAll(selectors)) as HTMLElement[];\n  }\n\n  private trapFocus(event: KeyboardEvent) {\n    const focusableElements = this.getFocusableElements();\n    if (focusableElements.length === 0) return;\n\n    const firstElement = focusableElements[0];\n    const lastElement = focusableElements[focusableElements.length - 1];\n\n    if (event.shiftKey) {\n      if (document.activeElement === firstElement) {\n        event.preventDefault();\n        lastElement.focus();\n      }\n    } else {\n      if (document.activeElement === lastElement) {\n        event.preventDefault();\n        firstElement.focus();\n      }\n    }\n  }\n\n  private setInitialFocus() {\n    const focusableElements = this.getFocusableElements();\n    if (focusableElements.length > 0) {\n      focusableElements[0].focus();\n    } else if (this.dialogEl) {\n      this.dialogEl.focus();\n    }\n  }\n\n  private handleBackdropClick = () => {\n    if (!this.persistent) {\n      this.closeModal();\n    }\n  };\n\n  private handleCardClick = (event: Event) => {\n    event.stopPropagation();\n  };\n\n  private closeModal = () => {\n    this.open = false;\n    this.xplorClose.emit();\n  };\n\n  render() {\n    if (!this.open) {\n      return null;\n    }\n\n    const cardClasses = {\n      'xplor-modal__card': true,\n      'xplor-modal__card--scrollable': this.scrollable,\n    };\n\n    const bodyClasses = {\n      'xplor-modal__body': true,\n      'xplor-modal__body--no-title': !this.showTitle,\n    };\n\n    return (\n      <Host>\n        <div class=\"xplor-modal__backdrop\" onClick={this.handleBackdropClick}>\n          <div\n            class={cardClasses}\n            style={{\n              width: this.width,\n              maxWidth: this.maxWidth,\n              maxHeight: this.maxHeight,\n            }}\n            onClick={this.handleCardClick}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.ariaLabel ? undefined : 'xplor-modal-title'}\n            aria-label={this.ariaLabel}\n            tabindex=\"-1\"\n            ref={(el) => (this.dialogEl = el)}\n          >\n            <button\n              type=\"button\"\n              class=\"xplor-modal__close-btn\"\n              onClick={this.closeModal}\n              aria-label=\"Close modal\"\n              data-testid=\"common-modal-close-button\"\n            >\n              ✕\n            </button>\n\n            <div class=\"xplor-modal__title\" id=\"xplor-modal-title\">\n              <slot name=\"title\" />\n            </div>\n\n            <div class=\"xplor-modal__subtitle\">\n              <slot name=\"subtitle\" />\n            </div>\n\n            <div class={bodyClasses}>\n              {this.loading ? (\n                <div class=\"xplor-modal__loading\" role=\"status\" aria-label=\"Loading\">\n                  <div class=\"xplor-modal__spinner\"></div>\n                </div>\n              ) : ([\n                <slot name=\"body\" />,\n                <slot />\n              ])}\n            </div>\n\n            <div class=\"xplor-modal__actions\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xplor-modal-persistent/xplor-modal-persistent.js

@@ -23,7 +23,7 @@ export class XplorModalPersistent {
         this.loading = false;
     }
     render() {
-        return (h(Host, { key: '607487d12b9744b7915c168a702b9f53c1edd18a' }, h("xplor-modal", { key: '72213498ca31332338afda4b1a8520fd34fbec19', open: this.open, width: this.width, maxWidth: this.maxWidth, maxHeight: this.maxHeight, loading: this.loading, persistent: true, onXplorClose: () => this.xplorClose.emit() }, h("slot", { key: '4841432590db3562ca033f57325aca10b947c60f', name: "title", slot: "title" }), h("slot", { key: '78263228bc06c994c6107b0fea103b25a5171f7f', name: "subtitle", slot: "subtitle" }), h("slot", { key: 'b51d5bf90aa0b9c3889a897adda36eaaf1a72659', name: "body", slot: "body" }), h("slot", { key: '4c4c403072d0a0f10da0eeeefbe73e05d4a9f33d', name: "actions", slot: "actions" }))));
+        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" }))));
     }
     static get is() { return "xplor-modal-persistent"; }
     static get properties() {

package/dist/collection/components/xplor-nav-tabs/xplor-nav-tabs.js

@@ -11,8 +11,45 @@ export class XplorNavTabs {
             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,
@@ -20,7 +57,7 @@ export class XplorNavTabs {
                 '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' }))));
     }
     static get is() { return "xplor-nav-tabs"; }
     static get encapsulation() { return "scoped"; }
@@ -140,5 +177,15 @@ export class XplorNavTabs {
                 }
             }];
     }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "keydown",
+                "method": "handleKeyDown",
+                "target": undefined,
+                "capture": false,
+                "passive": false
+            }];
+    }
 }
 //# sourceMappingURL=xplor-nav-tabs.js.map

package/dist/collection/components/xplor-nav-tabs/xplor-nav-tabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-nav-tabs.js","sourceRoot":"","sources":["../../../src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAa9E,MAAM,OAAO,YAAY;IALzB;QAOY,UAAK,GAAiB,EAAE,CAAC;QACzB,UAAK,GAA4B,SAAS,CAAC;QAC3C,SAAI,GAAY,KAAK,CAAC;QAItB,mBAAc,GAAG,CAAC,IAAgB,EAAE,EAAE;YAC1C,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO;YAE1B,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,KAAK,CAAC;YACxB,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACtC,CAAC,CAAC;KAmCL;IAjCG,MAAM;QACF,OAAO,CACH,EAAC,IAAI;YACD,4DACI,KAAK,EAAE;oBACH,UAAU,EAAE,IAAI;oBAChB,gBAAgB,EAAE,IAAI,CAAC,IAAI;oBAC3B,CAAC,aAAa,IAAI,CAAC,KAAK,EAAE,CAAC,EAAE,IAAI;iBACpC,EACD,IAAI,EAAC,SAAS;gBAEb,IAAI,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CACtB,cACI,GAAG,EAAE,IAAI,CAAC,KAAK,EACf,KAAK,EAAE;wBACH,eAAe,EAAE,IAAI;wBACrB,uBAAuB,EAAE,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK;wBAClD,yBAAyB,EAAE,IAAI,CAAC,QAAQ;qBAC3C,EACD,OAAO,EAAE,GAAG,EAAE,CAAC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,EACxC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,IAAI,EAAC,KAAK,mBACK,IAAI,CAAC,KAAK,KAAK,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,EAC3D,IAAI,EAAC,QAAQ,IAEZ,IAAI,CAAC,KAAK,CACN,CACZ,CAAC;gBACF,8DAAQ,CACN,CACH,CACV,CAAC;IACN,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACJ","sourcesContent":["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,"file":"xplor-nav-tabs.js","sourceRoot":"","sources":["../../../src/components/xplor-nav-tabs/xplor-nav-tabs.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}