xv-webcomponents 0.1.42 → 0.1.43

package/dist/xv-webcomponents/index.esm.js

@@ -1,2 +1,14 @@
-export{a as format}from"./p-NvoCloOY.js";
+export { f as format } from './utils-1tk8kwKx.js';
+
+/**
+ * @fileoverview entry point for your component library
+ *
+ * This is the entry point for your component library. Use this file to export utilities,
+ * constants or data structure that accompany your components.
+ *
+ * DO NOT use this file to export your components. Instead, use the recommended approaches
+ * to consume components of this package as outlined in the `README.md`.
+ */
+//# sourceMappingURL=index.esm.js.map
+
 //# sourceMappingURL=index.esm.js.map

package/dist/xv-webcomponents/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}
+{"version":3,"file":"index.esm.js","sources":["src/index.ts"],"sourcesContent":["/**\r\n * @fileoverview entry point for your component library\r\n *\r\n * This is the entry point for your component library. Use this file to export utilities,\r\n * constants or data structure that accompany your components.\r\n *\r\n * DO NOT use this file to export your components. Instead, use the recommended approaches\r\n * to consume components of this package as outlined in the `README.md`.\r\n */\r\n\r\nexport { format } from './utils/utils';\r\nexport type * from './components.d.ts';\r\n"],"names":[],"mappings":";;AAAA;;;;;;;;AAQG"}

package/dist/xv-webcomponents/loader.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"loader.esm.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":[],"mappings":";;;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;"}
+{"version":3,"file":"loader.esm.js","sources":["@lazy-external-entrypoint?app-data=conditional"],"sourcesContent":["export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\nexport const defineCustomElements = async (win, options) => {\n  if (typeof window === 'undefined') return undefined;\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n};\n"],"names":[],"mappings":";;;AAGY,MAAC,oBAAoB,GAAG,OAAO,GAAG,EAAE,OAAO,KAAK;AAC5D,EAAE,IAAI,OAAO,MAAM,KAAK,WAAW,EAAE,OAAO,SAAS;AACrD,EAAE,MAAM,aAAa,EAAE;AACvB,EAAE,OAAO,aAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D;;;;"}

package/dist/{collection/utils/utils.js → xv-webcomponents/utils-1tk8kwKx.js}

