@yoyaflow/yoya-ui 0.3.2 → 0.3.3

package/dist/yoya.ui.css

@@ -960,6 +960,77 @@ body {
     width: 0;
   }
 
+  .yoya-vtreetable {
+    box-sizing: border-box;
+    font-family: var(--yoya-font-family, inherit);
+    font-size: var(--yoya-font-size-sm, 13px);
+    line-height: 1.5;
+    max-width: 100%;
+    overflow-x: auto;
+    width: 100%;
+  }
+
+  .yoya-vtreetable .yoya-vtreetable-table {
+    border-collapse: collapse;
+    width: 100%;
+  }
+
+  .yoya-vtreetable th,
+  .yoya-vtreetable td {
+    border-bottom: 1px solid var(--yoya-color-border-faint, light-dark(#efefef, #2a2a2a));
+    padding: 6px 10px;
+    text-align: left;
+    vertical-align: middle;
+  }
+
+  .yoya-vtreetable thead th {
+    background: var(--yoya-color-surface-muted, light-dark(#f5f5f5, #1c1c1c));
+    color: var(--yoya-color-text-secondary, light-dark(#6f6f6f, #a6a6a6));
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .yoya-vtreetable tbody tr:hover {
+    background: var(--yoya-color-surface-hover, light-dark(#f3f3f3, #262626));
+  }
+
+  .yoya-vtreetable .yoya-vtreetable-expand {
+    background: transparent;
+    border: 0;
+    border-radius: 4px;
+    color: var(--yoya-color-text-secondary, light-dark(#6f6f6f, #a6a6a6));
+    cursor: pointer;
+    font: inherit;
+    margin-left: 2px;
+    padding: 0 3px;
+  }
+
+  .yoya-vtreetable .yoya-vtreetable-expand:hover {
+    background: transparent;
+    color: var(--yoya-color-primary, #1f6feb);
+  }
+
+  .yoya-vtreetable .yoya-vtreetable-expand:focus-visible {
+    outline: 2px solid var(--yoya-color-primary-ring, rgba(31, 111, 235, 0.35));
+    outline-offset: 1px;
+  }
+
+  .yoya-vtreetable .yoya-vtreetable-select {
+    accent-color: var(--yoya-color-primary, #1f6feb);
+    margin: 0;
+  }
+
+  .yoya-vtreetable thead th:first-child,
+  .yoya-vtreetable tbody td:first-child {
+    padding-left: 10px;
+  }
+
+  .yoya-vtreetable thead th:first-child,
+  .yoya-vtreetable tbody td:first-child {
+    white-space: nowrap;
+    width: 1%;
+  }
+
   :where(.yoya-vnavbar) {
     align-items: center;
     background: transparent;