### Clone Auro Repository and Install Dependencies

Source: https://auro.alaskaair.com/developer-setup/windows

Clones the 'auro-button' repository into a designated 'git' directory within the user's home folder on WSL, opens it in VS Code, installs project dependencies, and builds the component.

```bash
cd ~
mkdir git
cd git
git clone https://github.com/AlaskaAirlines/auro-button.git
cd auro-button
code .
# In VS Code's integrated terminal:
npm i
```

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

### Start Development Server (npm)

Source: https://auro.alaskaair.com/components/auro/drawer/install

This command starts the development server for the Auro Alaskaair project. Ensure all dependencies are installed before running. It typically runs on localhost:8000.

```bash
npm run dev
```

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

### Start Development Server

Source: https://auro.alaskaair.com/components/auro/accordion/install

Starts the development server for the Auro project. This command is used after cloning the repository and installing dependencies, typically for local development and testing.

```bash
$ npm run dev
```

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

### Clone Auro Button Repo and Install Dependencies

Source: https://auro.alaskaair.com/developer-setup/macos

This command sequence clones the auro-button repository from GitHub, navigates into the directory, installs project dependencies using npm, and opens the project in VS Code. Ensure you have Git, Node.js, and npm installed.

```bash
git clone https://github.com/AlaskaAirlines/auro-button.git
cd auro-button
npm i
code .
```

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

### Install auro-backtotop using npm

Source: https://auro.alaskaair.com/components/auro/backtotop/install

This command installs the auro-backtotop component via npm. Ensure you have Node.js and npm installed on your system.

```bash
$ npm i @aurodesignsystem/auro-backtotop
```

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

### Install Node.js 14.x and npm on WSL

Source: https://auro.alaskaair.com/developer-setup/windows

Installs Node.js version 14.x and npm using a script from nodesource. This is a prerequisite for developing with Auro on WSL.

```bash
curl -fsSL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt-get install -y nodejs
```

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

### GET /websites/auro_alaskaair - Basic Datepicker Example

Source: https://auro.alaskaair.com/components/auro/datepicker/api

Example of a basic Auro Datepicker component with custom slot content.

```APIDOC
## Example: Basic Datepicker

### Description
This example demonstrates a basic Auro Datepicker with custom labels for closing the calendar, a headline, and the input fields.

### HTML
```html
<auro-datepicker required="">
  <span slot="ariaLabel.bib.close">Close Calendar</span>
  <span slot="bib.fullscreen.headline">Datepicker Headline</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
</auro-datepicker>
```
```

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

### Install Chrome on WSL

Source: https://auro.alaskaair.com/developer-setup/windows

Downloads and installs the latest stable version of Google Chrome on WSL. This is necessary for running Auro's automated tests.

```bash
wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
sudo apt install ./google-chrome-stable_current_amd64.deb
```

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

### GET /websites/auro_alaskaair - Range Datepicker Example

Source: https://auro.alaskaair.com/components/auro/datepicker/api

Example of an Auro Datepicker configured for date range selection.

```APIDOC
## Example: Range Datepicker

### Description
This example shows how to configure the Auro Datepicker for range selection, allowing users to pick a departure and return date. It includes custom labels and sets a minimum date.

### HTML
```html
<auro-datepicker range minDate="07/08/2025">
  <span slot="ariaLabel.bib.close">Close Calendar</span>
  <span slot="bib.fullscreen.headline">Datepicker Range Headline</span>
  <span slot="fromLabel">Departure</span>
  <span slot="toLabel">Return</span>
  <span slot="bib.fullscreen.dateLabel">Roundtrip</span>
</auro-datepicker>
```
```

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

### Start development server for auro-avatar

Source: https://auro.alaskaair.com/components/auro/avatar/install

Run the development server to build and test the auro-avatar component locally. This command is used after cloning the repository and installing dependencies.

```bash
$ npm run dev

```

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

### Install auro-background via npm

Source: https://auro.alaskaair.com/components/auro/background/install

