xv-webcomponents 0.1.9 → 0.1.11

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')) === null || _a === void 0 ? void 0 : _a.toggleItem) === null || _b === void 0 ? void 0 : _b.call(_a, this.value);
+    }
+    render() {
+        return (h(Host, { key: '8b245355a1f6782ca3fd1669b752499150da5f17', class: `${this.disabled ? 'disabled' : ''}` }, h("label", { key: '999fc39c0e58f6805b3d58f5f36e0f36a18ab888', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle.bind(this) }, h("span", { key: '0f3f72f620001f6ea19de0532deab6991b67c93b' }, this.label)), h("div", { key: 'fc27c4239c8b51690627678983882b65c4d94f4a', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, h("slot", { key: '6643838a58f16d568654f5dc366b812b446f9625' }))));
+    }
+    static get is() { return "xv-accordion-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",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            },
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false
+            },
+            "value": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "value",
+                "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,cAAc,CAAC,0CAAE,UAAU,mDAAG,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5D,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';\r\n\r\n@Component({\r\n  tag: 'xv-accordion-item',\r\n  styleUrl: 'xv-accordion-item.scss',\r\n  shadow: true,\r\n})\r\nexport class XvAccordionItem {\r\n  @Element() el: HTMLElement;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop() label: string;\r\n  @Prop() value: string;\r\n  @State() isOpen: boolean = false;\r\n  @Event() itemToggle: EventEmitter;\r\n\r\n  @Listen('accordionChange', { target: 'body' })\r\n  handleAccordionChange(event: CustomEvent<{ opened: Set<string>, id: string }>) {\r\n    const parentAccordionId = this.el.closest('[data-id]')?.getAttribute('data-id');\r\n    if (event.detail.id !== parentAccordionId) return;\r\n    this.isOpen = event.detail.opened.has(this.value);\r\n  }\r\n\r\n  toggle() {\r\n    if (this.disabled) return;\r\n    this.isOpen = !this.isOpen;\r\n    this.el.closest('xv-accordion')?.toggleItem?.(this.value);\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class={`${this.disabled ? 'disabled' : ''}`}>\r\n        <label class={`label ${this.isOpen ? 'opened' : 'closed'}`} onClick={this.toggle.bind(this)}>\r\n          <span>{this.label}</span>\r\n        </label>\r\n        <div class={`content ${this.isOpen ? 'opened' : 'closed'}`}>\r\n          <slot />\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\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: '744f6f063f285249e341ba9fdb4ced51cc9c8bc4' }, h("slot", { key: 'd886b4d5e2bca0ae904b4f36fa6eff0232a2a375' })));
+    }
+    static get is() { return "xv-breadcrumbs"; }
+    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';\r\n\r\n@Component({\r\n  tag: 'xv-breadcrumbs',\r\n  styleUrl: 'xv-breadcrumbs.scss',\r\n  shadow: true,\r\n})\r\nexport class XvBreadcrumbs {\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <slot></slot>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,150 @@
+@charset "UTF-8";
+:host {
+  --focus-border-width: 2px;
+  --focus-border-style: solid;
+  --button-ghost: tarnsparent;
+  --text-disabled-opacity: 0.25;
+  --button-border-radius: 3px;
+  --button-border-width: 1px;
+  --button-border-style: solid;
+  --button-border-color-accent: #97BF0D;
+  --button-border-color-primary: #273435;
+  --button-border-color-secondary: #D1D1D1;
+  --button-border-color-ghost: tarnsparent;
+  --button-ghost-hover: tarnsparent;
+  --button-ghost-active: rgba(139, 139, 139, 0.5);
+  --button-accent-disabled: #D1D1D1;
+  --button-primary-disabled: #D1D1D1;
+  --button-secondary-disabled: #D1D1D1;
+  --button-tertiary-disabled: tarnsparent;
+  --button-ghost-disabled: tarnsparent;
+}
+:host button {
+  font-family: inherit;
+  font-size: 16px;
+  font-weight: 700;
+  padding: 0 20px;
+  height: 40px;
+  line-height: 40px;
+  cursor: pointer;
+  box-sizing: border-box;
+  transition: background-color 0.2s ease-in-out, filter 0.2s ease-in-out, transform 0.1s ease-in-out, border-color 0.2s ease-in-out, border-width 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+
+.xv-button {
+  /* ✅ Accent Button */
+  /* ✅ Primary Button */
+  /* ✅ Secondary Button */
+  /* ✅ Tertiary Button */
+  /* ✅ Ghost Button */
+}
+.xv-button.accent {
+  background-color: var(--button-accent);
+  color: var(--text-on-color);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);
+  border-radius: var(--button-border-radius);
+}
+.xv-button.accent:hover {
+  background-color: var(--button-accent-hover);
+}
+.xv-button.accent:active {
+  background-color: var(--button-accent-active);
+  color: var(--text-on-color);
+}
+.xv-button.accent:focus {
+  outline: none;
+  border: var(--focus-border-width) var(--focus-border-style) var(--focus);
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+.xv-button.accent:disabled {
+  background-color: var(--button-accent-disabled);
+  color: var(--text-on-color-disabled);
+  border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);
+}
+.xv-button.primary {
+  background-color: var(--button-primary);
+  color: var(--text-on-color);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);
+  border-radius: var(--button-border-radius);
+}
+.xv-button.primary:hover {
+  background-color: var(--button-primary-hover);
+}
+.xv-button.primary:active {
+  background-color: var(--button-primary-active);
+}
+.xv-button.primary:focus {
+  outline: none;
+  border: var(--focus-border-width) var(--focus-border-style) var(--focus);
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+.xv-button.primary:disabled {
+  background-color: var(--button-primary-disabled);
+  color: var(--text-on-color-disabled);
+  border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);
+}
+.xv-button.secondary {
+  background-color: var(--button-secondary);
+  color: var(--text-primary);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);
+  border-radius: var(--button-border-radius);
+}
+.xv-button.secondary:hover {
+  background-color: var(--button-secondary-hover);
+}
+.xv-button.secondary:active {
+  background-color: var(--button-secondary-active);
+}
+.xv-button.secondary:focus {
+  outline: none;
+  border: var(--focus-border-width) var(--focus-border-style) var(--focus);
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+.xv-button.secondary:disabled {
+  background-color: var(--button-secondary-disabled);
+  color: var(--text-on-color-disabled);
+}
+.xv-button.tertiary {
+  background-color: var(--button-ghost);
+  color: var(--text-primary);
+  border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);
+  border-radius: var(--button-border-radius);
+}
+.xv-button.tertiary:hover {
+  background-color: var(--button-tertiary-hover);
+}
+.xv-button.tertiary:active {
+  background-color: var(--button-tertiary-active);
+}
+.xv-button.tertiary:focus {
+  outline: none;
+  border: var(--focus-border-width) var(--focus-border-style) var(--focus);
+  transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
+}
+.xv-button.tertiary:disabled {
+  background-color: var(--button-tertiary-disabled);
+  color: var(--text-disabled);
+  opacity: var(--text-disabled-opacity);
+}
+.xv-button.ghost {
+  background-color: var(--button-ghost);
+  color: var(--text-primary);
+  border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);
+  border-radius: var(--button-border-radius);
+}
+.xv-button.ghost:hover {
+  background-color: var(--button-ghost-hover);
+}
+.xv-button.ghost:active {
+  background-color: var(--button-ghost-active);
+}
+.xv-button.ghost:focus {
+  outline: none;
+  border: var(--focus-border-width) var(--focus-border-style) var(--focus);
+  transition: border-color 0.2s ease-in-out;
+}
+.xv-button.ghost:disabled {
+  background-color: var(--button-ghost-disabled);
+  color: var(--text-disabled);
+  opacity: var(--text-disabled-opacity);
+}

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

