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

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;
 }

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

@@ -1,7 +1,85 @@
-import { Host, h } from "@stencil/core";
+import { h } from "@stencil/core";
 export class XplorRadioBtn {
+    constructor() {
+        /** 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: 'dee9c14f54e292d18b3267ca5e2000aca36b0456', class: {
+                'radio-wrapper': true,
+                'radio-wrapper--disabled': this.disabled,
+            } }, h("div", { key: '30bd9ba24abb9b37e6baa55d6ba767a2058cd1d0', 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: 'd09a47486e2041f12cbdeadd29fd537cab41db3b', class: { 'radio-inner': true, 'radio-inner--visible': this.checked } })), this.label && (h("span", { key: 'd8b820cd1b843f33a99a64c236f3f53a1c68be70', class: "label" }, this.label))));
     }
     static get is() { return "xplor-radio-btn"; }
     static get encapsulation() { return "shadow"; }
@@ -15,5 +93,183 @@ export class XplorRadioBtn {
             "$": ["xplor-radio-btn.css"]
         };
     }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The label text displayed next to the radio button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The value associated with this radio button"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "name": {
+                "type": "string",
+                "attribute": "name",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The name attribute to group radio buttons together"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "initialChecked": {
+                "type": "boolean",
+                "attribute": "initial-checked",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this radio button is initially selected"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this radio button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "error": {
+                "type": "boolean",
+                "attribute": "error",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether this radio button is in an error state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get states() {
+        return {
+            "checked": {},
+            "isHovered": {},
+            "isFocused": {},
+            "isPressed": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "radioChange",
+                "name": "radioChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the radio button selection changes"
+                },
+                "complexType": {
+                    "original": "{ value: string; checked: boolean }",
+                    "resolved": "{ value: string; checked: boolean; }",
+                    "references": {}
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "deselect": {
+                "complexType": {
+                    "signature": "() => Promise<void>",
+                    "parameters": [],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        }
+                    },
+                    "return": "Promise<void>"
+                },
+                "docs": {
+                    "text": "Programmatically deselect this radio button",
+                    "tags": []
+                }
+            }
+        };
+    }
+    static get elementRef() { return "el"; }
+    static get watchers() {
+        return [{
+                "propName": "initialChecked",
+                "methodName": "watchCheckedProp"
+            }];
+    }
 }
 //# sourceMappingURL=xplor-radio-btn.js.map

package/dist/collection/components/xplor-radio-btn/xplor-radio-btn.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-radio-btn.js","sourceRoot":"","sources":["../../../src/components/xplor-radio-btn/xplor-radio-btn.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,aAAa;IACxB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4EAAqB;YACrB,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["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,"file":"xplor-radio-btn.js","sourceRoot":"","sources":["../../../src/components/xplor-radio-btn/xplor-radio-btn.tsx"],"names":[],"mappings":"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","sourcesContent":["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"]}

package/dist/collection/components/xplor-section-card/xplor-section-card.js

@@ -6,11 +6,11 @@ export class XplorSectionCard {
         this.padding = '1.5rem';
     }
     render() {
-        return (h(Host, { key: 'f0bb8af2883a5441f3e325c4267ad3cec5716c9a' }, h("div", { key: 'a7611e3f28ca8d84782146adb2b906c789f4a338', class: {
+        return (h(Host, { key: '14876af087f131508ff26d4fefbba1792fb1f092' }, h("div", { key: '38bf7ff900f46b701416e2a3483c66728939cf8c', class: {
                 '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: '2189b986d9b08b1ef6168af7a5fe24da4a599301', name: "title" }), h("slot", { key: 'c3efe60808ac203e0c9a63c7c636dee242856bf0', name: "subtitle" }), h("div", { key: 'cf9d94651682ca4d1da25ccadbbfe2168295a326', class: "section-card__body" }, h("slot", { key: '732633bbbe5ad06f1c10222e81929a33ba06a12c', name: "body" }), h("slot", { key: 'e403abfc1b71759aab693c700b5ed8be1215f30e' })), h("div", { key: '89ffdd8215a88483635d1542a56a6f446abf61c4', class: "section-card__actions" }, h("slot", { key: 'e21b2e8b8cd048c4a0dfd369684186b547cc7611', name: "actions" })))));
     }
     static get is() { return "xplor-section-card"; }
     static get encapsulation() { return "scoped"; }

package/dist/collection/components/xplor-section-card/xplor-section-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-section-card.js","sourceRoot":"","sources":["../../../src/components/xplor-section-card/xplor-section-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;IAL7B;QAMU,aAAQ,GAAY,IAAI,CAAC;QACzB,YAAO,GAAY,IAAI,CAAC;QACxB,YAAO,GAAW,QAAQ,CAAC;KAyBpC;IAvBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;oBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;iBACtC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBAEhC,6DAAM,IAAI,EAAC,OAAO,GAAG;gBACrB,6DAAM,IAAI,EAAC,UAAU,GAAG;gBACxB,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,6DAAM,IAAI,EAAC,MAAM,GAAG,CAChB;gBACN,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"xplor-section-card.js","sourceRoot":"","sources":["../../../src/components/xplor-section-card/xplor-section-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,gBAAgB;IAL7B;QAMU,aAAQ,GAAY,IAAI,CAAC;QACzB,YAAO,GAAY,IAAI,CAAC;QACxB,YAAO,GAAW,QAAQ,CAAC;KA0BpC;IAxBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,4DACE,KAAK,EAAE;oBACL,cAAc,EAAE,IAAI;oBACpB,wBAAwB,EAAE,IAAI,CAAC,QAAQ;oBACvC,uBAAuB,EAAE,IAAI,CAAC,OAAO;iBACtC,EACD,KAAK,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,OAAO,EAAE;gBAEhC,6DAAM,IAAI,EAAC,OAAO,GAAG;gBACrB,6DAAM,IAAI,EAAC,UAAU,GAAG;gBACxB,4DAAK,KAAK,EAAC,oBAAoB;oBAC7B,6DAAM,IAAI,EAAC,MAAM,GAAG;oBACpB,8DAAQ,CACJ;gBACN,4DAAK,KAAK,EAAC,uBAAuB;oBAChC,6DAAM,IAAI,EAAC,SAAS,GAAG,CACnB,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

package/dist/collection/components/xplor-section-heading/xplor-section-heading.js

@@ -2,13 +2,18 @@ import { Host, h } from "@stencil/core";
 export class XplorSectionHeading {
     constructor() {
         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: 'dbd9dc5f552dd6a20d6a5e39efd636ced45df7cb' }, h(HeadingTag, { key: '90ceffcb3383b8d167e11e42cb6a2e915ddeec1b', 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: 'dd861c58c3e59e0bb4b0e7195ecaaa55ffab4912' }, this.text))));
     }
     static get is() { return "xplor-section-heading"; }
     static get encapsulation() { return "scoped"; }
@@ -62,6 +67,26 @@ export class XplorSectionHeading {
                 "getter": false,
                 "setter": false,
                 "reflect": false
+            },
+            "level": {
+                "type": "number",
+                "attribute": "level",
+                "mutable": false,
+                "complexType": {
+                    "original": "1 | 2 | 3 | 4 | 5 | 6",
+                    "resolved": "1 | 2 | 3 | 4 | 5 | 6",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Heading level (1-6), renders as h1-h6. Defaults to 2."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "2"
             }
         };
     }

package/dist/collection/components/xplor-section-heading/xplor-section-heading.js.map

@@ -1 +1 @@
-{"version":3,"file":"xplor-section-heading.js","sourceRoot":"","sources":["../../../src/components/xplor-section-heading/xplor-section-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;IALhC;QAMU,SAAI,GAAiC,QAAQ,CAAC;KAkBvD;IAfC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,6DACE,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;oBAC/C,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;iBAChD;gBAED,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACnB,CACF,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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,"file":"xplor-section-heading.js","sourceRoot":"","sources":["../../../src/components/xplor-section-heading/xplor-section-heading.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,mBAAmB;IALhC;QAMU,SAAI,GAAiC,QAAQ,CAAC;QAGtD;;WAEG;QACK,UAAK,GAA0B,CAAC,CAAC;KAmB1C;IAjBC,MAAM;QACJ,MAAM,UAAU,GAAG,IAAI,IAAI,CAAC,KAAK,EAAS,CAAC;QAE3C,OAAO,CACL,EAAC,IAAI;YACH,EAAC,UAAU,qDACT,KAAK,EAAE;oBACL,iBAAiB,EAAE,IAAI;oBACvB,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;oBAC/C,wBAAwB,EAAE,IAAI,CAAC,IAAI,KAAK,OAAO;iBAChD;gBAED,+DAAO,IAAI,CAAC,IAAI,CAAQ,CACb,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["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"]}

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

@@ -180,18 +180,23 @@ export class XplorTable {
         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: 'da8ded4b349560e2272fd0ffa1395ffc04d92769', class: "xplor-table" }, h("div", { key: '5cddb71e28a6eb512bbe0a209816fb8ba8050e22', class: "bg-white rounded-lg shadow-sm border border-gray-200 p-6 max-w-6xl mx-auto" }, h("div", { key: '24abe132c8b2889e656f39b197dcb2348cf7c49b', 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: 'afd56f434c013d1175c198790562f60cbed5d6ce', class: "mb-6" }, h("h1", { key: 'ba650cfc24623c63910f9dfb7547272dc2adbe68', class: "text-xl font-semibold text-gray-900 mb-4" }, "Head Counts Report"), h("div", { key: '4150efe6295d6697a787322e6bc8550d82296b69', class: "flex flex-wrap items-center gap-4 mb-6" }, h("div", { key: '1bef7dc05a99081de7b2cf0588c58fb4cd0cb429', class: "flex items-center gap-2" }, h("label", { key: 'ce45f248fd5151412bd64f75038996e3febf09a1', class: "text-sm text-gray-600 font-medium" }, "Date Range"), h("select", { key: 'cc7b10bb86619c119bb3d4f5ab5267f733ad7805', 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: '62474a4b5ad2fd7ba9f0806bf7bb26b487df04ff', value: "All" }, "All"), h("option", { key: 'aba4fb209168ae645d87475f0467ba38ee258f7e', value: "Today" }, "Today"), h("option", { key: '8203884e17bdcd012f90245dde1b9aec9abf16ed', value: "This Week" }, "This Week"), h("option", { key: '7a721035e8d8e31d61869f7513b586e06d06b1e9', value: "This Month" }, "This Month"), h("option", { key: '9a1d085c513236cb746cc9a6ebac1c48c8e35214', value: "Custom" }, "Custom Range")), h("button", { key: '7119eae652a26a19f774fe2a3e2564a993937caa', class: "p-1.5 border border-gray-300 rounded hover:bg-gray-50" }, h("svg", { key: 'c430ab8a591ebd2e9c7cf14dd0f0758419be1178', class: "w-4 h-4 text-gray-500", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '8330e74a528e0890375f9277d8dc7481bb88e8f9', "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: '85dc3c28587d7ce09cdb8dfe50e2b44f0f04b7c9', 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: '36d9d5fc49d73a0944c7abf1f5b96932d9789f0b', onClick: this.handleDownloadAll, class: "flex items-center gap-2 text-gray-600 hover:text-gray-800 text-sm" }, h("svg", { key: '81cbf1b31e01c1d4fbba64b53b21bc26146d6f84', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: 'd3c68b2337d4a4ab9a8d218d9aa722814d548e1b', "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: '782e125327cea0381296ab5a3f2e3ddec6f42f24', class: `w-full ${className}` }, this.columns && (h("thead", { key: 'ad3958e4d04f974dd47136da227afb662ff6cc7f' }, 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);
                     }
@@ -205,11 +210,11 @@ export class XplorTable {
                     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}
@@ -217,11 +222,11 @@ export class XplorTable {
             //     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: '1168d8fb9e1f324b37abdc1e8a899bb14dedf786' }, 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: 'dddc5e97acb0270689af29fdfbb0a96018074f48', id: "pagination", class: "w-full flex items-center justify-between mt-6 text-sm" }, h("div", { key: 'e7a37384aacfcd801b904082b028dd7b646b7938', class: "flex items-center gap-2" }, h("button", { key: '0d099c93f970f255015df19a10736c76317f3d58', 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: '3ef73d6177480ef3c6bb2e0ba3c11faf93fad40a', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '61447e4f959176a412b9702dfd5f0c126dfd1dcf', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M11 19l-7-7 7-7m8 14l-7-7 7-7" }))), h("button", { key: '5d996706416e30beeb36b3ccf5f49a0f728c9d46', 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: 'a4e874b1db8cb252698f36497aebbfd8dfef9f7d', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '9ea64241e49ebfdc43f26317c1403a0dec074a2e', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M15 19l-7-7 7-7" })))), h("span", { key: '25c2b77e2d374c782bef6907bbaa5f7d1c2b9a51', class: "text-gray-600" }, "Page ", this.currentPage, " of ", this.totalPages), h("div", { key: '6586812fde391e75b56da67db64eeece80629dbc', class: "flex items-center gap-2" }, h("button", { key: 'f63385fd3ccae39ecb97b10fc92f204fb3e2fd62', 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: '2024b6fa282b30ffcd8870dab2f50c0f1af0f4ef', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '397312376d85ef4262c42f0f4382371aeb0c5eef', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M9 5l7 7-7 7" }))), h("button", { key: 'bb42b666d217a21b3f2b91b28eaa39a96ad403ba', 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: '2e8f28f57ef6fd799559ae70c3c9bc9d7d74cdc3', class: "w-4 h-4", fill: "none", stroke: "currentColor", viewBox: "0 0 24 24" }, h("path", { key: '02270640aefaf430f27acf75465bfc5b30d2a881', "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "2", d: "M13 5l7 7-7 7M5 5l7 7-7 7" })))))))));
     }
     static get is() { return "xplor-table"; }
     static get encapsulation() { return "shadow"; }