Installs the auro-background component using npm. This is the recommended way to add the component to your project for development.

```bash
$ npm i @aurodesignsystem/auro-background

```

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

### Install Chrome on WSL for Testing

Source: https://auro.alaskaair.com/support/tests

This code block provides the shell commands to download and install Google Chrome on Windows Subsystem for Linux (WSL). It uses `wget` to fetch the .deb package and `sudo apt install` to perform the installation.

```bash
$ wget https://dl.google.com/linux/direct/google-chrome-stable_current_amd64.deb
$ sudo apt install ./google-chrome-stable_current_amd64.deb
```

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

### Install Auro Menu Component

Source: https://auro.alaskaair.com/components/auro/menu/install

Installs the Auro Formkit package, which includes the Auro Menu component, using npm.

```bash
$
npm i @aurodesignsystem/auro-formkit

```

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

### Basic Hyperlink Examples

Source: https://auro.alaskaair.com/components/auro/hyperlink/api

Examples demonstrating the basic usage of the auro-hyperlink component with and without the `href` attribute, and with different appearance settings.

```APIDOC
## API Examples

### Basic

**No href supplied**
```html
<auro-hyperlink>No href supplied</auro-hyperlink><br>
Welcome to <auro-hyperlink href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
```

**With inverse appearance**
```html
<auro-hyperlink appearance="inverse">No href supplied</auro-hyperlink><br>
Welcome to <auro-hyperlink appearance="inverse" href="https://www.alaskaair.com">Alaska Airlines</auro-hyperlink>.
```
```

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

### Install Auro Accordion (npm)

Source: https://auro.alaskaair.com/components/auro/accordion/install

Installs the Auro Accordion component using npm. This is the recommended method for new projects.

```bash
$ npm i @aurodesignsystem/auro-accordion
```

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

### Install auro-slideshow using npm

Source: https://auro.alaskaair.com/components/auro/slideshow/install

This command installs the auro-slideshow component via npm. Ensure you have Node.js and npm installed on your system. This is the primary method for integrating the component into your project.

```bash
$ npm i @aurodesignsystem/auro-slideshow

```

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

### Install auro-skeleton via npm

Source: https://auro.alaskaair.com/components/auro/skeleton/install

This command installs the auro-skeleton component using npm. Ensure you have Node.js and npm installed on your system. This is the primary method for adding the component to your project.

```bash
$ npm i @aurodesignsystem/auro-skeleton
```

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

### Install @aurodesignsystem/auro-dialog using npm

Source: https://auro.alaskaair.com/components/auro/dialog/install

Install the auro-dialog component from npm. This is the recommended method for incorporating the component into your project.

```bash
$ npm i @aurodesignsystem/auro-dialog

```

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

### Install auro-pane using npm

Source: https://auro.alaskaair.com/components/auro/pane/install

Installs the auro-pane component and its dependencies using npm. This is the recommended method for projects that use a package manager.

```bash
npm i @aurodesignsystem/auro-pane
```

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

### Install auro-dropdown from CDN

Source: https://auro.alaskaair.com/components/auro/dropdown/install

Provides a script tag for installing the `auro-dropdown` component directly from a CDN. This is useful for projects that cannot process JS assets directly or for quick testing.

```html
<script type="module" src="https://cdn.jsdelivr.net/npm/@aurodesignsystem/auro-formkit@latest/auro-dropdown/+esm"></script>

```

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

### GET /websites/auro_alaskaair - Disabled Datepicker Example

Source: https://auro.alaskaair.com/components/auro/datepicker/api

Example of a disabled Auro Datepicker component.

```APIDOC
## Example: Disabled Datepicker

### Description
This example demonstrates how to disable the Auro Datepicker using the `disabled` attribute. Disabled datepickers are not interactive.

### HTML
```html
<auro-datepicker disabled>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
</auro-datepicker>
```
```

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

### Auro Drawer Fullscreen Breakpoint Example

Source: https://auro.alaskaair.com/components/auro/drawer/api

