### Start Development Server with Storybook

Source: https://github.com/warp-ds/elements/blob/next/CONTRIBUTING.md

Start a local development server using Storybook to preview components and test changes.

```sh
pnpm run storybook
```

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

### Install Project Dependencies

Source: https://github.com/warp-ds/elements/blob/next/CONTRIBUTING.md

Install all necessary project dependencies using the pnpm package manager.

```sh
pnpm install
```

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

### Install pnpm Package Manager

Source: https://github.com/warp-ds/elements/blob/next/CONTRIBUTING.md

Install the pnpm package manager globally using npm, or prepare it using corepack.

```sh
npm install -g pnpm
```

```sh
corepack prepare --activate
```

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

### Textarea with Help Text Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Demonstrates the use of the 'help-text' property to display descriptive guidance below the Textarea. This enhances usability by providing context or instructions.

```javascript
### Help text

You can use the `help-text` property to show a descriptive message below the textarea.

<Canvas of={TextareaStories.WithHelpText} />
```

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

### Install @warp-ds/elements via pnpm

Source: https://github.com/warp-ds/elements/blob/next/docs/@warp-ds/Elements.mdx

Installs the @warp-ds/elements package using pnpm. Similar to npm installation, this aids in developer experience without bundling components into client-side code.

```sh
pnpm add @warp-ds/elements
```

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

### WarpModal Detailed Example HTML

Source: https://github.com/warp-ds/elements/blob/next/packages/modal/README.md

A comprehensive HTML example of the WarpModal component, showcasing the use of various props like 'show', 'content-id', and 'ignore-backdrop-clicks'. It also demonstrates nesting a 'w-modal-header' with an image in the 'top' slot and a 'w-modal-footer' with a button.

```html
<w-button id="modal-open-button" aria-haspopup="dialog">Open a modal</w-button>

<w-modal id="example-modal" show content-id="main-content" ignore-backdrop-clicks>
  <w-modal-header slot="header" title="Look a doggo!">
    <img slot="top" class="h-[256] w-full object-cover" src="https://source.unsplash.com/random?dog" alt="a picture of a dog">
  </w-modal-header>
  <div slot="content">
    <p>This is the main content of the modal. You can add any HTML content here.</p>
  </div>
  <w-modal-footer slot="footer">
    <w-button variant="primary" id="modal-close-button">OK</w-button>
  </w-modal-footer>
</w-modal>
```

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

### Attention Component Visual Examples

Source: https://github.com/warp-ds/elements/blob/next/pages/components/attention.html

Illustrations of the Attention component in various configurations like Popover, Tooltip, Callout, and Highlight.

```APIDOC
## Attention Component Visual Examples

### Description
Visual demonstrations of the Attention component's different display modes.

### Method
N/A (Visual Examples)

### Endpoint
N/A (Visual Examples)

### Parameters
None

### Visual Options

#### Popover
Click to toggle a popover I'm a popover

Click to toggle a popover I'm a popover

#### Popover with icon as target element
I'm a popover on bottom-end

I'm a popover on bottom-end

#### Tooltip
Hover or focus to show a tooltip I'm a tooltip

Hover or focus to show a tooltip I'm a tooltip

#### Callout
This is a target to callout attention element

Callout on right

This is a target to callout attention element

Callout on right

#### Highlight
Click to toggle a highlight I'm a highlight

Click to toggle a highlight I'm a highlight
```

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

### Select Component Help Text Example

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Shows how to incorporate help text within the Select component to provide additional guidance to the user.

```javascript
### Help text

<Canvas of={SelectStories.HelpText} />
```

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

### Alert Component HTML Example

Source: https://github.com/warp-ds/elements/blob/next/packages/alert/Alert.mdx

An example of the Alert component in HTML, demonstrating its structure, attributes like 'variant', 'show', and 'role', and content including a heading with an ARIA role and a paragraph. It also shows a nested button to control the alert's visibility.

```html
<w-alert id="selfHidingAlertId" variant="info" show role>
  <h3 role="alert" class="t5">This is a "info" variant of the alert element</h3>
  <p>You see this warning because you did something wrong</p>
  <w-button variant="primary" small aria-controls="selfHidingAlertId">Hide and show alert</w-button>
</w-alert>
```

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

### Textarea with Placeholder Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Illustrates how to use placeholder text within a Textarea. Placeholder text offers a hint about expected input but should not replace a visible label.

```javascript
### Placeholder

Placeholder text can be used to describe the expected value or formatting for the w-textarea. Placeholder text will only appear when the w-textarea is empty, and should not be used as a substitute for labeling the element with a visible label.

<Canvas of={TextareaStories.WithPlaceholder} />
```

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

### Install @warp-ds/elements via npm

Source: https://github.com/warp-ds/elements/blob/next/docs/@warp-ds/Elements.mdx

Installs the @warp-ds/elements package using npm. This is useful for improved developer experience like types and intellisense, but the components should not be bundled into client-side application code.

```sh
npm install @warp-ds/elements
```

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

### Install Playwright for Automated Tests

Source: https://github.com/warp-ds/elements/blob/next/CONTRIBUTING.md

Install Playwright, a tool for end-to-end testing, to run automated tests.

```sh
pnpm exec playwright install
```

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

### Textarea Optional Field Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Shows how to mark a Textarea as optional. This indicates to the user that the field does not require input.

