Et2Vfs widget docs

api/js/etemplate/Et2Vfs/Et2VfsPath.ts

@@ -23,11 +23,14 @@ import {HasSlotController} from "../Et2Widget/slot";
  * @summary Display an editable path from the VFS
  * @since
  *
+ * @slot label - The input’s label. Alternatively, you can use the label attribute.
  * @slot prefix - Before the path
  * @slot suffix - Like prefix, but after
+ * @slot edit-icon - The icon that switches to editing the path as text.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
  *
  * @event change - Emitted when the control's value changes.
+ * @event {CustomEvent} click - Emitted when the user clicks on part of the path.  `event.detail` contains the path.
  *
  * @csspart form-control-input - The textbox's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.

api/js/etemplate/Et2Vfs/Et2VfsSelectButton.ts

@@ -15,7 +15,8 @@ import {Et2VfsSelectDialog, FileInfo} from "./Et2VfsSelectDialog";
 import {waitForEvent} from "../Et2Widget/event";
 
 /**
- * @summary Button to open a file selection dialog, and return the selected path(s) as a value
+ * @summary Button to open a file selection dialog, and either return the selected path(s) as a value or take immediate
+ * action with them using the `method` property.
  * @since 23.1
  *
  * @dependency et2-vfs-select-dialog

api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.md

@@ -1,8 +1,22 @@
-You can get the files by:
+```html:preview
+<et2-vfs-select-dialog class="file-select"></et2-vfs-select-dialog>
+<et2-button noSubmit>Open dialog</et2-button>
+// TODO: This doesn't work because of Dialog / keymanager issues
+<script>
+  const dialog = document.querySelector('.file-select');
+  const openButton = dialog.nextElementSibling;
+
+  openButton.addEventListener('click', () => {dialog.show()});
+</script>
+```
+
+## Selected files
+
+You can get the selected files by:
 
 ### Widget value
 
-The dialog will return values on submit back to the server
+If the dialog is in the template, it will return values on submit back to the server.
 
 ### Change event
 
@@ -15,9 +29,12 @@ dialog.addEventListener("change", this.handleFilesSelected);
 
 ### getComplete() Promise
 
-When the user closes the dialog, getComplete() will return the selected files
+When the user closes the dialog, getComplete() will return the selected files.
 
 ```js
 const dialog = this.et2.getWidgetById("files");
 let files = await dialog.getComplete();
 ```
+
+This is probably the best way to get files (or directories) that you then want to do something with on the client. See
+also [Et2VfsSelectButton](../et2-vfs-select) which can pass the files to take action on the server. 

api/js/etemplate/Et2Vfs/Et2VfsSelectDialog.ts

@@ -28,7 +28,7 @@ import {Et2VfsPath} from "./Et2VfsPath";
 /**
  * @summary Select files (including directories) from the VFS.
  *
- * The dialog does not do anything with the files, just handles the UI to select file.
+ * The dialog does not do anything with the files, just handles the UI to select them.
  *
  * @dependency et2-box
  * @dependency et2-button

api/js/etemplate/Et2Vfs/Et2VfsSelectRow.ts

@@ -7,6 +7,15 @@ import {classMap} from "lit/directives/class-map.js";
 import shoelace from "../Styles/shoelace";
 import styles from "./Et2VfsSelectRow.styles";
 
+/**
+ * @summary Shows one file in the Et2VfsSelectDialog list
+ *
+ * @slot prefix - Used to prepend an icon or similar element between the checked icon and the mime icon
+ * @slot suffix - Used to append an icon or similar element after the file name
+ *
+ * @csspart base - The component’s base wrapper.
+ * @csspart checked-icon - The checked icon, an <sl-icon> element.
+ */
 export class Et2VfsSelectRow extends Et2Widget(LitElement)
 {
 	static get styles()