### List Header Example

Source: https://digitalguidelines.michigan.gov/docs/components/list/som-list

This example demonstrates a list with a header, suitable for sidebar navigation.

```html
<som-list type="sidebar" id="sidebarList">
  <som-list-item active><a href="#">List item 1</a></som-list-item>
  <som-list-item><a href="#">List item 2</a></som-list-item>
  <som-list-item><a href="#">List item 3</a></som-list-item>
  <som-list-header>List header</som-list-header>
  <som-list-item><a href="#">List item 4</a></som-list-item>
  <som-list-item><a href="#">List item 5</a></som-list-item>
  <som-list-item><a href="#">List item 6</a></som-list-item>
</som-list>
```

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

### Toast Group Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-toast-group

This example demonstrates how to initialize a toast group and trigger a toast using a button.

```APIDOC
## Example Usage

This example shows how to add a toast group to your page and display a toast when a button is clicked.

### Component

```html
<div>
  <som-button type="button" color="primary" onClick={() => addToast()}>Show Toast</som-button>
  <som-toast-group id="toastContainer" position="end"></som-toast-group>
</div>
```

### Props

| Attr     | Type                               | Default | Docs                                                                 |
|----------|------------------------------------|---------|----------------------------------------------------------------------|
| position | "center" | "end" | "start" | 'end' | This property sets the position on the screen toast will display. |

### Methods

| Name     | Returns        | Docs                               |
|----------|----------------|------------------------------------|
| addToast | `Promise<void>` | This public method is used to show a toast. |

### Events

| Event               | Detail | Docs                                           |
|---------------------|--------|------------------------------------------------|
| toastGroupDismissed | void   | This event is emitted when a toast is dismissed. |

```

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

### Toast Examples

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-toast

Examples demonstrating different configurations of the som-toast component, including auto-dismiss, manual dismissal, and custom timeout intervals.

```APIDOC
## som-toast

### Description
A toast is a brief floating notification that appears on screen to confirm an action or display a status update.

### Props
#### auto-dismiss (boolean)
- Default: `true`
- This boolean property determines whether the toast will dismiss automatically or not.

#### auto-dismiss-time (number)
- Default: `10000`
- The timeout in milliseconds before the toast is automatically dismissed.

#### close-button-aria-label (string)
- Default: `"dismiss"`
- This property overrides the close button aria label.

#### color ("danger" | "info" | "success" | "warning")
- Default: `'info'`
- This property sets the toast container color.

#### dismissible (boolean)
- Default: `true`
- This boolean determines if a toast can be dismissed.

#### headline (string)
- This property sets the headline for the toast.

#### icon (boolean)
- Default: `true`
- This boolean property sets the visual status icon visibility.

### Methods
#### dismiss()
- Returns: `Promise` will resolve after toast is dismissed.
- This public method is used to dismiss a toast.

### Events
#### toastDismissed
- Detail: `void`
- This event is emitted when the toast is dismissed.

### Parts
#### body
- This part is the body text content.

#### close-button
- This part is the close button.

#### headline
- This part is the headline content.

#### icon
- This part is the optional icon next to the headline.

### Example Usage
```html
<div>
  <som-toast id="toast1" headline="Success" color="success">
    By default, this toast notification will auto-dismiss after 10 seconds.
  </som-toast>
  <som-toast id="toast2" headline="Warning" color="warning" auto-dismiss="false">
    This toast notification is configured to dismiss manually.
  </som-toast>
  <som-toast id="toast3" headline="Error" color="danger" auto-dismiss-time={30000} dismissible="false">
    A user can't dismiss this toast, but it will dismiss automatically after a custom timeout interval of 30 seconds.
  </som-toast>
  <som-toast id="toast4" headline="Info" auto-dismiss="false">
    This is a demo of a dismissible toast notification.
  </som-toast>
</div>
```
```

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

### Install Digital Guidelines React Package

Source: https://digitalguidelines.michigan.gov/docs/gettingstarted/react

Install the core React package for Digital Guidelines components.

```bash
npm install @migov/digital-guidelines-core-react
```

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

### Install Digital Guidelines via NPM

Source: https://digitalguidelines.michigan.gov/docs/gettingstarted/cdn

Install the Digital Guidelines package using npm. This command saves the package to your project's dependencies.

```bash
npm install @migov/digital-guidelines-core --save
```

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

### Open Popover Example

