### Access Basic Example

Source: https://github.com/rough-stuff/wired-elements/wiki/Dev-Environment

Navigate to this URL in your browser to view the basic example page after starting the dev server.

```bash
http://127.0.0.1:8000/examples/basic.html
```

--------------------------------

### Start Wired Elements Dev Server

Source: https://github.com/rough-stuff/wired-elements/wiki/Dev-Environment

Starts a local server to serve all packages with resolved relative paths. Use the outputted host URL to access examples in your browser.

```bash
npm run dev
```

--------------------------------

### Install wired-mat-icon

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/README.md

Install the wired-mat-icon package using npm.

```bash
npm i wired-mat-icon
```

--------------------------------

### Install Wired Elements

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-divider.md

Install the wired-elements package using npm. This is the first step to using any wired-element in your project.

```bash
npm i wired-elements
```

--------------------------------

### Bootstrap Wired Elements Packages

Source: https://github.com/rough-stuff/wired-elements/wiki/Dev-Environment

Run this command after cloning the repository to install all npm dependencies and hoist individual packages using Lerna.

```bash
npm run bootstrap
```

--------------------------------

### Install wired-icon via npm

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Install the wired-icon package using npm. This is the first step to include the component in your project.

```bash
npm i wired-icon
```

--------------------------------

### Control Wired Progress Ring with JavaScript

Source: https://github.com/rough-stuff/wired-elements/blob/master/examples/progress-ring.html

Use JavaScript to control the progress of the wired-progress-ring. This example shows how to start, stop, and reset the progress value.

```javascript
const prog = document.getElementById('progress')
let timer = 0;
document.getElementById('btns').addEventListener('click', () => {
  if (timer) {
    window.clearInterval(timer);
  }
  timer = window.setInterval(() => {
    if (prog.value >= 100) {
      prog.value = 0;
    } else {
      prog.value = prog.value + 1;
    }
  }, 100);
});
document.getElementById('btnr').addEventListener('click', () => {
  if (timer) {
    window.clearInterval(timer);
    timer = 0;
  }
  prog.value = 0;
});
```

--------------------------------

### Basic wired-input Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-input.md

Use the wired-input component in your HTML. Examples include a basic input, one with a placeholder, a password input, and a disabled input.

```html
<wired-input></wired-input>
<wired-input placeholder="Enter name"></wired-input>
<wired-input type="password" placeholder="Password"></wired-input>
<wired-input placeholder="Disabled" disabled></wired-input>
```

--------------------------------

### Basic HTML Usage of WiredRadio

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-radio.md

Use the wired-radio component in your HTML markup. Examples include a default state, a pre-checked state, and a disabled state.

```html
<wired-radio>Radio One</wired-radio>
<wired-radio checked>Radio Two</wired-radio>
<wired-radio disabled>Disabled Radio</wired-radio>
```

--------------------------------

### Get Icon Path Function

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/iconset-generator.html

Retrieves an icon path from the global ICON_SET based on an input value. Displays 'No path found.' if the path does not exist.

```javascript
function getPath() {
  const input = document.getElementById('input');
  const result = document.getElementById('result');
  const path = window.ICON_SET[input.value];
  result.innerHTML = path || 'No path found.';
}
```

--------------------------------

### Basic Wired Checkbox Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-checkbox.md

Use the wired-checkbox component in your HTML markup. Examples include a default checkbox, a pre-checked one, and a disabled one.

```html
<wired-checkbox>Checkbox One</wired-checkbox>
<wired-checkbox checked>Checkbox Two</wired-checkbox>
<wired-checkbox disabled>Disabled checkbox</wired-checkbox>
```

--------------------------------

### Invalid Light DOM - Missing SVG Wrapper

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Elements must be wrapped in an SVG tag. This example is invalid because the circle element is not enclosed within an SVG.

```html
<circle cx="16.5" cy="5.5" r="2.5"/>
```

--------------------------------

### Wired Icon with Accessibility Attributes

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Shows how to add ARIA attributes and a title to an SVG within a wired-icon for improved accessibility. This example uses specific configuration for the wired-icon.

```html
<wired-icon class="icon"
    config='{"fill": "gray", "fillStyle": "cross-hatch", "hachureGap": "1.5", "fillWeight": "0.5", "roughness": "0.1"}'>
    <svg viewBox="0 0 24 24" aria-labelledby="icon-label">
      <title id="icon-label">Icon of a pet footprint</title>
      <circle cx="4.5" cy="9.5" r="2.5"/>
      <circle cx="9" cy="5.5" r="2.5"/>
      <circle cx="15" cy="5.5" r="2.5"/>
      <circle cx="19.5" cy="9.5" r="2.5"/>
      <path d="M17.34 14.86c-.87-1.02-1.6-1.89-2.48-2.91-.46-.54-1.05-1.08-1.75-1.32-.11-.04-.22-.07-.33-.09-.25-.04-.52-.04-.78-.04s-.53 0-.79.05c-.11.02-.22.05-.33.09-.7.24-1.28.78-1.75 1.32-.87 1.02-1.6 1.89-2.48 2.91-1.31 1.31-2.92 2.76-2.62 4.79.29 1.02 1.02 2.03 2.33 2.32.73.15 3.06-.44 5.54-.44h.18c2.48 0 4.81.58 5.54.44 1.31-.29 2.04-1.31 2.33-2.32.31-2.04-1.3-3.49-2.61-4.8z"/>
    </svg>
  </wired-icon>
```