```javascript
Textareas can be marked optional.

<Canvas of={TextareaStories.Optional} />
```

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

### W-textfield: Basic and Advanced Text Input Examples

Source: https://context7.com/warp-ds/elements/llms.txt

Demonstrates various configurations of the w-textfield component, including basic input, help text, validation states, read-only/disabled states, numeric input with constraints, prefix/suffix slots, and value formatting (masking).

```html
<w-textfield label="Full Name" placeholder="Enter your name"></w-textfield>

<!-- With help text -->
<w-textfield
  label="Email Address"
  type="email"
  help-text="We'll never share your email"
  required>
</w-textfield>

<!-- Invalid state with error message -->
<w-textfield
  label="Password"
  type="password"
  invalid
  help-text="Password must be at least 8 characters">
</w-textfield>

<!-- Read-only field -->
<w-textfield label="User ID" value="USR-12345" readonly></w-textfield>

<!-- Disabled field -->
<w-textfield label="Locked Field" value="Cannot edit" disabled></w-textfield>

<!-- Numeric input with min/max -->
<w-textfield
  label="Quantity"
  type="number"
  min="1"
  max="100"
  step="1"
  value="1">
</w-textfield>

<!-- With prefix and suffix -->
<w-textfield label="Price" type="number" placeholder="0.00">
  <span slot="prefix">$</span>
  <span slot="suffix">.00</span>
</w-textfield>

<!-- With value formatter (masking) -->
<w-textfield
  label="Phone Number"
  id="phone-input">
</w-textfield>
<script>
  const phoneInput = document.getElementById('phone-input');
  phoneInput.formatter = (value) => {
    // Format: (XXX) XXX-XXXX
    const cleaned = value.replace(/\D/g, '');
    const match = cleaned.match(/^(\d{3})(\d{3})(\d{4})$/);
    if (match) return `(${match[1]}) ${match[2]}-${match[3]}`;
    return value;
  };
</script>
```

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

### Textarea Controlled Size Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Demonstrates how to control the height of the Textarea by setting minimum and maximum rows. Setting a maximum row count disables user resizing.

```javascript
### Control the textarea height

By default the textarea is user-resizable, and adjusts its height to fit the content.

You can control the height of the textarea should you need to by setting both the minimum and maximum number of allowed rows.

Setting a maximum number of rows turns off the ability for the user to resize.

<Canvas of={TextareaStories.ControlledSize} />
```

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

### Storybook Canvas for Tabs - With Icons Example

Source: https://github.com/warp-ds/elements/blob/next/packages/tabs/Tabs.mdx

Displays the Tabs component with icon support in a Storybook canvas. This example demonstrates how icons can be integrated alongside tab labels to enhance usability and visual appeal.

```javascript
import { Canvas } from '@storybook/addon-docs/blocks';
import * as TabsStories from './tabs.stories';

<Canvas of={TabsStories.WithIcons} />
```

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

### W-select: Dropdown Selection Examples

Source: https://context7.com/warp-ds/elements/llms.txt

Illustrates the usage of the w-select component for single value selection from a list. Covers basic dropdowns, pre-selected values, help text, optional indicators, invalid states, disabled options, and handling change events.

```html
<!-- Basic select -->
<w-select label="Country">
  <option value="">Select a country</option>
  <option value="no">Norway</option>
  <option value="se">Sweden</option>
  <option value="dk">Denmark</option>
  <option value="fi">Finland</option>
</w-select>

<!-- With pre-selected value -->
<w-select label="Language">
  <option value="en">English</option>
  <option value="no" selected>Norwegian</option>
  <option value="sv">Swedish</option>
</w-select>

<!-- With help text and optional indicator -->
<w-select label="Shipping Method" help-text="Delivery times vary by location" optional>
  <option value="standard">Standard (5-7 days)</option>
  <option value="express">Express (2-3 days)</option>
  <option value="overnight">Overnight</option>
</w-select>

<!-- Invalid state -->
<w-select label="Category" invalid help-text="Please select a category">
  <option value="">Choose one</option>
  <option value="electronics">Electronics</option>
  <option value="clothing">Clothing</option>
</w-select>

<!-- Disabled select -->
<w-select label="Region" disabled>
  <option value="eu" selected>Europe</option>
</w-select>

<!-- Handling change events -->
<w-select label="Sort By" id="sort-select">
  <option value="newest">Newest First</option>
  <option value="price-low">Price: Low to High</option>
  <option value="price-high">Price: High to Low</option>
</w-select>
<script>
  document.getElementById('sort-select').addEventListener('change', (e) => {
    console.log('Selected:', e.detail); // "newest", "price-low", etc.
  });
</script>
```

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

### Select Component Validation Example

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Demonstrates how to implement input validation for the Select component. It shows how to use the `invalid` prop, often paired with `hint` for user feedback.

```javascript
## Validation

Inputs can communicate to the user whether the current value is invalid. Implement your own validation logic in your app and set the `invalid` prop to display it as invalid. `invalid` is often paired with `hint` to provide feedback to the user about the error.

<Canvas of={SelectStories.Invalid} />
```

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

### Link Component Storybook Setup (TypeScript)

Source: https://github.com/warp-ds/elements/blob/next/packages/link/Link.mdx

Sets up the Storybook metadata for the Link component stories using TypeScript. It imports necessary blocks from '@storybook/addon-docs/blocks' and the specific stories for the Link component.