Source: https://digitalguidelines.michigan.gov/docs/components/overlays/som-popover

This example demonstrates how to open a popover by associating it with a button using the 'for' property and toggling its visibility with a click event.

```html
<som-button
  id="popoverButton"
  button-type="default"
  color="primary"
  onclick="document.getElementById('popoverEl').show = !document.getElementById('popoverEl').show"
>
  Open popover
</som-button>
<som-popover id="popoverEl" for="popoverButton">
  <som-content>Popover content goes here</som-content>
</som-popover>
```

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

### Grid with No Gutters Example

Source: https://digitalguidelines.michigan.gov/docs/utilities/grid

Demonstrates the application of `.no-gutters` within a container to remove spacing between columns. This example shows how columns adjust when gutters are removed.

```html
<div class="container">
  <div class="row no-gutters">
    <div class="col-12 col-sm-6 col-md-8">
      <div class="col-sample">.col-12 .col-sm-6 .col-md-8</div>
    </div>
    <div class="col-6 col-md-4">
      <div class="col-sample">.col-6 .col-md-4</div>
    </div>
  </div>
</div>
```

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

### Open Modal Example

Source: https://digitalguidelines.michigan.gov/docs/components/overlays/som-modal

Demonstrates how to open a modal using a button click. The modal can be customized with a headline, size, and content.

```html
<som-button color="primary" onclick="document.getElementById('modalEl').open()">
  Open modal
</som-button>
<som-modal id="modalEl" headline="Modal heading" size="lg">
  <div class="pb-1">
    <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>
  </div>
</som-modal>
```

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

### Button Examples

Source: https://digitalguidelines.michigan.gov/docs/components/button/som-button

Demonstrates various configurations of the som-button component, including size, type, color, and icon usage. Use these examples to understand different button styles and functionalities.

```html
<som-button size="block" button-type="default" color="primary">call to action</som-button>
```

```html
<som-button loading="true" loading-message="loading example" color="secondary">call to action</som-button>
```

```html
<som-button size="sm" color="primary">call to action</som-button>
```

```html
<som-button size="lg" button-type="outline" color="danger">call to action</som-button>
```

```html
<som-button button-type="clear" color="primary">call to action</som-button>
```

```html
<som-button color="danger" icon-position="left" icon="search">call to action</som-button>
```

```html
<som-button color="gray" icon-position="right" icon="search">call to action</som-button>
```

```html
<div>
<som-button button-type="clear" icon-position="only" icon="search" button-aria-label="search"></som-button>
<som-button button-type="clear" icon-position="only" icon="trash-can" button-aria-label="delete"></som-button>
</div>
```

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

### Install Digital Guidelines Angular Package

Source: https://digitalguidelines.michigan.gov/docs/gettingstarted/angular/standalone

Install the core Digital Guidelines Angular package using NPM to add components to your project.

```bash
npm install @migov/digital-guidelines-core-angular
```

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

### Include Digital Guidelines via NPM in HTML

Source: https://digitalguidelines.michigan.gov/docs/gettingstarted/cdn

After installing via NPM, add these script tags to the `<head>` section of your HTML file to reference the local installation of Digital Guidelines.

```html
<link rel="stylesheet" type="text/css" href="node_modules/@migov/digital-guidelines-core/dist/digital-guidelines-core/digital-guidelines-core.css">
<script type="module" src="node_modules/@migov/digital-guidelines-core/dist/digital-guidelines-core/digital-guidelines-core.esm.js"
></script>
```

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

### Basic Data Grid Example

Source: https://digitalguidelines.michigan.gov/docs/components/datagrid/som-grid

This example demonstrates a basic Data Grid with sortable and hoverable features. It includes a table with headers and data rows.

```html
<som-grid id="sortable-grid" labelled-by="sortable-grid-2" striped hoverable>
  <table class="table" id="exampleTable">
    <thead>
      <tr>
        <th><som-grid-th name="id">ID</som-grid-th></th>
        <th><som-grid-th name="name">Animal name</som-grid-th></th>
        <th><som-grid-th name="type">Animal type</som-grid-th></th>
      </tr>
    </thead>
      <tbody id="exampleTableBody">
      <tr>
        <td>1</td>
        <td>Kitty</td>
        <td>cat</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Doug</td>
        <td>dog</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Travis</td>
        <td>tiger</td>
      </tr>
    </tbody>
  </table>
</som-grid>
```

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