Demonstrates how to configure the Auro Drawer to switch to fullscreen mode on specific screen breakpoints using the `fullscreenBreakpoint` attribute. The default breakpoint is 'sm', but this example uses 'lg' to trigger fullscreen.

```html
<!DOCTYPE html>
<html>
<head>
  <title>Auro Drawer Example</title>
</head>
<body>

<div>
  <auro-button id="openSmLg">Open drawer</auro-button>
</div>
<auro-drawer id="smLgDrawer" size="sm" fullscreenBreakpoint="lg">
  <span slot="header">Small Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button id="closeSmLg">
      I understand
      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
    </auro-button>
  </div>
</auro-drawer>

<script>
  // Example JavaScript to open the drawer (assuming auro-button is functional)
  document.getElementById('openSmLg').addEventListener('click', () => {
    document.getElementById('smLgDrawer').open = true;
  });
  document.getElementById('closeSmLg').addEventListener('click', () => {
    document.getElementById('smLgDrawer').open = false;
  });
</script>

</body>
</html>
```

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

### Default Auro Card Examples

Source: https://auro.alaskaair.com/components/auro/card

Demonstrates the default usage of the <auro-card> component, showcasing how to include image, header, description, and call-to-action (CTA) elements. The examples illustrate layout flexibility by applying CSS max-width constraints to control text wrapping and overall card width.

```html
<div style="display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 4rem;">
  <auro-card>
    <img
      slot="image"
      src="https://picsum.photos/300/300?random=0"
      alt="Random insert"/>
    <auro-header slot="header" level="2" display="500">Display card title here</auro-header>
    <p slot="description">
      Context goes here.
    </p>
    <div slot="cta">
      <auro-hyperlink href="/" nav target="_blank">
        More info
      </auro-hyperlink>
    </div>
  </auro-card>
  <auro-card style="max-width: 300px">
    <img
      slot="image"
      src="https://picsum.photos/300/200?random=1"
      alt="Random insert"/>
    <auro-header slot="header" level="2" display="500">Display card title here</auro-header>
    <p slot="description">
      Context goes here. Use this area to communicate more information to your users.
    </p>
    <div slot="cta">
      <auro-hyperlink href="/" nav target="_blank" type="cta">
        More info
      </auro-hyperlink>
    </div>
  </auro-card>
  <auro-card style="max-width: 150px">
    <img
      slot="image"
      src="https://picsum.photos/150/250?random=1"
      alt="Random insert"/>
    <auro-header slot="header" level="2" display="500">Display title</auro-header>
    <p slot="description">
      Context goes here.
    </p>
    <div slot="cta">
      <auro-hyperlink href="/" nav target="_blank">
        More info
      </auro-hyperlink>
    </div>
  </auro-card>
</div>
```

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

### Auro Drawer: Default, Medium, and Small Sizes (HTML)

Source: https://auro.alaskaair.com/components/auro/drawer/api

Demonstrates how to implement auro-drawer components with different sizes (default, medium, small) using HTML. Each drawer includes a header, content, and a footer with a close button. The `size` attribute is used to control the drawer's dimensions.

```html
<div>
  <auro-button id="openDefaultSize">Open default drawer</auro-button>
  <auro-button id="openMediumSize">Open medium drawer</auro-button>
  <auro-button id="openSmallSize">Open small drawer</auro-button>
</div>
<auro-drawer id="defaultSizeDrawer">
  <span slot="header">Default Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button secondary id="closeDefaultSize">Close</auro-button>
  </div>
</auro-drawer>
<auro-drawer id="mediumSizeDrawer" size="md">
  <span slot="header">Medium Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button secondary>Close</auro-button>
  </div>
</auro-drawer>
<auro-drawer id="smallSizeDrawer" size="sm">
  <span slot="header">Small Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button secondary>Close</auro-button>
  </div>
</auro-drawer>
```

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

### Render Auro Drawer with Header, Content, and Footer

Source: https://auro.alaskaair.com/components/auro/drawer/api