--------------------------------

### Generate Iconset

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/CONTRIBUTING.md

Run this command in the generate folder to launch a web server for generating the iconset-full.ts file. Access the web interface at http://localhost:5000.

```bash
npm run generate
```

--------------------------------

### Load Wired Elements via ES Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/README.md

Alternatively, load the ES module directly through unpkg. This method is useful for quick testing or when not using a module bundler.

```html
<script type="module" src="https://unpkg.com/wired-elements?module"></script>
```

--------------------------------

### Import wired-radio-group and wired-radio

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-radio-group.md

Import the necessary components into your JavaScript code.

```javascript
import { WiredRadioGroup, WiredRadio } from 'wired-elements';
// or
import { WiredRadioGroup } from 'wired-elements/lib/wired-radio-group.js';
```

--------------------------------

### Import WiredSearchInput Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-search-input.md

Import the WiredSearchInput component into your JavaScript project.

```javascript
import { WiredSearchInput } from 'wired-elements';
// or
import { WiredSearchInput } from 'wired-elements/lib/wired-search-input.js';
```

--------------------------------

### Load WiredCombo via CDN

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-combo.md

Load the WiredCombo component directly into your HTML page using a CDN. Ensure you include the 'module' parameter for proper loading.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-combo.js?module"></script>
```

--------------------------------

### Material Look Configuration

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/README.md

Define a configuration object for a material look with transparent stroke and solid fill.

```javascript
const matConfig = {stroke: "transparent", fill: "black", fillStyle: "solid"};
```

```html
<wired-mat-icon icon="laptop" config=${JSON.stringify(matConfig)}></wired-mat-icon>
```

--------------------------------

### WiredProgress with Min and Max Values

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-progress.md

Configure the minimum and maximum values for the progress bar using 'min' and 'max' attributes. This allows for custom ranges beyond the default 0-100.

```html
<wired-progress value="10" min="5" max="15"></wired-progress>
```

--------------------------------

### Import WiredVideo Component (ES Module)

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-video.md

Import the WiredVideo component into your JavaScript code using ES module syntax. This allows you to use the component programmatically.

```javascript
import { WiredVideo } from 'wired-elements';
// or
import { WiredVideo } from 'wired-elements/lib/wired-video.js';
```

--------------------------------

### Import WiredRadio Module (JavaScript)

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-radio.md

Import the WiredRadio component into your JavaScript project.

```javascript
import { WiredRadio } from 'wired-elements';
// or
import { WiredRadio } from 'wired-elements/lib/wired-radio.js';
```

--------------------------------

### Load Wired FAB via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-fab.md

Alternatively, load the Wired FAB component directly into your HTML page using a script tag pointing to the unpkg CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-fab.js?module"></script>
```

--------------------------------

### Import WiredInput Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-input.md

Import the WiredInput component into your JavaScript code. You can use the main module or a specific file path.

```javascript
import { WiredInput } from 'wired-elements';
// or
import { WiredInput } from 'wired-elements/lib/wired-input.js';
```

--------------------------------

### Basic WiredProgress Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-progress.md

Use the wired-progress element in your HTML. Set the 'value' attribute to control the progress.

```html
<wired-progress value="25"></wired-progress>
```

--------------------------------

### Import Wired FAB Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-fab.md

Import the Wired FAB component into your JavaScript project. You can use the main module or a specific file path.

```javascript
import { WiredFab } from 'wired-elements';
// or
import { WiredFab } from 'wired-elements/lib/wired-fab.js';
```

--------------------------------

### Basic CSS for wired-card

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/iconset-generator.html

Basic styling for the wired-card element, setting display, width, and margin.

```css
wired-card {
  display: block;
  width: 80%;
  margin: 1em;
}
```

--------------------------------

### WiredCard Properties and Methods

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-card.md

This snippet outlines the configurable properties and available methods for the wired-card component.

```APIDOC
## WiredCard

### Description
A container for other web elements with a hand-drawn, wireframe-like appearance.

### Properties

- **elevation** (number) - Optional - Sets the elevation of the card. Numerical number between 1-5 (inclusive). Defaults to 1.
- **fill** (color) - Optional - A color to fill the background of the card in a sketchy format.

### Methods

- **requestUpdate()** - When dynamically adding content to the card, call this method to recompute the boundaries of the card.

### Usage Example

```html
<wired-card elevation="3">
  <p>Content inside the card</p>
