xv-webcomponents 0.1.43 → 0.1.44

package/dist/collection/collection-manifest.json

@@ -0,0 +1,46 @@
+{
+  "entries": [
+    "components/xv-accordion/xv-accordion.js",
+    "components/xv-accordion-item/xv-accordion-item.js",
+    "components/xv-breadcrumbs/xv-breadcrumbs.js",
+    "components/xv-button/xv-button.js",
+    "components/xv-card/xv-card.js",
+    "components/xv-checkbox/xv-checkbox.js",
+    "components/xv-data-table/xv-data-table.js",
+    "components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js",
+    "components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js",
+    "components/xv-data-table/xv-data-table-row/xv-data-table-row.js",
+    "components/xv-dropdown/xv-dropdown.js",
+    "components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js",
+    "components/xv-file-uploader/xv-file-uploader.js",
+    "components/xv-footer/xv-footer.js",
+    "components/xv-header/xv-header.js",
+    "components/xv-link/xv-link.js",
+    "components/xv-loader/xv-loader.js",
+    "components/xv-login-modal/xv-login-modal.js",
+    "components/xv-modal/xv-modal.js",
+    "components/xv-notification/xv-notification.js",
+    "components/xv-number-input/xv-number-input.js",
+    "components/xv-overflow-menu/xv-overflow-menu.js",
+    "components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js",
+    "components/xv-progress-indicator/xv-progress-indicator.js",
+    "components/xv-progress-indicator/xv-progress-indicator-item/xv-progress-indicator-item.js",
+    "components/xv-table/xv-table.js",
+    "components/xv-table/xv-table-cell/xv-table-cell.js",
+    "components/xv-table/xv-table-expand/xv-table-expand.js",
+    "components/xv-table/xv-table-row/xv-table-row.js",
+    "components/xv-tabs/xv-tabs.js",
+    "components/xv-tabs/xv-tab/xv-tab.js",
+    "components/xv-tag/xv-tag.js",
+    "components/xv-text-input/xv-text-input.js",
+    "components/xv-toggle-tip/xv-toggle-tip.js",
+    "components/xv-tooltip/xv-tooltip.js"
+  ],
+  "compiler": {
+    "name": "@stencil/core",
+    "version": "4.32.0",
+    "typescriptVersion": "5.5.4"
+  },
+  "collections": [],
+  "bundles": []
+}

package/dist/collection/components/xv-accordion/xv-accordion.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/xv-accordion/xv-accordion.js

