### Install Chi Vue Plugin with Default Configuration

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

This TypeScript example shows the minimal setup for installing the Chi Vue plugin using `app.use(ChiVue, {})`. This automatically includes default configurations for the portal theme and the latest Chi version.

```typescript
import { createApp } from 'vue';
import { ChiVue } from "@centurylink/chi-vue";

const app = createApp(App);

app.use(ChiVue, {});
```

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

### Install Chi Vue Plugin with Custom Theme and Version

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

This TypeScript example demonstrates how to install the Chi Vue plugin with specific configurations for theme and version. The `chiOptions` object allows you to set `theme` to 'lumen', 'portal', or 'centuryLink', and `forceVersion` to a specific Chi version string.

```typescript
import { createApp } from 'vue';
import { ChiVue } from "@centurylink/chi-vue";

const app = createApp(App);

app.use(ChiVue, {
  chiOptions: {
    theme: 'centurylink',
    forceVersion: '5.78.0'
  }
});


```

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

### Text Input: Placeholder Example (Web Component & HTML)

Source: https://assets.ctl.io/chi/6.86.0/components/forms/text-input

Demonstrates how to use the `placeholder` attribute to provide guidance to users on the expected input format. The placeholder text disappears once the user starts typing.

```webcomponent
<div class="chi-form__item">
  <chi-label for="example__placeholder">Label</chi-label>
  <chi-text-input id="example__placeholder" placeholder="Placeholder"></chi-text-input>
</div>
```

```html
<div class="chi-form__item">
  <label class="chi-label" for="example__placeholder">Label</label>
  <input type="text" class="chi-input" id="example__placeholder" placeholder="Placeholder">
</div>
```

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

### Base Search Input Examples

Source: https://assets.ctl.io/chi/6.86.0/components/forms/search-input_theme=portal

Demonstrates the basic implementation of the search input component. It shows how to integrate the search input using Web Components, Vue, and a standard HTML Blueprint. These examples cover the fundamental structure for adding a search input to a form.

```html
<div class="chi-form__item">
  <chi-search-input></chi-search-input>
</div>
```

```html
<div class="chi-form__item">
  <ChiSearchInput />
</div>
```

```html
<div class="chi-form__item">
  <div class="chi-input__wrapper -icon--right">
    <input class="chi-input chi-search__input" type="search" aria-label="search input" />
    <button class="chi-button -icon -flat -bg--none" aria-label="Search">
      <div class="chi-button__content">
        <i class="chi-icon icon-search" aria-hidden="true"></i>
      </div>
    </button>
    <button class="chi-button -icon -close -sm" aria-label="Close">
      <div class="chi-button__content">
        <i class="chi-icon icon-x" aria-hidden="true"></i>
      </div>
    </button>
  </div>
</div>
```

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

### HTML5 Progress Element Examples

Source: https://assets.ctl.io/chi/6.86.0/components/progress

Illustrates the use of the native HTML5 'progress' tag for creating progress indicators. Examples are provided for 0%, 50%, and 100% progress, using 'value' and 'max' attributes, along with 'aria-labelledby' for accessibility.

```html
<!-- 0% -->
<div class="chi-label" id="example-1">0%</div>
<progress aria-labelledby="example-1" value="0" max="100"></progress>

<!-- 50% -->
<div class="chi-label" id="example-2">50%</div>
<progress aria-labelledby="example-2" value="50" max="100"></progress>

<!-- 100% -->
<div class="chi-label" id="example-3">100%</div>
<progress aria-labelledby="example-3" value="100" max="100"></progress>
```

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

### HTML Progress Component Examples

Source: https://assets.ctl.io/chi/6.86.0/components/progress

Demonstrates how to implement progress indicators using the custom Chi Web Component. It shows examples for 0%, 50%, and 100% completion, utilizing the 'chi-progress' tag with 'value' and 'max' attributes.

```html
<!-- 0% -->
<div class="chi-label">0%</div>
<chi-progress value="0" max="100"></chi-progress>

<!-- 50% -->
<div class="chi-label">50%</div>
<chi-progress value="50" max="100"></chi-progress>

<!-- 100% -->
<div class="chi-label">100%</div>
<chi-progress value="100" max="100"></chi-progress>
```

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