### Alert Examples

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Examples demonstrating different types of alerts: informational, success, warning, and error. Alerts can be configured with a headline and dismissibility.

```APIDOC
## Example

### Informational alert
This is an important message that your user should know about.

### Success alert
Let the user know that they successfully accomplished a task.

### Warning alert
Warn the user about something.

### Error Alert
Inform the user about an error that has occurred.

```html
<som-alert type="info" headline="Informational alert" dismissible="true">
  This is an important message that your user should know about.
</som-alert>
<som-alert type="success" headline="Success alert" dismissible="true">
  Let the user know that they successfully accomplished a task.
</som-alert>
<som-alert type="warning" headline="Warning alert" dismissible>
  Warn the user about something.
</som-alert>
<som-alert type="error" headline="Error Alert">
  Inform the user about an error that has occurred.
</som-alert>
```
```

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

### Header Component Example

Source: https://digitalguidelines.michigan.gov/docs/components/navigation/som-header

This is a basic example of the Header component. It requires the `main-content-id` prop to be set for the skip navigation link. The `header-menu` slot is used to populate the main navigation.

```html
<som-header
  home-link="/DigitalGuidelines"
  app-name="Digital Guidelines"
  department-name="Department of Technology, Management, and Budget"
  main-content-id="headerExample" 
  breakpoint="none"
  sticky="false"
>
  <som-list slot="header-menu" type="header">
    <som-list-parent-item display-name="Examples">
      <som-list-item><a href="#">Link 1</a></som-list-item>
    </som-list-parent-item>
  </som-list>
</som-header>
<div id='headerExample'></div>

```

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

### Input Component Usage

Source: https://digitalguidelines.michigan.gov/docs/components/forms/som-input

Examples of how to use the som-input component with different configurations.

```APIDOC
## Example Usage

### Basic Input
```html
<som-input
  input-id="name"
  label="Name"
  help="This is a required field."
  placeholder="Enter name..."
  aria-label="Enter your first and last name"
  required
></som-input>
```

### Input with Error
```html
<som-input label="Name" error="This field is required." required></som-input>
```

### Password Input
```html
<som-input label="Password" type="password" required></som-input>
```

### Input with Tooltip
```html
<som-input 
  label="Username" 
  help="This example has a tooltip."
  tooltip="Your username is your email address."
  required 
></som-input>
```
```

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

### Panel Component Usage

Source: https://digitalguidelines.michigan.gov/docs/components/overlays/som-panel

Example of how to open and use the Panel component with its content.

```APIDOC
## Panel Component

Panels are partial-screen overlays that focus users’ attention while keeping them in context within a flow. They’re used for tasks like editing, filtering, or viewing details.

### Example

```html
<som-button onclick="document.getElementById('panelEl').open()">Open panel</som-button>
<som-panel id="panelEl" hide-close-button="false">
  <som-content>
    <div class="text-type-2-bold mb-1">Heading</div>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
      <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
    <div class="text-success">End of panel</div>
  </som-content>
</som-panel>
```

## Props

| Attr| Type| Default| Docs  
---|---|---|---
| below-header| boolean| false| This boolean property is used to determine if the panel should show over or below header.  
| breakpoint| "lg" | "md" | "sm" | "xl"| 'lg'| This property is where the mobile navigation should take effect.  
| enable-overlay-close| boolean| true| This boolean allows the panel to be closed when clicking on the overlay outside the panel.  
| hide-close-button| boolean| false| This boolean property is used to hide the panel's close button.  
| position| "left" | "right"| 'left'| This property is where the panel should appear.  
| scroll-to-top| boolean| true| This boolean determines whether the page scrolls back to the top upon panel opening.  
| shown| boolean| false| This boolean property is used to display or hide the panel on initial load.  
| size| "lg" | "md" | "sm" | "xl"| 'md'| This property is used to control the panel’s width. The sizes are as follows: `sm = 20rem`, `md = 30rem`, `lg = 40rem`, `xl = fullscreen - 38px`.  

## Methods

| Name| Returns| Docs  
---|---|---
| close| Promise will resolve when the close animation ends.| This method will close the panel.  
| open| Promise will resolve when the open animation ends.| This method will open the panel.  
| refresh| Promise will resolve after the refresh.| This method will refresh the panel. This can be used when loading asynchronous data, which allows the component to find focusable elements and provide optimal accessibility support.  

## Events

| Event| Detail| Docs  
---|---|---
| afterClose| any| This event is triggered right after panel is closed.  
| afterOpen| any| This event is triggered right after panel is opened.  
| beforeClose| any| This event is triggered just before panel is closed.  
| beforeOpen| any| This event is triggered just before panel is opened.  
```

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