@@ -1,4 +1,4 @@
-import { h } from "@stencil/core";
+import { h, Host } from "@stencil/core";
 export class XvButton {
     constructor() {
         /** Button label */
@@ -15,23 +15,21 @@ export class XvButton {
             this.buttonClick.emit();
         };
     }
-    applyGlobalStyles() {
-        var _a;
-        const globalStyle = document.getElementById("brand-style");
-        if (globalStyle) {
-            const styleClone = document.createElement("style");
-            styleClone.innerHTML = `@import url('${globalStyle.href}');`;
-            (_a = this.el.shadowRoot) === null || _a === void 0 ? void 0 : _a.appendChild(styleClone);
-        }
-    }
-    componentWillLoad() {
-        this.applyGlobalStyles();
-    }
     render() {
-        return (h("button", { key: 'd8e7f81698a5d28c2fb75360e8752a0547887cce', class: `xv-button ${this.variant}`, disabled: this.disabled, onClick: this.handleClick }, this.label));
+        return (h(Host, { key: '5f34d72138394e7b99fd2df0307baf92f7c9d1ca' }, h("button", { key: 'de80a89aa9daf5fcf4cca25efc2188062547a3d1', class: `xv-button ${this.variant}`, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'c9223d17a19e0c7289f7598256ed324f4c338d19', name: "icon-left" }), h("slot", { key: 'fb264cb3bef9c91b9b9a97ceab270ae056b1795b' }, this.label), h("slot", { key: 'b837dfb923f982af430921a134595ab63ab5bfee', name: "icon-right" }))));
     }
     static get is() { return "xv-button-v2"; }
     static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-button-v2.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-button-v2.css"]