### Chi Badge HTML Blueprint Examples

Source: https://assets.ctl.io/chi/6.86.0/components/badge

Illustrates how to implement Chi badges using HTML and CSS classes. Includes examples for various contextual colors and emphasis levels suitable for light and dark backgrounds.

```html
<!-- For light backgrounds -->
<div class="chi-badge">
  <span>Base</span>
</div>
<div class="chi-badge -primary">
  <span>Primary</span>
</div>
<div class="chi-badge -success">
  <span>Success</span>
</div>
<div class="chi-badge -warning">
  <span>Warning</span>
</div>
<div class="chi-badge -danger">
  <span>Danger</span>
</div>
<div class="chi-badge -dark">
  <span>Dark</span>
</div>
<div class="chi-badge -muted">
  <span>Muted</span>
</div>

<div class="chi-badge -accent-1">
  <span>Accent-1</span>
</div>
<div class="chi-badge -accent-2">
  <span>Accent-2</span>
</div>
<div class="chi-badge -accent-3">
  <span>Accent-3</span>
</div>
<div class="chi-badge -accent-4">
  <span>Accent-4</span>
</div>
<div class="chi-badge -accent-5">
  <span>Accent-5</span>
</div>

<!-- For dark backgrounds -->
<div class="chi-badge -secondary">
  <span>Secondary</span>
</div>
<div class="chi-badge -light">
  <span>Light</span>
</div>
```

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

### Dropdown Web Component Example

Source: https://assets.ctl.io/chi/6.86.0/components/dropdown

This example demonstrates how to use the Dropdown component as a Web Component. It requires the Chi.js library for functionality. The 'position' and 'button' attributes configure the dropdown's behavior and appearance.

```html
<chi-dropdown position="bottom" button="Dropdown, click me">
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 1</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 2</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 3</a>
  <a class="chi-dropdown__menu-item" href="#" slot="menu">Item 4</a>
</chi-dropdown>
```

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

### Example Picker HTML Structure

Source: https://assets.ctl.io/chi/6.86.0/components/forms/picker

Illustrates a basic HTML structure for a Chi Picker component, showing content alignment and price display. This is a structural example and does not include interactive JavaScript.

```html
<div class="chi-picker__content">
  <div class="chi-picker__content--start -w--100 -w-sm--65">
    <div class="chi-form__item -row">
      <span class="chi-picker__radio"></span>
      <span class="chi-picker__label">Option 2</span>
    </div>
    <div class="chi-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex.</div>
  </div>
  <div class="chi-picker__content--end">
    <div class="chi-picker__label">
      $0.00<span class="-text--normal">/mo</span>
    </div>
  </div>
</div>
```

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

### Initialize Chi Drawer with Chi.js

Source: https://assets.ctl.io/chi/6.86.0/components/drawer

This example demonstrates initializing a Chi Drawer using the Chi.js vanilla JavaScript solution. It requires specific HTML structure for the trigger and the drawer itself, and then uses the `chi.drawer()` function with the trigger element to enable its functionality.

```html
<!-- Trigger -->
<button
  id="example__interaction-trigger"
  class="chi-button -flat -icon chi-drawer__trigger"
  data-target="#example__interaction"
  aria-label="Toggle navigation"
>
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu" aria-hidden="true"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="example__interaction" class="chi-drawer -left">
      <button class="chi-button -icon -close" aria-label="Close">
        <div class="chi-button__content">
          <i class="chi-icon icon-x" aria-hidden="true"></i>
        </div>
      </button>
      <div class="chi-drawer__content">
        <div class="-p--2 -pt--6 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>
```

```javascript
chi.drawer(document.getElementById('example__interaction-trigger'));
```

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

### Locally Register Chi Button Component (HTML/JavaScript)

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Import individual components on-demand for optimized bundle size. This example shows how to locally register and use a Chi Button component.

```html
<chi-button color="primary">Primary</chi-button>

<script>
  import { ChiButton } from '@centurylink/chi-custom-elements/components/chi-button';
</script>
```

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