Demonstrates the structure of an Auro Drawer component, including slots for header, content, and footer. This example shows a medium-sized drawer with illustrative content about baggage fees and a button to close it. Dependencies include Auro UI library components like auro-button and auro-icon.

```html
<auro-drawer id="closeMediumModal" size="md" modal>
  <span slot="header">Medium Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button id="closeMediumModal">I understand
      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
    </auro-button>
  </div>
</auro-drawer>
```

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

### Example Component Dependencies in package.json

Source: https://auro.alaskaair.com/components/auro/formkit

Illustrates a comprehensive package.json structure for a component, detailing dependencies, peerDependencies, and devDependencies, including both internal and external packages.

```json
{
  "name": "@auro-formkit/combobox",
  "dependencies": {
    "@aurodesignsystem/auro-dropdown": "*",     // Required UI component
    "@aurodesignsystem/auro-input": "*",        // Required UI component
    "@alaskaairux/icons": "^5.3.0",  // Required UI component
    "lit": "^3.2.1"                   // Framework
  },
  "peerDependencies": {
    "@aurodesignsystem/design-tokens": "^4.12.1",
    "@aurodesignsystem/webcorestylesheets": "^5.1.2"
  },
  "devDependencies": {
    "rollup": "^4.24.4",
    "@auro-formkit/build-tools": "*"
  }
}
```

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

### Basic auro-popover Usage

Source: https://auro.alaskaair.com/components/auro/popover/api

Demonstrates the basic setup of the auro-popover component, showing how to attach content and a trigger element. It includes examples for default placement (top) and explicitly setting the placement to 'bottom'.

```html
<auro-popover>
  Top popover content!
  <auro-button slot="trigger">Popover Test</auro-button>
</auro-popover>
<!-- Using the placement=bottom attribute -->
<auro-popover placement="bottom">
  Popover content!
  <auro-button secondary slot="trigger">Popover Test</auro-button>
</auro-popover>
```

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

### HTML Popover Examples with Auro Button

Source: https://auro.alaskaair.com/components/auro/popover

Demonstrates how to use the `<auro-popover>` element with `<auro-button>` for trigger elements. Supports 'top' and 'bottom' placements. No external dependencies are required beyond the Auro Design System library.

```html
<auro-popover>
  Top popover content!
  <auro-button slot="trigger">Popover Test</auro-button>
</auro-popover>
<auro-popover placement="bottom">
  Popover content!
  <auro-button secondary slot="trigger">Popover Test</auro-button>
</auro-popover>
```

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

### Control Calendar Month Rendering with calendarStartDate and calendarEndDate

Source: https://auro.alaskaair.com/components/auro/datepicker/api

Demonstrates how to restrict the months that can be rendered in the auro-datepicker's calendar view using the 'calendarStartDate' and 'calendarEndDate' attributes. This example sets a start date of January 1, 2022, and an end date of June 1, 2022.

```html
<auro-datepicker calendarStartDate="01/01/2022" calendarEndDate="06/01/2022">
  <span slot="bib.fullscreen.headline">calendarStartDate & calendarEndDate Example</span>
  <span slot="fromLabel">Choose a date</span>
  <span slot="bib.fullscreen.dateLabel">Choose a date</span>
</auro-datepicker>
```

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

### Apply Focus to Auro Datepicker Input using JavaScript

Source: https://auro.alaskaair.com/components/auro/datepicker/api

The 'focus' method programmatically sets focus to the datepicker's input field. It can focus the primary input or a specific input when the 'range' attribute is used. This example shows applying focus to the start and end dates.

```javascript
export function focusExample() {
  const focusExampleElem = document.querySelector('#focusExampleElem');
  const focusExampleBtn = document.querySelector('#focusExampleBtn');
  const focusExampleBtnTwo = document.querySelector('#focusExampleBtnTwo');

  focusExampleBtn.addEventListener('click', () => {
    focusExampleElem.focus();
  });

  focusExampleBtnTwo.addEventListener('click', () => {
    focusExampleElem.focus('endDate');
  });
}
```

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