</wired-card>
```

```javascript
const card = document.querySelector('wired-card');
// To recompute boundaries after dynamic content change:
card.requestUpdate();
```
```

--------------------------------

### Import WiredCombo in JavaScript

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-combo.md

Import the WiredCombo component into your JavaScript project. You can import the entire module or a specific file.

```javascript
import { WiredCombo } from 'wired-elements';
// or
import { WiredCombo } from 'wired-elements/lib/wired-combo.js';
```

--------------------------------

### Import WiredToggle Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-toggle.md

Import the WiredToggle class into your JavaScript project. You can use the main module or a specific file path.

```javascript
import { WiredToggle } from 'wired-elements';
// or
import { WiredToggle } from 'wired-elements/lib/wired-toggle.js';
```

--------------------------------

### Import wired-image Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-image.md

Import the WiredImage component into your JavaScript code. You can use the main import or a specific path.

```javascript
import { WiredImage } from 'wired-elements';
// or
import { WiredImage } from 'wired-elements/lib/wired-image.js';
```

--------------------------------

### Import wired-icon definition in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Include the wired-icon script in your HTML file to make the custom element available.

```html
<script type="module" src="wired-icon/lib/wired-icon.js"></script>
```

--------------------------------

### Load WiredSearchInput Directly

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-search-input.md

Load the WiredSearchInput component directly into your HTML page using a script tag.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-search-input.js"></script>
```

--------------------------------

### Basic Wired Tabs Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-tabs.md

Implement wired-tabs in your HTML by creating a wired-tabs element and nesting wired-tab elements within it. Each wired-tab requires a unique 'name' attribute.

```html
<wired-tabs selected="Two">
  <wired-tab name="One">
    <h4>Card 1</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </wired-tab>
  <wired-tab name="Two">
    <h4>Card 2</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </wired-tab>
  <wired-tab name="Three">
    <h4>Card 3</h4>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
      magna aliqua.
      Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
    </p>
  </wired-tab>
</wired-tabs>
```

--------------------------------

### Use wired-icon with SVG and configuration

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Render a wired-icon component by embedding an SVG and applying a configuration object for styling. The 'config' attribute accepts roughjs options.

```html
<wired-icon
  config='{"fillStyle": "zigzag", "fill": "#A4C639", "hachureGap": "1.5", "fillWeight": "0.9"}'>
  <svg width="70" height="70" viewBox="-1 -1 24 26">
    <path d="M6 18c0 .55.45 1 1 1h1v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h2v3.5c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5V19h1c.55 0 1-.45 1-1V8H6v10zM3.5 8C2.67 8 2 8.67 2 9.5v7c0 .83.67 1.5 1.5 1.5S5 17.33 5 16.5v-7C5 8.67 4.33 8 3.5 8zm17 0c-.83 0-1.5.67-1.5 1.5v7c0 .83.67 1.5 1.5 1.5s1.5-.67 1.5-1.5v-7c0-.83-.67-1.5-1.5-1.5zm-4.97-5.84l1.3-1.3c.2-.2.2-.51 0-.71-.2-.2-.51-.2-.71 0l-1.48 1.48A5.84 5.84 0 0 0 12 1c-.96 0-1.86.23-2.66.63L7.85.15c-.2-.2-.51-.2-.71 0-.2.2-.2.51 0 .71l1.31 1.31A5.983 5.983 0 0 0 6 7h12c0-1.99-.97-3.75-2.47-4.84zM10 5H9V4h1v1zm5 0h-1V4h1v1z"/>
  </svg>
</wired-icon>
```

--------------------------------

### Load WiredVideo Component via Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-video.md

Load the WiredVideo component directly into your HTML page using a script tag from a CDN. This is a convenient way to include the component without a build process.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-video.js?module"></script>
```

--------------------------------

### Import WiredProgress Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-progress.md

Import the WiredProgress component into your JavaScript code. You can use the main module or a specific path.

```javascript
import { WiredProgress } from 'wired-elements';
// or
import { WiredProgress } from 'wired-elements/lib/wired-progress.js';
```

--------------------------------

### Import WiredCard Module (JavaScript)

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-card.md

Import the WiredCard component into your JavaScript project.

```javascript
import { WiredCard } from 'wired-elements';
// or
import { WiredCard } from 'wired-elements/lib/wired-card.js';
```

--------------------------------

### Basic wired-card Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-card.md

Use the wired-card component in your HTML with default and custom elevation.

```html
<wired-card>
  <p>Elevation: 1</p>
</wired-card>

<wired-card elevation="3">
  <p>Elevation: 3</p>
</wired-card>
```

--------------------------------

### Import WiredLink Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-link.md