### Align Content Start Utility

Source: https://digitalguidelines.michigan.gov/docs/utilities/flex

Use `align-content-start` on a flex container to align items to the start of the cross axis. Requires `flex-wrap: wrap` to be effective.

```html
<div class="d-flex align-content-start flex-wrap flex-item flex-vert">
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
  <div class="flex-item p-0_5">Flex item</div>
</div>
```

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

### Basic Grid Layout Example

Source: https://digitalguidelines.michigan.gov/docs/utilities/grid

This example demonstrates a basic grid layout with three equal-width columns that span across small, medium, large, and extra-large devices. The `.container` class centers the columns on the page.

```html
<div class="container">
  <div class="row grid-sample">
    <div class="col-sm"><div class="col-sample">.col-sm</div></div>
    <div class="col-sm"><div class="col-sample">.col-sm</div></div>
    <div class="col-sm"><div class="col-sample">.col-sm</div></div>
  </div>
</div>
```

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

### Basic List Parent Item Example

Source: https://digitalguidelines.michigan.gov/docs/components/list/som-list-parent-item

This example demonstrates how to use the `som-list-parent-item` component within a `som-list` with the type 'header'. It includes child `som-list-item` elements.

```html
<som-list type="header">
  <som-list-parent-item display-name="Examples">
    <som-list-item><a href="#" target="_blank">List item 1</a></som-list-item>
    <som-list-item><a href="#" target="_blank">List item 2</a></som-list-item>
    <som-list-item><a href="#" target="_blank">List item 3</a></som-list-item>
  </som-list-parent-item>
</som-list>
```

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

### Basic Date Picker Input Example

Source: https://digitalguidelines.michigan.gov/docs/components/date-picker/som-date-picker-input

This example demonstrates a basic date picker input with a label and help text. It uses the current date as the initial value and specifies the MM/DD/YYYY format.

```html
<som-date-picker-input 
  id="dpiExample" 
  label="Date picker input example" 
  help="Give users instructions" 
  vertical-position="bottom" 
  horizontal-position="left" 
  value={new Date().toLocaleDateString()}
  format="MM/DD/YYYY" 
  placeholder="MM/DD/YYYY" 
  required
></som-date-picker-input>
```

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

### Header Component Usage

Source: https://digitalguidelines.michigan.gov/docs/components/navigation/som-header

This example demonstrates how to use the som-header component with its available props and slots.

```APIDOC
## som-header Component

### Description
This component is a menu that goes across the top of a website. It helps users know what page of a website they're on, and lets them access the main sections of a site through top-level navigation.

### Props
- **app-name** (string) - Optional - The name of the application.
- **breakpoint** (string: "lg" | "md" | "none" | "sm" | "xl") - Optional - The breakpoint where the mobile navigation should take effect. Setting the value to `"none"` will always show the flyout menu.
- **department-name** (string) - Optional - The name of the department where the application resides.
- **home-link** (string) - Optional - Used to set a link on the header logo and title text.
- **main-content-id** (string) - Required - The ID of the main content section of the application. It is used to establish a connection for the "skip navigation" link.
- **sticky** (boolean) - Optional - Determines if the header should stick to the top of scroll with the content.

### Methods
- **closePanelMenu** - Returns: Promise will resolve when the close animation ends. - This method will close the panel menu if opened. It can be useful when a menu link is clicked but the page doesn't refresh.

### Slots
- **header-menu** - This slot is used for the main horizontal header menu.
- **panel-menu** - This slot is used for the fly out panel menu.

### Example
```html
<som-header
  home-link="/DigitalGuidelines"
  app-name="Digital Guidelines"
  department-name="Department of Technology, Management, and Budget"
  main-content-id="headerExample"
  breakpoint="none"
  sticky="false"
>
  <som-list slot="header-menu" type="header">
    <som-list-parent-item display-name="Examples">
      <som-list-item><a href="#">Link 1</a></som-list-item>
    </som-list-parent-item>
  </som-list>
</som-header>
<div id='headerExample'></div>
```
```

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

### Tabs Component Example

Source: https://digitalguidelines.michigan.gov/docs/components/tabs/som-tabs