```typescript
import { Canvas, Meta } from '@storybook/addon-docs/blocks';

import * as LinkStories from './link.stories.ts';

<Meta of={LinkStories} name="Docs" />
```

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

### Select Component Optional State Example

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Demonstrates the 'optional' state for the Select component, indicating that user input is not strictly required.

```javascript
### Optional

<Canvas of={SelectStories.Optional} />
```

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

### Implement collapsible content with w-expandable

Source: https://context7.com/warp-ds/elements/llms.txt

Shows how to use the w-expandable component for creating collapsible content sections with animated transitions. Examples cover basic usage, initially expanded states, animated transitions, box styling, custom title slots, and disabling the chevron indicator. An FAQ accordion pattern is also demonstrated.

```html
<!-- Basic expandable -->
<w-expandable title="Click to expand">
  <p>Hidden content is revealed when the title is clicked.</p>
</w-expandable>

<!-- Initially expanded -->
<w-expandable title="Already Open" expanded>
  <p>This section starts expanded.</p>
</w-expandable>

<!-- With animation -->
<w-expandable title="Smooth Animation" animated>
  <p>Content slides in smoothly when expanded.</p>
</w-expandable>

<!-- Box style (contained) -->
<w-expandable title="Boxed Expandable" box>
  <p>Box style adds a background container around the content.</p>
</w-expandable>

<!-- Custom title slot -->
<w-expandable>
  <div slot="title">
    <strong>Custom Title</strong>
    <w-badge variant="info">New</w-badge>
  </div>
  <p>Content with custom title markup.</p>
</w-expandable>

<!-- Without chevron -->
<w-expandable title="No Chevron" no-chevron>
  <p>The expand indicator is hidden.</p>
</w-expandable>

<!-- FAQ accordion pattern -->
<w-expandable title="How do I reset my password?" box animated>
  <p>Click "Forgot Password" on the login page and follow the instructions.</p>
</w-expandable>
<w-expandable title="What payment methods are accepted?" box animated>
  <p>We accept Visa, Mastercard, and PayPal.</p>
</w-expandable>
<w-expandable title="How can I contact support?" box animated>
  <p>Email us at support@example.com or use the chat widget.</p>
</w-expandable>
```

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

### Textarea Component Default Usage (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Demonstrates the default usage of the Textarea component within a Storybook environment. This serves as a basic example for integrating the component.

```javascript
import { Canvas, Meta } from '@storybook/addon-docs/blocks';

import * as TextareaStories from './textarea.stories';

<Meta of={TextareaStories} name="Docs" />

# Textarea

Used to capture extended user input, such as messages, item descriptions, comments, or reviews. Unlike the Textfield component, Textarea offers a multiline, spacious input experience.

<Canvas of={TextareaStories.Default} />
```

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

### Storybook Canvas for Tabs - Many Tabs Example

Source: https://github.com/warp-ds/elements/blob/next/packages/tabs/Tabs.mdx

Showcases the Tabs component configured to handle a large number of tabs within a Storybook canvas. This example is useful for testing performance and layout when dealing with extensive tab content.

```javascript
import { Canvas } from '@storybook/addon-docs/blocks';
import * as TabsStories from './tabs.stories';

<Canvas of={TabsStories.ManyTabs} />
```

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

### Create and style w-card components

Source: https://context7.com/warp-ds/elements/llms.txt

Illustrates the usage of the w-card component for content separation and navigation. Examples include basic elevated cards, flat cards with borders, and selectable cards. It also shows how to integrate cards into a grid layout.

```html
<!-- Basic elevated card -->
<w-card>
  <img src="product.jpg" alt="Product image" />
  <h3>Product Name</h3>
  <p>Product description goes here.</p>
</w-card>

<!-- Flat card with border -->
<w-card flat>
  <h3>Simple Card</h3>
  <p>Flat cards have a subtle border instead of elevation.</p>
</w-card>

<!-- Selectable card -->
<w-card clickable selected id="option-1">
  <h3>Premium Plan</h3>
  <p>$29/month - All features included</p>
</w-card>
<script>
  document.getElementById('option-1').addEventListener('click', (e) => {
    e.target.selected = !e.target.selected;
  });
</script>

<!-- Card grid example -->
<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px;">
  <w-card clickable>
    <h3>Option A</h3>
    <p>First choice</p>
  </w-card>
  <w-card clickable>
    <h3>Option B</h3>
    <p>Second choice</p>
  </w-card>
  <w-card clickable>
    <h3>Option C</h3>
    <p>Third choice</p>
  </w-card>
</div>
```

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

### Generate Styles with UNO

Source: https://github.com/warp-ds/elements/blob/next/build/README.md

A temporary build script to generate a `styles.ts` file in each component folder based on UNO classes used in the component file. This is part of the ongoing transition to BEM for styling.

```shell
pnpm run build:styles
```

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

### Textarea Disabled State Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Illustrates the disabled state of the Textarea. It advises against using 'disabled' due to potential accessibility issues and suggests alternatives. Disabled textareas cannot be resized.

```javascript
### Disabled

Keep in mind that using disabled in its current form is an anti-pattern. There will ALWAYS be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons. Please consider more informative alternatives before choosing to use disabled on an element.

A disabled textarea can not be resized by the user.

<Canvas of={TextareaStories.Disabled} />
```

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

