xv-webcomponents 0.1.10 → 0.1.11

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';\r\nimport { uidGenerator } from '../../utils/utils';\r\n\r\n@Component({\r\n  tag: 'xv-accordion',\r\n  styleUrl: 'xv-accordion.scss',\r\n  shadow: true,\r\n})\r\nexport class XvAccordion {\r\n  @Prop() multiple: boolean = false;\r\n  @Prop() xvId: string = uidGenerator();\r\n  @Prop({ mutable: true }) value: string;\r\n  @State() opened: Set<string> = new Set();\r\n  @Event() accordionChange: EventEmitter<{ opened: Set<string>, id: string }>;\r\n\r\n  @Method()\r\n  async toggleItem(value: string) {\r\n    if (this.opened.has(value)) {\r\n      this.opened.delete(value);\r\n    } else {\r\n      if (!this.multiple) this.opened.clear();\r\n      this.value = value;\r\n      this.opened.add(this.value);\r\n    }\r\n\r\n    this.accordionChange.emit({ opened: this.opened, id: this.xvId });\r\n\r\n    return { opened: this.opened, id: this.xvId };\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (this.value) {\r\n      return this.toggleItem(this.value);\r\n    }\r\n  }\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"xv-accordion\" data-id={this.xvId}>\r\n        <slot />\r\n      </Host>\r\n    );\r\n  }\r\n}\r\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')) === 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

@@ -0,0 +1,116 @@
+import { h, Host } from "@stencil/core";
+export class XvButton {
+    constructor() {
+        /** Button label */
+        this.label = '';
+        /** Variant */
+        this.variant = 'primary';
+        /** Disabled state */
+        this.disabled = false;
+        /** Handle click only if not disabled */
+        this.handleClick = () => {
+            if (this.disabled) {
+                return;
+            }
+            this.buttonClick.emit();
+        };
+    }
+    render() {
+        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": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Button label"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "label",
+                "reflect": false,
+                "defaultValue": "''"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'accent' | 'primary' | 'secondary' | 'tertiary' | 'ghost'",
+                    "resolved": "\"accent\" | \"ghost\" | \"primary\" | \"secondary\" | \"tertiary\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Variant"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "variant",
+                "reflect": false,
+                "defaultValue": "'primary'"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Disabled state"
+                },
+                "getter": false,
+                "setter": false,
+                "attribute": "disabled",
+                "reflect": false,
+                "defaultValue": "false"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "buttonClick",
+                "name": "buttonClick",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emits when the button is clicked"
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=xv-button.js.map

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

@@ -0,0 +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,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;
+}