This example demonstrates the basic structure of the Tabs component, including tab groups and tab panels. Ensure all tab panels are present, even if not immediately visible, to maintain correct functionality.

```html
<som-tabs>
  <som-tab-group contained>
    <som-tab name="Tab one"></som-tab>
    <som-tab name="Tab two"></som-tab>
    <som-tab name="Tab three" active></som-tab>
  </som-tab-group>
  <som-tab-panel-group>
    <som-tab-panel>
      <som-content>This is panel 1</som-content>  
    </som-tab-panel>
    <som-tab-panel>
      <som-content>This is panel 2</som-content>  
    </som-tab-panel>
    <som-tab-panel>
      <som-content>This is panel 3</som-content>  
    </som-tab-panel>
    <som-tab-panel>
      <som-content>This is panel 4</som-content>  
    </som-tab-panel>  
    <som-tab-panel>
      <som-content>This is panel 5</som-content>  
    </som-tab-panel>
  </som-tab-panel-group>
</som-tabs>
```

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

### Warning Toast Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-toast-group

Illustrates a warning toast to caution about potential problems. The toast is configured with the 'warning' color. An additional example demonstrates disabling auto-dismiss and dismissible options.

```html
<div>
  <som-toast id="toast7" headline="File type not supported" color="warning">
    Please use a supported file type, such as .pdf, .docx, or .png. 
  </som-toast>
</div>
<SomToast id="toast8" headline="Low storage" color="warning" auto-dismiss={false} dismissible={false}>
  Free up some space to avoid issues. 
</SomToast>
```

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

### Dialog Component Usage

Source: https://digitalguidelines.michigan.gov/docs/components/overlays/som-dialog

Example of how to open a dialog using a button and the basic structure of a som-dialog component.

```APIDOC
## Example
Open dialog
Dialog headline
Dialog content goes here.
Cancel
Confirm
View code

```html
<som-button color="primary" onClick="document.getElementById('dialogEl').open()">
  Open dialog
</som-button>
<som-dialog id="dialogEl" headline="Dialog headline" size="lg">
  <p>Dialog content goes here.</p>
</som-dialog>
```
```

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

### Badge Component Usage

Source: https://digitalguidelines.michigan.gov/docs/components/som-badge

Examples of how to use the Badge component with different properties.

```APIDOC
## Example

Reminders 
New emails 
View code

```html
<som-badge color="success" label="Success status" light dismissible></som-badge>
<som-badge color="danger" label="Danger status" light dismissible></som-badge>
<som-badge color="warning" label="Warning status" light dismissible></som-badge>
<p>Reminders <som-badge color="warning" label="7" size="sm"></som-badge></p>
<p>New emails <som-badge color="danger" label="30" size="sm"></som-badge></p>
```
```

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

### Basic Tab Panel Group Example

Source: https://digitalguidelines.michigan.gov/docs/components/tabs/som-tab-panel-group

This example demonstrates the basic structure of a Tab Panel Group, containing three tab panels. Each panel holds content that will be displayed when its associated tab is selected. It is used in conjunction with a som-tab-group.

```html
<som-tabs>
  <som-tab-group contained>
    <som-tab name="Tab one"></som-tab>
    <som-tab name="Tab two"></som-tab>
    <som-tab name="Tab three"></som-tab>
  </som-tab-group>
  <som-tab-panel-group>
    <som-tab-panel>
      <som-content>This is panel 1</som-content>  
    </som-tab-panel>
    <som-tab-panel>
      <som-content>This is panel 2</som-content>  
    </som-tab-panel>
    <som-tab-panel>
      <som-content>This is panel 3</som-content>  
    </som-tab-panel>
  </som-tab-panel-group>
</som-tabs>
```

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

### Sidebar Basic Usage

Source: https://digitalguidelines.michigan.gov/docs/components/navigation/som-sidebar

This is a basic example of how to implement the som-sidebar component with a list of navigation links.

```html
<som-sidebar>
  <som-list type="sidebar">
    <som-list-item><a href="#">Link 1</a></som-list-item>
    <som-list-item><a href="#">Link 2</a></som-list-item>
    <som-list-item><a href="#">Link 3</a></som-list-item>
    <som-list-header>List heading 1</som-list-header>
    <som-list-item><a href="#">Link 4</a></som-list-item>
    <som-list-item><a href="#">Link 5</a></som-list-item>
    <som-list-item><a href="#">Link 6</a></som-list-item>
  </som-list>
</som-sidebar>
```

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