### Create Production Bundle for Eik CDN

Source: https://github.com/warp-ds/elements/blob/next/build/README.md

Packages all components into a single, optimized file for upload to the Eik CDN. This bundle includes template minification and tersification for efficient delivery and consumption by all applications.

```shell
pnpm run build:bundle
```

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

### Textarea without Visual Label Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Shows how to implement a Textarea without a visible label, relying on 'aria-label' for accessibility. This approach requires careful consideration of the surrounding context for clarity.

```javascript
### Without visual label

Take care to give the textarea an accessible label with `aria-label`. It should be obvious for sighted users what the textarea is for given its context.

<Canvas of={TextareaStories.NoVisualLabel} />
```

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

### Checkbox Component Examples (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/checkbox/Checkbox.mdx

Demonstrates various states and configurations of the Checkbox component using Storybook's Canvas block. This includes default, disabled, invalid, and indeterminate states, as well as checkbox group configurations with labels, help text, and validation.

```jsx
import { Canvas, Meta } from '@storybook/addon-docs/blocks';

import * as CheckboxStories from './checkbox.stories';

<Meta of={CheckboxStories} name="Docs" />

# Checkbox

Use checkboxes when a user can select one or more options from a list. Checkboxes can be used
individually or grouped under a shared label and help text using `w-checkbox-group`.

## Visual options

<Canvas of={CheckboxStories.Default} />

### States

<Canvas of={CheckboxStories.Disabled} />
<Canvas of={CheckboxStories.Invalid} />

### Indeterminate

Use the indeterminate state when a parent option represents a mixed set of child selections.

<Canvas of={CheckboxStories.Indeterminate} />
<Canvas of={CheckboxStories.IndeterminateError} />
<Canvas of={CheckboxStories.IndeterminateDisabled} />

## Checkbox group

Use `w-checkbox-group` to add a shared label, help text, optional indicator, and required validation
that enforces at least one selection.

<Canvas of={CheckboxStories.CheckboxGroup} />
<Canvas of={CheckboxStories.CheckboxGroupWithHelpText} />
<Canvas of={CheckboxStories.CheckboxGroupWithLabel} />
<Canvas of={CheckboxStories.CheckboxGroupWithOptional} />
<Canvas of={CheckboxStories.CheckboxGroupRequired} />

### Form association

Both `w-checkbox` and `w-checkbox-group` are form associated. The group is used for validation only.
Individual checkboxes provide the submitted values.

<Canvas of={CheckboxStories.CheckboxFormAssociated} />
<Canvas of={CheckboxStories.CheckboxGroupFormAssociated} />
```

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

### Select Component Read Only Example

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Illustrates the 'read-only' state for the Select component, making the selection immutable while allowing the field to remain focusable.

```javascript
### Read only

The read-only boolean attribute makes the selection immutable. Unlike disabled the field remains focusable.

<Canvas of={SelectStories.ReadOnly} />
```

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

### Select Component No Label Example

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Shows how to handle the 'no label' scenario for the Select component, recommending the use of `aria-label` or an external `<label>` element for accessibility.

```javascript
### No label

You can use `aria-label` or an external `<label>` element with the `for` attribute should you want to.

<Canvas of={SelectStories.NoLabel} />
```

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

### Select Component Placeholder Example

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Illustrates how to add a placeholder to the Select component. This is achieved by using an `<option value="">` element with the desired placeholder text.

```javascript
### Placeholder

To add a placeholder in selects, use an `<option value="">` element with your placeholder text.

<Canvas of={SelectStories.Placeholder} />
```

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

### Textarea Validation Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Illustrates how to implement validation for the Textarea component. The 'error' prop is used to visually indicate invalid input, often paired with help-text for user feedback.

```javascript
## Validation

Textareas can communicate to the user whether the current value is invalid. Implement your own validation logic in your app and set the error prop to display it as invalid. error is often paired with help-text to provide feedback to the user about the error.

<Canvas of={TextareaStories.Invalid} />
```

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

### Build Polyfill for CSS Anchor Positioning

Source: https://github.com/warp-ds/elements/blob/next/build/README.md

Builds a separate bundle for CSS anchor positioning polyfills, which are lazy-loaded for components requiring this feature. The polyfill is applied only in browsers lacking native support, ensuring broader compatibility.

```shell
pnpm run build:polyfill
```

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

### Textarea Read Only State Example (Storybook)

Source: https://github.com/warp-ds/elements/blob/next/packages/textarea/Textarea.mdx

Shows the read-only state of the Textarea, making its content immutable while remaining focusable and allowing text copying. Read-only textareas also cannot be resized.

```javascript
### Read only

The read-only boolean attribute makes the w-textarea's text content immutable. Unlike disabled the w-textarea remains focusable and the contents can still be copied. See the MDN docs for more information.

A readonly textarea can not be resized by the user.

<Canvas of={TextareaStories.ReadOnly} />
```

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

### Display and control w-modal dialogs

Source: https://context7.com/warp-ds/elements/llms.txt

Demonstrates how to use the w-modal component for displaying important information. It covers basic modal setup, handling user acknowledgment, and managing modal visibility via JavaScript. Event listeners for 'hidden' and 'shown' states are also shown.