@@ -1,7 +1,7 @@
-export function format(first, middle, last) {
+function format(first, middle, last) {
     return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
 }
-export function uidGenerator() {
+function uidGenerator() {
     return "10000000-1000-4000-8000-100000000000".replace(/[018]/g, c => (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16));
 }
 /**
@@ -10,13 +10,13 @@ export function uidGenerator() {
  * @param predicate The callback function.
  * @param [thisObject] The context object for the given callback function.
  */
-export const forEach = (a, predicate, thisObject) => Array.prototype.forEach.call(a, predicate, thisObject);
+const forEach = (a, predicate, thisObject) => Array.prototype.forEach.call(a, predicate, thisObject);
 /**
  * Debounce the current function for some delay.
  * @param func The delayed function.
  * @param [delay = 500] The time to function delay call.
  */
-export const debounce = (func, delay = 500) => {
+const debounce = (func, delay = 500) => {
     let timeoutId;
     return function (...args) {
         clearTimeout(timeoutId);
@@ -25,12 +25,12 @@ export const debounce = (func, delay = 500) => {
         }, delay);
     };
 };
-export const checkTag = (element, tag) => {
+const checkTag = (element, tag) => {
     if ((element === null || element === void 0 ? void 0 : element.tagName) !== tag)
         return undefined;
     return element;
 };
-export const setAttr = (node, name, value) => {
+const setAttr = (node, name, value) => {
     if (typeof value === 'string') {
         !node.hasAttribute(name) && node.setAttribute(name, value);
         return node;
@@ -43,4 +43,8 @@ export const setAttr = (node, name, value) => {
     }
     return node;
 };
-//# sourceMappingURL=utils.js.map
+
+export { forEach as a, format as f, setAttr as s, uidGenerator as u };
+//# sourceMappingURL=utils-1tk8kwKx.js.map
+
+//# sourceMappingURL=utils-1tk8kwKx.js.map

package/dist/xv-webcomponents/utils-1tk8kwKx.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"utils-1tk8kwKx.js","sources":["src/utils/utils.ts"],"sourcesContent":["export function format(first?: string, middle?: string, last?: string): string {\r\n  return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');\r\n}\r\n\r\nexport function uidGenerator() {\r\n  return \"10000000-1000-4000-8000-100000000000\".replace(/[018]/g, c =>\r\n    (+c ^ crypto.getRandomValues(new Uint8Array(1))[0] & 15 >> +c / 4).toString(16)\r\n  );\r\n}\r\n\r\n/**\r\n * Walks through the given DOM collection and runs the given callback.\r\n * @param a A DOM collection.\r\n * @param predicate The callback function.\r\n * @param [thisObject] The context object for the given callback function.\r\n */\r\nexport const forEach = (\r\n  a: NodeListOf<Node> | HTMLCollectionOf<Element>,\r\n  predicate: (search: Element, index?: number) => void,\r\n  thisObject?: any\r\n) => Array.prototype.forEach.call(a, predicate, thisObject);\r\n\r\n/**\r\n * Debounce the current function for some delay.\r\n * @param func The delayed function.\r\n * @param [delay = 500] The time to function delay call.\r\n */\r\nexport const debounce = (func: Function, delay: number = 500) => {\r\n  let timeoutId: ReturnType<typeof setTimeout>;\r\n  return function (...args: any[]) {\r\n    clearTimeout(timeoutId);\r\n    timeoutId = setTimeout(() => {\r\n      func.apply(this, args);\r\n    }, delay);\r\n  };\r\n};\r\n\r\nexport const checkTag = <T extends Element, G = T>(element: T, tag: string) => {\r\n  if (element?.tagName !== tag) return undefined;\r\n  return element as unknown as G;\r\n};\r\n\r\nexport const setAttr = (node: Element, name: string, value: string | boolean) => {\r\n  if (typeof value === 'string') {\r\n    !node.hasAttribute(name) && node.setAttribute(name, value);\r\n    return node;\r\n  }\r\n\r\n  if (value) {\r\n    !node.hasAttribute(name) && node.setAttribute(name, '');\r\n  } else {\r\n    node.hasAttribute(name) && node.removeAttribute(name);\r\n  }\r\n\r\n  return node;\r\n};\r\n"],"names":[],"mappings":"SAAgB,MAAM,CAAC,KAAc,EAAE,MAAe,EAAE,IAAa,EAAA;AACnE,IAAA,OAAO,CAAC,KAAK,IAAI,EAAE,KAAK,MAAM,GAAG,CAAI,CAAA,EAAA,MAAM,EAAE,GAAG,EAAE,CAAC,IAAI,IAAI,GAAG,CAAI,CAAA,EAAA,IAAI,EAAE,GAAG,EAAE,CAAC;AAChF;SAEgB,YAAY,GAAA;AAC1B,IAAA,OAAO,sCAAsC,CAAC,OAAO,CAAC,QAAQ,EAAE,CAAC,IAC/D,CAAC,CAAC,CAAC,GAAG,MAAM,CAAC,eAAe,CAAC,IAAI,UAAU,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,GAAG,EAAE,IAAI,CAAC,CAAC,GAAG,CAAC,EAAE,QAAQ,CAAC,EAAE,CAAC,CAChF;AACH;AAEA;;;;;AAKG;AACU,MAAA,OAAO,GAAG,CACrB,CAA+C,EAC/C,SAAoD,EACpD,UAAgB,KACb,KAAK,CAAC,SAAS,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC,EAAE,SAAS,EAAE,UAAU;AAE1D;;;;AAIG;AACI,MAAM,QAAQ,GAAG,CAAC,IAAc,EAAE,KAAA,GAAgB,GAAG,KAAI;AAC9D,IAAA,IAAI,SAAwC;IAC5C,OAAO,UAAU,GAAG,IAAW,EAAA;QAC7B,YAAY,CAAC,SAAS,CAAC;AACvB,QAAA,SAAS,GAAG,UAAU,CAAC,MAAK;AAC1B,YAAA,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,IAAI,CAAC;SACvB,EAAE,KAAK,CAAC;AACX,KAAC;AACH,CAAC;AAEM,MAAM,QAAQ,GAAG,CAA2B,OAAU,EAAE,GAAW,KAAI;IAC5E,IAAI,CAAA,OAAO,KAAP,IAAA,IAAA,OAAO,uBAAP,OAAO,CAAE,OAAO,MAAK,GAAG;AAAE,QAAA,OAAO,SAAS;AAC9C,IAAA,OAAO,OAAuB;AAChC,CAAC;AAEY,MAAA,OAAO,GAAG,CAAC,IAAa,EAAE,IAAY,EAAE,KAAuB,KAAI;AAC9E,IAAA,IAAI,OAAO,KAAK,KAAK,QAAQ,EAAE;AAC7B,QAAA,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,QAAA,OAAO,IAAI;;IAGb,IAAI,KAAK,EAAE;AACT,QAAA,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,YAAY,CAAC,IAAI,EAAE,EAAE,CAAC;;SAClD;AACL,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC;;AAGvD,IAAA,OAAO,IAAI;AACb;;;;"}

package/dist/xv-webcomponents/xv-accordion-v2-item.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-accordion-v2-item.entry.esm.js","sources":["src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-v2-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx"],"sourcesContent":[":host {\r\n  border-top: 1px solid var(--border-subtle-01);\r\n  display: flex;\r\n  flex-direction: column;\r\n  font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n  .label {\r\n    color: var(--text-disabled);\r\n    &:hover {\r\n      cursor: initial;\r\n      background-color: transparent;\r\n    }\r\n  }\r\n}\r\n\r\n.label {\r\n  padding: 14px 16px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  column-gap: 20px;\r\n  justify-content: space-between;\r\n  text-align: left;\r\n  color: var(--text-primary);\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  letter-spacing: 0.16px;\r\n  background-color: transparent;\r\n  transition: background-color 200ms ease-in-out;\r\n  &>span {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 1;\r\n    -webkit-box-orient: vertical;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n    background-color: var(--layer-hover-01);\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    border: solid black;\r\n    border-width: 0 2px 2px 0;\r\n    display: inline-block;\r\n    padding: 4.66px;\r\n    transition: transform 100ms ease-in-out;\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  &.opened:after {\r\n    transform: rotate(-135deg);\r\n  }\r\n}\r\n\r\n.content {\r\n  padding: 0 16px;\r\n  text-align: left;\r\n  color: var(--text-primary);\r\n  font-size: 14px;\r\n  overflow: hidden;\r\n  max-height: 0;\r\n  transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n  &.opened {\r\n    padding: 14px 16px;\r\n    max-height: 500px;\r\n  }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-accordion-v2-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-v2')?.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"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,wqCAAwqC;;MCOtrC,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAGxB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AA4BjC;AAxBC,IAAA,qBAAqB,CAAC,KAAuD,EAAA;;AAC3E,QAAA,MAAM,iBAAiB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAY,CAAC,SAAS,CAAC;AAC/E,QAAA,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,iBAAiB;YAAE;AAC3C,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGnD,MAAM,GAAA;;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;QAC1B,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,UAAU,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC;;IAG9D,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA,CAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EACzF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAE,CAAA,EAAA,EACxD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;"}

package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js

@@ -0,0 +1,36 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+
+const xvAccordionItemCss = ":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}";
+
+const XvAccordionItem = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.itemToggle = createEvent(this, "itemToggle", 7);
+        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: '9c4fda865d4bb3709dc3323bdade730e5c2feb0b', class: `${this.disabled ? 'disabled' : ''}` }, h("label", { key: '01d0752052eb1e58739354d429cd29cb8734a186', class: `label ${this.isOpen ? 'opened' : 'closed'}`, onClick: this.toggle.bind(this) }, h("span", { key: '9f524c3fc5e2a2b61d3ff64137047c9a1be21eba' }, this.label)), h("div", { key: 'd2aea57cffdb7c3b149b21467e18454f34adf111', class: `content ${this.isOpen ? 'opened' : 'closed'}` }, h("slot", { key: '3a16d6f7216f6e6af8a01c53f570c27319d128c5' }))));
+    }
+    get el() { return getElement(this); }
+};
+XvAccordionItem.style = xvAccordionItemCss;
+
+export { XvAccordionItem as xv_accordion_v2_item };
+//# sourceMappingURL=xv-accordion-v2-item.entry.esm.js.map
+
+//# sourceMappingURL=xv-accordion-v2-item.entry.js.map

package/dist/xv-webcomponents/xv-accordion-v2-item.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-accordion-v2-item.entry.esm.js","mappings":";;AAAA,MAAM,kBAAkB,GAAG,wqCAAwqC;;MCOtrC,eAAe,GAAA,MAAA;AAL5B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AAGxB,QAAA,IAAM,CAAA,MAAA,GAAY,KAAK;AA4BjC;AAxBC,IAAA,qBAAqB,CAAC,KAAuD,EAAA;;AAC3E,QAAA,MAAM,iBAAiB,GAAG,CAAA,EAAA,GAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,WAAW,CAAC,MAAE,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,YAAY,CAAC,SAAS,CAAC;AAC/E,QAAA,IAAI,KAAK,CAAC,MAAM,CAAC,EAAE,KAAK,iBAAiB;YAAE;AAC3C,QAAA,IAAI,CAAC,MAAM,GAAG,KAAK,CAAC,MAAM,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;IAGnD,MAAM,GAAA;;QACJ,IAAI,IAAI,CAAC,QAAQ;YAAE;AACnB,QAAA,IAAI,CAAC,MAAM,GAAG,CAAC,IAAI,CAAC,MAAM;QAC1B,CAAA,EAAA,GAAA,MAAA,IAAI,CAAC,EAAE,CAAC,OAAO,CAAC,iBAAiB,CAAC,MAAA,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAE,UAAU,MAAG,IAAA,IAAA,EAAA,KAAA,KAAA,CAAA,GAAA,KAAA,CAAA,GAAA,EAAA,CAAA,IAAA,CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CAAC;;IAG9D,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,qDAAC,KAAK,EAAE,CAAA,EAAG,IAAI,CAAC,QAAQ,GAAG,UAAU,GAAG,EAAE,CAAE,CAAA,EAAA,EAC/C,CAAO,CAAA,OAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,MAAA,EAAS,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAA,CAAE,EAAE,OAAO,EAAE,IAAI,CAAC,MAAM,CAAC,IAAI,CAAC,IAAI,CAAC,EAAA,EACzF,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAO,IAAI,CAAC,KAAK,CAAQ,CACnB,EACR,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAE,CAAW,QAAA,EAAA,IAAI,CAAC,MAAM,GAAG,QAAQ,GAAG,QAAQ,CAAE,CAAA,EAAA,EACxD,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ,CACD;;;;;;;;","names":[],"sources":["src/components/xv-accordion-item/xv-accordion-item.scss?tag=xv-accordion-v2-item&encapsulation=shadow","src/components/xv-accordion-item/xv-accordion-item.tsx"],"sourcesContent":[":host {\r\n  border-top: 1px solid var(--border-subtle-01);\r\n  display: flex;\r\n  flex-direction: column;\r\n  font-family: var(--ff-body, inherit);\r\n}\r\n\r\n:host(.disabled) {\r\n  .label {\r\n    color: var(--text-disabled);\r\n    &:hover {\r\n      cursor: initial;\r\n      background-color: transparent;\r\n    }\r\n  }\r\n}\r\n\r\n.label {\r\n  padding: 14px 16px;\r\n  display: inline-flex;\r\n  align-items: center;\r\n  column-gap: 20px;\r\n  justify-content: space-between;\r\n  text-align: left;\r\n  color: var(--text-primary);\r\n  font-size: 14px;\r\n  font-style: normal;\r\n  font-weight: 400;\r\n  line-height: 20px;\r\n  letter-spacing: 0.16px;\r\n  background-color: transparent;\r\n  transition: background-color 200ms ease-in-out;\r\n  &>span {\r\n    overflow: hidden;\r\n    text-overflow: ellipsis;\r\n    display: -webkit-box;\r\n    -webkit-line-clamp: 1;\r\n    -webkit-box-orient: vertical;\r\n  }\r\n\r\n  &:hover {\r\n    cursor: pointer;\r\n    background-color: var(--layer-hover-01);\r\n  }\r\n\r\n  &:after {\r\n    content: '';\r\n    border: solid black;\r\n    border-width: 0 2px 2px 0;\r\n    display: inline-block;\r\n    padding: 4.66px;\r\n    transition: transform 100ms ease-in-out;\r\n    transform: rotate(45deg);\r\n  }\r\n\r\n  &.opened:after {\r\n    transform: rotate(-135deg);\r\n  }\r\n}\r\n\r\n.content {\r\n  padding: 0 16px;\r\n  text-align: left;\r\n  color: var(--text-primary);\r\n  font-size: 14px;\r\n  overflow: hidden;\r\n  max-height: 0;\r\n  transition: max-height 300ms ease-in-out, padding 250ms ease 50ms;\r\n  &.opened {\r\n    padding: 14px 16px;\r\n    max-height: 500px;\r\n  }\r\n}\r\n","import { Component, Host, h, Element, Prop, State, Listen, Event, EventEmitter } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-accordion-v2-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-v2')?.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"],"version":3}

package/dist/xv-webcomponents/xv-accordion-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-accordion-v2.entry.esm.js","sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion-v2&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","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-v2',\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"],"names":[],"mappings":";;;AAAA,MAAM,cAAc,GAAG,sBAAsB;;MCQhC,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAI,CAAA,IAAA,GAAW,YAAY,EAAE;AAE5B,QAAA,IAAA,CAAA,MAAM,GAAgB,IAAI,GAAG,EAAE;AA+BzC;IA3BC,MAAM,UAAU,CAAC,KAAa,EAAA;QAC5B,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AAC1B,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;;aACpB;YACL,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AACvC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;YAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG7B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AAEjE,QAAA,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE;;IAG/C,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAItC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,SAAA,EAAU,IAAI,CAAC,IAAI,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;"}

package/dist/xv-webcomponents/xv-accordion-v2.entry.js

@@ -0,0 +1,41 @@
+import { r as registerInstance, a as createEvent, h, d as Host } from './index-rZAC0WRb.js';
+import { u as uidGenerator } from './utils-1tk8kwKx.js';
+
+const xvAccordionCss = ":host{display:block}";
+
+const XvAccordion = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.accordionChange = createEvent(this, "accordionChange", 7);
+        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: 'aaccdbc3f3a8c55e63873efe758996dd06d5f48c', class: "xv-accordion", "data-id": this.xvId }, h("slot", { key: 'c90363efa17df12becef5f7c6e1ca04d973ffdb5' })));
+    }
+};
+XvAccordion.style = xvAccordionCss;
+
+export { XvAccordion as xv_accordion_v2 };
+//# sourceMappingURL=xv-accordion-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-accordion-v2.entry.js.map