### Data Grid Component Usage

Source: https://digitalguidelines.michigan.gov/docs/components/data-grid/som-grid

Example of how to implement the Data Grid component with a table, including sortable headers.

```APIDOC
## Component Data Grid
Grids are used when displaying a data table.

## Example
ID| Animal name| Animal type  
---|---|---  
1| Kitty| cat  
2| Doug| dog  
3| Travis| tiger  

<som-grid id="sortable-grid" labelled-by="sortable-grid-2" striped hoverable>
  <table class="table" id="exampleTable">
    <thead>
      <tr>
        <th><som-grid-th name="id">ID</som-grid-th></th>
        <th><som-grid-th name="name">Animal name</som-grid-th></th>
        <th><som-grid-th name="type">Animal type</som-grid-th></th>
      </tr>
    </thead>
      <tbody id="exampleTableBody">
      <tr>
        <td>1</td>
        <td>Kitty</td>
        <td>cat</td>
      </tr>
      <tr>
        <td>2</td>
        <td>Doug</td>
        <td>dog</td>
      </tr>
      <tr>
        <td>3</td>
        <td>Travis</td>
        <td>tiger</td>
      </tr>
    </tbody>
  </table>
</som-grid>
```

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

### Use a Som Button Component

Source: https://digitalguidelines.michigan.gov/docs/gettingstarted/cdn

Incorporate a basic button component into your HTML after installing the necessary packages. This example shows a default button with a primary color.

```html
<som-button button-type="default" color="primary">call to action</som-button>
```

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

### Basic Input Examples

Source: https://digitalguidelines.michigan.gov/docs/components/forms/som-input

Demonstrates various configurations of the input component, including required fields, error messages, password types, and tooltips.

```html
<som-input
  input-id="name"
  label="Name"
  help="This is a required field."
  placeholder="Enter name..."
  aria-label="Enter your first and last name"
  required
></som-input>
<som-input label="Name" error="This field is required." required></som-input>
<som-input label="Password" type="password" required></som-input>
<som-input 
  label="Username" 
  help="This example has a tooltip."
  tooltip="Your username is your email address."
  required 
></som-input>
```

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

### Select Component Usage

Source: https://digitalguidelines.michigan.gov/docs/components/forms/som-select

Examples demonstrating how to use the som-select component with various configurations, including required fields, error states, and tooltips.

```APIDOC
## som-select

### Description
Allows users to make a single choice from a list of options in a dropdown menu.

### Props
Attr| Type| Default| Docs  
---|---|---|---
`disabled`| boolean| false| This boolean can be used to disable the select.
`error`| string| null| This property can be used to set an error. If a non-empty string is given, it will be used as the error message.
`help`| string| ''| This property can be used to set a help text.
`hide-label`| boolean| false| This property will visually hide the label. A label is still required to be provided for screenreader support.
`input-aria-label`| string| null| This property can be used to set the ARIA label associated with this input (for screen readers).
`input-id`| string| generateId('som-input')| This property can be used to specifically set an ID to the input field. If an ID is not provided, it will be dynamically generated.
`label`| string| ''| This property can be used to set a label.
`label-class`| string| ''| This property is a list of CSS classes that can be used to style the label.
`name`| string| ''| This property can be used to set the form field name (used when submitting the form).
`readonly`| boolean| false| This boolean can be used to set the select input as readonly.
`required`| boolean| false| This boolean can be used to set the select as required.
`required-ind`| "none" | "optional" | "required"| | This property is used to override the required indicator. By default, forms elements will show an `optional` indicator but some forms are better served showing the `required` indicator instead.
`tooltip`| string| null| This property is used to set the tooltip text.
`value`| string| | This property can be used to set the select value.

### Methods
Name| Returns| Docs  
---|---|---
`setFocus`| Promise will resolve after focus.| This public method sets focus to the select element.

### Events
Event| Detail| Docs  
---|---|---
`somBlur`| any| This event is emitted when when the select field loses focus.
`somChange`| any| This event is emitted when the select value changes.
`somFocus`| any| This event is emitted when when the select field gets focus.

### Slots
Name| Docs  
---|---
`label`| Label for the select. Alternatively, you can use the label attribute.

### Example
```html
<som-select
  input-id="favorite-color-select"
  label="Select your favorite color"
  help="We won't share this info with anybody."
  required
