docs: add some documentation to components

Author: scriptcoded

.changeset/ten-schools-sip.md

@@ -0,0 +1,5 @@
+---
+"@scouterna/ui-webc": patch
+---
+
+Add more documentation.

packages/ui-webc/src/components/app-bar/app-bar.tsx

@@ -1,5 +1,10 @@
 import { Component, h, Prop } from "@stencil/core";
 
+/**
+ * The App Bar component is used at the top of a page to display a title and
+ * optional prefix and suffix actions. It's typically used to provide a
+ * native-like navigation experience.
+ */
 @Component({
   tag: "scout-app-bar",
   styleUrl: "app-bar.css",

packages/ui-webc/src/components/app-bar/readme.md

@@ -3,6 +3,12 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The App Bar component is used at the top of a page to display a title and
+optional prefix and suffix actions. It's typically used to provide a
+native-like navigation experience.
+
 ## Properties
 
 | Property    | Attribute    | Description | Type     | Default     |

packages/ui-webc/src/components/button/button.tsx

@@ -3,7 +3,9 @@ import { Component, Event, type EventEmitter, h, Prop } from "@stencil/core";
 export type Variant = "primary" | "outlined" | "text" | "caution" | "danger";
 
 /**
- * A simple button component.
+ * A button component that can be used either as a normal button or as a link.
+ * Will render a `<button>` element when the `type` is set to "button",
+ * "submit", or "reset", and an `<a>` element when the `type` is set to "link".
  */
 @Component({
   tag: "scout-button",

packages/ui-webc/src/components/button/readme.md

@@ -7,7 +7,9 @@
 
 ## Overview
 
-A simple button component.
+A button component that can be used either as a normal button or as a link.
+Will render a `<button>` element when the `type` is set to "button",
+"submit", or "reset", and an `<a>` element when the `type` is set to "link".
 
 ## Properties
 

packages/ui-webc/src/components/checkbox/checkbox.tsx

@@ -10,6 +10,12 @@ import {
 import checkIcon from "@tabler/icons/outline/check.svg";
 import { inputMixin } from "../../mixins/inputMixin";
 
+/**
+ * The checkbox component is used to let users select one or more options from a
+ * set. For toggling a single option, consider using the Switch component
+ * instead. When used in a form, make sure to wrap it in a Field component to
+ * display a label, help text, and error messages.
+ */
 @Component({
   tag: "scout-checkbox",
   styleUrl: "checkbox.css",

packages/ui-webc/src/components/checkbox/readme.md

@@ -3,6 +3,13 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The checkbox component is used to let users select one or more options from a
+set. For toggling a single option, consider using the Switch component
+instead. When used in a form, make sure to wrap it in a Field component to
+display a label, help text, and error messages.
+
 ## Properties
 
 | Property         | Attribute         | Description                                                                                                                                                                                       | Type                        | Default     |

packages/ui-webc/src/components/field/field.tsx

@@ -1,5 +1,10 @@
 import { Component, Element, h, Listen, Prop, State } from "@stencil/core";
 
+/**
+ * The field component is used to wrap form fields with a label, help text, and
+ * error messages. It automatically captures validation events from its child
+ * input components and displays error messages accordingly.
+ */
 @Component({
   tag: "scout-field",
   styleUrl: "field.css",

packages/ui-webc/src/components/field/readme.md

@@ -3,6 +3,12 @@
 <!-- Auto Generated Below -->
 
 
+## Overview
+
+The field component is used to wrap form fields with a label, help text, and
+error messages. It automatically captures validation events from its child
+input components and displays error messages accordingly.
+
 ## Properties
 
 | Property             | Attribute   | Description                      | Type     | Default     |

packages/ui-webc/src/components/input/input.tsx

@@ -29,6 +29,12 @@ export type InputMode =
   // Hack to suggest above value but still allow any other string value
   | (string & {});
 
+/**
+ * The input component is a basic text input field that can be used to capture
+ * user input. It supports various types and input modes for different use
+ * cases. When used in a form, make sure to wrap it in a Field component to
+ * display a label, help text, and error messages.
+ */
 @Component({
   tag: "scout-input",
   styleUrl: "input.css",