### Chi Expansion Panel: Base Example with Navigation

Source: https://assets.ctl.io/chi/6.86.0/components/expansion-panel_theme=portal

Demonstrates a standard Chi expansion panel with header, read-only summary, and an expandable body containing content and navigation buttons. This panel is part of a multi-step process.

```html
<div class="chi-epanel" data-chi-epanel-group="example__base">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">2.</div>
    <div class="chi-epanel__title">Panel title</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present
          a read-only summary of what the user
          entered or selected in step 2.
          (e.g.) shipping address
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Edit</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to enter shipping address)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button" data-chi-epanel-action="previous">Previous</button>
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

### Configure AMD Module Loader for Chi

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

If using RequireJS or another AMD module loader, configure your require setup to load the Chi JavaScript library. This requires specifying the path and shim dependencies for Popper.js and Chi itself.

```javascript
'chi': {
  path: [CHI_PATH, 'amd', 'chi'].join('/'),
  shim: {
    deps: ['Popper'],
    exports: 'chi'
  }
}

```

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

### Register Chi Vue Components Globally

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

This main.ts example demonstrates how to import and globally register Chi Vue components within a Vue application. It uses the `app.use()` method for the ChiVue plugin and `app.component()` for individual components like ChiSearchInput.

```typescript
import { createApp } from 'vue';
import { ChiVue, ChiSearchInput } from "@centurylink/chi-vue";
import App from './App.vue';

const app = createApp(App);

app.use(ChiVue, {});
app.component("ChiSearchInput", ChiSearchInput);

app.mount('#app');
```

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

### Chi Expansion Panel - Initial State Example

Source: https://assets.ctl.io/chi/6.86.0/components/expansion-panel_theme=portal

Shows the initial or default state of a Chi expansion panel. It displays a summary and an 'Edit' button. The expanded view contains a form and action buttons for user interaction.

```html
<div class="chi-epanel" data-chi-epanel-group="example__state">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">1.</div>
    <div class="chi-epanel__title">Package selection</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          (e.g.) a package selection
        </div>
      </div>
    </div>
    <div class="chi-epanel__action -done--only">
      <button class="chi-button -primary -flat" data-chi-epanel-action="active">Edit</button>
    </div>
  </div>
  <div class="chi-epanel__collapse">
    <div class="-active--only">
      <div class="chi-epanel__body">
        <div class="chi-epanel__content">
          <div class="chi-epanel__subtitle">Optional subtitle</div>
          <p class="chi-epanel__text">Content in expansion panel (e.g. a form to select a product package)</p>
        </div>
        <div class="chi-epanel__footer -justify-content--end">
          <button class="chi-button -primary" data-chi-epanel-action="next">Continue</button>
        </div>
      </div>
    </div>
  </div>
</div>
```

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

### Install Chi Web Components via NPM

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Add the Chi Custom Elements package to your project's package.json file. This specifies the version of the components to be installed.

```json
"@centurylink/chi-custom-elements": "1.52.0"
```

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

### Chi Expansion Panel States using HTML Blueprint and Chi.js

Source: https://assets.ctl.io/chi/6.86.0/components/expansion-panel_theme=portal

Illustrates how to implement Chi Expansion Panels using a basic HTML structure and initialize them with Chi.js. This approach requires JavaScript to enable the interactive features of the panels.

```javascript
<!-- JavaScript -->
<script>chi.expansionPanel(document.querySelectorAll('[data-chi-epanel-group="example__state"]'));</script>
```

```html
<!-- HTML -->
<!-- Done state -->
<div class="chi-epanel -done" data-chi-epanel-group="example__state">
  <div class="chi-epanel__header">
    <div class="chi-epanel__number">1.</div>
    <div class="chi-epanel__title">Done state</div>
    <div class="chi-epanel__content">
      <div class="chi-epanel__collapse">
        <div class="-done--only">
          Use this area to present
          a read-only summary of what the user
          entered or selected in step 1.