```html
<w-button id="open-modal">Open Modal</w-button>
<w-modal id="demo-modal">
  <w-modal-header slot="header" title="Confirm Action"></w-modal-header>
  <div slot="content">
    <p>Are you sure you want to proceed with this action?</p>
  </div>
  <w-modal-footer slot="footer">
    <w-button variant="secondary" onclick="document.getElementById('demo-modal').show=false">
      Cancel
    </w-button>
    <w-button variant="primary" onclick="handleConfirm()">
      Confirm
    </w-button>
  </w-modal-footer>
</w-modal>
<script>
  const modal = document.getElementById('demo-modal');
  document.getElementById('open-modal').onclick = () => modal.show = true;

  modal.addEventListener('hidden', () => console.log('Modal closed'));
  modal.addEventListener('shown', () => console.log('Modal opened'));

  function handleConfirm() {
    console.log('Confirmed!');
    modal.show = false;
  }
</script>
```

```html
<!-- Modal with back button (multi-step flows) -->
<w-modal id="wizard-modal">
  <w-modal-header slot="header" title="Step 2 of 3" back></w-modal-header>
  <div slot="content">
    <p>Complete this step before continuing.</p>
  </div>
  <w-modal-footer slot="footer">
    <w-button variant="primary">Continue</w-button>
  </w-modal-footer>
</w-modal>
```

```html
<!-- Prevent backdrop clicks from closing -->
<w-modal id="important-modal" ignore-backdrop-clicks>
  <w-modal-header slot="header" title="Important Notice"></w-modal-header>
  <div slot="content">
    <p>You must click a button to close this modal.</p>
  </div>
  <w-modal-footer slot="footer">
    <w-button variant="primary" onclick="document.getElementById('important-modal').show=false">
      I Understand
    </w-button>
  </w-modal-footer>
</w-modal>
```

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

### w-box: Layout Container Examples

Source: https://context7.com/warp-ds/elements/llms.txt

The w-box component serves as a layout container for grouping and styling content sections. It supports various attributes for background colors (neutral, info), borders, full-width behavior on mobile (bleed), and custom ARIA roles for accessibility.

```html
<!-- Neutral background -->
<w-box neutral>
  <h3>Section Title</h3>
  <p>Content in a subtle container.</p>
</w-box>

<!-- Info background -->
<w-box info>
  <p><strong>Did you know?</strong> Interesting fact here.</p>
</w-box>

<!-- Bordered box -->
<w-box bordered>
  <h3>Outlined Section</h3>
  <p>Content with a visible border.</p>
</w-box>

<!-- Full-width on mobile (bleed) -->
<w-box neutral bleed>
  <p>This box extends to screen edges on mobile devices.</p>
</w-box>

<!-- Custom role for accessibility -->
<w-box neutral role="complementary">
  <h3>Related Content</h3>
  <p>Sidebar or supplementary information.</p>
</w-box>

<!-- Opt out of default region role -->
<w-box bordered role="">
  <p>No ARIA role applied.</p>
</w-box>
```

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

### W-alert: Displaying Informational Messages

Source: https://context7.com/warp-ds/elements/llms.txt

Shows how to use the w-alert component for various message types (info, success, warning, error) with appropriate icons and transitions. Includes an example of dynamically toggling alert visibility.

```html
<!-- Info alert (default) -->
<w-alert variant="info" show>
  <p>Your session will expire in 5 minutes.</p>
</w-alert>

<!-- Success alert -->
<w-alert variant="positive" show>
  <p><strong>Success!</strong> Your changes have been saved.</p>
</w-alert>

<!-- Warning alert -->
<w-alert variant="warning" show>
  <p>This action cannot be undone. Please review before continuing.</p>
</w-alert>

<!-- Error alert -->
<w-alert variant="negative" show>
  <p><strong>Error:</strong> Unable to process your request. Please try again.</p>
</w-alert>

<!-- Toggle alert visibility -->
<w-button id="toggle-btn">Show Alert</w-button>
<w-alert variant="info" id="dynamic-alert">
  <p>This alert can be toggled on and off.</p>
</w-alert>
<script>
  const alert = document.getElementById('dynamic-alert');
  const btn = document.getElementById('toggle-btn');
  btn.addEventListener('click', () => {
    alert.show = !alert.show;
    btn.textContent = alert.show ? 'Hide Alert' : 'Show Alert';
  });
</script>
```

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

### Select Component Disabled State Example

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Explains the 'disabled' state for the Select component and advises against its use as an anti-pattern, suggesting alternatives for better accessibility and user experience.

```javascript
### Disabled

Keep in mind that using disabled in its current form is an anti-pattern. There will ALWAYS be users who don't understand why an element is disabled, or users who can't even see that it is disabled because of poor lighting conditions or other reasons. Please consider more informative alternatives before choosing to use disabled on an element.

<Canvas of={SelectStories.Disabled} />
```

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

### Storybook Canvas for Tabs - Default Example

Source: https://github.com/warp-ds/elements/blob/next/packages/tabs/Tabs.mdx

Renders the default Tabs component within a Storybook canvas. This allows for interactive viewing and testing of the basic Tabs functionality without any custom configurations.

```javascript
import { Canvas } from '@storybook/addon-docs/blocks';
import * as TabsStories from './tabs.stories';

<Canvas of={TabsStories.Default} />
```

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

### Generate Cloaking CSS for Early Component Loading

Source: https://github.com/warp-ds/elements/blob/next/build/README.md