### Basic Auro-Pane Usage (HTML)

Source: https://auro.alaskaair.com/components/auro/pane/api

This example demonstrates the basic usage of the auro-pane component by setting a date.

```html
<auro-pane date="2020-09-20"></auro-pane>
```

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

### Open VS Code in WSL and Configure Chrome Path

Source: https://auro.alaskaair.com/developer-setup/windows

Opens Visual Studio Code in the current WSL directory and adds an environment variable to the .bashrc file to specify the Chrome executable path for the test runner.

```bash
cd ~
code .
# Add the following line to the bottom of ~/.bashrc:
export CHROME_PATH=/usr/bin/google-chrome
```

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

### Install auro-formkit via NPM

Source: https://auro.alaskaair.com/components/auro/input/install

This command installs the necessary auro-formkit package from NPM, which includes the auro-input component. This is the standard method for including the component in your project's dependencies.

```bash
npx npm i @aurodesignsystem/auro-formkit
```

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

### API Example: Basic Usage

Source: https://auro.alaskaair.com/components/auro/menu/api

Demonstrates a basic implementation of the auro-menu component with multiple auro-menuoption elements.

```APIDOC
## Basic Usage Example

### Description
This example shows how to use the `<auro-menu>` component with several `<auro-menuoption>` children to create a selectable menu.

### Method
N/A (HTML Structure)

### Endpoint
N/A

### Parameters
None

### Request Example
```html
<auro-menu>
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
</auro-menu>
```

### Response
None
```

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

### Configure Start Delay for Auro Slideshow AutoScroll

Source: https://auro.alaskaair.com/components/auro/slideshow/api

This example illustrates setting a custom delay before the `autoScroll` restarts in an Auro Slideshow using the `startDelay` attribute. The value is in milliseconds, with a default of 1000ms. A shorter delay, like 200ms, means the slideshow will resume autoscrolling after a brief pause.

```html
<auro-slideshow navigation autoScroll startDelay="200" loop>
  <div style="height: 480px; max-width: 400px;">
    <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
  </div>
  <div style="height: 480px; max-width: 400px;">
    <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
  </div>
  <div style="height: 480px; max-width: 400px;">
    <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
  </div>
  <div style="height: 480px; max-width: 400px;">
    <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
  </div>
  <div style="height: 480px; max-width: 400px;">
    <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
  </div> 
</auro-slideshow>
```

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

### Auro-Pane with `price` Property Examples (HTML)

Source: https://auro.alaskaair.com/components/auro/pane/api

Shows how to set the `price` property for display, including with and without a value.

```html
<auro-pane price="$500"></auro-pane>
<auro-pane price=""></auro-pane>
```

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

### Enable Initial Playback for Auro Slideshow AutoScroll

Source: https://auro.alaskaair.com/components/auro/slideshow/api

This example shows how to use the `playOnInit` attribute with `autoScroll`. When set, the slideshow will begin playing automatically as soon as the page loads, provided `autoScroll` is enabled. If `playOnInit` were omitted, the slideshow would require user interaction to start. The `loop` attribute ensures continuous playback.

```html
<auro-slideshow autoScroll playOnInit loop>
    <div style="height: 480px; max-width: 400px;">
      <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=1" alt="Random image 1">
    </div>
    <div style="height: 480px; max-width: 400px;">
      <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=2" alt="Random image 2">
    </div>
    <div style="height: 480px; max-width: 400px;">
      <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=3" alt="Random image 3">
    </div>
    <div style="height: 480px; max-width: 400px;">
      <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=4" alt="Random image 4">
    </div>
    <div style="height: 480px; max-width: 400px;">
      <img style="object-fit: cover;" src="https://picsum.photos/400/480?random=5" alt="Random image 5">
    </div> 
  </auro-slideshow>
```

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

### Responsive Sidenav Setup with Vanilla JavaScript

Source: https://auro.alaskaair.com/components/auro/sidenav