Import the WiredLink component into your JavaScript project. You can import the entire module or a specific file.

```javascript
import { WiredLink } from 'wired-elements';
// or
import { WiredLink } from 'wired-elements/lib/wired-link.js';
```

--------------------------------

### Import and Export ICON_SET

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/iconset-generator.html

Imports the ICON_SET from the specified module and makes it globally accessible.

```javascript
import {ICON_SET} from "../packages/wired-mat-icon/lib/iconset/iconset-full.js";
window.ICON_SET = ICON_SET;
```

--------------------------------

### Basic Usage of wired-mat-icon

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/README.md

Use the wired-mat-icon component in your web page, specifying the icon and optional configuration.

```html
<wired-mat-icon
  icon="android"
  config='{"fillStyle": "zigzag", "fill": "#3B5998", "hachureGap": "1.5", "fillWeight": "0.9"}'>
</wired-mat-icon>
```

--------------------------------

### Import Wired Tabs Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-tabs.md

Import the WiredTabs and WiredTab components into your JavaScript code. You can import the entire module or a specific file.

```javascript
import { WiredTabs, WiredTab } from 'wired-elements';
// or
import { WiredTabs, WiredTab } from 'wired-elements/lib/wired-tabs.js';
```

--------------------------------

### WiredLink with Elevation and Target

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-link.md

Configure the wired-link component with an elevation property for a thicker underline and a target attribute to specify the link's behavior in a new tab.

```html
<wired-link elevation="3" href="/more.html" target="_blank">Elevation</wired-link>
```

--------------------------------

### Import WiredSpinner Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-spinner.md

Import the WiredSpinner module into your JavaScript project.

```javascript
import { WiredSpinner } from 'wired-elements';
// or
import { WiredSpinner } from 'wired-elements/lib/wired-spinner.js';
```

--------------------------------

### Basic WiredProgressRing Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-progress-ring.md

Use the wired-progress-ring component in your HTML by adding the custom element tag. Set the 'value' property to control the progress.

```html
<wired-progress-ring value="25"></wired-progress-ring>
<wired-progress-ring value="10" min="5" max="15"></wired-progress-ring>
```

--------------------------------

### Import WiredButton Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-button.md

Import the WiredButton component into your JavaScript project.

```javascript
import { WiredButton } from 'wired-elements';
// or
import { WiredButton } from 'wired-elements/lib/wired-button.js';
```

--------------------------------

### Load WiredProgressRing via HTML Script

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-progress-ring.md

Alternatively, load the WiredProgressRing component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-progress-ring.js?module"></script>
```

--------------------------------

### Load WiredInput via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-input.md

Alternatively, load the WiredInput component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-input.js?module"></script>
```

--------------------------------

### Basic wired-combo Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-combo.md

Use the wired-combo element in your HTML, specifying an ID and a default selected item. Include wired-item elements for the options.

```html
<wired-combo id="combo" selected="two">
  <wired-item value="one">Number One</wired-item>
  <wired-item value="two">Number Two</wired-item>
  <wired-item value="three">Number Three</wired-item>
</wired-combo>
```

--------------------------------

### Import WiredCheckbox in JavaScript

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-checkbox.md

Import the WiredCheckbox component into your JavaScript code. You can use the main module or a specific file path.

```javascript
import { WiredCheckbox } from 'wired-elements';
// or
import { WiredCheckbox } from 'wired-elements/lib/wired-checkbox.js';
```

--------------------------------

### Import WiredProgressRing Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-progress-ring.md

Import the WiredProgressRing component into your JavaScript code. You can import the entire module or a specific component.

```javascript
import { WiredProgressRing } from 'wired-elements';
// or
import { WiredProgressRing } from 'wired-elements/lib/wired-progress-ring.js';
```

--------------------------------

### Open wired-dialog with JavaScript

Source: https://github.com/rough-stuff/wired-elements/blob/master/examples/dialog.html

Use this code to open a wired-dialog when an element is clicked. Ensure the dialog element has the ID 'wired-dialog'.

```javascript
document.getElementById('openDialog').addEventListener('click', () => { document.querySelector('wired-dialog').open = true; });
```

--------------------------------

### Import WiredTextarea Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-textarea.md

Import the WiredTextarea component into your JavaScript code. Two import paths are provided for flexibility.

```javascript
import { WiredTextarea } from 'wired-elements';
// or
import { WiredTextarea } from 'wired-elements/lib/wired-textarea.js';
```

--------------------------------

### Programmatic Control of wired-mat-icon

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/README.md

Control wired-mat-icon properties like 'icon' and 'config' programmatically using JavaScript after the custom element is defined.

```html
<wired-mat-icon id="modifyme"></wired-mat-icon>
```