package/dist/xv-webcomponents/xv-accordion-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-accordion-v2.entry.esm.js","mappings":";;;AAAA,MAAM,cAAc,GAAG,sBAAsB;;MCQhC,WAAW,GAAA,MAAA;AALxB,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAMU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACzB,QAAA,IAAI,CAAA,IAAA,GAAW,YAAY,EAAE;AAE5B,QAAA,IAAA,CAAA,MAAM,GAAgB,IAAI,GAAG,EAAE;AA+BzC;IA3BC,MAAM,UAAU,CAAC,KAAa,EAAA;QAC5B,IAAI,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,KAAK,CAAC,EAAE;AAC1B,YAAA,IAAI,CAAC,MAAM,CAAC,MAAM,CAAC,KAAK,CAAC;;aACpB;YACL,IAAI,CAAC,IAAI,CAAC,QAAQ;AAAE,gBAAA,IAAI,CAAC,MAAM,CAAC,KAAK,EAAE;AACvC,YAAA,IAAI,CAAC,KAAK,GAAG,KAAK;YAClB,IAAI,CAAC,MAAM,CAAC,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;;AAG7B,QAAA,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE,CAAC;AAEjE,QAAA,OAAO,EAAE,MAAM,EAAE,IAAI,CAAC,MAAM,EAAE,EAAE,EAAE,IAAI,CAAC,IAAI,EAAE;;IAG/C,iBAAiB,GAAA;AACf,QAAA,IAAI,IAAI,CAAC,KAAK,EAAE;YACd,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC,KAAK,CAAC;;;IAItC,MAAM,GAAA;AACJ,QAAA,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,SAAA,EAAU,IAAI,CAAC,IAAI,EAAA,EAC3C,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACH;;;;;;;","names":[],"sources":["src/components/xv-accordion/xv-accordion.scss?tag=xv-accordion-v2&encapsulation=shadow","src/components/xv-accordion/xv-accordion.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","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-v2',\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"],"version":3}

package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-breadcrumbs-v2.entry.esm.js","sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\n  display: block;\n}\n","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"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCOlC,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}
+{"version":3,"file":"xv-breadcrumbs-v2.entry.esm.js","sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-breadcrumbs-v2',\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"],"names":[],"mappings":";;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCOlC,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;"}

package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js

@@ -0,0 +1,18 @@
+import { r as registerInstance, h, d as Host } from './index-rZAC0WRb.js';
+
+const xvBreadcrumbsCss = ":host{display:block}";
+
+const XvBreadcrumbs = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    render() {
+        return (h(Host, { key: '23ca775e47320ff13da9b1fedc8874b64a66a32c' }, h("slot", { key: '049d1b0f27df26c69f60e0d54d06c62231322890' })));
+    }
+};
+XvBreadcrumbs.style = xvBreadcrumbsCss;
+
+export { XvBreadcrumbs as xv_breadcrumbs_v2 };
+//# sourceMappingURL=xv-breadcrumbs-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-breadcrumbs-v2.entry.js.map

package/dist/xv-webcomponents/xv-breadcrumbs-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-breadcrumbs-v2.entry.esm.js","mappings":";;AAAA,MAAM,gBAAgB,GAAG,sBAAsB;;MCOlC,aAAa,GAAA,MAAA;;;;IACxB,MAAM,GAAA;QACJ,QACE,EAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EACH,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACR;;;;;;;","names":[],"sources":["src/components/xv-breadcrumbs/xv-breadcrumbs.scss?tag=xv-breadcrumbs-v2&encapsulation=shadow","src/components/xv-breadcrumbs/xv-breadcrumbs.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n}\r\n","import { Component, Host, h } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-breadcrumbs-v2',\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"],"version":3}

package/dist/xv-webcomponents/xv-button-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-button-v2.entry.esm.js","sources":["src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx"],"sourcesContent":[":host {\r\n  --button-font-size: 14px;\r\n  --focus-border-width: 2px;\r\n  --focus-border-style: solid;\r\n  --button-ghost: tarnsparent;\r\n  --text-disabled-opacity: 0.25;\r\n  --button-border-radius: 3px;\r\n  --button-border-width: 1px;\r\n  --button-border-style: solid;\r\n  --button-border-color-accent: #97BF0D;\r\n  --button-border-color-primary: #273435;\r\n  --button-border-color-secondary: #D1D1D1;\r\n  --button-border-color-ghost: tarnsparent;\r\n  --button-ghost-hover: tarnsparent;\r\n  --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n  --button-accent-disabled: #D1D1D1;\r\n  --button-primary-disabled: #D1D1D1;\r\n  --button-secondary-disabled: #D1D1D1;\r\n  --button-tertiary-disabled: tarnsparent;\r\n  --button-ghost-disabled: tarnsparent;\r\n  --button-padding-x: 20px;\r\n\r\n  button {\r\n    font-family: inherit;\r\n    font-size: var(--button-font-size, 14px);\r\n    font-weight: 700;\r\n    padding: 0 var(--button-padding-x);\r\n    min-height: 40px;\r\n    line-height: 40px;\r\n    cursor: pointer;\r\n    box-sizing: border-box;\r\n    transition:\r\n      background-color 0.2s ease-in-out,\r\n      filter 0.2s ease-in-out,\r\n      transform 0.1s ease-in-out,\r\n      border-color 0.2s ease-in-out,\r\n      border-width 0.2s ease-in-out,\r\n      box-shadow 0.2s ease-in-out;\r\n\r\n    &.xv-button-block {\r\n      width: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n.xv-button {\r\n  /* ✅ Accent Button */\r\n  &.accent {\r\n    background-color: var(--button-accent);\r\n    color: var(--text-on-color);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-accent-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-accent-active);\r\n      color: var(--text-on-color);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-accent-disabled);\r\n      color: var(--text-on-color-disabled);\r\n      border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n    }\r\n\r\n  }\r\n\r\n  /* ✅ Primary Button */\r\n  &.primary {\r\n    background-color: var(--button-primary);\r\n    color: var(--text-on-color);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-primary-hover)\r\n    }\r\n    &:active {\r\n      background-color: var(--button-primary-active)\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-primary-disabled);\r\n      color: var(--text-on-color-disabled);\r\n      border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n    }\r\n  }\r\n\r\n  /* ✅ Secondary Button */\r\n  &.secondary {\r\n    background-color: var(--button-secondary);\r\n    color: var(--text-primary);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-secondary-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-secondary-active);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-secondary-disabled);\r\n      color: var(--text-on-color-disabled);\r\n    }\r\n  }\r\n\r\n  /* ✅ Tertiary Button */\r\n  &.tertiary {\r\n    background-color: var(--button-ghost);\r\n    color: var(--text-primary);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-tertiary-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-tertiary-active);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-tertiary-disabled);\r\n      color: var(--text-disabled);\r\n      opacity: var(--text-disabled-opacity);\r\n    }\r\n  }\r\n\r\n  /* ✅ Ghost Button */\r\n  &.ghost {\r\n    background-color: var(--button-ghost);\r\n    color: var(--text-primary);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-ghost-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-ghost-active);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-ghost-disabled);\r\n      color: var(--text-disabled);\r\n      opacity: var(--text-disabled-opacity);\r\n    }\r\n  }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h } 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  /** Container width Button */\r\n  @Prop() block: boolean = false;\r\n\r\n  /** Button type */\r\n  @Prop() type: 'button' | 'reset' | 'submit' = 'button';\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<MouseEvent>;\r\n\r\n  /** Handle click only if not disabled */\r\n  private handleClick = (e: MouseEvent) => {\r\n    if (this.disabled) return;\r\n    this.buttonClick.emit(e);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type={this.type}\r\n        part=\"button\"\r\n        class={`xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`}\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    );\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,sgJAAsgJ;;MCQ/gJ,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGlB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAGtB,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;;AAG9C,QAAA,IAAO,CAAA,OAAA,GAA8D,SAAS;;AAG9E,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAMzB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAa,KAAI;YACtC,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1B,SAAC;AAqBF;IAnBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EACzE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,EAE9B,CACG,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CACN,EAEP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAQ,CAAA,CACxB;;;;;;;"}

package/dist/xv-webcomponents/xv-button-v2.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, a as createEvent, h } from './index-rZAC0WRb.js';
+
+const xvButtonV2Css = "@charset \"UTF-8\";:host{--button-font-size:14px;--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;--button-padding-x:20px}:host button{font-family:inherit;font-size:var(--button-font-size, 14px);font-weight:700;padding:0 var(--button-padding-x);min-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}:host button.xv-button-block{width:100%}.xv-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)}";
+
+const XvButton = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.buttonClick = createEvent(this, "buttonClick", 7);
+        /** Button label */
+        this.label = '';
+        /** Container width Button */
+        this.block = false;
+        /** Button type */
+        this.type = 'button';
+        /** Variant */
+        this.variant = 'primary';
+        /** Disabled state */
+        this.disabled = false;
+        /** Handle click only if not disabled */
+        this.handleClick = (e) => {
+            if (this.disabled)
+                return;
+            this.buttonClick.emit(e);
+        };
+    }
+    render() {
+        return (h("button", { key: 'a3129a1402cef506b6eba60f033a47b971c799fe', type: this.type, part: "button", class: `xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`, disabled: this.disabled, onClick: this.handleClick }, h("slot", { key: 'bd70d5725a38cd195536eb69a7a212938f0876eb', name: "icon-left" }), h("slot", { key: '856ba68a733dae91d40d14a616a5c0c76b917d45' }, this.label), h("slot", { key: '81c661e4e16939d2ef96803b4c814cb31c399cff', name: "icon-right" })));
+    }
+};
+XvButton.style = xvButtonV2Css;
+
+export { XvButton as xv_button_v2 };
+//# sourceMappingURL=xv-button-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-button-v2.entry.js.map