```

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

### Drawer with Backdrop - Web Component

Source: https://assets.ctl.io/chi/6.86.0/components/drawer

Demonstrates how to implement a Chi Drawer with a backdrop using Web Components. This example includes a trigger button and the drawer element, along with JavaScript to toggle the drawer's visibility. It requires the Chi library.

```html
<!-- Trigger -->
<chi-button id="example__backdrop-trigger" variant="flat" type="icon">
  <chi-icon icon="menu" size="sm--2"></chi-icon>
</chi-button>

<!-- Drawer -->
<chi-drawer id="example__backdrop" position="bottom" backdrop no-header>
  <div class="-p--2 -pt--6 -text">Drawer content here</div>
</chi-drawer>

<!-- JavaScript -->
<script>
  var drawer = document.getElementById('example__backdrop');
  var drawerTrigger = document.getElementById('example__backdrop-trigger');
  drawerTrigger.addEventListener('click', function() {
    drawer.toggle();
    // Or:
    // drawer.active = !drawer.active;
  });
</script>
```

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

### Configure NPM Registry for Chi Web Components

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Configure your .npmrc file to point to the correct registry for CenturyLink packages and include your GitHub token for authentication. This is necessary for installing Chi Web Components via NPM.

```npmrc
registry=https://registry.npmjs.org
@centurylink:registry=https://npm.pkg.github.com/centurylink
//npm.pkg.github.com/:_authToken=${GH_TOKEN}
```

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

### Textarea Placeholder Example (Web Component & HTML)

Source: https://assets.ctl.io/chi/6.86.0/components/forms/textarea_theme=portal

Demonstrates the use of the `placeholder` attribute to provide a hint to the user about the expected input. The placeholder text disappears when the user starts typing. This example includes implementations for both Web Component and HTML blueprints.

```html
<div class="chi-form__item">
  <chi-label for="example__placeholder">Label</chi-label>
  <chi-textarea id="example__placeholder" placeholder="Placeholder"></chi-textarea>
</div>
```

```html
<div class="chi-form__item">
  <label class="chi-label" for="example__placeholder">Label</label>
  <textarea class="chi-input" id="example__placeholder" placeholder="Placeholder"></textarea>
</div>
```

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

### Control Chi Drawer Visibility with HTML Blueprint and Chi.js

Source: https://assets.ctl.io/chi/6.86.0/components/drawer

Provides an HTML Blueprint example for a Chi Drawer, demonstrating its integration with the Chi.js library for JavaScript control. This method is suitable for projects not using a specific framework.

```html
<!-- Trigger -->
<button id="example__close-button-trigger" class="chi-button -flat -icon chi-drawer__trigger" data-target="#example__close-button" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu" aria-hidden="true"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="example__close-button" class="chi-drawer -left">
      <button class="chi-button -icon -close" aria-label="Close">
        <div class="chi-button__content">
          <i class="chi-icon icon-x" aria-hidden="true"></i>
        </div>
      </button>
      <div class="chi-drawer__content">
        <div class="-p--2 -pt--6 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('example__close-button-trigger'));</script>
```

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

### Modify HTML Attribute of Chi Button

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Demonstrates how to modify the 'size' attribute of a Chi Button element using `setAttribute`. This method directly manipulates the HTML attribute.

```html
<chi-button id="close-btn" size="md">Close</chi-button>
<script>
  document.getElementById("close-btn").setAttribute("size", "xl");
</script>
```

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

### Drawer with Backdrop - HTML Blueprint

Source: https://assets.ctl.io/chi/6.86.0/components/drawer

Provides an HTML Blueprint for a Chi Drawer with a backdrop, designed to be used with Chi.js. This example includes the necessary HTML structure for the trigger and the drawer, along with a script tag to initialize the drawer functionality using Chi.js.

```html
<!-- Trigger -->
<button
  id="example__backdrop-trigger"
  class="chi-button -flat -icon chi-drawer__trigger"
  data-target="#example__backdrop"
  aria-label="Toggle navigation"
