Doc updates

src/includes/VscElement.ts

@@ -3,8 +3,8 @@ import {LitElement} from 'lit';
 export class VscElement extends LitElement {
   private _version = '1.10.0';
 
-  /** VSC Element version */
-  get version() {
+  /** VSCode Elements version */
+  get version(): string {
     return this._version;
   }
 }

src/vscode-badge/vscode-badge.ts

@@ -4,6 +4,10 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-badge.styles.js';
 
 /**
+ * Show counts or status information. Badges can also be used within [Textfield](https://vscode-elements.github.io/components/textfield) and [TabHeader](https://vscode-elements.github.io/components/tabs) components.
+ *
+ * @tag vscode-badge
+ *
  * @cssprop --vscode-font-family
  * @cssprop --vscode-badge-background - default and counter variant background color
  * @cssprop --vscode-badge-foreground - default and counter variant foreground color

src/vscode-button/vscode-button.ts

@@ -7,6 +7,10 @@ import styles from './vscode-button.styles.js';
 import {ifDefined} from 'lit/directives/if-defined.js';
 
 /**
+ * Clickable element that are used to trigger actions.
+ *
+ * @tag vscode-button
+ *
  * @fires vsc-click Dispatched only when button is not in disabled state.
  *
  * @cssprop --vscode-button-background

src/vscode-checkbox-group/vscode-checkbox-group.ts

@@ -3,6 +3,11 @@ import {customElement, property} from 'lit/decorators.js';
 import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-checkbox-group.styles.js';
 
+/**
+ * Arranges a group of checkboxes horizontally or vertically.
+ *
+ * @tag vscode-checkbox-group
+ */
 @customElement('vscode-checkbox-group')
 export class VscodeCheckboxGroup extends VscElement {
   static styles = styles;

src/vscode-checkbox/vscode-checkbox.ts

@@ -7,8 +7,11 @@ import styles from './vscode-checkbox.styles.js';
 import {AssociatedFormControl} from '../includes/AssociatedFormControl.js';
 
 /**
- * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
- * can be applied through the `invalid` property.
+ * Allows users to select one or more options from a set. When participating in a form, it supports
+ * the `:invalid` pseudo class. Otherwise the error styles can be applied through the `invalid`
+ * property.
+ *
+ * @tag vscode-checkbox
  *
  * @attr name - Name which is used as a variable name in the data of the form-container.
  * @attr label - Attribute pair of the `label` property.
@@ -44,6 +47,11 @@ export class VscodeCheckbox
     delegatesFocus: true,
   };
 
+  /**
+   * Automatically focus on the element when the page loads.
+   *
+   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/autofocus)
+   */
   @property({type: Boolean, reflect: true})
   autofocus = false;
 
@@ -59,6 +67,9 @@ export class VscodeCheckbox
 
   private _checked = false;
 
+  /**
+   * The element's initial checked state, which will be restored when the containing form is reset.
+   */
   @property({type: Boolean, reflect: true, attribute: 'default-checked'})
   defaultChecked = false;
 
@@ -88,6 +99,7 @@ export class VscodeCheckbox
   @property({type: Boolean, reflect: true})
   indeterminate = false;
 
+
   @property({type: Boolean, reflect: true})
   set required(newVal: boolean) {
     this._required = newVal;
@@ -111,6 +123,7 @@ export class VscodeCheckbox
     return this._internals.validity;
   }
 
+
   get validationMessage(): string {
     return this._internals.validationMessage;
   }
@@ -119,10 +132,23 @@ export class VscodeCheckbox
     return this._internals.willValidate;
   }
 
+  /**
+   * Returns `true` if the element's value is valid; otherwise, it returns `false`.
+   * If the element's value is invalid, an invalid event is triggered on the element.
+   *
+   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/checkValidity)
+   */
   checkValidity(): boolean {
     return this._internals.checkValidity();
   }
 
+  /**
+   * Returns `true` if the element's value is valid; otherwise, it returns `false`.
+   * If the element's value is invalid, an invalid event is triggered on the element, and the
+   * browser displays an error message to the user.
+   *
+   * [MDN Reference](https://developer.mozilla.org/en-US/docs/Web/API/HTMLInputElement/reportValidity)
+   */
   reportValidity(): boolean {
     return this._internals.reportValidity();
   }

src/vscode-collapsible/vscode-collapsible.ts

@@ -7,6 +7,10 @@ import styles from './vscode-collapsible.styles.js';
 export type VscCollapsibleToggleEvent = CustomEvent<{open: boolean}>;
 
 /**
+ * Allows users to reveal or hide related content on a page.
+ *
+ * @tag vscode-collapsible
+ *
  * @slot - Main content.
  * @slot actions - You can place any action icon in this slot in the header, but it's also possible to use any HTML element in it. It's only visible when the component is open.
  * @slot decorations - The elements placed in the decorations slot are always visible.

src/vscode-context-menu-item/vscode-context-menu-item.ts

@@ -12,6 +12,8 @@ export interface VscClickEventDetail {
 }
 
 /**
+ * @tag vscode-context-menu-item
+ *
  * Child component of [ContextMenu](/components/context-menu/).
  *
  * @cssprop --vscode-font-family

src/vscode-context-menu/vscode-context-menu.ts

@@ -9,6 +9,7 @@ import '../vscode-context-menu-item/index.js';
 import styles from './vscode-context-menu.styles.js';
 
 interface MenuItemData {
+  // TODO: make optional
   label: string;
   keybinding?: string;
   value?: string;
@@ -25,6 +26,8 @@ export type VscContextMenuSelectEvent = CustomEvent<{
 }>;
 
 /**
+ * @tag vscode-context-menu
+ *
  * @fires {VscMenuSelectEvent} vsc-menu-select - Emitted when a menu item is clicked
  *
  * @cssprop --vscode-font-family

src/vscode-divider/vscode-divider.ts

@@ -3,6 +3,9 @@ import {customElement, property} from 'lit/decorators.js';
 import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-divider.styles.js';
 
+/**
+ * @tag vscode-divider
+ */
 @customElement('vscode-divider')
 export class VscodeDivider extends VscElement {
   static styles = styles;

src/vscode-form-container/vscode-form-container.ts

@@ -51,6 +51,9 @@ const isRadio = (el: Element): el is VscodeRadio => {
   return el.tagName.toLocaleLowerCase() === 'vscode-radio';
 };
 
+/**
+ * @tag vscode-form-container
+ */
 @customElement('vscode-form-container')
 export class VscodeFormContainer extends VscElement {
   static styles = styles;

src/vscode-form-group/vscode-form-group.ts

@@ -6,6 +6,8 @@ import styles from './vscode-form-group.styles.js';
 export type FormGroupVariant = 'horizontal' | 'vertical' | 'settings-group';
 
 /**
+ * @tag vscode-form-group
+ *
  * @cssprop [--label-width=150px] - The width of the label in horizontal mode
  * @cssprop [--label-right-margin=14px] - The right margin of the label in horizontal mode
  */

src/vscode-form-helper/vscode-form-helper.ts

@@ -7,6 +7,8 @@ import styles from './vscode-form-helper.styles.js';
 /**
  * Adds more detailed description to a [FromGroup](https://bendera.github.io/vscode-webview-elements/components/vscode-form-group/)
  *
+ * @tag vscode-form-helper
+ *
  * @cssprop --vsc-foreground-translucent - Default text color. 90% transparency version of `--vscode-foreground` by default.
  */
 @customElement('vscode-form-helper')

src/vscode-icon/vscode-icon.ts

@@ -11,6 +11,8 @@ import styles from './vscode-icon.styles.js';
  * In "action-icon" mode it behaves like a button. In this case, it is
  * recommended that a meaningful label is specified with the `label` property.
  *
+ * @tag vscode-icon
+ *
  * @cssprop --vscode-icon-foreground
  * @cssprop --vscode-toolbar-hoverBackground - Hover state background color in `active-icon` mode
  * @cssprop --vscode-toolbar-activeBackground - Active state background color in `active-icon` mode

src/vscode-label/vscode-label.ts

@@ -14,6 +14,8 @@ interface FocusableElement extends Element {
 }
 
 /**
+ * @tag vscode-label
+ *
  * @cssprop --vscode-font-family
  * @cssprop --vscode-font-size
  * @cssprop --vscode-foreground

src/vscode-multi-select/vscode-multi-select.ts

@@ -14,6 +14,8 @@ import {highlightRanges} from '../includes/vscode-select/helpers.js';
  * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
  * can be applied through the `invalid` property.
  *
+ * @tag vscode-multi-select
+ *
  * @prop {boolean} invalid
  * @attr {boolean} invalid
  * @attr name - Name which is used as a variable name in the data of the form-container.

src/vscode-option/vscode-option.ts

@@ -3,6 +3,9 @@ import {customElement, property} from 'lit/decorators.js';
 import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-option.styles.js';
 
+/**
+ * @tag vscode-option
+ */
 @customElement('vscode-option')
 export class VscodeOption extends VscElement {
   static styles = styles;

src/vscode-progress-ring/vscode-progress-ring.ts

@@ -3,6 +3,9 @@ import {customElement, property} from 'lit/decorators.js';
 import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-progress-ring.styles.js';
 
+/**
+ * @tag vscode-progress-ring
+ */
 @customElement('vscode-progress-ring')
 export class VscodeProgressRing extends VscElement {
   static styles = styles;

src/vscode-radio-group/vscode-radio-group.ts

@@ -10,6 +10,8 @@ import {VscodeRadio} from '../vscode-radio/index.js';
 import styles from './vscode-radio-group.styles.js';
 
 /**
+ * @tag vscode-radio-group
+ *
  * @fires {Event} change - Dispatched when a child radio button is changed.
  */
 @customElement('vscode-radio-group')

src/vscode-radio/vscode-radio.ts

@@ -10,6 +10,8 @@ import {AssociatedFormControl} from '../includes/AssociatedFormControl.js';
  * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
  * can be applied through the `invalid` property.
  *
+ * @tag vscode-radio
+ *
  * @attr name - Name which is used as a variable name in the data of the form-container.
  * @attr label - Attribute pair of the `label` property.
  *

src/vscode-scrollable/vscode-scrollable.ts

@@ -12,6 +12,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-scrollable.styles.js';
 
 /**
+ * @tag vscode-scrollable
+ *
  * @cssprop [--min-thumb-height=20px] - Scrollbar thumb minimum height
  * @cssprop --vscode-scrollbar-shadow
  * @cssprop --vscode-scrollbarSlider-background

src/vscode-single-select/vscode-single-select.ts

@@ -13,6 +13,8 @@ import {highlightRanges} from '../includes/vscode-select/helpers.js';
  * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
  * can be applied through the `invalid` property.
  *
+ * @tag vscode-single-select
+ *
  * ## Types
  *
  * ```typescript

src/vscode-split-layout/vscode-split-layout.ts

@@ -59,6 +59,8 @@ export type VscSplitLayoutChangeEvent = CustomEvent<{
 }>;
 
 /**
+ * @tag vscode-split-layout
+ *
  * @cssprop [--hover-border=var(--vscode-sash-hoverBorder)]
  */
 @customElement('vscode-split-layout')

src/vscode-tab-header/vscode-tab-header.ts

@@ -5,6 +5,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-tab-header.styles.js';
 
 /**
+ * @tag vscode-tab-header
+ *
  * @cssprop --vscode-foreground
  * @cssprop --vscode-panelTitle-inactiveForeground
  * @cssprop --vscode-panelTitle-activeForeground

src/vscode-tab-panel/vscode-tab-panel.ts

@@ -4,6 +4,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-tab-panel.styles.js';
 
 /**
+ * @tag vscode-tab-panel
+ *
  * @cssprop --vscode-panel--background
  * @cssprop --vscode-focusBorder
  */

src/vscode-table-body/vscode-table-body.ts

@@ -4,6 +4,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-table-body.styles.js';
 
 /**
+ * @tag vscode-table-body
+ *
  * @cssprop --vscode-keybindingTable-rowsBackground
  */
 @customElement('vscode-table-body')

src/vscode-table-cell/vscode-table-cell.ts

@@ -4,6 +4,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-table-cell.styles.js';
 
 /**
+ * @tag vscode-table-cell
+ *
  * @cssprop --vscode-editorGroup-border
  * @cssprop --vscode-foreground
  * @cssprop --vscode-font-family

src/vscode-table-header-cell/vscode-table-header-cell.ts

@@ -4,6 +4,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-table-header-cell.styles.js';
 
 /**
+ * @tag vscode-table-header-cell
+ *
  * @cssprop --vscode-foreground
  * @cssprop --vscode-font-family
  * @cssprop --vscode-font-size

src/vscode-table-header/vscode-table-header.ts

@@ -4,6 +4,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-table-header.styles.js';
 
 /**
+ * @tag vscode-table-header
+ *
  * @cssprop --vscode-keybindingTable-headerBackground - Table header background
  */
 @customElement('vscode-table-header')

src/vscode-table-row/vscode-table-row.ts

@@ -4,6 +4,8 @@ import {VscElement} from '../includes/VscElement.js';
 import styles from './vscode-table-row.styles.js';
 
 /**
+ * @tag vscode-table-row
+ *
  * @cssprop --vscode-editorGroup-border
  */
 @customElement('vscode-table-row')

src/vscode-table/vscode-table.ts

@@ -22,6 +22,8 @@ import styles from './vscode-table.styles.js';
 const COMPONENT_WIDTH_PERCENTAGE = 100;
 
 /**
+ * @tag vscode-table
+ *
  * @attr {Boolean} zebra - Zebra stripes, even rows are tinted.
  * @attr {Boolean} zebra-odd - Zebra stripes, odd rows are tinted.
  * @attr {Boolean} bordered-rows - Rows are separated by borders

src/vscode-tabs/vscode-tabs.ts

@@ -14,6 +14,8 @@ import styles from './vscode-tabs.styles.js';
 export type VscTabsSelectEvent = CustomEvent<{selectedIndex: number}>;
 
 /**
+ * @tag vscode-tabs
+ *
  * @slot - Default slot. It is used for tab panels.
  * @slot header - Slot for tab headers.
  * @slot addons - Right aligned area in the header.

src/vscode-textarea/vscode-textarea.ts

@@ -13,6 +13,8 @@ import {AssociatedFormControl} from '../includes/AssociatedFormControl.js';
  * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
  * can be applied through the `invalid` property.
  *
+ * @tag vscode-textarea
+ *
  * @fires {InputEvent} input
  * @fires {Event} change
  *

src/vscode-textfield/vscode-textfield.ts

@@ -27,6 +27,8 @@ type InputType =
  * When participating in a form, it supports the `:invalid` pseudo class. Otherwise the error styles
  * can be applied through the `invalid` property.
  *
+ * @tag vscode-textfield
+ *
  * @slot content-before - A slot before the editable area but inside of the component. It is used to place icons.
  * @slot content-after - A slot after the editable area but inside of the component. It is used to place icons.
  *

src/vscode-tree/vscode-tree.ts

@@ -153,8 +153,10 @@ const isBranch = (item: TreeItem) => {
 };
 
 /**
+ * @tag vscode-tree
+ *
  * @fires vsc-select Dispatched when an item is selected.
- * @fires {CustomEvent} vsc-tree-select Dispatched when an item is selected.
+ * @fires {VscTreeSelectEvent} vsc-tree-select Dispatched when an item is selected.
  * @fires vsc-run-action Dispatched when an action icon is clicked.
  * @fires {VscTreeActionEvent} vsc-tree-action Dispatched when an action icon is clicked.
  *