package/dist/xv-webcomponents/xv-button-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-button-v2.entry.esm.js","mappings":";;AAAA,MAAM,aAAa,GAAG,sgJAAsgJ;;MCQ/gJ,QAAQ,GAAA,MAAA;AALrB,IAAA,WAAA,CAAA,OAAA,EAAA;;;;AAOU,QAAA,IAAK,CAAA,KAAA,GAAW,EAAE;;AAGlB,QAAA,IAAK,CAAA,KAAA,GAAY,KAAK;;AAGtB,QAAA,IAAI,CAAA,IAAA,GAAkC,QAAQ;;AAG9C,QAAA,IAAO,CAAA,OAAA,GAA8D,SAAS;;AAG9E,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;;AAMzB,QAAA,IAAA,CAAA,WAAW,GAAG,CAAC,CAAa,KAAI;YACtC,IAAI,IAAI,CAAC,QAAQ;gBAAE;AACnB,YAAA,IAAI,CAAC,WAAW,CAAC,IAAI,CAAC,CAAC,CAAC;AAC1B,SAAC;AAqBF;IAnBC,MAAM,GAAA;QACJ,QACE,CACE,CAAA,QAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAC,QAAQ,EACb,KAAK,EAAE,CAAA,UAAA,EAAa,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,KAAK,GAAG,iBAAiB,GAAG,EAAE,CAAA,CAAE,EACzE,QAAQ,EAAE,IAAI,CAAC,QAAQ,EACvB,OAAO,EAAE,IAAI,CAAC,WAAW,EAAA,EAEzB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,WAAW,EAAQ,CAAA,EAE9B,CACG,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,EAAA,IAAI,CAAC,KAAK,CACN,EAEP,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,YAAY,EAAQ,CAAA,CACxB;;;;;;;","names":[],"sources":["src/components/xv-button/xv-button-v2.scss?tag=xv-button-v2&encapsulation=shadow","src/components/xv-button/xv-button.tsx"],"sourcesContent":[":host {\r\n  --button-font-size: 14px;\r\n  --focus-border-width: 2px;\r\n  --focus-border-style: solid;\r\n  --button-ghost: tarnsparent;\r\n  --text-disabled-opacity: 0.25;\r\n  --button-border-radius: 3px;\r\n  --button-border-width: 1px;\r\n  --button-border-style: solid;\r\n  --button-border-color-accent: #97BF0D;\r\n  --button-border-color-primary: #273435;\r\n  --button-border-color-secondary: #D1D1D1;\r\n  --button-border-color-ghost: tarnsparent;\r\n  --button-ghost-hover: tarnsparent;\r\n  --button-ghost-active: rgba(139, 139, 139, 0.5);\r\n  --button-accent-disabled: #D1D1D1;\r\n  --button-primary-disabled: #D1D1D1;\r\n  --button-secondary-disabled: #D1D1D1;\r\n  --button-tertiary-disabled: tarnsparent;\r\n  --button-ghost-disabled: tarnsparent;\r\n  --button-padding-x: 20px;\r\n\r\n  button {\r\n    font-family: inherit;\r\n    font-size: var(--button-font-size, 14px);\r\n    font-weight: 700;\r\n    padding: 0 var(--button-padding-x);\r\n    min-height: 40px;\r\n    line-height: 40px;\r\n    cursor: pointer;\r\n    box-sizing: border-box;\r\n    transition:\r\n      background-color 0.2s ease-in-out,\r\n      filter 0.2s ease-in-out,\r\n      transform 0.1s ease-in-out,\r\n      border-color 0.2s ease-in-out,\r\n      border-width 0.2s ease-in-out,\r\n      box-shadow 0.2s ease-in-out;\r\n\r\n    &.xv-button-block {\r\n      width: 100%;\r\n    }\r\n  }\r\n}\r\n\r\n.xv-button {\r\n  /* ✅ Accent Button */\r\n  &.accent {\r\n    background-color: var(--button-accent);\r\n    color: var(--text-on-color);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-accent);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-accent-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-accent-active);\r\n      color: var(--text-on-color);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-accent-disabled);\r\n      color: var(--text-on-color-disabled);\r\n      border: var(--button-border-width) var(--button-border-style) var(--button-accent-disabled);\r\n    }\r\n\r\n  }\r\n\r\n  /* ✅ Primary Button */\r\n  &.primary {\r\n    background-color: var(--button-primary);\r\n    color: var(--text-on-color);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-primary);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-primary-hover)\r\n    }\r\n    &:active {\r\n      background-color: var(--button-primary-active)\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-primary-disabled);\r\n      color: var(--text-on-color-disabled);\r\n      border: var(--button-border-width) var(--button-border-style) var(--button-primary-disabled);\r\n    }\r\n  }\r\n\r\n  /* ✅ Secondary Button */\r\n  &.secondary {\r\n    background-color: var(--button-secondary);\r\n    color: var(--text-primary);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-secondary);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-secondary-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-secondary-active);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-secondary-disabled);\r\n      color: var(--text-on-color-disabled);\r\n    }\r\n  }\r\n\r\n  /* ✅ Tertiary Button */\r\n  &.tertiary {\r\n    background-color: var(--button-ghost);\r\n    color: var(--text-primary);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-tertiary);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-tertiary-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-tertiary-active);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-tertiary-disabled);\r\n      color: var(--text-disabled);\r\n      opacity: var(--text-disabled-opacity);\r\n    }\r\n  }\r\n\r\n  /* ✅ Ghost Button */\r\n  &.ghost {\r\n    background-color: var(--button-ghost);\r\n    color: var(--text-primary);\r\n    border: var(--button-border-width) var(--button-border-style) var(--button-border-color-ghost);\r\n    border-radius: var(--button-border-radius);\r\n    &:hover {\r\n      background-color: var(--button-ghost-hover);\r\n    }\r\n    &:active {\r\n      background-color: var(--button-ghost-active);\r\n    }\r\n    &:focus {\r\n      outline: none;\r\n      border: var(--focus-border-width) var(--focus-border-style) var(--focus);\r\n      transition: border-color 0.2s ease-in-out;\r\n    }\r\n    &:disabled {\r\n      background-color: var(--button-ghost-disabled);\r\n      color: var(--text-disabled);\r\n      opacity: var(--text-disabled-opacity);\r\n    }\r\n  }\r\n}\r\n","import { Component, Prop, Event, EventEmitter, h } 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  /** Container width Button */\r\n  @Prop() block: boolean = false;\r\n\r\n  /** Button type */\r\n  @Prop() type: 'button' | 'reset' | 'submit' = 'button';\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<MouseEvent>;\r\n\r\n  /** Handle click only if not disabled */\r\n  private handleClick = (e: MouseEvent) => {\r\n    if (this.disabled) return;\r\n    this.buttonClick.emit(e);\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <button\r\n        type={this.type}\r\n        part=\"button\"\r\n        class={`xv-button ${this.variant} ${this.block ? 'xv-button-block' : ''}`}\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    );\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-card-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-card-v2.entry.esm.js","sources":["src/components/xv-card/xv-card.scss?tag=xv-card-v2&encapsulation=shadow","src/components/xv-card/xv-card.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-subtle-00);\r\n  background: var(--layer-layer-02);\r\n  box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n  font-family: var(--ff-body, inherit);\r\n  overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n  //max-width: 298px;\r\n  // TODO: wright down correct styling for card size\r\n  width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n  flex-direction: row;\r\n  display: flex;\r\n  width: max-content;\r\n\r\n  .xv-card_media {\r\n    &__content, ::slotted([slot=\"media\"]) {\r\n      min-height: 100%;\r\n      max-height: 100%;\r\n      max-width: 160px;\r\n      min-width: 160px;\r\n    }\r\n  }\r\n}\r\n\r\n.xv-card {\r\n  &_content {\r\n    padding: 16px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n    text-align: left;\r\n  }\r\n\r\n  &_media {\r\n    &__content, ::slotted([slot=\"media\"]) {\r\n      max-width: 100%;\r\n      min-width: 100%;\r\n      min-height: 199px;\r\n      max-height: 199px;\r\n      object-fit: cover;\r\n      object-position: center;\r\n    }\r\n  }\r\n\r\n  &_header {\r\n    &__content, ::slotted([slot=\"header\"]) {\r\n      margin: 0 0 8px;\r\n      color: var(--text-primary);\r\n      font-size: 16px;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n      line-height: 24px;\r\n      letter-spacing: -0.6px;\r\n    }\r\n  }\r\n\r\n  &_body {\r\n    flex: 1;\r\n    &__content, ::slotted([slot=\"body\"]) {\r\n      margin: 0 0 8px;\r\n      color: var(--text-secondary);\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      line-height: 20px;\r\n      letter-spacing: -0.1px;\r\n    }\r\n  }\r\n\r\n  &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-card-v2',\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"],"names":[],"mappings":";;AAAA,MAAM,SAAS,GAAG,iuCAAiuC;;MCOtuC,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAO,CAAA,OAAA,GAA8B,UAAU;AAgCxD;IA3BC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,OAAO,CAAE,CAAA,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAA,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACf,EAAA,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAI,CAAA,CACnF,CACH,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAK,CAC/D,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAK,CAC3D,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,MAAM,CAAQ,CACpC,CACF,CACD;;;;;;;"}

package/dist/xv-webcomponents/xv-card-v2.entry.js

@@ -0,0 +1,19 @@
+import { r as registerInstance, h, d as Host } from './index-rZAC0WRb.js';
+
+const xvCardCss = ":host{display:flex;flex-direction:column;border-radius:8px;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}";
+
+const XvCard = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.variant = 'vertical';
+    }
+    render() {
+        return (h(Host, { key: 'b86003335deda956d7863be55c649e34e2f329a2', class: `xv-card xv-card_${this.variant}`, part: this.variant }, h("div", { key: 'ba991e8663e19b84d2aed03a6d0298abab930554', class: "xv-card_media" }, h("slot", { key: '977360739f72359d3c6f337dc3f8743c46f92174', name: "media" }, this.media && h("img", { key: '5abb3af5d8571c3b9ec79b889ddbd6111a723be8', class: "xv-card_media__content", src: this.media, alt: this.header }))), h("div", { key: 'c2bff50b9bd8e4dc142944ece3634019ee12389e', class: "xv-card_content" }, h("div", { key: 'd7de6ec81a0a9c4851c8fa28d9362b2972823c5d', class: "xv-card_header" }, h("slot", { key: '13d3f763fca8fe633536c93e6e034809d3ccaf81', name: "header" }, this.header && h("p", { key: '857eee4601be032b1b12d338bfa2de83d471907b', class: "xv-card_header__content" }, this.header))), h("div", { key: '993e7416d9f0ee0215b00f4383a25a020ec7848f', class: "xv-card_body" }, h("slot", { key: 'de6ca20d74d8e97683b391b8fa85a3add1545564', name: "body" }, this.body && h("p", { key: 'df96e2a5847ee6866202094d7a163bba01f57abb', class: "xv-card_body__content" }, this.header))), h("div", { key: '249c23276d18164bd5d47f1dc9bd3bf5b43264fe', class: "xv-card_footer" }, h("slot", { key: 'e9a4987539a4a67298aa16e2105a1d1f51eb6d5f', name: "footer" }, this.footer)))));
+    }
+};
+XvCard.style = xvCardCss;
+
+export { XvCard as xv_card_v2 };
+//# sourceMappingURL=xv-card-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-card-v2.entry.js.map

