@vtable-guild/vtable-guild 2.9.0-alpha.1 → 2.9.0-alpha.2

package/css/tailwind4.css

@@ -71,6 +71,16 @@
   --vtg-cell-tag-line-height: 20px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 8%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 14px;
+  --vtg-editor-radius: 6px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
   --vtg-column-settings-radius: 8px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 1050;
@@ -322,6 +332,16 @@
   --vtg-cell-tag-line-height: 22px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 10%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 12px;
+  --vtg-editor-radius: 4px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: var(--color-default);
   --vtg-column-settings-radius: 4px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 2000;

package/dist/core/src/components/Button.d.ts

@@ -73,6 +73,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<"default" | "primary" | "link">;
         default: string;
     };
+    htmlType: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
     size: {
         type: PropType<"sm" | "md">;
         default: string;
@@ -96,6 +100,10 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
         type: PropType<"default" | "primary" | "link">;
         default: string;
     };
+    htmlType: {
+        type: PropType<"button" | "submit" | "reset">;
+        default: string;
+    };
     size: {
         type: PropType<"sm" | "md">;
         default: string;
@@ -122,6 +130,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     type: "link" | "default" | "primary";
     disabled: boolean;
     ui: Partial<Record<"root" | "inner", string>>;
+    htmlType: "button" | "reset" | "submit";
 }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
 export default _default;
 //# sourceMappingURL=Button.d.ts.map

