xv-webcomponents 0.1.39 → 0.1.42

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

@@ -1,6 +1,6 @@
 'use strict';
 
-var index = require('./index-D41mMXvd.js');
+var index = require('./index-MLh9SbX2.js');
 
 const xvBreadcrumbsCss = ":host{display:block}";
 

package/dist/cjs/xv-webcomponents.cjs.js

@@ -1,11 +1,11 @@
 'use strict';
 
-var index = require('./index-D41mMXvd.js');
+var index = require('./index-MLh9SbX2.js');
 var appGlobals = require('./app-globals-V2Kpy_OQ.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.31.0 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.32.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {
@@ -19,7 +19,7 @@ var patchBrowser = () => {
 
 patchBrowser().then(async (options) => {
   await appGlobals.globalScripts();
-  return index.bootstrapLazy([["xv-breadcrumbs-v2.cjs",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_27.cjs",[[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"label":[513],"placeholder":[513],"helper":[513],"name":[513],"size":[513],"status":[513],"value":[1537],"disabled":[516],"readonly":[516],"loading":[516]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-button-v2",{"label":[1],"block":[4],"type":[1],"variant":[1],"disabled":[4]}],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"openModal":[64],"closeModal":[64]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-tooltip-v2",{"message":[513],"position":[513],"multiline":[516]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
+  return index.bootstrapLazy([["xv-breadcrumbs-v2.cjs",[[1,"xv-breadcrumbs-v2"]]],["xv-accordion-v2_34.cjs",[[1,"xv-data-table-row",{"variant":[1],"name":[1025],"collapse":[1],"collapsable":[516],"checked":[1028],"partial":[1028],"hover":[1028],"header":[4],"footer":[4],"disabled":[4],"readonly":[4],"required":[4],"value":[8],"collapsed":[32]}],[1,"xv-dropdown-v2",{"disabled":[516],"multiple":[516],"required":[516],"loading":[516],"open":[1540],"error":[513],"label":[513],"helper":[513],"warning":[513],"placeholder":[513],"info":[1],"size":[1],"defaultValue":[8,"default-value"],"selected":[32],"selectedMap":[32]},[[0,"itemSelected","handleItemSelected"]],{"open":["openChangeHandle"]}],[1,"xv-file-uploader",{"label":[1],"description":[1],"addText":[1,"add-text"],"variant":[1],"size":[1],"accept":[16],"maxFileSizeMB":[2,"max-file-size-mb"],"maxFiles":[2,"max-files"],"multiple":[4],"disabled":[516],"files":[1040],"loadingStates":[1040,"loading-states"],"error":[1537],"errors":[1040],"dragActive":[32],"errorMessages":[32]}],[65,"xv-number-input-v2",{"label":[1],"placeholder":[513],"name":[513],"value":[1538],"helper":[1],"error":[8],"warning":[8],"step":[2],"max":[2],"min":[2],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-table-v2-row",{"checked":[1540],"partial":[1540],"name":[1537],"value":[520],"hover":[1540],"readonly":[516],"required":[516],"disabled":[516],"header":[516],"variant":[1537]},null,{"checked":["checkedChangeHandle"]}],[0,"xv-header",{"htmlContent":[32],"showLoginModal":[32]}],[1,"xv-tab-v2",{"label":[513],"disabled":[516],"loading":[516],"name":[8]}],[1,"xv-table-v2",{"size":[513],"hover":[516],"loading":[516],"colsSize":[16,"colssize"],"selected":[32],"selectedCount":[32]},[[0,"checkedChange","handleCheckedChange"]],{"colsSize":["setColsSizeTemplate"]}],[1,"xv-tabs-v2",{"active":[1544],"loading":[516],"variant":[1],"emptyMessage":[1,"empty-message"],"tabElements":[32],"showArrows":[32]},[[9,"resize","updateArrowVisibility"]]],[65,"xv-text-input-v2",{"type":[1],"label":[1],"placeholder":[513],"name":[513],"value":[1025],"helper":[1],"error":[8],"warning":[8],"readonly":[4],"disabled":[4],"loading":[4],"block":[4],"size":[513]}],[1,"xv-accordion-v2",{"multiple":[4],"xvId":[1,"xv-id"],"value":[1025],"opened":[32],"toggleItem":[64]}],[1,"xv-accordion-v2-item",{"disabled":[4],"label":[1],"value":[1],"isOpen":[32]},[[16,"accordionChange","handleAccordionChange"]]],[1,"xv-card-v2",{"variant":[1],"media":[1],"header":[1],"body":[1],"footer":[1]}],[1,"xv-data-table",{"size":[1],"block":[4],"columnWidths":[16,"column-widths"],"hover":[4]}],[1,"xv-data-table-collapse",{"collapsed":[1540],"setCollapsed":[64]}],[1,"xv-dropdown-v2-item",{"disabled":[4],"value":[1544],"selected":[1540]},[[0,"click","handleClick"]]],[0,"xv-footer",{"htmlContent":[32]}],[1,"xv-link-v2",{"href":[1],"target":[1],"disabled":[4],"size":[1],"variant":[1]}],[1,"xv-modal-v2",{"open":[1540],"permanent":[516],"size":[513],"overflow":[516],"openModal":[64],"closeModal":[64]}],[1,"xv-notification-v2",{"variant":[513],"dismissible":[516]}],[1,"xv-overflow-menu-v2",{"open":[1540],"disabled":[516],"position":[1],"size":[1]},[[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-overflow-menu-v2-item",{"disabled":[516],"value":[520],"variant":[1]},[[0,"click","handleClick"]]],[1,"xv-progress-indicator-v2",{"progress":[514],"variant":[1],"size":[1]},null,{"progress":["updateChildItems"]}],[1,"xv-progress-indicator-v2-item",{"status":[1]}],[1,"xv-table-v2-expand",{"open":[1540],"disabled":[516]}],[1,"xv-tag-v2",{"size":[1],"color":[1],"bg":[1],"disabled":[4],"closeable":[4]}],[1,"xv-toggle-tip",{"open":[1540],"position":[1],"setPopover":[64]},[[4,"click","handleClickOutside"],[0,"keydown","handleKeyDown"]],{"open":["openChangeHandle"]}],[1,"xv-data-table-cell",{"name":[1025],"sort":[1537],"multiline":[2],"width":[1],"align":[1]},[[0,"click","handleSort"]]],[1,"xv-login-modal",{"visible":[4],"oauthProviders":[32],"bookNow":[32],"returnUrl":[32],"passwordLoginEnabled":[32],"oauthLoginEnabled":[32],"passwordRegistrationEnabled":[32],"configurationName":[32],"xvMvcConfigName":[32],"contactUrl":[32]}],[1,"xv-table-v2-cell",{"multiline":[516],"name":[1537],"align":[513],"sort":[1537]},[[0,"click","handleSort"]]],[4,"xv-tooltip-v2",{"message":[1],"position":[1],"visible":[32]},[[1,"mouseenter","onMouseEnter"],[1,"mouseleave","onMouseLeave"]]],[65,"xv-button-v2",{"label":[513],"variant":[513],"size":[513],"disabled":[516],"loading":[516],"block":[516],"type":[513],"hasLeftIcon":[32],"hasRightIcon":[32],"hasContent":[32]}],[65,"xv-checkbox-v2",{"checked":[1540],"indeterminate":[516],"disabled":[516],"name":[513],"value":[513],"readonly":[516],"required":[516],"partial":[516],"label":[1],"size":[513],"error":[520],"hasFocus":[32]},null,{"checked":["onCheckedChange"]}],[1,"xv-loader-v2",{"show":[4],"variant":[1],"size":[1]}]]]], options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/xv-webcomponents.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"xv-webcomponents.cjs.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.31.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,yQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"xv-webcomponents.cjs.js","sources":["node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.32.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAUzB,EAAE,MAAM,UAAU,GAAG,yQAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOA,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;;ACnBD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,wBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}

package/dist/collection/collection-manifest.json

@@ -6,8 +6,13 @@
     "components/xv-button/xv-button.js",
     "components/xv-card/xv-card.js",
     "components/xv-checkbox/xv-checkbox.js",
+    "components/xv-data-table/xv-data-table.js",
+    "components/xv-data-table/xv-data-table-cell/xv-data-table-cell.js",
+    "components/xv-data-table/xv-data-table-collapse/xv-data-table-collapse.js",
+    "components/xv-data-table/xv-data-table-row/xv-data-table-row.js",
     "components/xv-dropdown/xv-dropdown.js",
     "components/xv-dropdown/xv-dropdown-item/xv-dropdown-item.js",
+    "components/xv-file-uploader/xv-file-uploader.js",
     "components/xv-footer/xv-footer.js",
     "components/xv-header/xv-header.js",
     "components/xv-link/xv-link.js",
@@ -15,6 +20,7 @@
     "components/xv-login-modal/xv-login-modal.js",
     "components/xv-modal/xv-modal.js",
     "components/xv-notification/xv-notification.js",
+    "components/xv-number-input/xv-number-input.js",
     "components/xv-overflow-menu/xv-overflow-menu.js",
     "components/xv-overflow-menu/xv-overflow-menu-item/xv-overflow-menu-item.js",
     "components/xv-progress-indicator/xv-progress-indicator.js",
@@ -27,11 +33,12 @@
     "components/xv-tabs/xv-tab/xv-tab.js",
     "components/xv-tag/xv-tag.js",
     "components/xv-text-input/xv-text-input.js",
+    "components/xv-toggle-tip/xv-toggle-tip.js",
     "components/xv-tooltip/xv-tooltip.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.31.0",
+    "version": "4.32.0",
     "typescriptVersion": "5.5.4"
   },
   "collections": [],

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

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