>
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu" aria-hidden="true"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="example__backdrop" class="chi-drawer -bottom">
      <button class="chi-button -icon -close" aria-label="Close">
        <div class="chi-button__content">
          <i class="chi-icon icon-x" aria-hidden="true"></i>
        </div>
      </button>
      <div class="chi-drawer__content">
        <div class="-p--2 -pt--6 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('example__backdrop-trigger'));</script>
```

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

### Set DOM Property of Chi Button

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Shows how to modify the 'size' DOM property of a Chi Button element. This method directly accesses and modifies the element's property.

```html
<chi-button id="close-btn" size="md">Close</chi-button>
<script>
  document.getElementById("close-btn").size="xl";
</script>
```

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

### Textarea Base Example (Web Component & HTML)

Source: https://assets.ctl.io/chi/6.86.0/components/forms/textarea_theme=portal

Demonstrates the basic implementation of a textarea input. It shows how to create a textarea with a label using both the Web Component and standard HTML blueprint. The Web Component uses `<chi-textarea>`, while the HTML blueprint uses the native `<textarea>` element.

```html
<div class="chi-form__item">
  <chi-label for="example__base">Label</chi-label>
  <chi-textarea id="example__base"></chi-textarea>
</div>
```

```html
<div class="chi-form__item">
  <label class="chi-label" for="example__base">Label</label>
  <textarea class="chi-input" id="example__base"></textarea>
</div>
```

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

### Add Chi Vue and Pinia Dependencies

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

This package.json snippet adds the necessary Chi Vue library and Pinia for state management to your project's dependencies. Ensure you are using compatible versions.

```json
"@centurylink/chi-vue": "3.30.0",
"pinia": "^2.1.4",
```

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

### Globally Register Chi Web Components (TypeScript)

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Import all Chi Web Components at once in your application's entry point (e.g., main.ts) for global availability. This simplifies usage across your application.

```typescript
// main.ts
import '@centurylink/chi-custom-elements/ux-chi-ce';
```

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

### Chi Picker with Description and Price Example (HTML)

Source: https://assets.ctl.io/chi/6.86.0/components/forms/picker

Demonstrates the Chi Picker component featuring both a description and pricing information for each selectable option. This is useful for services or products with associated costs.

```html
<fieldset>
  <legend class="chi-label">Select an option</legend>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-description-price" id="unique-id-lg-description-price-1" checked>
    <label for="unique-id-lg-description-price-1">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--65">
          <div class="chi-form__item -row">
            <span class="chi-picker__radio"></span>
            <span class="chi-picker__label">Option 1</span>
          </div>
          <div class="chi-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex.</div>
        </div>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $0.00<span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
  <div class="chi-picker -lg">
    <input class="chi-picker__input" type="radio" name="unique-name-lg-description-price" id="unique-id-lg-description-price-2">
    <label for="unique-id-lg-description-price-2">
      <div class="chi-picker__content">
        <div class="chi-picker__content--start -w--100 -w-sm--65">
          <div class="chi-form__item -row">
            <span class="chi-picker__radio"></span>
            <span class="chi-picker__label">Option 2</span>
          </div>
          <div class="chi-picker__description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex.</div>
        </div>
        <div class="chi-picker__content--end">
          <div class="chi-picker__label">
            $0.00<span class="-text--normal">/mo</span>
          </div>
        </div>
      </div>
    </label>
  </div>
</fieldset>
```

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

### Add Lumen Favicon

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Optionally, add a Lumen favicon to your project by inserting the provided link tags before the closing `</head>` tag. This includes both SVG and ICO formats for broad browser compatibility.

```html
<link rel="icon" type="image/svg+xml" href="https://lib.lumen.com/chi/6.86.0/assets/themes/portal/images/favicon.svg" integrity="sha256-+0ITKaXKx702ZWOzublRl83MJVOIbUMTQG8JvN+76B0=" crossorigin="anonymous">
<link rel="alternate icon" href="https://lib.lumen.com/chi/6.86.0/assets/themes/portal/images/favicon.ico" integrity="sha256-EkKmbH+i/VIQAtUl7NF4bPVaaJZCeBc5xWx8LTcMJp0=" crossorigin="anonymous">