+        };
+    }
     static get properties() {
         return {
             "label": {
@@ -114,6 +112,5 @@ export class XvButton {
                 }
             }];
     }
-    static get elementRef() { return "el"; }
 }
 //# sourceMappingURL=xv-button.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"xv-button.js","sourceRoot":"","sources":["../../../src/components/xv-button/xv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAOjF,MAAM,OAAO,QAAQ;IAJrB;QAOE,mBAAmB;QACX,UAAK,GAAW,EAAE,CAAC;QAE3B,cAAc;QACN,YAAO,GAA8D,SAAS,CAAC;QAEvF,qBAAqB;QACb,aAAQ,GAAY,KAAK,CAAC;QAelC,wCAAwC;QAChC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;KAiBH;IAhCS,iBAAiB;;QACrB,MAAM,WAAW,GAAG,QAAQ,CAAC,cAAc,CAAC,aAAa,CAAoB,CAAC;QAC9E,IAAI,WAAW,EAAE,CAAC;YAChB,MAAM,UAAU,GAAG,QAAQ,CAAC,aAAa,CAAC,OAAO,CAAC,CAAC;YACnD,UAAU,CAAC,SAAS,GAAG,gBAAgB,WAAW,CAAC,IAAI,KAAK,CAAC;YAC7D,MAAA,IAAI,CAAC,EAAE,CAAC,UAAU,0CAAE,WAAW,CAAC,UAAU,CAAC,CAAC;QAChD,CAAC;IACH,CAAC;IAUD,iBAAiB;QACf,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;IAED,MAAM;QACJ,OAAO,CACL,+DACE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,EAAE,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,IAExB,IAAI,CAAC,KAAK,CACJ,CACV,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Element } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n  tag: 'xv-button-v2',\r\n  shadow: true,\r\n})\r\nexport class XvButton {\r\n  @Element() el!: HTMLElement;\r\n\r\n  /** Button label */\r\n  @Prop() label: string = '';\r\n\r\n  /** Variant */\r\n  @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n  /** Disabled state */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /** Emits when the button is clicked */\r\n  @Event() buttonClick!: EventEmitter<void>;\r\n\r\n\r\n  private applyGlobalStyles() {\r\n      const globalStyle = document.getElementById(\"brand-style\") as HTMLLinkElement;\r\n      if (globalStyle) {\r\n        const styleClone = document.createElement(\"style\");\r\n        styleClone.innerHTML = `@import url('${globalStyle.href}');`;\r\n        this.el.shadowRoot?.appendChild(styleClone);\r\n    }\r\n  }\r\n\r\n  /** Handle click only if not disabled */\r\n  private handleClick = () => {\r\n    if (this.disabled) {\r\n      return;\r\n    }\r\n    this.buttonClick.emit();\r\n  };\r\n\r\n  componentWillLoad() {\r\n    this.applyGlobalStyles();\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        class={`xv-button ${this.variant}`}\r\n        disabled={this.disabled}\r\n        onClick={this.handleClick}\r\n      >\r\n        {this.label}\r\n      </button>\r\n    );\r\n  }\r\n}\r\n"]}