```javascript
customElements.whenDefined('wired-mat-icon').then(() => {
  const wiredMatIcon = document.getElementById('modifyme');
  wiredMatIcon.icon = 'flash_on';
  wiredMatIcon.config = {fill: 'red', fillWeight: 1};
});
```

--------------------------------

### Load WiredCheckbox in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-checkbox.md

Load the wired-checkbox component directly into your HTML page using a script tag from a CDN. Ensure to include the 'module' parameter.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-checkbox.js?module"></script>
```

--------------------------------

### Import WiredDialog Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-dialog.md

Import the WiredDialog component into your JavaScript project. You can use the main module or a specific file path.

```javascript
import { WiredDialog } from 'wired-elements';
// or
import { WiredDialog } from 'wired-elements/lib/wired-dialog.js';
```

--------------------------------

### Import WiredDivider Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-divider.md

Import the WiredDivider class into your JavaScript project. You can import the entire library or the specific module.

```javascript
import { WiredDivider } from 'wired-elements';
// or
import { WiredDivider } from 'wired-elements/lib/wired-divider.js';
```

--------------------------------

### Import wired-mat-icon definition

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/README.md

Import the wired-mat-icon definition into your HTML page or module script.

```html
<script type="module" src="wired-mat-icon/lib/wired-mat-icon.js"></script>
```

```javascript
import "wired-mat-icon";
```

--------------------------------

### Load WiredCard via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-card.md

Include the WiredCard component directly in your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-card.js?module"></script>
```

--------------------------------

### Basic wired-combo HTML Structure

Source: https://github.com/rough-stuff/wired-elements/blob/master/examples/combo.html

This snippet shows the basic HTML structure for a wired-combo element with several options. It includes a disabled option to demonstrate functionality.

```html
<wired-combo>
  <wired-item>Number one</wired-item>
  <wired-item>Number two</wired-item>
  <wired-item>Number three</wired-item>
  <wired-item>Number four</wired-item>
  <wired-item disabled>Disabled</wired-item>
  <wired-item disabled>Number two Disabled</wired-item>
  <wired-item disabled>Number two</wired-item>
</wired-combo>

<button>Check</button>
```

--------------------------------

### Use wired-video in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-video.md

Include the wired-video custom element in your HTML markup. Specify the video source and other attributes like autoplay, muted, and loop.

```html
<wired-video autoplay muted loop src="video.mp4"></wired-video>
```

--------------------------------

### Load Wired Tabs via HTML Script

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-tabs.md

Alternatively, load the WiredTabs and WiredTab components directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-tabs.js?module"></script>
```

--------------------------------

### Import WiredListbox Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-listbox.md

Import the WiredListbox component into your JavaScript code. You can use the main package import or a specific module path.

```javascript
import { WiredListbox } from 'wired-elements';
// or
import { WiredListbox } from 'wired-elements/lib/wired-listbox.js';
```

--------------------------------

### Load WiredToggle via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-toggle.md

Alternatively, load the WiredToggle component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-toggle.js?module"></script>
```

--------------------------------

### Compile TypeScript to JavaScript

Source: https://github.com/rough-stuff/wired-elements/wiki/Dev-Environment

Execute this command to compile all TypeScript code into JavaScript. The compiled output will be placed in each package's 'lib' folder.

```bash
npm run tsc
```

--------------------------------

### Load WiredDivider via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-divider.md

Alternatively, load the WiredDivider element directly into your HTML page using a script tag from a CDN. Ensure to use the 'module' parameter.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-divider.js?module"></script>
```

--------------------------------

### Load WiredProgress via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-progress.md

Alternatively, load the WiredProgress component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-progress.js?module"></script>
```

--------------------------------

### Load WiredDialog via Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-dialog.md

Alternatively, load the WiredDialog component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-dialog.js?module"></script>
```

--------------------------------

### Load WiredListbox via Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-listbox.md

Alternatively, load the WiredListbox component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-listbox.js?module"></script>
```

--------------------------------

### Basic WiredLink Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-link.md

Use the wired-link component in your HTML by providing an href attribute. This creates a hand-drawn link.

```html
<wired-link href="/more.html">Learn more</wired-link>
```

--------------------------------

### Load WiredButton via HTML Script

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-button.md

Load the WiredButton component directly into your HTML page using a script tag.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-button.js?module"></script>
```

--------------------------------

### Load WiredRadio via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-radio.md

Load the WiredRadio component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-radio.js?module"></script>
```

--------------------------------

### Wired Calendar with JavaScript Interactions

Source: https://github.com/rough-stuff/wired-elements/blob/master/examples/calendar.html

This snippet demonstrates how to interact with the wired-calendar component using JavaScript. It includes event listeners for date selection and button clicks to update the calendar's date.