>
  <option label="Red" value="red"></option>
  <option label="Blue" value="blue"></option>
  <option label="Green" value="green"></option>
</som-select>
<som-select
  help="We won't share this info with anybody."
  label="Select your favorite color"
  error
  required
>
  <option label="Red" value="red"></option>
  <option label="Blue" value="blue"></option>
  <option label="Yellow" value="yellow" disabled></option>
  <option label="Green" value="green"></option>
</som-select>
<som-select
  help="This example has a tooltip."
  label="Select your favorite color"
  tooltip="We'll update your profile to use this color."
  required
>
  <option label="Green" value="green"></option>
  <option label="Pink" value="pink" selected></option>
  <option label="Navy" value="navy"></option>
</som-select>
```
```

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

### Info Alert Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Example of an info alert, used to share neutral, non-urgent details with the user.

```APIDOC
### Info
Use the info type to share neutral, non-urgent details with the user.

```html
<som-alert type="info" headline="Testing in progress">
  You have early access to this new beta feature! Expect updates and improvements as we gather feedback.
</som-alert>
```
```

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

### Initialize New Angular Project

Source: https://digitalguidelines.michigan.gov/docs/gettingstarted/angular/standalone

Use the Angular CLI to create a new project. It's recommended to select SCSS for stylesheet format to leverage additional styling helpers.

```bash
ng new project-name
```

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

### Warning Alert Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Example of a warning alert, used to caution about potential issues or unexpected results.

```APIDOC
### Warning
Use the warning type to caution about potential issues or unexpected results.

```html
<som-alert type="warning" headline="Warning">
  Your password expires in 3 days.
</som-alert>
```
```

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

### Success Alert Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Example of a success alert, used to confirm a successful action or completed task.

```APIDOC
### Success (default)
Use the success type to confirm a successful action or completed task.

```html
<som-alert type="success" headline="Success">
  You created a new account.
</som-alert>
```
```

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

### Basic Pagination Examples

Source: https://digitalguidelines.michigan.gov/docs/components/som-pagination

Demonstrates two ways to use the som-pagination component. The first shows records within a page range and the second shows items per page.

```html
<som-pagination id="pagination" page="2" total-items="100" view="page"></som-pagination>
```

```html
<som-pagination id="pagination" total-items="100" items-per-page="20"></som-pagination>
```

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

### Error Alert Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Example of an error alert, used to signal a problem that needs the user's attention.

```APIDOC
### Error
Use the error type to alert that something has gone wrong.

```html
<som-alert type="error" headline="Error">
  We couldn’t complete your request. Please try again.
</som-alert>
```
```

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

### Popover Usage Example

Source: https://digitalguidelines.michigan.gov/docs/components/overlays/som-popover

This example demonstrates how to use the som-popover component, including its association with a trigger element and content.

```APIDOC
## Example

Open popover

Popover content goes here

View code

```html
<som-button
  id="popoverButton"
  button-type="default"
  color="primary"
  onclick="document.getElementById('popoverEl').show = !document.getElementById('popoverEl').show"
>
  Open popover
</som-button>
<som-popover id="popoverEl" for="popoverButton">
  <som-content>Popover content goes here</som-content>
</som-popover>
```
```

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

### Error Alert Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Use the error alert type to signal that something has gone wrong. This example includes a headline and an error message.

```html
<som-alert type="error" headline="Error">
  We couldn’t complete your request. Please try again.
</som-alert>
```

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

### Basic Flex Order Example

Source: https://digitalguidelines.michigan.gov/docs/utilities/flex

Demonstrates how to use the 'order' utility classes to change the visual order of flex items. Items with lower order values appear first.

```html
<div class="d-flex flex-nowrap flex-item">
  <div class="flex-item p-0_5 order-3 p-2">First flex item</div>
  <div class="flex-item p-0_5 order-2 p-2">Second flex item</div>
  <div class="flex-item p-0_5 order-1 p-2">Third flex item</div>
</div>
```

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

### Responsive Table Example

Source: https://digitalguidelines.michigan.gov/docs/utilities/table

Wrap tables in a `table-responsive` div to enable horizontal scrolling on mobile devices. This example demonstrates a basic table structure.