Supplies cloaking CSS rules alongside the production bundle to hide the initial page render until components are loaded. This improves perceived performance by ensuring a smooth transition from loading to interactive state.

```shell
pnpm run build:cloak
```

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

### Import Warp Elements from NPM Package

Source: https://github.com/warp-ds/elements/blob/next/index.html

Imports all Warp Elements components from the installed NPM package. This method is recommended for most use cases and assumes build tooling like Rollup or Esbuild is configured.

```javascript
import '@warp-ds/elements';
```

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

### Import Warp Elements Directly from Eik CDN

Source: https://github.com/warp-ds/elements/blob/next/index.html

Imports Warp Elements components directly from the Eik CDN URL. This method is useful for prototyping and does not require a build setup.

```javascript
import 'https://assets.finn.no/pkg/@warp-ds/elements/v1/index.js';
```

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

### Export Components for Compatibility and React Wrappers

Source: https://github.com/warp-ds/elements/blob/next/build/README.md

Creates component exports for backward compatibility and for use with React wrapper libraries. This ensures that existing applications and React-based projects can seamlessly integrate Warp elements.

```shell
pnpm run build:components
```

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

### w-tabs with Change Event Listener

Source: https://context7.com/warp-ds/elements/llms.txt

Shows how to attach an event listener to the w-tabs component to detect when the active tab changes. This example logs the active panel ID and optionally updates the URL hash.

```html
<w-tabs id="settings-tabs" active="general">
  <w-tab for="general">General</w-tab>
  <w-tab for="security">Security</w-tab>
  <w-tab for="notifications">Notifications</w-tab>

  <w-tab-panel id="general">General settings content</w-tab-panel>
  <w-tab-panel id="security">Security settings content</w-tab-panel>
  <w-tab-panel id="notifications">Notification preferences</w-tab-panel>
</w-tabs>
<script>
  document.getElementById('settings-tabs').addEventListener('change', (e) => {
    console.log('Active tab:', e.detail.panelId);
    // Optionally update URL hash
    history.replaceState(null, '', `#${e.detail.panelId}`);
  });
</script>
```

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

### Import and Use Warp Element Wrappers in React (v18 or earlier)

Source: https://github.com/warp-ds/elements/blob/next/README.md

Provides an example of importing and using custom element wrappers for Warp Elements in React applications version 18 or earlier. This is a workaround for React's lack of native custom element support in older versions.

```javascript
import { Button } from "@warp-ds/elements/react/button";

<Button variant="primary"></Button>
```

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

### Generate Custom Element Manifest

Source: https://github.com/warp-ds/elements/blob/next/build/README.md

Scans components to produce a JSON manifest file in the dist folder. This manifest is crucial for other build commands and provides information about custom elements. It relies on the webcomponents/custom-elements-manifest library.

```shell
pnpm run build:manifest
```

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

### Enable Editor Support for Custom Elements

Source: https://github.com/warp-ds/elements/blob/next/build/README.md

Generates meta files using the custom elements manifest to provide code completion support in IDEs like JetBrains and VS Code. This enhances developer experience by offering autocompletion for custom elements.

```shell
pnpm run build:editor
```

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

### Select Component Default Story

Source: https://github.com/warp-ds/elements/blob/next/packages/select/Select.mdx

Renders the default state of the Select component. This serves as a basic example of its usage and appearance.

```javascript
import { Canvas, Meta } from '@storybook/addon-docs/blocks';

import * as SelectStories from './select.stories';

<Meta of={SelectStories} name="Docs" />

# Select

A dropdown component for selecting a single value.

<Canvas of={SelectStories.Default} />
```

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

### Basic w-combobox with Static Options

Source: https://context7.com/warp-ds/elements/llms.txt

Illustrates the fundamental usage of the w-combobox component, providing a label, placeholder, and a static list of options for country selection.

```html
<w-combobox
  label="Select Country"
  placeholder="Type to search..."
  id="country-select">
</w-combobox>
<script>
  document.getElementById('country-select').options = [
    { value: 'no', label: 'Norway' },
    { value: 'se', label: 'Sweden' },
    { value: 'dk', label: 'Denmark' },
    { value: 'fi', label: 'Finland' },
    { value: 'is', label: 'Iceland' },
  ];
</script>
```

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

### Style a Rounded Checkbox

Source: https://github.com/warp-ds/elements/blob/next/packages/checkbox/styling-api.md

This example demonstrates how to achieve a fully rounded checkbox by setting the `--w-c-checkbox-radius` token to a very large value.

```css
w-checkbox {
  --w-c-checkbox-radius: 9999px;
}
```

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

### w-badge All Position Options

Source: https://context7.com/warp-ds/elements/llms.txt

Illustrates all available positioning options for the w-badge component: 'top-left', 'top-right', 'bottom-left', and 'bottom-right'. Each badge is placed within a relative container to demonstrate positioning.

```html
<div style="position: relative; width: 300px; height: 200px; background: #f5f5f5;">
  <w-badge variant="info" position="top-left">TL</w-badge>
  <w-badge variant="positive" position="top-right">TR</w-badge>
  <w-badge variant="warning" position="bottom-left">BL</w-badge>
  <w-badge variant="negative" position="bottom-right">BR</w-badge>