Configures the auro-sidenav component to be static (desktop view) above a specific breakpoint and collapsible (mobile view) below it. This solution uses `window.matchMedia` for detecting screen size changes and dynamically adds/removes the 'static' attribute. It has a dependency on the browser environment and requires the script to be placed after the sidenav element in the HTML.

```javascript
const DESIGN_TOKEN_VARIABLE = '--ds-grid-breakpoint-md';
const breakpointPx = getComputedStyle(document.documentElement).getPropertyValue(DESIGN_TOKEN_VARIABLE)
const mediaQueryString = `(min-width: ${breakpointPx})`;
const windowMediaMatcher = window.matchMedia(mediaQueryString);

const toggleSidenavCollapse = (e) => {
  // ! CHANGE THIS ID TO TARGET YOUR DESIRED ELEMENT!
  const auroSidenavExample = document.getElementById("collapsible-example");

  // onload does not include a match, manually specify it
  if (e.matches === undefined) {
    e.matches = window.innerWidth >= Number(breakpointPx.replace("px", ""));
  }

  if (e.matches) {
    auroSidenavExample?.setAttribute('static', '');
  } else {
    auroSidenavExample?.removeAttribute('static');
  }
};

windowMediaMatcher.onchange = toggleSidenavCollapse;
window.onload = toggleSidenavCollapse;
```

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

### Create a Basic Auro Menu with Options

Source: https://auro.alaskaair.com/components/auro/menu

This example demonstrates the basic structure of an `<auro-menu>` component. It uses nested `<auro-menuoption>` elements to define a list of selectable options. This component is intended for contextual menus, not navigation.

```html
<auro-menu>
  <auro-menuoption value="stops">Stops</auro-menuoption>
  <auro-menuoption value="price">Price</auro-menuoption>
  <auro-menuoption value="duration">Duration</auro-menuoption>
  <auro-menuoption value="departure">Departure</auro-menuoption>
  <auro-menuoption value="arrival">Arrival</auro-menuoption>
</auro-menu>
```

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

### Auro Drawer Modal Example - HTML

Source: https://auro.alaskaair.com/components/auro/drawer/api

This HTML snippet demonstrates how to implement a modal drawer using the auro-drawer component. It includes buttons to open different sized modal drawers and the structure for the modal content with a dismiss button. The 'modal' attribute is crucial for activating the modal behavior.

```html
<div>
  <auro-button id="openDefaultModal">Open default modal</auro-button>
  <auro-button id="openMediumModal">Open medium modal</auro-button>
  <auro-button id="openSmallModal">Open small modal</auro-button>
</div>
<auro-drawer id="defaultModalDrawer" modal>
  <span slot="header">Default Modal Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
      <li>Cheddar cheese and biscuits chalk and cheese</li>
      <li>Camembert de normandie stinking bishop bavarian bergkase</li>
    </ul>
  </div>
  <div slot="footer">
    <auro-button id="closeDefaultModal">I understand
      <auro-icon category="interface" name="chevron-right" emphasis appearance="inverse"></auro-icon>
    </auro-button>
  </div>
</auro-drawer>
<auro-drawer id="mediumModalDrawer" size="md" modal>
  <span slot="header">Medium Drawer</span>
  <div slot="content">
    <p>When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.</p>
    <p>Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.</p>
    <auro-header level="3" display="500">Before checking your bags, remember to:</auro-header>
    <ul>
      <li>Caerphilly croque monsieur fondue</li>
      <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
    </ul>
  </div>
</auro-drawer>
```

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

### Install @aurodesignsystem/auro-lockup via npm

Source: https://auro.alaskaair.com/components/auro/lockup/install

Installs the auro-lockup component using npm. This is the recommended method for projects that can process JS assets. Ensure you have Node.js and npm installed.

```bash
$ npm i @aurodesignsystem/auro-lockup
```

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

### Install auro-datetime using npm

Source: https://auro.alaskaair.com/components/auro/datetime/install