+{"version":3,"file":"xv-button.js","sourceRoot":"","sources":["../../../src/components/xv-button/xv-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAQ9E,MAAM,OAAO,QAAQ;IALrB;QAME,mBAAmB;QACX,UAAK,GAAW,EAAE,CAAC;QAE3B,cAAc;QACN,YAAO,GAA8D,SAAS,CAAC;QAEvF,qBAAqB;QACb,aAAQ,GAAY,KAAK,CAAC;QAKlC,wCAAwC;QAChC,gBAAW,GAAG,GAAG,EAAE;YACzB,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAClB,OAAO;YACT,CAAC;YACD,IAAI,CAAC,WAAW,CAAC,IAAI,EAAE,CAAC;QAC1B,CAAC,CAAC;KAoBH;IAnBC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI;YACH,+DACE,KAAK,EAAE,aAAa,IAAI,CAAC,OAAO,EAAE,EAClC,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW;gBAEzB,6DAAM,IAAI,EAAC,WAAW,GAAQ;gBAE9B,+DACG,IAAI,CAAC,KAAK,CACN;gBAEP,6DAAM,IAAI,EAAC,YAAY,GAAQ,CACxB,CACJ,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h, Host } from '@stencil/core';\r\n\r\n\r\n@Component({\r\n  tag: 'xv-button-v2',\r\n  styleUrl: 'xv-button-v2.scss',\r\n  shadow: true,\r\n})\r\nexport class XvButton {\r\n  /** Button label */\r\n  @Prop() label: string = '';\r\n\r\n  /** Variant */\r\n  @Prop() variant: 'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost' = 'primary';\r\n\r\n  /** Disabled state */\r\n  @Prop() disabled: boolean = false;\r\n\r\n  /** Emits when the button is clicked */\r\n  @Event() buttonClick!: EventEmitter<void>;\r\n\r\n  /** Handle click only if not disabled */\r\n  private handleClick = () => {\r\n    if (this.disabled) {\r\n      return;\r\n    }\r\n    this.buttonClick.emit();\r\n  };\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <button\r\n          class={`xv-button ${this.variant}`}\r\n          disabled={this.disabled}\r\n          onClick={this.handleClick}\r\n        >\r\n          <slot name=\"icon-left\"></slot>\r\n\r\n          <slot>\r\n            {this.label}\r\n          </slot>\r\n\r\n          <slot name=\"icon-right\"></slot>\r\n        </button>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -0,0 +1,63 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  border: 1px solid var(--border-subtle-00);
+  background: var(--layer-layer-02);
+  box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.3);
+  font-family: var(--ff-body, inherit);
+  overflow: visible !important;
+}
+
+:host(.xv-card_vertical) {
+  width: 100% !important;
+}
+
+:host(.xv-card_horizontal) {
+  flex-direction: row;
+  display: flex;
+  width: max-content;
+}
+:host(.xv-card_horizontal) .xv-card_media__content, :host(.xv-card_horizontal) .xv-card_media ::slotted([slot=media]) {
+  min-height: 100%;
+  max-height: 100%;
+  max-width: 160px;
+  min-width: 160px;
+}
+
+.xv-card_content {
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+  text-align: left;
+}
+.xv-card_media__content, .xv-card_media ::slotted([slot=media]) {
+  max-width: 100%;
+  min-width: 100%;
+  min-height: 199px;
+  max-height: 199px;
+  object-fit: cover;
+  object-position: center;
+}
+.xv-card_header__content, .xv-card_header ::slotted([slot=header]) {
+  margin: 0 0 8px;
+  color: var(--text-primary);
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 24px;
+  letter-spacing: -0.6px;
+}
+.xv-card_body {
+  flex: 1;
+}
+.xv-card_body__content, .xv-card_body ::slotted([slot=body]) {
+  margin: 0 0 8px;
+  color: var(--text-secondary);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.1px;
+}

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