</div>
```

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

### w-combobox with Dynamic API Options

Source: https://context7.com/warp-ds/elements/llms.txt

Shows how to populate w-combobox options dynamically from an API based on user input. It includes event listeners for input changes and option selection, with basic error handling for API requests.

```html
<w-combobox
  label="Search Users"
  disable-static-filtering
  id="user-search">
</w-combobox>
<script>
  const userSearch = document.getElementById('user-search');

  userSearch.addEventListener('change', async (e) => {
    const query = e.detail.value;
    if (query.length < 2) return;

    const response = await fetch(`/api/users?q=${query}`);
    const users = await response.json();

    userSearch.options = users.map(u => ({
      value: u.id,
      label: u.name,
    }));
  });

  userSearch.addEventListener('select', (e) => {
    console.log('Selected user ID:', e.detail.value);
  });
</script>
```

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

### Load Toast API from Eik CDN

Source: https://github.com/warp-ds/elements/blob/next/docs/@warp-ds/Elements.mdx

Loads toast-related functions directly from the Eik CDN. This provides an alternative to bundling the toast APIs, allowing them to be used without local installation.

```typescript
import { toast, removeToast, updateToast } from "https://assets.finn.no/pkg/@warp-ds/elements/~2/packages/toast/index.js";
```

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

### Attention Component Properties

Source: https://github.com/warp-ds/elements/blob/next/pages/components/attention.html

This section details the properties available for configuring the Attention component.

```APIDOC
## Attention Component Properties

### Description
Configuration options for the Attention component.

### Method
N/A (Component Properties)

### Endpoint
N/A (Component Properties)

### Parameters
#### Path Parameters
None

#### Query Parameters
None

#### Request Body
None

### Parameters
- **target-selector** (string) - Required - Selector of element that the Attention component is rendered relatively to.
- **show** (boolean) - Optional - Whether Attention element should be visible. Defaults to `false`.
- **placement** (string) - Optional - Placement according to the target element. Arrow would be on the opposite side of this position. Defaults to `"bottom"`.
- **tooltip** (boolean) - Optional - Whether Attention element is rendered as a tooltip. Defaults to `false`.
- **callout** (boolean) - Optional - Whether Attention element is rendered as an inline callout. Defaults to `false`.
- **popover** (boolean) - Optional - Whether Attention element is rendered as a popover. Defaults to `false`.
- **no-arrow** (boolean) - Optional - Render Attention element without an arrow. Defaults to `false`.
- **can-close** (boolean) - Optional - Render Attention element with a close button. Defaults to `false`.
- **distance** (number) - Optional - The distance from which to offset the attention element from the target element vertically. Defaults to `8`.
- **skidding** (number) - Optional - The distance from which to offset the attention element along its target element horizontally. Defaults to `0`.
- **flip** (boolean) - Optional - Whether Attention element should flip its placement in order to keep it in view. Defaults to `false`.
- **fallback-placements** (array) - Optional - Choose which preferred placements the Attention element should flip to. Example: `placement: "bottom", fallbackPlacements: ["top"]`.

### Request Example
```json
{
  "target-selector": ".my-element",
  "show": true,
  "placement": "top",
  "tooltip": true,
  "distance": 10,
  "skidding": 5
}
```

### Response
#### Success Response (200)
N/A (Component Properties)

#### Response Example
N/A (Component Properties)
```

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

### Build CSS Resources

Source: https://github.com/warp-ds/elements/blob/next/CONTRIBUTING.md

Build the required CSS resources before running the development server.

```sh
pnpm build
```

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

### Basic w-tabs Component Usage

Source: https://context7.com/warp-ds/elements/llms.txt

Demonstrates the basic structure of the w-tabs component for organizing content into switchable panels. It includes defining tabs and their corresponding content panels.

```html
<w-tabs active="panel1">
  <w-tab for="panel1">Overview</w-tab>
  <w-tab for="panel2">Details</w-tab>
  <w-tab for="panel3">Reviews</w-tab>

  <w-tab-panel id="panel1">
    <h2>Overview</h2>
    <p>General product information.</p>
  </w-tab-panel>
  <w-tab-panel id="panel2">
    <h2>Details</h2>
    <p>Technical specifications and features.</p>
  </w-tab-panel>
  <w-tab-panel id="panel3">
    <h2>Reviews</h2>
    <p>Customer reviews and ratings.</p>
  </w-tab-panel>
</w-tabs>
```

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

### Run Automated Tests

Source: https://github.com/warp-ds/elements/blob/next/CONTRIBUTING.md

Execute the automated tests for the project using the 'test' command.

```sh
pnpm test
```

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

### HTML Slider Accessibility Example

Source: https://github.com/warp-ds/elements/blob/next/packages/slider/Slider.mdx

Demonstrates how to implement accessibility for range sliders by providing `aria-label` attributes to `<w-slider-thumb>` components. This ensures screen readers announce the correct labels for input values.

```html
<w-slider label="Apartment size" min="0" max="250" suffix="m²">
  <w-slider-thumb slot="from" aria-label="From square meters" name="from"></w-slider-thumb>
  <w-slider-thumb slot="to" aria-label="To square meters" name="to"></w-slider-thumb>
</w-slider>
```

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

### Storybook Meta Configuration for Tabs

Source: https://github.com/warp-ds/elements/blob/next/packages/tabs/Tabs.mdx

Configures Storybook's meta information for the Tabs component, linking it to its stories. This setup is crucial for Storybook's documentation generation and component discovery.

```javascript
import { Meta } from '@storybook/addon-docs/blocks';