package/dist/xv-webcomponents/xv-card-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-card-v2.entry.esm.js","mappings":";;AAAA,MAAM,SAAS,GAAG,iuCAAiuC;;MCOtuC,MAAM,GAAA,MAAA;AALnB,IAAA,WAAA,CAAA,OAAA,EAAA;;AAMU,QAAA,IAAO,CAAA,OAAA,GAA8B,UAAU;AAgCxD;IA3BC,MAAM,GAAA;QACJ,QACE,CAAC,CAAA,IAAI,EAAC,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAE,CAAA,gBAAA,EAAmB,IAAI,CAAC,OAAO,CAAE,CAAA,EAAE,IAAI,EAAE,IAAI,CAAC,OAAO,EAAA,EAChE,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,eAAe,EAAA,EACxB,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,IAAI,EAAC,OAAO,EACf,EAAA,IAAI,CAAC,KAAK,IAAI,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,wBAAwB,EAAC,GAAG,EAAE,IAAI,CAAC,KAAK,EAAE,GAAG,EAAE,IAAI,CAAC,MAAM,EAAI,CAAA,CACnF,CACH,EAEN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,iBAAiB,EAAA,EAC1B,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,IAChB,IAAI,CAAC,MAAM,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,yBAAyB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAK,CAC/D,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,cAAc,EAAA,EACvB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,IACd,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,uBAAuB,EAAE,EAAA,IAAI,CAAC,MAAM,CAAK,CAC3D,CACH,EACN,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,gBAAgB,EAAA,EACzB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,EAAE,IAAI,CAAC,MAAM,CAAQ,CACpC,CACF,CACD;;;;;;;","names":[],"sources":["src/components/xv-card/xv-card.scss?tag=xv-card-v2&encapsulation=shadow","src/components/xv-card/xv-card.tsx"],"sourcesContent":[":host {\r\n  display: flex;\r\n  flex-direction: column;\r\n  border-radius: 8px;\r\n  border: 1px solid var(--border-subtle-00);\r\n  background: var(--layer-layer-02);\r\n  box-shadow: 0 1px 3px 1px rgba(39, 52, 53, 0.15), 0 1px 2px 0 rgba(39, 52, 53, 0.30);\r\n  font-family: var(--ff-body, inherit);\r\n  overflow: visible !important;\r\n}\r\n\r\n:host(.xv-card_vertical) {\r\n  //max-width: 298px;\r\n  // TODO: wright down correct styling for card size\r\n  width: 100%!important;\r\n}\r\n\r\n:host(.xv-card_horizontal) {\r\n  flex-direction: row;\r\n  display: flex;\r\n  width: max-content;\r\n\r\n  .xv-card_media {\r\n    &__content, ::slotted([slot=\"media\"]) {\r\n      min-height: 100%;\r\n      max-height: 100%;\r\n      max-width: 160px;\r\n      min-width: 160px;\r\n    }\r\n  }\r\n}\r\n\r\n.xv-card {\r\n  &_content {\r\n    padding: 16px;\r\n    display: flex;\r\n    flex-direction: column;\r\n    flex: 1;\r\n    text-align: left;\r\n  }\r\n\r\n  &_media {\r\n    &__content, ::slotted([slot=\"media\"]) {\r\n      max-width: 100%;\r\n      min-width: 100%;\r\n      min-height: 199px;\r\n      max-height: 199px;\r\n      object-fit: cover;\r\n      object-position: center;\r\n    }\r\n  }\r\n\r\n  &_header {\r\n    &__content, ::slotted([slot=\"header\"]) {\r\n      margin: 0 0 8px;\r\n      color: var(--text-primary);\r\n      font-size: 16px;\r\n      font-style: normal;\r\n      font-weight: 700;\r\n      line-height: 24px;\r\n      letter-spacing: -0.6px;\r\n    }\r\n  }\r\n\r\n  &_body {\r\n    flex: 1;\r\n    &__content, ::slotted([slot=\"body\"]) {\r\n      margin: 0 0 8px;\r\n      color: var(--text-secondary);\r\n      font-size: 14px;\r\n      font-style: normal;\r\n      font-weight: 400;\r\n      line-height: 20px;\r\n      letter-spacing: -0.1px;\r\n    }\r\n  }\r\n\r\n  &_footer {}\r\n}\r\n","import { Component, Host, h, Prop } from '@stencil/core';\r\n\r\n@Component({\r\n  tag: 'xv-card-v2',\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"],"version":3}

package/dist/xv-webcomponents/xv-checkbox-v2.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-checkbox-v2.entry.esm.js","sources":["src/components/xv-checkbox/xv-checkbox.scss?tag=xv-checkbox-v2&encapsulation=shadow","src/components/xv-checkbox/xv-checkbox.tsx"],"sourcesContent":["\r\n:host {\r\n  --checkbox-size: max(1rem, 16px);\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n}\r\n\r\n:host([error]) {\r\n  .xv-checkbox .checkmark {\r\n    border-color: var(--text-error, #D62512);\r\n  }\r\n}\r\n\r\n.error,\r\n[name=\"info\"] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  font-size: var(--fz-sm, 12px);\r\n  font-family: var(--ff-body, Tahoma);\r\n  line-height: 133.333%;\r\n  letter-spacing: 0.32px;\r\n}\r\n\r\n.error {\r\n  margin-top: var(--gap-xs, 5px);\r\n  color: var(--text-error, #D62512);\r\n  &::before {\r\n    margin-right: var(--gap-xs, 5px);\r\n    content: \"!\";\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 20px;\r\n    height: 20px;\r\n    font-size: var(--fz-sm, 12px);\r\n    font-weight: bold;\r\n    color: white;\r\n    background-color: var(--text-error, #D62512);\r\n    border-radius: 50%;\r\n  }\r\n}\r\n\r\n.xv-checkbox {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  user-select: none;\r\n\r\n  input[type='checkbox'] {\r\n    position: absolute;\r\n    width: var(--checkbox-size);\r\n    height: var(--checkbox-size);\r\n    margin: 0;\r\n    padding: 0;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .checkmark {\r\n    width: var(--checkbox-size);\r\n    min-width: var(--checkbox-size);\r\n    height: var(--checkbox-size);\r\n    min-height: var(--checkbox-size);\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 1.4px solid var(--icon-primary, #D1D1D1);\r\n    border-radius: 2px;\r\n    background-color: var(--background, #FFF);\r\n    transition: all 0.2s ease;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  input:checked + .checkmark {\r\n    background-color: var(--background-brand, #97BF0D);\r\n    border-color: var(--background-brand, #97BF0D);\r\n    &:not(.checkmark-partial)::after {\r\n      content: '';\r\n      width: calc(var(--checkbox-size) / 4);\r\n      height: calc(var(--checkbox-size) / 2.5);\r\n      border: solid var(--background, #FFF);\r\n      margin-bottom: calc(var(--checkbox-size) / 10);\r\n      border-width: 0 2px 2px 0;\r\n      transform: rotate(45deg);\r\n      display: block;\r\n    }\r\n    &.checkmark-partial::after {\r\n      content: '';\r\n      width: calc(var(--checkbox-size) / 3);\r\n      height: calc(var(--checkbox-size) / 10);\r\n      background-color: var(--background, #FFF);\r\n    }\r\n  }\r\n\r\n  input:focus + .checkmark {\r\n    outline: 1.4px solid var(--focus, #8B8B8B);\r\n  }\r\n\r\n  .label {\r\n    color: var(--text-primary, #333);\r\n    font-family: var(--ff-body, Tahoma);\r\n    font-size: var(--fz-md, 14px);\r\n    line-height: 128.571%;\r\n    letter-spacing: 0.16px;\r\n    &_str,\r\n    ::slotted(*) {\r\n      margin-left: 8px;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: initial;\r\n\r\n    input:checked + .checkmark {\r\n      background-color: var(--background, #FFF);\r\n      border: 1.4px solid var(--icon-disabled, #D1D1D1);\r\n      &:after {\r\n        border-color: var(--icon-primary, #131313);\r\n      }\r\n\r\n      &-partial:after {\r\n        background-color: var(--icon-primary, #131313);\r\n      }\r\n    }\r\n\r\n    .checkmark {\r\n      border: 1.4px solid var(--icon-disabled, #D1D1D1);\r\n    }\r\n\r\n    .label {\r\n      color: var(--text-primary, #333);\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    .checkmark {\r\n      border: 1.4px solid var(--icon-disabled, #D1D1D1);\r\n    }\r\n\r\n    .label {\r\n      color: var(--text-disabled, rgba(19, 19, 19, 0.25));\r\n    }\r\n  }\r\n}\r\n","import { Component, h, Element, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-checkbox-v2',\r\n  styleUrl: 'xv-checkbox.scss',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class XvCheckbox {\r\n  private inputEl: HTMLInputElement;\r\n  private internals: ElementInternals;\r\n\r\n  @Element() el!: HTMLElement;\r\n\r\n  /**\r\n   * Default checked status\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\r\n  /**\r\n   * Using for forms\r\n   */\r\n  @Prop({ reflect: true }) indeterminate: boolean = false;\r\n  /**\r\n   * Disabled status\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  /**\r\n   * Input name\r\n   */\r\n  @Prop({ reflect: true }) name: string;\r\n  /**\r\n   * Input value\r\n   */\r\n  @Prop({ reflect: true }) value: string = 'on';\r\n  /**\r\n   * Input readonly\r\n   */\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  /**\r\n   * The same like default checkbox prop\r\n   */\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  /**\r\n   * Change checkmark icon to minus\r\n   */\r\n  @Prop({ reflect: true }) partial: boolean = false;\r\n  /**\r\n   * Can be used like property or like slot\r\n   */\r\n  @Prop() label: string;\r\n\r\n  @Prop({ reflect: true }) size?: SIZE_VAR;\r\n  @Prop({ reflect: true }) error?: string | boolean;\r\n\r\n  @State() hasFocus: boolean = false;\r\n  /**\r\n   * event 'onEventChange'\r\n   */\r\n  @Event({ eventName: 'eventChange' }) changeEvent: EventEmitter<boolean>;\r\n  /**\r\n   * event 'onEventInput'\r\n   */\r\n  @Event({ eventName: 'eventInput' }) inputEvent: EventEmitter<boolean>;\r\n  /**\r\n   * event 'onEventFocus'\r\n   */\r\n  @Event({ eventName: 'eventFocus' }) focusEvent: EventEmitter<void>;\r\n  /**\r\n   * event 'onEventBlur'\r\n   */\r\n  @Event({ eventName: 'eventBlur' }) blurEvent: EventEmitter<void>;\r\n\r\n  constructor() {\r\n    this.internals = (this.el as any).attachInternals?.() || {};\r\n  }\r\n\r\n  connectedCallback() {\r\n    if (this.internals?.setFormValue) {\r\n      this.internals.setFormValue(this.checked ? this.value : null);\r\n    }\r\n  }\r\n\r\n  @Watch('checked')\r\n  onCheckedChange(newValue: boolean) {\r\n    if (this.internals?.setFormValue) {\r\n      this.internals.setFormValue(newValue ? this.value : null);\r\n    }\r\n  }\r\n\r\n  private onInput = (e: Event) => {\r\n    const target = e.target as HTMLInputElement;\r\n    this.checked = target.checked;\r\n    this.inputEvent.emit(this.checked);\r\n  };\r\n\r\n  private onChange = (e: Event) => {\r\n    if (this.disabled || this.readonly) return;\r\n    const target = e.target as HTMLInputElement;\r\n    this.checked = target.checked;\r\n    this.changeEvent.emit(this.checked);\r\n  };\r\n\r\n  private onFocus = () => {\r\n    this.hasFocus = true;\r\n    this.focusEvent.emit();\r\n  };\r\n\r\n  private onBlur = () => {\r\n    this.hasFocus = false;\r\n    this.blurEvent.emit();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <label class={{ 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly }}>\r\n          <input\r\n            ref={el => (this.inputEl = el)}\r\n            type=\"checkbox\"\r\n            readonly={this.readonly}\r\n            name={this.name}\r\n            value={this.value}\r\n            checked={this.checked}\r\n            disabled={this.disabled || this.readonly}\r\n            required={this.required}\r\n            indeterminate={this.indeterminate}\r\n            onInput={this.onInput}\r\n            onChange={this.onChange}\r\n            onFocus={this.onFocus}\r\n            onBlur={this.onBlur}\r\n          />\r\n          <span class={`checkmark ${this.partial ? 'checkmark-partial' : ''}`} />\r\n          <div class=\"label\">\r\n            <slot>{this.label && <span class=\"label_str\">{this.label}</span>}</slot>\r\n          </div>\r\n        </label>\r\n        <slot name=\"info\" />\r\n        {!!this.error && <span class=\"error\">{this.error}</span>}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.indeterminate) {\r\n      this.inputEl.indeterminate = true;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    if (this.inputEl) {\r\n      this.inputEl.indeterminate = this.indeterminate;\r\n    }\r\n  }\r\n\r\n  formResetCallback() {\r\n    this.checked = false;\r\n  }\r\n\r\n  formStateRestoreCallback(state: string) {\r\n    this.checked = state === this.value;\r\n  }\r\n}\r\n"],"names":[],"mappings":"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"}

package/dist/xv-webcomponents/xv-checkbox-v2.entry.js

@@ -0,0 +1,106 @@
+import { r as registerInstance, a as createEvent, h, d as Host, e as getElement } from './index-rZAC0WRb.js';
+
+const xvCheckboxCss = ":host{--checkbox-size:max(1rem, 16px);box-sizing:border-box;display:inline-flex;flex-direction:column}:host([error]) .xv-checkbox .checkmark{border-color:var(--text-error, #D62512)}.error,[name=info]{display:inline-flex;align-items:center;justify-content:flex-start;font-size:var(--fz-sm, 12px);font-family:var(--ff-body, Tahoma);line-height:133.333%;letter-spacing:0.32px}.error{margin-top:var(--gap-xs, 5px);color:var(--text-error, #D62512)}.error::before{margin-right:var(--gap-xs, 5px);content:\"!\";display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;font-size:var(--fz-sm, 12px);font-weight:bold;color:white;background-color:var(--text-error, #D62512);border-radius:50%}.xv-checkbox{display:inline-flex;align-items:center;cursor:pointer;user-select:none}.xv-checkbox input[type=checkbox]{position:absolute;width:var(--checkbox-size);height:var(--checkbox-size);margin:0;padding:0;opacity:0;pointer-events:none;box-sizing:border-box}.xv-checkbox .checkmark{width:var(--checkbox-size);min-width:var(--checkbox-size);height:var(--checkbox-size);min-height:var(--checkbox-size);box-sizing:border-box;margin:0;padding:0;border:1.4px solid var(--icon-primary, #D1D1D1);border-radius:2px;background-color:var(--background, #FFF);transition:all 0.2s ease;display:inline-flex;align-items:center;justify-content:center}.xv-checkbox input:checked+.checkmark{background-color:var(--background-brand, #97BF0D);border-color:var(--background-brand, #97BF0D)}.xv-checkbox input:checked+.checkmark:not(.checkmark-partial)::after{content:\"\";width:calc(var(--checkbox-size) / 4);height:calc(var(--checkbox-size) / 2.5);border:solid var(--background, #FFF);margin-bottom:calc(var(--checkbox-size) / 10);border-width:0 2px 2px 0;transform:rotate(45deg);display:block}.xv-checkbox input:checked+.checkmark.checkmark-partial::after{content:\"\";width:calc(var(--checkbox-size) / 3);height:calc(var(--checkbox-size) / 10);background-color:var(--background, #FFF)}.xv-checkbox input:focus+.checkmark{outline:1.4px solid var(--focus, #8B8B8B)}.xv-checkbox .label{color:var(--text-primary, #333);font-family:var(--ff-body, Tahoma);font-size:var(--fz-md, 14px);line-height:128.571%;letter-spacing:0.16px}.xv-checkbox .label_str,.xv-checkbox .label ::slotted(*){margin-left:8px}.xv-checkbox.readonly{cursor:initial}.xv-checkbox.readonly input:checked+.checkmark{background-color:var(--background, #FFF);border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly input:checked+.checkmark:after{border-color:var(--icon-primary, #131313)}.xv-checkbox.readonly input:checked+.checkmark-partial:after{background-color:var(--icon-primary, #131313)}.xv-checkbox.readonly .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.readonly .label{color:var(--text-primary, #333)}.xv-checkbox.disabled{cursor:not-allowed}.xv-checkbox.disabled .checkmark{border:1.4px solid var(--icon-disabled, #D1D1D1)}.xv-checkbox.disabled .label{color:var(--text-disabled, rgba(19, 19, 19, 0.25))}";
+
+const XvCheckbox = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.changeEvent = createEvent(this, "eventChange", 7);
+        this.inputEvent = createEvent(this, "eventInput", 7);
+        this.focusEvent = createEvent(this, "eventFocus", 7);
+        this.blurEvent = createEvent(this, "eventBlur", 7);
+        var _a, _b;
+        /**
+         * Default checked status
+         */
+        this.checked = false;
+        /**
+         * Using for forms
+         */
+        this.indeterminate = false;
+        /**
+         * Disabled status
+         */
+        this.disabled = false;
+        /**
+         * Input value
+         */
+        this.value = 'on';
+        /**
+         * Input readonly
+         */
+        this.readonly = false;
+        /**
+         * The same like default checkbox prop
+         */
+        this.required = false;
+        /**
+         * Change checkmark icon to minus
+         */
+        this.partial = false;
+        this.hasFocus = false;
+        this.onInput = (e) => {
+            const target = e.target;
+            this.checked = target.checked;
+            this.inputEvent.emit(this.checked);
+        };
+        this.onChange = (e) => {
+            if (this.disabled || this.readonly)
+                return;
+            const target = e.target;
+            this.checked = target.checked;
+            this.changeEvent.emit(this.checked);
+        };
+        this.onFocus = () => {
+            this.hasFocus = true;
+            this.focusEvent.emit();
+        };
+        this.onBlur = () => {
+            this.hasFocus = false;
+            this.blurEvent.emit();
+        };
+        this.internals = ((_b = (_a = this.el).attachInternals) === null || _b === void 0 ? void 0 : _b.call(_a)) || {};
+    }
+    connectedCallback() {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(this.checked ? this.value : null);
+        }
+    }
+    onCheckedChange(newValue) {
+        var _a;
+        if ((_a = this.internals) === null || _a === void 0 ? void 0 : _a.setFormValue) {
+            this.internals.setFormValue(newValue ? this.value : null);
+        }
+    }
+    render() {
+        return (h(Host, { key: 'bc9d01a8a1f5b457d606347b7fa47193d61ba903' }, h("label", { key: 'acf7f91b0704d64276dbde7bc26242d647a7c93b', class: { 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly } }, h("input", { key: '0e22fa9b52f6efc79347ad46c70bd0de9349e052', ref: el => (this.inputEl = el), type: "checkbox", readonly: this.readonly, name: this.name, value: this.value, checked: this.checked, disabled: this.disabled || this.readonly, required: this.required, indeterminate: this.indeterminate, onInput: this.onInput, onChange: this.onChange, onFocus: this.onFocus, onBlur: this.onBlur }), h("span", { key: 'e833307687d75ca1a8d980c3838fdbf913bd040d', class: `checkmark ${this.partial ? 'checkmark-partial' : ''}` }), h("div", { key: '4db2a2bfc978df7578988d82bc816ad73e226ecd', class: "label" }, h("slot", { key: 'ceea1d88dd84d72aab62dcf30b74f97655fe31b2' }, this.label && h("span", { key: 'af05033b174981be3dcda9cbda8b0c4d00ae6782', class: "label_str" }, this.label)))), h("slot", { key: 'e710f7c5bc4c69270f3b992ab242278ac4609cf5', name: "info" }), !!this.error && h("span", { key: 'f778ab5eb9c1ce8e35bd9d13f39fc612663d7062', class: "error" }, this.error)));
+    }
+    componentDidLoad() {
+        if (this.indeterminate) {
+            this.inputEl.indeterminate = true;
+        }
+    }
+    componentDidUpdate() {
+        if (this.inputEl) {
+            this.inputEl.indeterminate = this.indeterminate;
+        }
+    }
+    formResetCallback() {
+        this.checked = false;
+    }
+    formStateRestoreCallback(state) {
+        this.checked = state === this.value;
+    }
+    static get formAssociated() { return true; }
+    get el() { return getElement(this); }
+    static get watchers() { return {
+        "checked": ["onCheckedChange"]
+    }; }
+};
+XvCheckbox.style = xvCheckboxCss;
+
+export { XvCheckbox as xv_checkbox_v2 };
+//# sourceMappingURL=xv-checkbox-v2.entry.esm.js.map
+
+//# sourceMappingURL=xv-checkbox-v2.entry.js.map

package/dist/xv-webcomponents/xv-checkbox-v2.entry.js.map

@@ -0,0 +1 @@
+{"file":"xv-checkbox-v2.entry.esm.js","mappings":"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","names":[],"sources":["src/components/xv-checkbox/xv-checkbox.scss?tag=xv-checkbox-v2&encapsulation=shadow","src/components/xv-checkbox/xv-checkbox.tsx"],"sourcesContent":["\r\n:host {\r\n  --checkbox-size: max(1rem, 16px);\r\n  box-sizing: border-box;\r\n  display: inline-flex;\r\n  flex-direction: column;\r\n}\r\n\r\n:host([error]) {\r\n  .xv-checkbox .checkmark {\r\n    border-color: var(--text-error, #D62512);\r\n  }\r\n}\r\n\r\n.error,\r\n[name=\"info\"] {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  justify-content: flex-start;\r\n  font-size: var(--fz-sm, 12px);\r\n  font-family: var(--ff-body, Tahoma);\r\n  line-height: 133.333%;\r\n  letter-spacing: 0.32px;\r\n}\r\n\r\n.error {\r\n  margin-top: var(--gap-xs, 5px);\r\n  color: var(--text-error, #D62512);\r\n  &::before {\r\n    margin-right: var(--gap-xs, 5px);\r\n    content: \"!\";\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n    width: 20px;\r\n    height: 20px;\r\n    font-size: var(--fz-sm, 12px);\r\n    font-weight: bold;\r\n    color: white;\r\n    background-color: var(--text-error, #D62512);\r\n    border-radius: 50%;\r\n  }\r\n}\r\n\r\n.xv-checkbox {\r\n  display: inline-flex;\r\n  align-items: center;\r\n  cursor: pointer;\r\n  user-select: none;\r\n\r\n  input[type='checkbox'] {\r\n    position: absolute;\r\n    width: var(--checkbox-size);\r\n    height: var(--checkbox-size);\r\n    margin: 0;\r\n    padding: 0;\r\n    opacity: 0;\r\n    pointer-events: none;\r\n    box-sizing: border-box;\r\n  }\r\n\r\n  .checkmark {\r\n    width: var(--checkbox-size);\r\n    min-width: var(--checkbox-size);\r\n    height: var(--checkbox-size);\r\n    min-height: var(--checkbox-size);\r\n    box-sizing: border-box;\r\n    margin: 0;\r\n    padding: 0;\r\n    border: 1.4px solid var(--icon-primary, #D1D1D1);\r\n    border-radius: 2px;\r\n    background-color: var(--background, #FFF);\r\n    transition: all 0.2s ease;\r\n    display: inline-flex;\r\n    align-items: center;\r\n    justify-content: center;\r\n  }\r\n\r\n  input:checked + .checkmark {\r\n    background-color: var(--background-brand, #97BF0D);\r\n    border-color: var(--background-brand, #97BF0D);\r\n    &:not(.checkmark-partial)::after {\r\n      content: '';\r\n      width: calc(var(--checkbox-size) / 4);\r\n      height: calc(var(--checkbox-size) / 2.5);\r\n      border: solid var(--background, #FFF);\r\n      margin-bottom: calc(var(--checkbox-size) / 10);\r\n      border-width: 0 2px 2px 0;\r\n      transform: rotate(45deg);\r\n      display: block;\r\n    }\r\n    &.checkmark-partial::after {\r\n      content: '';\r\n      width: calc(var(--checkbox-size) / 3);\r\n      height: calc(var(--checkbox-size) / 10);\r\n      background-color: var(--background, #FFF);\r\n    }\r\n  }\r\n\r\n  input:focus + .checkmark {\r\n    outline: 1.4px solid var(--focus, #8B8B8B);\r\n  }\r\n\r\n  .label {\r\n    color: var(--text-primary, #333);\r\n    font-family: var(--ff-body, Tahoma);\r\n    font-size: var(--fz-md, 14px);\r\n    line-height: 128.571%;\r\n    letter-spacing: 0.16px;\r\n    &_str,\r\n    ::slotted(*) {\r\n      margin-left: 8px;\r\n    }\r\n  }\r\n\r\n  &.readonly {\r\n    cursor: initial;\r\n\r\n    input:checked + .checkmark {\r\n      background-color: var(--background, #FFF);\r\n      border: 1.4px solid var(--icon-disabled, #D1D1D1);\r\n      &:after {\r\n        border-color: var(--icon-primary, #131313);\r\n      }\r\n\r\n      &-partial:after {\r\n        background-color: var(--icon-primary, #131313);\r\n      }\r\n    }\r\n\r\n    .checkmark {\r\n      border: 1.4px solid var(--icon-disabled, #D1D1D1);\r\n    }\r\n\r\n    .label {\r\n      color: var(--text-primary, #333);\r\n    }\r\n  }\r\n\r\n  &.disabled {\r\n    cursor: not-allowed;\r\n    .checkmark {\r\n      border: 1.4px solid var(--icon-disabled, #D1D1D1);\r\n    }\r\n\r\n    .label {\r\n      color: var(--text-disabled, rgba(19, 19, 19, 0.25));\r\n    }\r\n  }\r\n}\r\n","import { Component, h, Element, Prop, State, Event, EventEmitter, Watch, Host } from '@stencil/core';\r\nimport { SIZE_VAR } from '../../types/enum';\r\n\r\n@Component({\r\n  tag: 'xv-checkbox-v2',\r\n  styleUrl: 'xv-checkbox.scss',\r\n  shadow: true,\r\n  formAssociated: true,\r\n})\r\nexport class XvCheckbox {\r\n  private inputEl: HTMLInputElement;\r\n  private internals: ElementInternals;\r\n\r\n  @Element() el!: HTMLElement;\r\n\r\n  /**\r\n   * Default checked status\r\n   */\r\n  @Prop({ reflect: true, mutable: true }) checked: boolean = false;\r\n  /**\r\n   * Using for forms\r\n   */\r\n  @Prop({ reflect: true }) indeterminate: boolean = false;\r\n  /**\r\n   * Disabled status\r\n   */\r\n  @Prop({ reflect: true }) disabled: boolean = false;\r\n  /**\r\n   * Input name\r\n   */\r\n  @Prop({ reflect: true }) name: string;\r\n  /**\r\n   * Input value\r\n   */\r\n  @Prop({ reflect: true }) value: string = 'on';\r\n  /**\r\n   * Input readonly\r\n   */\r\n  @Prop({ reflect: true }) readonly: boolean = false;\r\n  /**\r\n   * The same like default checkbox prop\r\n   */\r\n  @Prop({ reflect: true }) required: boolean = false;\r\n  /**\r\n   * Change checkmark icon to minus\r\n   */\r\n  @Prop({ reflect: true }) partial: boolean = false;\r\n  /**\r\n   * Can be used like property or like slot\r\n   */\r\n  @Prop() label: string;\r\n\r\n  @Prop({ reflect: true }) size?: SIZE_VAR;\r\n  @Prop({ reflect: true }) error?: string | boolean;\r\n\r\n  @State() hasFocus: boolean = false;\r\n  /**\r\n   * event 'onEventChange'\r\n   */\r\n  @Event({ eventName: 'eventChange' }) changeEvent: EventEmitter<boolean>;\r\n  /**\r\n   * event 'onEventInput'\r\n   */\r\n  @Event({ eventName: 'eventInput' }) inputEvent: EventEmitter<boolean>;\r\n  /**\r\n   * event 'onEventFocus'\r\n   */\r\n  @Event({ eventName: 'eventFocus' }) focusEvent: EventEmitter<void>;\r\n  /**\r\n   * event 'onEventBlur'\r\n   */\r\n  @Event({ eventName: 'eventBlur' }) blurEvent: EventEmitter<void>;\r\n\r\n  constructor() {\r\n    this.internals = (this.el as any).attachInternals?.() || {};\r\n  }\r\n\r\n  connectedCallback() {\r\n    if (this.internals?.setFormValue) {\r\n      this.internals.setFormValue(this.checked ? this.value : null);\r\n    }\r\n  }\r\n\r\n  @Watch('checked')\r\n  onCheckedChange(newValue: boolean) {\r\n    if (this.internals?.setFormValue) {\r\n      this.internals.setFormValue(newValue ? this.value : null);\r\n    }\r\n  }\r\n\r\n  private onInput = (e: Event) => {\r\n    const target = e.target as HTMLInputElement;\r\n    this.checked = target.checked;\r\n    this.inputEvent.emit(this.checked);\r\n  };\r\n\r\n  private onChange = (e: Event) => {\r\n    if (this.disabled || this.readonly) return;\r\n    const target = e.target as HTMLInputElement;\r\n    this.checked = target.checked;\r\n    this.changeEvent.emit(this.checked);\r\n  };\r\n\r\n  private onFocus = () => {\r\n    this.hasFocus = true;\r\n    this.focusEvent.emit();\r\n  };\r\n\r\n  private onBlur = () => {\r\n    this.hasFocus = false;\r\n    this.blurEvent.emit();\r\n  };\r\n\r\n  render() {\r\n    return (\r\n      <Host>\r\n        <label class={{ 'xv-checkbox': true, disabled: this.disabled, readonly: this.readonly }}>\r\n          <input\r\n            ref={el => (this.inputEl = el)}\r\n            type=\"checkbox\"\r\n            readonly={this.readonly}\r\n            name={this.name}\r\n            value={this.value}\r\n            checked={this.checked}\r\n            disabled={this.disabled || this.readonly}\r\n            required={this.required}\r\n            indeterminate={this.indeterminate}\r\n            onInput={this.onInput}\r\n            onChange={this.onChange}\r\n            onFocus={this.onFocus}\r\n            onBlur={this.onBlur}\r\n          />\r\n          <span class={`checkmark ${this.partial ? 'checkmark-partial' : ''}`} />\r\n          <div class=\"label\">\r\n            <slot>{this.label && <span class=\"label_str\">{this.label}</span>}</slot>\r\n          </div>\r\n        </label>\r\n        <slot name=\"info\" />\r\n        {!!this.error && <span class=\"error\">{this.error}</span>}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentDidLoad() {\r\n    if (this.indeterminate) {\r\n      this.inputEl.indeterminate = true;\r\n    }\r\n  }\r\n\r\n  componentDidUpdate() {\r\n    if (this.inputEl) {\r\n      this.inputEl.indeterminate = this.indeterminate;\r\n    }\r\n  }\r\n\r\n  formResetCallback() {\r\n    this.checked = false;\r\n  }\r\n\r\n  formStateRestoreCallback(state: string) {\r\n    this.checked = state === this.value;\r\n  }\r\n}\r\n"],"version":3}

package/dist/xv-webcomponents/xv-dropdown-v2-item.entry.esm.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"xv-dropdown-v2-item.entry.esm.js","sources":["src/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.scss?tag=xv-dropdown-v2-item&encapsulation=shadow","src/components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.tsx"],"sourcesContent":[":host {\r\n  display: block;\r\n  .checkmark {\r\n    position: absolute;\r\n    right: 12px;\r\n    top: var(--dropdown-padding-y, 10px);\r\n    width: 5px;\r\n    height: 10px;\r\n    border: solid var(--icon-primary, #333);\r\n    border-width: 0 2px 2px 0;\r\n    transform: rotate(45deg);\r\n    transition: opacity 0.2s;\r\n  }\r\n}\r\n\r\n\r\n","import { Component, Host, h, Event, EventEmitter, Listen, Prop, Element } from '@stencil/core';\r\nimport { DropdownItemData } from '../_vars';\r\n\r\n/**\r\n * xv-dropdown-item — custom dropdown list item\r\n * if you want to create new dropdown list item you need to extend current class properties and\r\n * events\r\n * should be created and emitted 'itemSelected' event\r\n */\r\n@Component({\r\n  tag: 'xv-dropdown-v2-item',\r\n  styleUrl: 'xv-dropdown-item.scss',\r\n  shadow: true,\r\n})\r\nexport class XvDropdownItem {\r\n  @Element() el: HTMLElement;\r\n  @Prop() disabled: boolean = false;\r\n  @Prop({ reflect: true, mutable: true }) value: DropdownItemData['value'] = '';\r\n  @Prop({ reflect: true, mutable: true }) selected: DropdownItemData['selected'] = false;\r\n  @Event() itemSelected: EventEmitter<DropdownItemData>;\r\n\r\n  @Listen('click')\r\n  handleClick() {\r\n    if (this.disabled) return;\r\n\r\n    this.itemSelected.emit({\r\n      selected: !this.selected,\r\n      value: this.value,\r\n      text: this.el.innerText\r\n    });\r\n  }\r\n\r\n\r\n  render() {\r\n    return (\r\n      <Host class=\"xv-dropdown-item\" value={this.value} role=\"option\" tabindex={this.disabled ? -1 : false}>\r\n        <slot></slot>\r\n\r\n        {this.selected && <span class=\"checkmark\" />}\r\n      </Host>\r\n    );\r\n  }\r\n\r\n  componentWillLoad() {\r\n    if (!this.value) this.value = this.el.innerText;\r\n  }\r\n}\r\n"],"names":[],"mappings":";;AAAA,MAAM,iBAAiB,GAAG,8OAA8O;;MCc3P,cAAc,GAAA,MAAA;AAL3B,IAAA,WAAA,CAAA,OAAA,EAAA;;;AAOU,QAAA,IAAQ,CAAA,QAAA,GAAY,KAAK;AACO,QAAA,IAAK,CAAA,KAAA,GAA8B,EAAE;AACrC,QAAA,IAAQ,CAAA,QAAA,GAAiC,KAAK;AA4BvF;IAxBC,WAAW,GAAA;QACT,IAAI,IAAI,CAAC,QAAQ;YAAE;AAEnB,QAAA,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC;AACrB,YAAA,QAAQ,EAAE,CAAC,IAAI,CAAC,QAAQ;YACxB,KAAK,EAAE,IAAI,CAAC,KAAK;AACjB,YAAA,IAAI,EAAE,IAAI,CAAC,EAAE,CAAC;AACf,SAAA,CAAC;;IAIJ,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAC,kBAAkB,EAAC,KAAK,EAAE,IAAI,CAAC,KAAK,EAAE,IAAI,EAAC,QAAQ,EAAC,QAAQ,EAAE,IAAI,CAAC,QAAQ,GAAG,CAAC,CAAC,GAAG,KAAK,EAAA,EAClG,CAAa,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,EAEZ,IAAI,CAAC,QAAQ,IAAI,CAAM,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,WAAW,EAAA,CAAG,CACvC;;IAIX,iBAAiB,GAAA;QACf,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,SAAS;;;;;;;;"}