```javascript
const myCalendar4 = document.getElementById('calendar4');
const myCalendar4result = document.getElementById('calendar4-result');
const myCalendar4update = document.getElementById('calendar4-update');

document.getElementById('btn-update').addEventListener('click', () => {
  const today = new Date();
  const time = today.getHours() + ":" + today.getMinutes() + ":" + today.getSeconds();
  const updateTimeLeyend = ' <small>Updated at:' + time + '</small>';
  const selectedObject = myCalendar4.value;
  if (selectedObject && selectedObject.date) {
    myCalendar4update.innerHTML = selectedObject.date.toLocaleDateString() + updateTimeLeyend;
  } else {
    myCalendar4update.innerHTML = 'No date selected yet.' + updateTimeLeyend;
  }
});

document.getElementById('btn-today').addEventListener('click', () => {
  let today = new Date();
  // Sample using optional internal date formatter
  formatedDate = myCalendar4.format(today);
  console.log('Set date to today = ', formatedDate);
  // Set selected date using any format accepted by javascript Date object
  myCalendar4.setSelectedDate(formatedDate);
});

myCalendar4.addEventListener('selected', () => {
  let selectedObject = myCalendar4.value;
  // `selectedObject.date` is a javascript Date object
  // `selectedObject.text` is the formated text of the date
  let formatedDate = selectedObject.text;
  myCalendar4result.innerHTML = formatedDate + ' <br><small>Note: Internal date handling not affected by locale.</small>';
});
```

--------------------------------

### Import wired-icon definition in module script

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Import the wired-icon custom element into your JavaScript module.

```javascript
import "wired-icon";
```

--------------------------------

### Basic Wired Button Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-button.md

Use the wired-button custom element in your HTML.

```html
<wired-button>Click Me</wired-button>
<wired-button disabled>Disabled</wired-button>
<wired-button elevation="3">Elevation</wired-button>
```

--------------------------------

### Load WiredLink via HTML Script

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-link.md

Alternatively, load the WiredLink component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-link.js?module"></script>
```

--------------------------------

### Use WiredSearchInput in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-search-input.md

Add the wired-search-input element to your HTML markup. You can set a placeholder attribute.

```html
<wired-search-input></wired-search-input>
<wired-search-input placeholder="Search here"></wired-search-input>
```

--------------------------------

### JavaScript to Log Selected Combo Box Values

Source: https://github.com/rough-stuff/wired-elements/blob/master/examples/combo.html

This JavaScript code listens for a button click and logs the selected value of all 'wired-combo' elements on the page to the console. Ensure the button and combo boxes are present in the DOM before running.

```javascript
document.querySelector('button').addEventListener('click', () => {
  const combos = document.querySelectorAll('wired-combo');
  combos.forEach((c) => {
    console.log(c, c.selected);
  });
});
```

--------------------------------

### Load wired-image via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-image.md

Alternatively, load the wired-image component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-image.js?module"></script>
```

--------------------------------

### Use Wired Icon inside Wired Button

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Demonstrates nesting a wired-icon within a wired-button. Custom styles can be applied to the icon.

```html
<style>
  .icon-button{
    display: block;
    width: 30px;
  }
</style>
<wired-icon-button elevation="5">
  <wired-icon
    class="icon-button"
    config='{"strokeWidth": "0.3", "fill": "blue", "fillStyle": "cross-hatch"}'
  >
    <svg viewbox="-1 -1 18 18">
      <path d="M9 11h-3c0-3 1.6-4 2.7-4.6 0.4-0.2 0.7-0.4 0.9-0.6 0.5-0.5 0.3-1.2 0.2-1.4-0.3-0.7-1-1.4-2.3-1.4-2.1 0-2.5 1.9-2.5 2.3l-3-0.4c0.2-1.7 1.7-4.9 5.5-4.9 2.3 0 4.3 1.3 5.1 3.2 0.7 1.7 0.4 3.5-0.8 4.7-0.5 0.5-1.1 0.8-1.6 1.1-0.9 0.5-1.2 1-1.2 2z"/>
      <path d="M9.5 14c0 1.105-0.895 2-2 2s-2-0.895-2-2c0-1.105 0.895-2 2-2s2 0.895 2 2z"/>
    </svg>
  </wired-icon>
</wired-icon-button>
```

--------------------------------

### Valid Light DOM Structure for wired-icon

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-icon/README.md

Provide elements within a single-level SVG tag for correct transformation. Ensure only one level of depth inside the SVG.

```html
<svg viewbox='0 0 24 24'>
  <rect x="3" y="8" width="18" height="13"></rect>
  <rect x="1" y="3" width="22" height="5"></rect>
  <line x1="10" y1="12" x2="14" y2="12"></line>
</svg>
```

--------------------------------

### Use WiredDialog in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-dialog.md

Integrate the WiredDialog component into your HTML structure. Content can be placed inside the dialog, and a close button can be added.

```html
<wired-dialog>
  <p>
    Dialog content here
  </p>
  <div style="text-align: right; padding: 30px 16px 16px;">
    <wired-button id="closeDialog">Close dialog</wired-button>
  </div>
</wired-dialog>
```