```

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

### Chi Link Download Attribute Examples

Source: https://assets.ctl.io/chi/6.86.0/components/link

Shows how to implement the 'download' attribute to prompt users to save a linked resource instead of navigating to it. The attribute can optionally specify a custom filename.

```html
<!-- Use default filename -->
<chi-link href="#" download>Link</chi-link>

<!-- Specify custom filename -->
<chi-link href="#" download="custom-filename">Link</chi-link>
```

```html
<!-- Use default filename -->
<a class="chi-link" href="#" download>Link</a>

<!-- Specify custom filename -->
<a class="chi-link" href="#" download="custom-filename">Link</a>
```

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

### Apply Chi CSS Class

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Apply the 'chi' CSS class to the `<html>` tag of your document. This is crucial for scoping Chi styles and overriding any existing legacy styles, ensuring consistent component appearance.

```html
<html class="chi">
  ...
</html>

```

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

### Display Chi Drawer with Header using HTML Blueprint and Chi.js

Source: https://assets.ctl.io/chi/6.86.0/components/drawer

Shows how to create a Chi Drawer with a header using an HTML Blueprint and the Chi.js library. This approach is useful for integrating Chi components into existing HTML structures with minimal JavaScript.

```html
<!-- Trigger -->
<button id="example__header-trigger" class="chi-button -flat -icon chi-drawer__trigger" data-target="#example__header" aria-label="Toggle navigation">
  <div class="chi-button__content">
    <i class="chi-icon -sm--2 icon-menu" aria-hidden="true"></i>
  </div>
</button>

<!-- Drawer -->
<div class="chi-backdrop -closed">
  <div class="chi-backdrop__wrapper">
    <div id="example__header" class="chi-drawer -bottom">
      <div class="chi-drawer__header">
        <span class="chi-drawer__title">
          Drawer title here
        </span>
        <button class="chi-button -icon -close" aria-label="Close">
          <div class="chi-button__content">
            <i class="chi-icon icon-x" aria-hidden="true"></i>
          </div>
        </button>
      </div>
      <div class="chi-drawer__content">
        <div class="-p--2 -text">Drawer content here</div>
      </div>
    </div>
  </div>
</div>

<!-- JavaScript -->
<script>chi.drawer(document.getElementById('example__header-trigger'));</script>
```

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

### Include Chi CSS Stylesheet

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

Add the Chi CSS stylesheet to your project's header by linking to the file hosted on Lumen's Assets Server. This ensures proper styling for Chi components.

```html
<link rel="stylesheet" href="https://lib.lumen.com/chi/6.86.0/chi-portal.css" integrity="sha256-1ozwcIQjVvQPW/BgVkRs70dqz42x5A0zxygDDKoKkJo=" crossorigin="anonymous">

```

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

### Set Asset Path for Chi Icons (TypeScript)

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation

In your main TypeScript file, import the setAssetPath helper from the Chi Custom Elements library and configure the path for Chi Icons. This ensures icons are loaded correctly.

```typescript
// Chi Icons
import { setAssetPath } from '@centurylink/chi-custom-elements/helpers';