Installs the auro-datetime package using npm. This is the primary method for including the component in a project. Ensure Node.js and npm are installed.

```bash
$ npm i @aurodesignsystem/auro-datetime

```

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

### Default Loader Examples

Source: https://auro.alaskaair.com/components/auro/loader/api

Illustrates the usage of the base auro-loader element with default settings and different animation types.

```APIDOC
## Default Loader Examples

### Description
Examples of the auro-loader component using default settings and various animation types.

### Method
N/A (Web Component)

### Endpoint
N/A (Web Component)

### Parameters
#### Query Parameters
N/A

#### Request Body
N/A

### Request Example
```html
<auro-loader ringworm></auro-loader>
<auro-loader orbit></auro-loader>
<auro-loader pulse></auro-loader>
<auro-loader laser></auro-loader>
```

### Response
#### Success Response (200)
N/A (Web Component Rendering)

#### Response Example
N/A
```

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

### Auro Input Component Example

Source: https://auro.alaskaair.com/components/auro/drawer

Shows how to use the Auro input component for text entry. It supports features like a placeholder, a bordered appearance, a required attribute, and slots for a label and help text, aiding in user data collection.

```html
<auro-input placeholder="John Doe" bordered required>
  <span slot="label">Full name</span>
  <span slot="helptext">Please enter your full name.</span>
</auro-input>
```

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

### Idiomatic CSS Ordering Example (Non-Compliant)

Source: https://auro.alaskaair.com/css/conventions

Shows a non-compliant example of idiomatic CSS ordering. This example mixes declaration types, making the code harder to read and maintain compared to the idiomatic standard.

```css
.selector {
  font-family: sans-serif;
  color: #fff;
  text-align: right;
  padding: 10px;
  overflow: hidden;
  position: absolute;
  z-index: 10;
  height: 100px;
  top: 0;
  padding: 10px;
}

```

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

### WC-Generator: Custom Namespace Example (CLI)

Source: https://auro.alaskaair.com/generator/install

This example demonstrates how to generate a web component with a custom namespace using the WC-Generator. The `--name` flag defines the element name, and the example shows creating '@aurodesignsystem/auro-ticker'.

```bash
npx @aurodesignsystem/wc-generator --name Auro-Ticker
```

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

### Install @aurodesignsystem/auro-table using npm

Source: https://auro.alaskaair.com/components/auro/table/install

Install the auro-table component package from npm. This is the primary method for integrating the component into your project.

```bash
$ npm i @aurodesignsystem/auro-table
```

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

### Auro Menu Loading States Example (HTML)

Source: https://auro.alaskaair.com/components/auro/menu/api

Provides the HTML structure for demonstrating different loading states of the auro-menu component. It includes examples for 'Spinner + Text', 'Text Only', 'Spinner Only', and 'None' loading indicators, along with a button to toggle the loading state.