```html
<div class="table-responsive">
  <table class="table" id="defaultTable">
    <thead>
      <tr>
        <th scope="col">ID</th>
        <th scope="col">Animal name</th>
        <th scope="col">Animal type</th>
      </tr>
    </thead>
    <tbody id="defaultTableBody">
      <tr>
        <th scope="row">1</th>
        <td>Kitty</td>
        <td>cat</td>
      </tr>
      <tr>
        <th scope="row">2</th>
        <td>Doug</td>
        <td>dog</td>
      </tr>
      <tr>
        <th scope="row">3</th>
        <td>Travis</td>
        <td>tiger</td>
      </tr>
    </tbody>
  </table>
</div>
```

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

### Toast Examples

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-toast

Demonstrates various configurations of the som-toast component, including default auto-dismissal, manual dismissal, and custom timeout with no dismissible option.

```html
<div>
  <som-toast id="toast1" headline="Success" color="success">
    By default, this toast notification will auto-dismiss after 10 seconds.
  </som-toast>
  <som-toast id="toast2" headline="Warning" color="warning" auto-dismiss="false">
    This toast notification is configured to dismiss manually.
  </som-toast>
  <som-toast id="toast3" headline="Error" color="danger" auto-dismiss-time={30000} dismissible="false">
    A user can't dismiss this toast, but it will dismiss automatically after a custom timeout interval of 30 seconds.
  </som-toast>
  <som-toast id="toast4" headline="Info" auto-dismiss="false">
    This is a demo of a dismissible toast notification.
  </som-toast>
</div>
```

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

### Initialize Vite React Project

Source: https://digitalguidelines.michigan.gov/docs/gettingstarted/react

Use this command to create a new Vite project with React. Choose the react-ts template if you prefer TypeScript.

```bash
npm create vite@latest my-react-app -- --template react
```

```bash
npm create vite@latest my-react-app -- --template react-ts
```

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

### Info Alert Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Use the info alert type to share neutral, non-urgent details with the user. This example includes a headline and an informational message.

```html
<som-alert type="info" headline="Testing in progress">
  You have early access to this new beta feature! Expect updates and improvements as we gather feedback.
</som-alert>
```

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

### Basic Mobile Subheader Example

Source: https://digitalguidelines.michigan.gov/docs/components/navigation/som-mobile-subheader

This example demonstrates the basic usage of the som-mobile-subheader component. Resize your browser to observe its behavior on different screen sizes.

```html
<p>Resize browser to see som-mobile-subheader component.</p>
<som-mobile-subheader subheader-title="Subheader Example Menu" breakpoint="lg">
  <som-list type="sidebar">
    <som-list-item><a href="#">Link 1</a></som-list-item>
    <som-list-item><a href="#">Link 2</a></som-list-item>
    <som-list-item><a href="#">Link 3</a></som-list-item>
    <som-list-header>List heading 1</som-list-header>
    <som-list-item><a href="#">Link 4</a></som-list-item>
    <som-list-item><a href="#">Link 5</a></som-list-item>
    <som-list-item><a href="#">Link 6</a></som-list-item>
  </som-list>
</som-mobile-subheader>
```

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

### Basic Card Examples

Source: https://digitalguidelines.michigan.gov/docs/components/card/som-card

Demonstrates various card configurations, including cards with images, text content, and different color variants. The `som-card` component accepts a `color` prop to change its background and border.

```html
<div class="row row-cols-1 row-cols-sm-2">
  <div class="col mb-1">
    <som-card color="white">
      <img src="https://placehold.jp/30/d0d0d0/707070/320x180.png?text=image" alt="placeholder image" />
      <som-content>
        <h2 className='text-type-2'>Card with image</h2>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi suscipit quam eget odio sollicitudin ullamcorper aliquam ac magna varius.
      </som-content>
    </som-card>
  </div>
  <div class="col mb-1">
    <som-card class="mb-1" color="white">
      <som-content>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <a class="cta-link" href="#">Learn more</a>
      </som-content>
    </som-card>
    <som-card class="mb-1" color="success">
      <som-content>Lorem ipsum dolor sit amet consectetur adipiscing.</som-content>
    </som-card>
    <som-card color="danger">
      <som-content>Lorem ipsum dolor sit amet consectetur adipiscing.</som-content>
    </som-card>
  </div>  
</div>
```

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

### Warning Alert Example

Source: https://digitalguidelines.michigan.gov/docs/components/notifications/som-alert

Use the warning alert type to caution users about potential issues or unexpected results. This example includes a headline and a warning message.

```html
<som-alert type="warning" headline="Warning">
  Your password expires in 3 days.
</som-alert>
```