import * as TabsStories from './tabs.stories';

<Meta of={TabsStories} name="Docs" />
```

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

### TextField with Affix (HTML)

Source: https://github.com/warp-ds/elements/blob/next/packages/textfield/Textfield.mdx

Demonstrates how to use the w-affix element in conjunction with w-textfield to add prefix and suffix elements. The 'slot' attribute on w-affix controls its position, allowing for both prefix and suffix.

```html
<w-textfield label="Price" placeholder="1 000 000">
  <w-affix slot="prefix" label="kr"></w-affix>
  <w-affix slot="suffix" search aria-label="Search"></w-affix>
</w-textfield>
```

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

### Load Warp Elements from Eik CDN

Source: https://github.com/warp-ds/elements/blob/next/docs/@warp-ds/Elements.mdx

Loads Warp Elements' stylesheet and JavaScript module directly from the Eik CDN. This method ensures the components are available on the page without local installation or bundling.

```html
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/elements/~2/styles.css" crossorigin />
<script type="module" src="https://assets.finn.no/pkg/@warp-ds/elements/~2/index.js" crossorigin></script>
```

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

### Use Warp Elements in Plain HTML

Source: https://github.com/warp-ds/elements/blob/next/README.md

Demonstrates the basic usage of a Warp Element, specifically a button, within a plain HTML file. This requires the Web Components Language Server extension for IntelliSense.

```html
<w-button variant=""><w-button>
```

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

### w-combobox with Text Highlighting

Source: https://context7.com/warp-ds/elements/llms.txt

Demonstrates the w-combobox with the `match-text-segments` attribute enabled, which highlights matching text within the dropdown options. It also includes `open-on-focus` for immediate interaction.

```html
<w-combobox
  label="Search Products"
  match-text-segments
  open-on-focus
  id="product-search">
</w-combobox>
<script>
  document.getElementById('product-search').options = [
    { value: 'laptop', label: 'Laptop Computer' },
    { value: 'desktop', label: 'Desktop Computer' },
    { value: 'tablet', label: 'Tablet Device' },
    { value: 'phone', label: 'Mobile Phone' },
  ];
</script>
```

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

### Set Checkbox Component Tokens for Theming

Source: https://github.com/warp-ds/elements/blob/next/packages/checkbox/styling-api.md

This example shows how to override default component tokens for w-checkbox to customize its appearance. Tokens like `--w-c-checkbox-gap` can be set directly on the component or inherited from a parent container.

```css
.settings-panel {
  --w-c-checkbox-gap: 12px;
}
```

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

### React 19+ Integration with Warp Elements

Source: https://github.com/warp-ds/elements/blob/next/docs/@warp-ds/Elements.mdx

Example of using Warp custom elements within a React 19+ application. Assumes Warp assets are loaded in the document head. Event handling is demonstrated by prefixing events with 'on'.

```tsx
import React from 'react';
import { toast } from '@warp-ds/elements/packages/toast'; // Assuming toast is imported for the example

export function Example() {
  const handleClick = () => {
    toast({ title: 'Saved', description: 'Your changes are live.' });
  };

  return (
    <section>
      <w-badge variant="neutral">New</w-badge>
      <w-button variant="primary" onClick={handleClick}>
        Continue
      </w-button>
    </section>
  );
}
```

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

### w-combobox with Validation Attributes

Source: https://context7.com/warp-ds/elements/llms.txt

Demonstrates a w-combobox configured with validation attributes such as `required`, `invalid`, and `help-text` to provide user feedback on input requirements.

```html
<w-combobox
  label="Required Field"
  required
  invalid
  help-text="Please select an option"
  id="required-combo">
</w-combobox>
```

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

### Override Checked Border Color for Invalid State

Source: https://github.com/warp-ds/elements/blob/next/packages/checkbox/styling-api.md

This advanced example shows how to override a specific component token, `--w-c-checkbox-border-color-checked`, within a contextual class like `.danger-zone` to change the border color when the checkbox is checked.

```css
.danger-zone w-checkbox {
  --w-c-checkbox-border-color-checked: red;
}
```

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

### Load Finn Brand Fonts and Styles

Source: https://github.com/warp-ds/elements/blob/next/README.md

This HTML snippet preloads and applies the necessary brand fonts and stylesheet for the Finn brand. It ensures that the correct typography is loaded for Finn interfaces using Warp-ds Elements.

```html
<!-- Finn example -->
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/FINNTypeAlleTegn-Light.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/FINNTypeAlleTegn-Medium.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/finn-no.css" crossorigin>
```

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

### Load DBA Brand Fonts and Styles

Source: https://github.com/warp-ds/elements/blob/next/README.md

This HTML snippet preloads and applies the necessary brand fonts and stylesheet for the DBA brand. It ensures that the correct typography is loaded for DBA interfaces using Warp-ds Elements.

```html
<!-- DBA example -->
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/ProximaNova-Regular.woff2" as="font" type="font/woff2" crossorigin>
<link rel="preload" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/ProximaNova-Bold.woff2" as="font" type="font/woff2" crossorigin>
<link rel="stylesheet" href="https://assets.finn.no/pkg/@warp-ds/fonts/v1/dba-dk.css" crossorigin>
```