package/dist/core/src/components/Button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../core/src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;AAEpD,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE5D;;;;GAIG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEQ,CAAA;AAEhC,KAAK,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAC,KAAK,CAAA;;;cAMlC,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;;;;cAIxC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;;;;;;;;cAKrB,QAAQ,CAAC,SAAS,CAAC;YAAE,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;;;;;;;;;cAT3D,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;;;;cAIxC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;;;;;;;;cAKrB,QAAQ,CAAC,SAAS,CAAC;YAAE,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;;;;;;;;;;;;;;;;AAbjF,wBAiCE"}
+{"version":3,"file":"Button.d.ts","sourceRoot":"","sources":["../../../../../core/src/components/Button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAmB,KAAK,QAAQ,EAAE,MAAM,KAAK,CAAA;AAEpD,OAAO,KAAK,EAAe,SAAS,EAAE,MAAM,gBAAgB,CAAA;AAE5D;;;;GAIG;AACH,QAAA,MAAM,kBAAkB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkEQ,CAAA;AAEhC,KAAK,WAAW,GAAG,MAAM,OAAO,kBAAkB,CAAC,KAAK,CAAA;;;cAMlC,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;;;;cAIxC,QAAQ,CAAC,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;;;;cAIvC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;;;;;;;;cAKrB,QAAQ,CAAC,SAAS,CAAC;YAAE,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;;;;;;;;;cAb3D,QAAQ,CAAC,SAAS,GAAG,SAAS,GAAG,MAAM,CAAC;;;;cAIxC,QAAQ,CAAC,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;;;;cAIvC,QAAQ,CAAC,IAAI,GAAG,IAAI,CAAC;;;;;;;;cAKrB,QAAQ,CAAC,SAAS,CAAC;YAAE,KAAK,EAAE,MAAM,CAAC,WAAW,EAAE,MAAM,CAAC,CAAA;SAAE,CAAC,CAAC;;;;;;;;;;;;;;;;;AAjBjF,wBA0CE"}

package/dist/core/src/components/Button.mjs

@@ -1,6 +1,6 @@
-import { defineComponent as l, createVNode as c } from "vue";
+import { defineComponent as d, createVNode as c } from "vue";
 import { useTheme as i } from "../composables/useTheme.mjs";
-const s = {
+const n = {
   slots: {
     root: "inline-flex items-center justify-center border font-normal transition-all duration-200 ease-[cubic-bezier(0.645,0.045,0.355,1)] leading-[1.5714] cursor-pointer",
     inner: ""
@@ -61,13 +61,17 @@ const s = {
     size: "md",
     disabled: !1
   }
-}, v = /* @__PURE__ */ l({
+}, v = /* @__PURE__ */ d({
   name: "VButton",
   props: {
     type: {
       type: String,
       default: "default"
     },
+    htmlType: {
+      type: String,
+      default: "button"
+    },
     size: {
       type: String,
       default: "md"
@@ -92,11 +96,12 @@ const s = {
   }) {
     const {
       slots: t
-    } = i("button", s, r);
-    function a(d) {
-      r.disabled || o("click", d);
+    } = i("button", n, r);
+    function a(l) {
+      r.disabled || o("click", l);
     }
     return () => c("button", {
+      type: r.htmlType,
       class: t.root(),
       disabled: r.disabled,
       onClick: a

package/dist/css/presets/antdv.css

@@ -28,6 +28,16 @@
   --vtg-cell-tag-line-height: 20px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 8%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 14px;
+  --vtg-editor-radius: 6px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
   --vtg-column-settings-radius: 8px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 1050;

package/dist/css/presets/element-plus.css

@@ -31,6 +31,16 @@
   --vtg-cell-tag-line-height: 22px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 10%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 12px;
+  --vtg-editor-radius: 4px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: var(--color-default);
   --vtg-column-settings-radius: 4px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 2000;

package/dist/css/style.css

@@ -30,6 +30,16 @@
   --vtg-cell-tag-line-height: 20px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 8%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 14px;
+  --vtg-editor-radius: 6px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: color-mix(in srgb, var(--color-on-surface) 6%, transparent);
   --vtg-column-settings-radius: 8px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 1050;
@@ -281,6 +291,16 @@
   --vtg-cell-tag-line-height: 22px;
   --vtg-cell-tag-bg: color-mix(in srgb, currentcolor 10%, var(--vtg-table-bg));
   --vtg-cell-tag-border: color-mix(in srgb, currentcolor 30%, transparent);
+  --vtg-cell-progress-min-width: 100px;
+  --vtg-editor-error-gap: 2px;
+  --vtg-editor-error-font-size: 12px;
+  --vtg-editor-radius: 4px;
+  --vtg-cell-progress-max-width: 320px;
+  --vtg-cell-progress-height: 6px;
+  --vtg-cell-progress-radius: 100px;
+  --vtg-cell-progress-gap: 8px;
+  --vtg-cell-progress-font-size: 12px;
+  --vtg-cell-progress-trail: var(--color-default);
   --vtg-column-settings-radius: 4px;
   --vtg-column-settings-icon-size: 16px;
   --vtg-column-settings-z: 2000;
@@ -819,6 +839,9 @@
 .vtg-mt-2 {
     margin-top: 0.5rem
 }
+.vtg-mt-\[var\(--vtg-editor-error-gap\)\] {
+    margin-top: var(--vtg-editor-error-gap)
+}
 .vtg-box-border {
     box-sizing: border-box
 }
@@ -849,6 +872,12 @@
 .vtg-table-cell {
     display: table-cell
 }
+.vtg-grid {
+    display: grid
+}
+.\!vtg-hidden {
+    display: none !important
+}
 .vtg-hidden {
     display: none
 }
@@ -897,6 +926,9 @@
 .vtg-h-\[var\(--vtg-btn-height-sm\)\] {
     height: var(--vtg-btn-height-sm)
 }
+.vtg-h-\[var\(--vtg-cell-progress-height\)\] {
+    height: var(--vtg-cell-progress-height)
+}
 .vtg-h-\[var\(--vtg-checkbox-size\)\] {
     height: var(--vtg-checkbox-size)
 }
@@ -912,6 +944,9 @@
 .vtg-h-\[var\(--vtg-pagination-size\)\] {
     height: var(--vtg-pagination-size)
 }
+.vtg-h-\[var\(--vtg-query-control-height\,32px\)\] {
+    height: var(--vtg-query-control-height,32px)
+}
 .vtg-h-\[var\(--vtg-radio-size\)\] {
     height: var(--vtg-radio-size)
 }
@@ -945,6 +980,9 @@
 .vtg-min-h-\[var\(--vtg-pagination-option-height\)\] {
     min-height: var(--vtg-pagination-option-height)
 }
+.vtg-min-h-\[var\(--vtg-query-control-height\,32px\)\] {
+    min-height: var(--vtg-query-control-height,32px)
+}
 .vtg-w-0 {
     width: 0px
 }
@@ -1002,6 +1040,12 @@
 .vtg-w-\[var\(--vtg-pagination-simple-input-width\)\] {
     width: var(--vtg-pagination-simple-input-width)
 }
+.vtg-w-\[var\(--vtg-query-label-width\,80px\)\] {
+    width: var(--vtg-query-label-width,80px)
+}
+.vtg-w-\[var\(--vtg-query-light-field-width\,240px\)\] {
+    width: var(--vtg-query-light-field-width,240px)
+}
 .vtg-w-\[var\(--vtg-radio-size\)\] {
     width: var(--vtg-radio-size)
 }
@@ -1041,6 +1085,12 @@
 .vtg-min-w-\[80px\] {
     min-width: 80px
 }
+.vtg-min-w-\[min\(100\%\,calc\(var\(--vtg-query-field-min-width\,240px\)\*2_\+_var\(--vtg-query-column-gap\,24px\)\)\)\] {
+    min-width: min(100%, calc(var(--vtg-query-field-min-width,240px) * 2 + var(--vtg-query-column-gap,24px)))
+}
+.vtg-min-w-\[var\(--vtg-cell-progress-min-width\)\] {
+    min-width: var(--vtg-cell-progress-min-width)
+}
 .vtg-min-w-\[var\(--vtg-pagination-size\)\] {
     min-width: var(--vtg-pagination-size)
 }
@@ -1053,6 +1103,9 @@
 .vtg-max-w-\[calc\(100vw-16px\)\] {
     max-width: calc(100vw - 16px)
 }
+.vtg-max-w-\[var\(--vtg-cell-progress-max-width\)\] {
+    max-width: var(--vtg-cell-progress-max-width)
+}
 .vtg-max-w-full {
     max-width: 100%
 }
@@ -1218,6 +1271,9 @@
 .vtg-gap-4 {
     gap: 1rem
 }
+.vtg-gap-\[var\(--vtg-cell-progress-gap\)\] {
+    gap: var(--vtg-cell-progress-gap)
+}
 .vtg-gap-\[var\(--vtg-pagination-control-gap\)\] {
     gap: var(--vtg-pagination-control-gap)
 }
@@ -1227,15 +1283,27 @@
 .vtg-gap-\[var\(--vtg-pagination-page-gap\)\] {
     gap: var(--vtg-pagination-page-gap)
 }
+.vtg-gap-\[var\(--vtg-query-action-gap\,8px\)\] {
+    gap: var(--vtg-query-action-gap,8px)
+}
+.vtg-gap-\[var\(--vtg-query-label-gap\,12px\)\] {
+    gap: var(--vtg-query-label-gap,12px)
+}
 .vtg-gap-x-4 {
     column-gap: 1rem
 }
+.vtg-gap-x-\[var\(--vtg-query-column-gap\,24px\)\] {
+    column-gap: var(--vtg-query-column-gap,24px)
+}
 .vtg-gap-y-2 {
     row-gap: 0.5rem
 }
 .vtg-gap-y-3 {
     row-gap: 0.75rem
 }
+.vtg-gap-y-\[var\(--vtg-query-row-gap\,16px\)\] {
+    row-gap: var(--vtg-query-row-gap,16px)
+}
 .vtg-self-stretch {
     align-self: stretch
 }
@@ -1295,6 +1363,9 @@
 .vtg-rounded-\[var\(--vtg-btn-border-radius-sm\,4px\)\] {
     border-radius: var(--vtg-btn-border-radius-sm,4px)
 }
+.vtg-rounded-\[var\(--vtg-cell-progress-radius\)\] {
+    border-radius: var(--vtg-cell-progress-radius)
+}
 .vtg-rounded-\[var\(--vtg-cell-tag-radius\)\] {
     border-radius: var(--vtg-cell-tag-radius)
 }
@@ -1304,6 +1375,9 @@
 .vtg-rounded-\[var\(--vtg-column-settings-radius\)\] {
     border-radius: var(--vtg-column-settings-radius)
 }
+.vtg-rounded-\[var\(--vtg-editor-radius\)\] {
+    border-radius: var(--vtg-editor-radius)
+}
 .vtg-rounded-\[var\(--vtg-input-border-radius\)\] {
     border-radius: var(--vtg-input-border-radius)
 }
@@ -1313,6 +1387,12 @@
 .vtg-rounded-\[var\(--vtg-pagination-radius\)\] {
     border-radius: var(--vtg-pagination-radius)
 }
+.vtg-rounded-\[var\(--vtg-query-radius\,4px\)\] {
+    border-radius: var(--vtg-query-radius,4px)
+}
+.vtg-rounded-\[var\(--vtg-query-radius\,6px\)\] {
+    border-radius: var(--vtg-query-radius,6px)
+}
 .vtg-rounded-\[var\(--vtg-scrollbar-thumb-radius\)\] {
     border-radius: var(--vtg-scrollbar-thumb-radius)
 }
@@ -1461,6 +1541,9 @@
 .vtg-bg-\[color\:var\(--color-surface-hover\)\] {
     background-color: var(--color-surface-hover)
 }
+.vtg-bg-\[color\:var\(--vtg-cell-progress-trail\)\] {
+    background-color: var(--vtg-cell-progress-trail)
+}
 .vtg-bg-\[color\:var\(--vtg-cell-tag-bg\)\] {
     background-color: var(--vtg-cell-tag-bg)
 }
@@ -1567,6 +1650,12 @@
 .vtg-p-3 {
     padding: 0.75rem
 }
+.vtg-p-\[var\(--vtg-query-light-padding\,16px\)\] {
+    padding: var(--vtg-query-light-padding,16px)
+}
+.vtg-p-\[var\(--vtg-query-padding\,24px\)\] {
+    padding: var(--vtg-query-padding,24px)
+}
 .vtg-p-\[var\(--vtg-tooltip-padding\)\] {
     padding: var(--vtg-tooltip-padding)
 }
@@ -1762,18 +1851,27 @@
 .vtg-text-\[length\:42px\] {
     font-size: 42px
 }
+.vtg-text-\[length\:var\(--vtg-cell-progress-font-size\)\] {
+    font-size: var(--vtg-cell-progress-font-size)
+}
 .vtg-text-\[length\:var\(--vtg-cell-tag-font-size\)\] {
     font-size: var(--vtg-cell-tag-font-size)
 }
 .vtg-text-\[length\:var\(--vtg-column-settings-icon-size\)\] {
     font-size: var(--vtg-column-settings-icon-size)
 }
+.vtg-text-\[length\:var\(--vtg-editor-error-font-size\)\] {
+    font-size: var(--vtg-editor-error-font-size)
+}
 .vtg-text-\[length\:var\(--vtg-input-font-size\)\] {
     font-size: var(--vtg-input-font-size)
 }
 .vtg-text-\[length\:var\(--vtg-pagination-font-size\)\] {
     font-size: var(--vtg-pagination-font-size)
 }
+.vtg-text-\[length\:var\(--vtg-query-error-font-size\,12px\)\] {
+    font-size: var(--vtg-query-error-font-size,12px)
+}
 .vtg-text-\[length\:var\(--vtg-table-font-size\)\] {
     font-size: var(--vtg-table-font-size)
 }
@@ -1818,6 +1916,10 @@
 .vtg-italic {
     font-style: italic
 }
+.vtg-tabular-nums {
+    --tw-numeric-spacing: tabular-nums;
+    font-variant-numeric: var(--tw-ordinal,  ) var(--tw-slashed-zero,  ) var(--tw-numeric-figure,  ) var(--tw-numeric-spacing,  ) var(--tw-numeric-fraction,  )
+}
 .vtg-leading-5 {
     line-height: 1.25rem
 }
@@ -1887,6 +1989,9 @@
 .vtg-text-\[color\:var\(--color-text-regular\)\] {
     color: var(--color-text-regular)
 }
+.vtg-text-\[color\:var\(--vtg-cell-error\)\] {
+    color: var(--vtg-cell-error)
+}
 .vtg-text-\[color\:var\(--vtg-pagination-active-color\)\] {
     color: var(--vtg-pagination-active-color)
 }
@@ -2133,6 +2238,9 @@
 .\[background-size\:1px_1\.6em\] {
     background-size: 1px 1.6em
 }
+.\[grid-template-columns\:repeat\(auto-fit\2c minmax\(min\(100\%\2c var\(--vtg-query-field-min-width\2c 240px\)\)\2c 1fr\)\)\] {
+    grid-template-columns: repeat(auto-fit,minmax(min(100%, var(--vtg-query-field-min-width,240px)),1fr))
+}
 .\[transform-origin\:center\] {
     transform-origin: center
 }
@@ -2841,6 +2949,12 @@
 .\[\&\:not\(\[draggable\=true\]\)\]\:vtg-cursor-not-allowed:not([draggable=true]) {
     cursor: not-allowed
 }
+.\[\&\>\*\]\:vtg-w-full>* {
+    width: 100%
+}
+.\[\&\>\.el-button\+\.el-button\]\:\!vtg-ml-0>.el-button+.el-button {
+    margin-left: 0px !important
+}
 .\[\&\>div\]\:vtg-min-w-0>div {
     min-width: 0px
 }
@@ -2864,6 +2978,9 @@
     margin-left: auto;
     margin-right: auto
 }
+.\[\&\>svg\]\:vtg-inline-block>svg {
+    display: inline-block
+}
 .\[\&\>svg\]\:vtg-h-\[1em\]>svg {
     height: 1em
 }
@@ -2876,6 +2993,9 @@
 .\[\&\>svg\]\:vtg-w-auto>svg {
     width: auto
 }
+.\[\&\>svg\]\:vtg-align-middle>svg {
+    vertical-align: middle
+}
 .\[\&\>td\]\:vtg-shadow-\[inset_0_-2px_0_0_var\(--vtg-table-row-drop-indicator-color\)\]>td {
     --tw-shadow: inset 0 -2px 0 0 var(--vtg-table-row-drop-indicator-color);
     --tw-shadow-colored: inset 0 -2px 0 0 var(--tw-shadow-color);
@@ -2886,6 +3006,18 @@
     --tw-shadow-colored: inset 0 2px 0 0 var(--tw-shadow-color);
     box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow, 0 0 #0000)
 }
+.\[\&\[data-invalid\=true\]\]\:vtg-outline[data-invalid=true] {
+    outline-style: solid
+}
+.\[\&\[data-invalid\=true\]\]\:vtg-outline-1[data-invalid=true] {
+    outline-width: 1px
+}
+.\[\&\[data-invalid\=true\]\]\:vtg-outline-\[color\:var\(--vtg-cell-error\)\][data-invalid=true] {
+    outline-color: var(--vtg-cell-error)
+}
+.\[\&\[data-status\=error\]\]\:vtg-bg-\[color\:var\(--vtg-cell-error\)\][data-status=error] {
+    background-color: var(--vtg-cell-error)
+}
 .\[\&\[data-status\=error\]\]\:vtg-text-\[color\:var\(--vtg-cell-error\)\][data-status=error] {
     color: var(--vtg-cell-error)
 }
@@ -2900,6 +3032,9 @@
     content: var(--tw-content, '');
     background-color: var(--color-primary)
 }
+.\[\&\[data-status\=success\]\]\:vtg-bg-\[color\:var\(--vtg-cell-success\)\][data-status=success] {
+    background-color: var(--vtg-cell-success)
+}
 .\[\&\[data-status\=success\]\]\:vtg-text-\[color\:var\(--vtg-cell-success\)\][data-status=success] {
     color: var(--vtg-cell-success)
 }
@@ -2907,6 +3042,9 @@
     content: var(--tw-content, '');
     background-color: var(--vtg-cell-success)
 }
+.\[\&\[data-status\=warning\]\]\:vtg-bg-\[color\:var\(--vtg-cell-warning\)\][data-status=warning] {
+    background-color: var(--vtg-cell-warning)
+}
 .\[\&\[data-status\=warning\]\]\:vtg-text-\[color\:var\(--vtg-cell-warning\)\][data-status=warning] {
     color: var(--vtg-cell-warning)
 }