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

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: '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" }))));
     }
     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"; }
@@ -65,7 +102,7 @@ export class XplorNavTabs {
                     "references": {
                         "NavTabItem": {
                             "location": "local",
-                            "path": "/Users/darryn.lee-warden/Documents/DEV/xplor_design_system/apps/core-stencil-components/src/components/xplor-nav-tabs/xplor-nav-tabs.tsx",
+                            "path": "/Users/darrynlee-warden/Documents/DEV/xplor/xplor_design_system/apps/core-stencil-components/src/components/xplor-nav-tabs/xplor-nav-tabs.tsx",
                             "id": "src/components/xplor-nav-tabs/xplor-nav-tabs.tsx::NavTabItem"
                         }
                     }
@@ -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"]}

package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.css

@@ -267,5 +267,120 @@ ul.mdc-list li.mdc-list-item {
 }
 
 :host {
-  display: block;
+  display: inline-block;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+}
+
+.radio-wrapper {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+  cursor: pointer;
+}
+.radio-wrapper--disabled {
+  cursor: not-allowed;
+}
+
+.radio {
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  border: 2px solid #9ca3af;
+  background: white;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  outline: none;
+  position: relative;
+  flex-shrink: 0;
+}
+.radio.hover {
+  border-color: #059669;
+  background: #d1fae5;
+}
+.radio.focus {
+  border-color: #059669;
+  background: #a7f3d0;
+  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
+}
+.radio.pressed {
+  border-color: #059669;
+  background: #6ee7b7;
+}
+.radio.checked {
+  border-color: #059669;
+}
+.radio.checked.hover {
+  background: #d1fae5;
+}
+.radio.checked.hover .radio-inner {
+  background: #059669;
+}
+.radio.checked.focus {
+  background: #a7f3d0;
+  box-shadow: 0 0 0 3px rgba(5, 150, 105, 0.2);
+}
+.radio.checked.focus .radio-inner {
+  background: #059669;
+}
+.radio.checked.pressed {
+  background: #6ee7b7;
+}
+.radio.checked.pressed .radio-inner {
+  background: #059669;
+}
+.radio.error {
+  border-color: #ef4444;
+}
+.radio.error.hover {
+  background: #fee2e2;
+  border-color: #ef4444;
+}
+.radio.error.focus {
+  background: #fecaca;
+  border-color: #ef4444;
+  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
+}
+.radio.error.pressed {
+  background: #fca5a5;
+  border-color: #ef4444;
+}
+.radio.error.checked .radio-inner {
+  background: #ef4444;
+}
+.radio.disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+  border-color: #d1d5db;
+  background: white;
+}
+.radio.disabled.checked {
+  border-color: #9ca3af;
+}
+.radio.disabled.checked .radio-inner {
+  background: #9ca3af;
+}
+
+.radio-inner {
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: #059669;
+  transform: scale(0);
+  transition: transform 0.15s ease;
+}
+.radio-inner--visible {
+  transform: scale(1);
+}
+
+.label {
+  font-size: 14px;
+  color: #374151;
+  user-select: none;
+}
+
+.radio-wrapper--disabled .label {
+  opacity: 0.4;
 }