setAssetPath(`https://lib.lumen.com/chi/6.86.0/js/ce/ux-chi-ce/ux-chi-ce.esm.js);
```

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

### Drag and Drop Base Example (Web Component)

Source: https://assets.ctl.io/chi/6.86.0/components/drag-and-drop

Demonstrates the basic implementation of the drag and drop component. It initializes a list of draggable items and handles the 'chiCloseClick' event to remove items.

```html
<chi-drag id="drag-example"></chi-drag>

<script>
  const drag = document.getElementById('drag-example');

  drag.items = [
    { data: { title: 'Drag title 1', description: 'Drag description 1' }},
    { data: { title: 'Drag title 2', description: 'Drag description 2' }},
    { data: { title: 'Drag title 3', description: 'Drag description 3' }},
    { data: { title: 'Drag title 4', description: 'Drag description 4' }},
  ];

  drag.addEventListener('chiCloseClick', (ev) => {
    drag.items = drag.items.filter((item) => item.id !== ev.detail.id);
  });
</script>
```

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

### Configure Chi Vue Plugin with Theme and Version

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation_theme=portal

This code snippet illustrates how to configure the Chi Vue plugin with specific options, such as setting a custom theme ('centurylink') and forcing a particular Chi version ('5.78.0').

```typescript
import { createApp } from 'vue';
import { ChiVue } from "@centurylink/chi-vue";

const app = createApp(App);

app.use(ChiVue, {
  chiOptions: {
    theme: 'centurylink',
    forceVersion: '5.78.0'
  }
});
```

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

### Chi Picker JavaScript Initialization Examples

Source: https://assets.ctl.io/chi/6.86.0/components/forms/picker

This snippet demonstrates how to initialize and populate the Chi Picker component using JavaScript. It covers setting options, including labels, checked states, descriptions, and IDs for different picker instances.

```javascript
  <!-- md -->
  document.getElementById('md-picker').options = [{ label: 'Option 1', checked: true }, { label: 'Option 2' }];
  document.getElementById('md-input-picker').options = [{ label: 'Option 1', checked: true }, { label: 'Option 2' }];
  document.getElementById('md-input-description-picker').options = [
    {
      label: 'Option 1',
      checked: true,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.',
    },
    {
      label: 'Option 2',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.',
    }
  ];
  document.getElementById('md-input-description-price-picker').options = [
    {
      label: 'Option 1',
      checked: true,
      id: 'option-1',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.',
    },
    {
      label: 'Option 2',
      id: 'option-2',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.',
    }
  ];

  <!-- lg -->
  document.getElementById('lg-picker').options = [{ label: 'Option 1', checked: true }, { label: 'Option 2' }];
  document.getElementById('lg-input-picker').options = [{ label: 'Option 1', checked: true }, { label: 'Option 2' }];
  document.getElementById('lg-input-description-picker').options = [
    {
      label: 'Option 1',
      checked: true,
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.',
    },
    {
      label: 'Option 2',
      description: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer vehicula placerat iaculis. Ut rutrum pulvinar velit vitae molestie. Phasellus accumsan pharetra ex. Nulla iaculis velit sed velit vehicula dictum. Donec ut ultrices tortor. Vivamus sit amet lorem augue.',
    }
  ];
```

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

### Configure AMD Module Loader for Chi

Source: https://assets.ctl.io/chi/6.86.0/getting-started/installation_theme=portal

If using RequireJS or another AMD module loader, configure your require settings to load the AMD compatible version of Chi. This requires specifying the path and shim dependencies.

```javascript
'chi': {
  path: [CHI_PATH, 'amd', 'chi'].join('/'),
  shim: {
    deps: ['Popper'],
    exports: 'chi'
  }
}
```

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

### Clickable Alerts (HTML Blueprint)

Source: https://assets.ctl.io/chi/6.86.0/components/alert_theme=portal

This example illustrates clickable alerts using the HTML Blueprint approach, integrating with standard HTML `<a>` tags and `button` elements for similar functionality.

```html
<!-- Clickable alert using chi-link -->
<a href="#" class="chi-link -no-underline -no-hover-underline">
  <div class="chi-alert -info" role="alert">
    <i class="chi-alert__icon chi-icon icon-flag" aria-hidden="true"></i>
    <div class="chi-alert__content">
      <p class="chi-alert__title">Complete platform setup</p>
    </div>
    <div class="chi-alert__clickable-icon">
      <i class="chi-icon icon-chevron-right"></i>
    </div>
  </div>
</a>

<!-- Clickable alert using chi-button -->
<button class="chi-button -flat -fluid -b--0 -p--0 -text--no-transform -no-hover">
  <div class="chi-button__content">
    <div class="chi-alert -info -w--100" role="alert">
      <i class="chi-alert__icon chi-icon icon-settings -icon--info" aria-hidden="true"></i>
      <div class="chi-alert__content">
        <p class="chi-alert__title">Configure your first device</p>
      </div>
      <div class="chi-alert__clickable-icon">
        <i class="chi-icon icon-chevron-right"></i>
      </div>
    </div>
  </div>
</button>
```