--------------------------------

### Basic Wired Toggle Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-toggle.md

Use the wired-toggle custom element in your HTML. You can set the 'checked' attribute to make it initially selected.

```html
<wired-toggle></wired-toggle>
<wired-toggle checked></wired-toggle>
```

--------------------------------

### Import WiredSlider Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-slider.md

Import the WiredSlider component into your JavaScript code. You can import the entire module or a specific file path.

```javascript
import { WiredSlider } from 'wired-elements';
// or
import { WiredSlider } from 'wired-elements/lib/wired-slider.js';
```

--------------------------------

### Import Wired Elements Components

Source: https://github.com/rough-stuff/wired-elements/blob/master/README.md

Import specific wired elements into your module script. This allows you to use them programmatically in your JavaScript code.

```javascript
import { WiredButton, WiredInput } from "wired-elements"

```

```javascript
import { WiredButton } from 'wired-elements/lib/wired-button.js';
import { WiredInput } from 'wired-elements/lib/wired-input.js';

```

--------------------------------

### Use Wired Calendar in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-calendar.md

Include the wired-calendar component in your HTML markup. The 'selected' attribute can pre-select a date.

```html
<wired-calendar selected="Jul 4, 2019">
</wired-calendar>
```

--------------------------------

### Basic Wired Listbox Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-listbox.md

Use the wired-listbox element in your HTML with wired-item children. The 'selected' attribute pre-selects an item by its value.

```html
<wired-listbox id="combo" selected="two">
  <wired-item value="one">Number One</wired-item>
  <wired-item value="two">Number Two</wired-item>
  <wired-item value="three">Number Three</wired-item>
</wired-listbox>
```

--------------------------------

### Basic wired-radio-group HTML structure

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-radio-group.md

Use wired-radio-group in your HTML to create a selectable group of radio buttons. The 'selected' attribute pre-selects an option.

```html
<wired-radio-group selected="two">
  <wired-radio name="one">One</wired-radio>
  <wired-radio name="two">Two</wired-radio>
  <wired-radio name="three">Three</wired-radio>
  <wired-radio name="four">Four</wired-radio>
</wired-radio-group>
```

--------------------------------

### Load WiredSpinner via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-spinner.md

Load the WiredSpinner component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-spinner.js?module"></script>
```

--------------------------------

### Import WiredCalendar Module

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-calendar.md

Import the WiredCalendar module into your JavaScript project. This makes the component available for use.

```javascript
import { WiredCalendar } from 'wired-elements/lib/wired-calendar.js';
```

--------------------------------

### Using wired-mat-icon inside wired-button

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/README.md

Embed a wired-mat-icon within a wired-icon-button for interactive elements.

```html
<wired-icon-button elevation="5">
  <wired-mat-icon icon="autorenew"
    config='{"strokeWidth": "0.3", "fill": "black"}'
  ></wired-mat-icon>
</wired-icon-button>
```

--------------------------------

### Use Wired FAB in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-fab.md

Add the Wired FAB component to your HTML markup. You can include child elements like icons within the FAB.

```html
<wired-fab id="btn1">
  <mwc-icon>favorite</mwc-icon>
</wired-fab>
<wired-fab id="btn2" class="red">
  <mwc-icon>close</mwc-icon>
</wired-fab>
```

--------------------------------

### Load WiredTextarea via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-textarea.md

Alternatively, load the WiredTextarea component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-textarea.js?module"></script>
```

--------------------------------

### Use WiredTextarea in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-textarea.md

Include the wired-textarea custom element in your HTML markup. Basic attributes like 'placeholder' and 'rows' can be set directly.

```html
<wired-textarea placeholder="Enter text" rows="6"></wired-textarea>
```

--------------------------------

### Load WiredIconButton in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-icon-button.md

Load the WiredIconButton component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-icon-button.js?module"></script>
```

--------------------------------

### Use Wired Elements in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/README.md

Integrate wired elements directly into your HTML markup. These custom elements can be used like any other HTML tag.

```html
<wired-input placeholder="Enter name"></wired-input>
<wired-button>Click Me</wired-button>
```

--------------------------------

### Basic Wired Spinner Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-spinner.md

Use the wired-spinner element in your HTML. The 'spinning' property controls the animation, and 'duration' sets the spin speed in milliseconds.

```html
<wired-spinner id="sp"></wired-spinner>
<wired-spinner spinning duration="1000"></wired-spinner>
```

--------------------------------

### Import WiredIconButton in JavaScript

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-icon-button.md

Import the WiredIconButton module in your JavaScript code. You can import the entire library or the specific component.

```javascript
import { WiredIconButton } from 'wired-elements';
// or
import { WiredIconButton } from 'wired-elements/lib/wired-icon-button.js';
```

--------------------------------

### Horizontal Wired Listbox with Custom Styling

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-listbox.md

Configure the listbox to be horizontal and apply custom CSS variables for the selected item's background and text color.

```html
<wired-listbox horizontal selected="two"
     style="--wired-item-selected-color: darkred; --wired-item-selected-bg: pink;">
  <wired-item value="one">Number One</wired-item>
  <wired-item value="two">Number Two</wired-item>
  <wired-item value="three">Number Three</wired-item>