```html
<script>
</script>
<auro-button common id="loadingExampleToggleButton">Toggle Loading</auro-button>
<table id="loadingExampleTable">
  <thead>
    <tr>
      <td width="25%">Spinner + Text</td>
      <td width="25%">Text Only</td>
      <td width="25%">Spinner Only</td>
      <td width="25%">None</td>
    </tr>
  </thead>
  <tr>
    <td>
      <auro-menu>
        <auro-loader slot="loadingIcon" orbit xs></auro-loader><span slot="loadingText">Loading...</span>
        <auro-menuoption value="stops">Stops</auro-menuoption>
        <auro-menuoption value="price">Price</auro-menuoption>
        <auro-menuoption value="duration">Duration</auro-menuoption>
        <auro-menuoption value="departure">Departure</auro-menuoption>
        <auro-menuoption value="arrival">Arrival</auro-menuoption>
      </auro-menu>
    </td>
    <td>
      <auro-menu>
        <span slot="loadingText">Loading...</span>
        <auro-menuoption value="stops">Stops</auro-menuoption>
        <auro-menuoption value="price">Price</auro-menuoption>
        <auro-menuoption value="duration">Duration</auro-menuoption>
        <auro-menuoption value="departure">Departure</auro-menuoption>
        <auro-menuoption value="arrival">Arrival</auro-menuoption>
      </auro-menu>
    </td>
    <td>
      <auro-menu>
        <auro-loader slot="loadingIcon" orbit xs></auro-loader>
        <auro-menuoption value="stops">Stops</auro-menuoption>
        <auro-menuoption value="price">Price</auro-menuoption>
        <auro-menuoption value="duration">Duration</auro-menuoption>
        <auro-menuoption value="departure">Departure</auro-menuoption>
        <auro-menuoption value="arrival">Arrival</auro-menuoption>
      </auro-menu>
    </td>
    <td>
      <auro-menu>
        <auro-menuoption value="stops">Stops</auro-menuoption>
        <auro-menuoption value="price">Price</auro-menuoption>
        <auro-menuoption value="duration">Duration</auro-menuoption>
        <auro-menuoption value="departure">Departure</auro-menuoption>
        <auro-menuoption value="arrival">Arrival</auro-menuoption>
      </auro-menu>
    </td>
</tr>
</table>
```

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

### Auro Drawer with Popover and Combobox

Source: https://auro.alaskaair.com/components/auro/drawer/api

Illustrates an Auro Drawer containing both an Auro Popover and an Auro Combobox. This example showcases how to stack layered components within a drawer for complex user interactions.

```html
<auro-drawer id="popover-drawer" sm lg>
  <span slot="header">Small Modal Drawer</span>
  <div slot="content">
    <p>
      When traveling on Alaska Airlines flights, Alaska Airlines checked baggage fees may apply. See <auro-hyperlink href="https://www.alaskaair.com/bagrules" target="_blank">alaskaair.com/bagrules</auro-hyperlink> for our rules. For itineraries that include other airlines, their checked baggage fees may apply, as displayed on their websites.
    </p>
    <p>
      Baggage rules and fees will be based on the specific itinerary chosen. The applicable first and second bag fees will be displayed after you have added flights to the cart.
    </p>
    <auro-header level="3" display="500">
      Before checking your bags, remember to:
    </auro-header>
    <auro-popover>
      <div class="content">
        <ul>
          <li>Caerphilly croque monsieur fondue</li>
          <li>Taleggio goat mascarpone cow manchego cheese and wine emmental cheese strings</li>
          <li>Cheddar cheese and biscuits chalk and cheese</li>
          <li>Camembert de normandie stinking bishop bavarian bergkase</li>
        </ul>
      </div>
      <auro-hyperlink slot="trigger" href="#">Hover on me</auro-hyperlink>
    </auro-popover>
    <auro-combobox>
      <span slot="label">Name</span>
      <auro-menu>
        <auro-menuoption value="Apples" id="option-0">Apples</auro-menuoption>
        <auro-menuoption value="Oranges" id="option-1">Oranges</auro-menuoption>
        <auro-menuoption value="Peaches" id="option-2">Peaches</auro-menuoption>
        <auro-menuoption value="Grapes" id="option-3">Grapes</auro-menuoption>
        <auro-menuoption value="Cherries" id="option-4">Cherries</auro-menuoption>
        <auro-menuoption static nomatch>No matching option</auro-menuoption>
      </auro-menu>
    </auro-combobox>
  </div>
  <div slot="footer">
    <auro-button id="closePopAndDrop">
      I understand
      <auro-icon category="interface" name="check-lg" emphasis appearance="inverse"></auro-icon>
    </auro-button>
  </div>
</auro-drawer>
```

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

### Developing Single Component with Turbo Filter

Source: https://auro.alaskaair.com/components/auro/checkbox/install

Demonstrates how to use the `npx turbo dev --filter` command to run a development server for a specific component, such as `@aurodesignsystem/auro-input`. This improves build times and focuses development efforts on a single component.

```bash
npx turbo dev --filter=@aurodesignsystem/auro-input

```