@@ -0,0 +1,163 @@
+import { Host, h } from "@stencil/core";
+import { uidGenerator } from "../../utils/utils";
+export class XvAccordion {
+    constructor() {
+        this.multiple = false;
+        this.xvId = uidGenerator();
+        this.opened = new Set();
+    }
+    async toggleItem(value) {
+        if (this.opened.has(value)) {
+            this.opened.delete(value);
+        }
+        else {
+            if (!this.multiple)
+                this.opened.clear();
+            this.value = value;
+            this.opened.add(this.value);
+        }
+        this.accordionChange.emit({ opened: this.opened, id: this.xvId });
+        return { opened: this.opened, id: this.xvId };
+    }
+    componentWillLoad() {
+        if (this.value) {
+            return this.toggleItem(this.value);
+        }
+    }
+    render() {
+        return (h(Host, { key: '66ebac5125b765878f7e21225f60f254bde5e07f', class: "xv-accordion", "data-id": this.xvId }, h("slot", { key: 'b5081e54395f14436a7f066fee6e75a48c9b797f' })));
+    }
+    static get is() { return "xv-accordion-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-accordion.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-accordion.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "multiple": {
+                "type": "boolean",
+                "attribute": "multiple",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "xvId": {
+                "type": "string",
+                "attribute": "xv-id",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "uidGenerator()"
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": true,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "opened": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "accordionChange",
+                "name": "accordionChange",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "{ opened: Set<string>, id: string }",
+                    "resolved": "{ opened: Set<string>; id: string; }",
+                    "references": {
+                        "Set": {
+                            "location": "global",
+                            "id": "global::Set"
+                        }
+                    }
+                }
+            }];
+    }
+    static get methods() {
+        return {
+            "toggleItem": {
+                "complexType": {
+                    "signature": "(value: string) => Promise<{ opened: Set<string>; id: string; }>",
+                    "parameters": [{
+                            "name": "value",
+                            "type": "string",
+                            "docs": ""
+                        }],
+                    "references": {
+                        "Promise": {
+                            "location": "global",
+                            "id": "global::Promise"
+                        },
+                        "Set": {
+                            "location": "global",
+                            "id": "global::Set"
+                        }
+                    },
+                    "return": "Promise<{ opened: Set<string>; id: string; }>"
+                },
+                "docs": {
+                    "text": "",
+                    "tags": []
+                }
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-accordion.js.map

package/dist/collection/components/xv-accordion/xv-accordion.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-accordion.js","sourceRoot":"","sources":["../../../src/components/xv-accordion/xv-accordion.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,KAAK,EAAgB,MAAM,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAC7F,OAAO,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAOjD,MAAM,OAAO,WAAW;IALxB;QAMU,aAAQ,GAAY,KAAK,CAAC;QAC1B,SAAI,GAAW,YAAY,EAAE,CAAC;QAE7B,WAAM,GAAgB,IAAI,GAAG,EAAE,CAAC;KA+B1C;IA3BC,KAAK,CAAC,UAAU,CAAC,KAAa;QAC5B,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC,CAAC;QAC5B,CAAC;aAAM,CAAC;YACN,IAAI,CAAC,IAAI,CAAC,QAAQ;gBAAE,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE,CAAC;YACxC,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;YACnB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC9B,CAAC;QAED,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC,CAAC;QAElE,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;IAChD,CAAC;IAED,iBAAiB;QACf,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QACrC,CAAC;IACH,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAC,cAAc,aAAU,IAAI,CAAC,IAAI;YAC3C,8DAAQ,CACH,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Event, EventEmitter, Method, State, Prop } from '@stencil/core';\nimport { uidGenerator } from '../../utils/utils';\n\n@Component({\n  tag: 'xv-accordion-v2',\n  styleUrl: 'xv-accordion.scss',\n  shadow: true,\n})\nexport class XvAccordion {\n  @Prop() multiple: boolean = false;\n  @Prop() xvId: string = uidGenerator();\n  @Prop({ mutable: true }) value: string;\n  @State() opened: Set<string> = new Set();\n  @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\n\n  @Method()\n  async toggleItem(value: string) {\n    if (this.opened.has(value)) {\n      this.opened.delete(value);\n    } else {\n      if (!this.multiple) this.opened.clear();\n      this.value = value;\n      this.opened.add(this.value);\n    }\n\n    this.accordionChange.emit({ opened: this.opened, id: this.xvId });\n\n    return { opened: this.opened, id: this.xvId };\n  }\n\n  componentWillLoad() {\n    if (this.value) {\n      return this.toggleItem(this.value);\n    }\n  }\n\n  render() {\n    return (\n      <Host class=\"xv-accordion\" data-id={this.xvId}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-accordion-item/xv-accordion-item.css

@@ -0,0 +1,68 @@
+:host {
+  border-top: 1px solid var(--border-subtle-01);
+  display: flex;
+  flex-direction: column;
+  font-family: var(--ff-body, inherit);
+}
+
+:host(.disabled) .label {
+  color: var(--text-disabled);
+}
+:host(.disabled) .label:hover {
+  cursor: initial;
+  background-color: transparent;
+}
+
+.label {
+  padding: 14px 16px;
+  display: inline-flex;
+  align-items: center;
+  column-gap: 20px;
+  justify-content: space-between;
+  text-align: left;
+  color: var(--text-primary);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: 0.16px;
+  background-color: transparent;
+  transition: background-color 200ms ease-in-out;
+}
+.label > span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 1;
+  -webkit-box-orient: vertical;
+}
+.label:hover {
+  cursor: pointer;
+  background-color: var(--layer-hover-01);
+}
+.label:after {
+  content: "";
+  border: solid black;
+  border-width: 0 2px 2px 0;
+  display: inline-block;
+  padding: 4.66px;
+  transition: transform 100ms ease-in-out;
+  transform: rotate(45deg);
+}
+.label.opened:after {
+  transform: rotate(-135deg);
+}
+
+.content {
+  padding: 0 16px;
+  text-align: left;
+  color: var(--text-primary);
+  font-size: 14px;
+  overflow: hidden;
+  max-height: 0;
+  transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;
+}
+.content.opened {
+  padding: 14px 16px;
+  max-height: 500px;
+}

package/dist/collection/components/xv-accordion-item/xv-accordion-item.js

@@ -0,0 +1,132 @@
+import { Host, h } from "@stencil/core";
+export class XvAccordionItem {
+    constructor() {
+        this.disabled = false;
+        this.isOpen = false;
+    }
+    handleAccordionChange(event) {
+        var _a;
+        const parentAccordionId = (_a = this.el.closest('[data-id]')) === null || _a === void 0 ? void 0 : _a.getAttribute('data-id');
+        if (event.detail.id !== parentAccordionId)
+            return;
+        this.isOpen = event.detail.opened.has(this.value);
+    }
+    toggle() {
+        var _a, _b;
+        if (this.disabled)
+            return;
+        this.isOpen = !this.isOpen;
+        (_b = (_a = this.el.closest('xv-accordion-v2')) === null || _a === void 0 ? void 0 : _a.toggleItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.value);
+    }
+    render() {
+        return (h(Host, { key: '7d536c27a29b4f1e5a54ffb38c485102a4b22301', class: `${this.disabled ? 'disabled' : ''}` }, h("label", { key: 'bd35f139baa3fa9449e4391acb26ceffbeee61c4', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle.bind(this) }, h("span", { key: '4b2a948ec962246557b480308e1a7df9712806a1' }, this.label)), h("div", { key: 'b88b7c9c9c724b6d6468c59df391c7ec41c99e97', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, h("slot", { key: '61cb22aabcf159a31bab0a6cca01dc5478a580f1' }))));
+    }
+    static get is() { return "xv-accordion-v2-item"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-accordion-item.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-accordion-item.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "disabled": {
+                "type": "boolean",
+                "attribute": "disabled",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "attribute": "label",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "attribute": "value",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false
+            }
+        };
+    }
+    static get states() {
+        return {
+            "isOpen": {}
+        };
+    }
+    static get events() {
+        return [{
+                "method": "itemToggle",
+                "name": "itemToggle",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "complexType": {
+                    "original": "any",
+                    "resolved": "any",
+                    "references": {}
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+    static get listeners() {
+        return [{
+                "name": "accordionChange",
+                "method": "handleAccordionChange",
+                "target": "body",
+                "capture": false,
+                "passive": false
+            }];
+    }
+}
+//# sourceMappingURL=xv-accordion-item.js.map

package/dist/collection/components/xv-accordion-item/xv-accordion-item.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-accordion-item.js","sourceRoot":"","sources":["../../../src/components/xv-accordion-item/xv-accordion-item.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAOtG,MAAM,OAAO,eAAe;IAL5B;QAOU,aAAQ,GAAY,KAAK,CAAC;QAGzB,WAAM,GAAY,KAAK,CAAC;KA4BlC;IAxBC,qBAAqB,CAAC,KAAuD;;QAC3E,MAAM,iBAAiB,GAAG,MAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,0CAAE,YAAY,CAAC,SAAS,CAAC,CAAC;QAChF,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,iBAAiB;YAAE,OAAO;QAClD,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IACpD,CAAC;IAED,MAAM;;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM,CAAC;QAC3B,MAAA,MAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,0CAAE,UAAU,mDAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/D,CAAC;IAED,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,EAAE,EAAE;YAC/C,8DAAO,KAAK,EAAE,SAAS,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC;gBACzF,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACnB;YACR,4DAAK,KAAK,EAAE,WAAW,IAAI,CAAC,MAAM,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,QAAQ,EAAE;gBACxD,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\n\n@Component({\n  tag: 'xv-accordion-v2-item',\n  styleUrl: 'xv-accordion-item.scss',\n  shadow: true,\n})\nexport class XvAccordionItem {\n  @Element() el: HTMLElement;\n  @Prop() disabled: boolean = false;\n  @Prop() label: string;\n  @Prop() value: string;\n  @State() isOpen: boolean = false;\n  @Event() itemToggle: EventEmitter;\n\n  @Listen('accordionChange', { target: 'body' })\n  handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\n    const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\n    if (event.detail.id !== parentAccordionId) return;\n    this.isOpen = event.detail.opened.has(this.value);\n  }\n\n  toggle() {\n    if (this.disabled) return;\n    this.isOpen = !this.isOpen;\n    this.el.closest('xv-accordion-v2')?.toggleItem?.(this.value);\n  }\n\n  render() {\n    return (\n      <Host class={`${this.disabled ? 'disabled' : ''}`}>\n        <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\n          <span>{this.label}</span>\n        </label>\n        <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.css

@@ -0,0 +1,3 @@
+:host {
+  display: block;
+}

package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js

@@ -0,0 +1,19 @@
+import { Host, h } from "@stencil/core";
+export class XvBreadcrumbs {
+    render() {
+        return (h(Host, { key: '5af11f456cfed9e3a853fa3ccdcf12d2d5d5e49f' }, h("slot", { key: 'ecef5ef84a97ceefda5cbcb54e23056e2adbdf99' })));
+    }
+    static get is() { return "xv-breadcrumbs-v2"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-breadcrumbs.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-breadcrumbs.css"]
+        };
+    }
+}
+//# sourceMappingURL=xv-breadcrumbs.js.map

package/dist/collection/components/xv-breadcrumbs/xv-breadcrumbs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-breadcrumbs.js","sourceRoot":"","sources":["../../../src/components/xv-breadcrumbs/xv-breadcrumbs.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,8DAAa,CACR,CACR,CAAC;IACJ,CAAC;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h } from '@stencil/core';\n\n@Component({\n  tag: 'xv-breadcrumbs-v2',\n  styleUrl: 'xv-breadcrumbs.scss',\n  shadow: true,\n})\nexport class XvBreadcrumbs {\n  render() {\n    return (\n      <Host>\n        <slot></slot>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/xv-button/xv-button-v2.css

@@ -0,0 +1,173 @@
+:host {
+  display: inline-block;
+}
+
+:host([block]) {
+  display: block;
+  width: 100%;
+}
+
+.xv-button {
+  all: unset;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  border-radius: 3px;
+  font-size: var(--fz-md);
+  font-family: var(--ff-body, Tahoma);
+  font-style: normal;
+  font-weight: 700;
+  line-height: 128.571%;
+  letter-spacing: 0.16px;
+  cursor: pointer;
+  position: relative;
+  transition: background 0.2s, color 0.2s, border-color 0.2s;
+  user-select: none;
+  width: 100%;
+}
+.xv-button:focus-visible {
+  outline: 2px solid var(--focus);
+  outline-offset: 2px;
+}
+.xv-button--xs {
+  --xv-button-icon-size: 16px;
+  padding: var(--spacing-02);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--sm {
+  --xv-button-icon-size: 32px;
+  padding: var(--spacing-03);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--md {
+  --xv-button-icon-size: 40px;
+  padding: var(--spacing-04);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--lg {
+  --xv-button-icon-size: 48px;
+  padding: var(--spacing-05);
+  height: var(--xv-button-icon-size);
+}
+.xv-button--xl {
+  --xv-button-icon-size: 60px;
+  font-size: 1.1em;
+  padding: var(--spacing-06);
+  height: auto;
+}
+.xv-button--primary {
+  background-color: var(--button-primary);
+  color: var(--text-on-color);
+}
+.xv-button--primary:hover {
+  background-color: var(--button-primary-hover);
+}
+.xv-button--primary:active {
+  background-color: var(--button-primary-active);
+}
+.xv-button--accent {
+  background-color: var(--button-accent);
+  color: var(--text-on-color);
+}
+.xv-button--accent:hover {
+  background-color: var(--button-accent-hover);
+}
+.xv-button--accent:active {
+  background-color: var(--button-accent-active);
+}
+.xv-button--secondary {
+  background-color: var(--button-secondary);
+  border: 1px solid var(--border-subtle-01);
+}
+.xv-button--secondary:hover {
+  background-color: var(--button-secondary-hover);
+}
+.xv-button--secondary:active {
+  background-color: var(--button-secondary-active);
+}
+.xv-button--danger {
+  background: var(--support-error);
+  color: white;
+}
+.xv-button--danger:hover {
+  background-color: #ba1b23;
+}
+.xv-button--danger:active {
+  background-color: #750e13;
+}
+.xv-button--danger:disabled {
+  background-color: var(--button-disabled);
+  border-color: transparent;
+  color: var(--text-on-color-disabled, #8B8B8B);
+}
+.xv-button--tertiary {
+  background-color: transparent;
+  border: 1px solid var(--button-tertiary);
+}
+.xv-button--tertiary:hover {
+  background-color: var(--button-tertiary-hover);
+}
+.xv-button--tertiary:active {
+  background-color: var(--button-tertiary-active);
+}
+.xv-button--tertiary:disabled {
+  color: var(--text-disabled);
+  border-color: var(--button-disabled, #D1D1D1);
+  background-color: transparent;
+}
+.xv-button--ghost {
+  background-color: transparent;
+  color: var(--text-primary);
+}
+.xv-button--ghost:hover {
+  background-color: transparent;
+}
+.xv-button--ghost:active {
+  background-color: rgba(139, 139, 139, 0.5);
+}
+.xv-button--ghost:disabled {
+  color: var(--text-disabled);
+  border-color: transparent;
+  background-color: transparent;
+}
+.xv-button--primary:disabled, .xv-button--accent:disabled, .xv-button--secondary:disabled, .xv-button--danger:disabled {
+  border-color: var(--border-subtle-01, #D1D1D1);
+  background-color: var(--button-disabled, #D1D1D1);
+  color: var(--text-on-color-disabled, #8B8B8B);
+}
+.xv-button--disabled {
+  cursor: not-allowed;
+}
+.xv-button--loading {
+  pointer-events: none;
+  opacity: 0.8;
+}
+.xv-button__label {
+  display: inline-flex;
+  align-items: center;
+}
+.xv-button__loader {
+  position: absolute;
+  left: 50%;
+  transform: translateX(-50%);
+}
+.xv-button__icon {
+  display: inline-flex;
+  align-items: center;
+}
+.xv-button--icon-left .xv-button__icon--left {
+  margin-inline-end: var(--spacing-05);
+}
+.xv-button--icon-right .xv-button__icon--right {
+  margin-inline-start: var(--spacing-05);
+}
+.xv-button--icon-only {
+  padding: 0;
+  width: var(--xv-button-icon-size, 40px);
+  height: var(--xv-button-icon-size, 40px);
+  justify-content: center;
+}
+.xv-button--icon-only .xv-button__icon {
+  margin: 0;
+}