</wired-listbox>
```

--------------------------------

### Use wired-image in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-image.md

Incorporate the wired-image custom element into your HTML. Specify the image source using the 'src' attribute. You can also set an 'elevation' for a card-like appearance.

```html
<wired-image src="https://www.gstatic.com/webp/gallery/1.sm.jpg"></wired-image>
<wired-image elevation="4" src="https://www.gstatic.com/webp/gallery/1.sm.jpg"></wired-image>
```

--------------------------------

### Use WiredIconButton in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-icon-button.md

Add wired-icon-button elements to your HTML. You can include an mwc-icon or any other image inside the button.

```html
<wired-icon-button>
  <mwc-icon>favorite</mwc-icon>
</wired-icon-button>
<wired-icon-button class="red">
  <mwc-icon>favorite</mwc-icon>
</wired-icon-button>
```

--------------------------------

### Load WiredSlider via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-slider.md

Alternatively, load the WiredSlider component directly into your HTML page using a script tag with a module type.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-slider.js?module"></script>
```

--------------------------------

### Generate SvgIconSet from HTML Object Tags

Source: https://github.com/rough-stuff/wired-elements/blob/master/experimental/wired-mat-icon/generate/index.html

This script extracts SVG path data from multiple HTML object elements and formats it into a TypeScript SvgIconSet. It listens for the 'load' event on each object to ensure content is available before processing.

```javascript
const resultArea = document.getElementById('result');
resultArea.value = "import { SvgIconSet } from './index';export const ICON_SET: SvgIconSet = {";

const source = document.getElementsByTagName('object');
let counter = 0;

const retrievePaths = function(object) {
  counter++;
  const icons = object.contentDocument.firstElementChild.getElementsByTagName('svg');

  // All the id in the doc follow this format
  const regex = /ic_(.*)_24px/;

  // We want to retrieve the following attributes from the svg
  // The viewBox attribute is (*almost*)
  // always "0 0 24 24" so we don't take it
  // Width and height are always 24 so we don't take them
  // x and y attributes are not interesting...
  // So finally all we want is the path :)
  const result = {};
  for (icon of icons) {
    const id = regex.exec(icon.getAttribute('id'))[1];
    result[id] = icon.lastElementChild.getAttribute('d');
  }

  let stringValue = JSON.stringify(result);
  stringValue = stringValue.substring(1, stringValue.length -1);

  if (counter === source.length) {
    stringValue += '};';
  } else {
    stringValue += ',';
  }
  resultArea.value += stringValue;
}

for (let object of source) {
  object.addEventListener('load', () => retrievePaths(object))
}
```

--------------------------------

### Basic Wired Slider Usage

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-slider.md

Use the wired-slider component in your HTML. You can render a default slider, a disabled slider, or a slider with custom initial values.

```html
<wired-slider></wired-slider>
<wired-slider disabled></wired-slider>
<wired-slider value="10" min="5" max="15"></wired-slider>
```

--------------------------------

### Use WiredDivider in HTML

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-divider.md

Add the wired-divider custom element to your HTML to display a sketchy line between content sections. It can be used like any other HTML element.

```html
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<wired-divider></wired-divider>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
```

--------------------------------

### Toggle Wired Spinner State

Source: https://github.com/rough-stuff/wired-elements/blob/master/examples/spinner.html

Attaches an event listener to a button to toggle the spinning state of a wired-spinner element. Ensure the spinner has the ID 'sp'.

```javascript
document.querySelector('wired-button').addEventListener('click', () => {
  const sp = document.getElementById('sp');
  sp.spinning = !sp.spinning;
});
```

--------------------------------

### Load WiredCalendar via HTML Script Tag

Source: https://github.com/rough-stuff/wired-elements/blob/master/docs/wired-calendar.md

Alternatively, load the WiredCalendar component directly into your HTML page using a script tag from a CDN.

```html
<script type="module" src="https://unpkg.com/wired-elements/lib/wired-calendar.js?module"></script>
```

--------------------------------

### Close wired-dialog with JavaScript

Source: https://github.com/rough-stuff/wired-elements/blob/master/examples/dialog.html

Use this code to close a wired-dialog when an element is clicked. Ensure the dialog element has the ID 'wired-dialog'.

```javascript
document.getElementById('closeDialog').addEventListener('click', () => { document.querySelector('wired-dialog').open = false; });
```