@@ -0,0 +1,122 @@
+import { Host, h } from "@stencil/core";
+export class XvCard {
+    constructor() {
+        this.variant = 'vertical';
+    }
+    render() {
+        return (h(Host, { key: 'c8ec1bfefb9a6cb92b316eab36d3a4e8a08e1a78', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: 'f6274c858ce8333fd2de700b8f0b20921eb7ba09', class: "xv-card_media" }, h("slot", { key: '91105c9e61b8dfe46411bf095dd196f969e9fc02', name: "media" }, this.media && h("img", { key: '2101315142f14a478bf2dd2eb72f7ce3922dfa44', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: '58c284ccd7cde840c1808aa14185eb1c70de4751', class: "xv-card_content" }, h("div", { key: 'fb72c62a0d7b5bfedb9a14b7fd8cc4750cfac434', class: "xv-card_header" }, h("slot", { key: 'a8ef5cc27eb4b691e5f8fae2544fe96ccc202fdf', name: "header" }, this.header && h("p", { key: '01fc1daadbb56f4a2f92bd704db06e08a747cd77', class: "xv-card_header__content" }, this.header))), h("div", { key: '2950f470bd305143908ba1bb170da068d6d598f6', class: "xv-card_body" }, h("slot", { key: 'ef9fe6d7daaced77c27483b66c8b01dacfc6713a', name: "body" }, this.body && h("p", { key: '8afd1196e2a45176b503c6be29fdd85ac0e93a83', class: "xv-card_body__content" }, this.header))), h("div", { key: '42e791cfadf951a1e0d99a5a500f52f1553bedfd', class: "xv-card_footer" }, h("slot", { key: 'ac81fb8b06bba6a1851afb344c325ea3a521fceb', name: "footer" }, this.footer)))));
+    }
+    static get is() { return "xv-card"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["xv-card.scss"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["xv-card.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'horizontal' | 'vertical'",
+                    "resolved": "\"horizontal\" | \"vertical\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'vertical'"
+            },
+            "media": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "media",
+                "reflect": false
+            },
+            "header": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "header",
+                "reflect": false
+            },
+            "body": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "body",
+                "reflect": false
+            },
+            "footer": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": ""
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "footer",
+                "reflect": false
+            }
+        };
+    }
+}
+//# sourceMappingURL=xv-card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"xv-card.js","sourceRoot":"","sources":["../../../src/components/xv-card/xv-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOzD,MAAM,OAAO,MAAM;IALnB;QAMU,YAAO,GAA8B,UAAU,CAAC;KAgCzD;IA3BC,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,mBAAmB,IAAI,CAAC,OAAO,EAAE,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO;YAChE,4DAAK,KAAK,EAAC,eAAe;gBACxB,6DAAM,IAAI,EAAC,OAAO,IACf,IAAI,CAAC,KAAK,IAAI,4DAAK,KAAK,EAAC,wBAAwB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,GAAI,CACnF,CACH;YAEN,4DAAK,KAAK,EAAC,iBAAiB;gBAC1B,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,MAAM,IAAI,0DAAG,KAAK,EAAC,yBAAyB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC/D,CACH;gBACN,4DAAK,KAAK,EAAC,cAAc;oBACvB,6DAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,0DAAG,KAAK,EAAC,uBAAuB,IAAE,IAAI,CAAC,MAAM,CAAK,CAC3D,CACH;gBACN,4DAAK,KAAK,EAAC,gBAAgB;oBACzB,6DAAM,IAAI,EAAC,QAAQ,IAAE,IAAI,CAAC,MAAM,CAAQ,CACpC,CACF,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-card',\r\n  styleUrl: 'xv-card.scss',\r\n  shadow: true,\r\n})\r\nexport class XvCard {\r\n  @Prop() variant: 'horizontal' | 'vertical' = 'vertical';\r\n  @Prop() media: string;\r\n  @Prop() header: string;\r\n  @Prop() body: string;\r\n  @Prop() footer: string;\r\n  render() {\r\n    return (\r\n      <Host class={`xv-card xv-card_${this.variant}`} part={this.variant}>\r\n        <div class=\"xv-card_media\">\r\n          <slot name=\"media\">\r\n            {this.media && <img class=\"xv-card_media__content\" src={this.media} alt={this.header} />}\r\n          </slot>\r\n        </div>\r\n\r\n        <div class=\"xv-card_content\">\r\n          <div class=\"xv-card_header\">\r\n            <slot name=\"header\">\r\n              {this.header && <p class=\"xv-card_header__content\">{this.header}</p>}\r\n            </slot>\r\n          </div>\r\n          <div class=\"xv-card_body\">\r\n            <slot name=\"body\">\r\n              {this.body && <p class=\"xv-card_body__content\">{this.header}</p>}\r\n            </slot>\r\n          </div>\r\n          <div class=\"xv-card_footer\">\r\n            <slot name=\"footer\">{this.footer}</slot>\r\n          </div>\r\n        </div>\r\n      </Host>\r\n    );\r\n  }\r\n}\r\n"]}

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

@@ -13,7 +13,7 @@ export class XvCheckbox {
         this.applyGlobalStyles();
     }
     render() {
-        return (h("label", { key: 'ec72f67055064e97584c34606c997b671db5c4a6', class: "checkbox-container" }, h("input", { key: '5473f8ce3e1b85bbfc7ba2cfa56ed9dc3fc09254', type: "checkbox" }), h("span", { key: '9384407aa8a34a9c20cf46f68d508d71c3e0efa8', class: "checkmark" }), h("slot", { key: 'a3d8a7c8a242da4cdf71deddf2349c088bab4785' })));
+        return (h("label", { key: '76ab7573da75f52db73a267122eede98d03d30a0', class: "checkbox-container" }, h("input", { key: 'fe56dd9781f8ab06d32d1d986d0e04d53b7f56e5', type: "checkbox" }), h("span", { key: '2265baa2f2f06749de8dc9de91ae375178627a5b', class: "checkmark" }), h("slot", { key: '953369ee5f0f656bcc339ca3030256dbaadec4fb' })));
     }
     static get is() { return "xv-checkbox-v2"; }
     static get encapsulation() { return "shadow"; }