open-index/open-npm huggingface dataset:
npm package: @phase2/outline-accordion
Description: The Outline Components for the web accordion component
Author: Phase2 Technology
Latest version: 0.1.7

# outline-accordion

Accordion Component

## Properties

| Property      | Attribute      | Type                      | Default                                          | Description                                      |
|---------------|----------------|---------------------------|--------------------------------------------------|--------------------------------------------------|
| `allOpen`     | `allOpen`      | `boolean`                 | false                                            | Set to 'true' to open all panels at once. Specifically for enhanced editor experience. |
| `clean`       | `clean`        | `boolean`                 | false                                            | Sets to 'clean' variant                          |
| `hasLabel`    |                | `boolean`                 |                                                  |                                                  |
| `isMobile`    |                | `() => "mobile" \| null`  | "() => (this.mobileController.isMobile ? 'mobile' : null)" |                                                  |
| `panels`      |                | `OutlineAccordionPanel[]` |                                                  | Reference to <outline-accordion-panels> in panels slot. |
| `singlePanel` | `single-panel` | `boolean`                 | false                                            | Set to 'true' to create an accordion that can only have one panel open at a time. |
| `slots`       |                | `SlotController`          | "new SlotController(this, false)"                |                                                  |

## Methods

| Method              | Type                           |
|---------------------|--------------------------------|
| `handleKeyboardNav` | `(event: KeyboardEvent): void` |

## Slots

| Name | Description                                      |
|------|--------------------------------------------------|
|      | label: The title text for the accordion component. |
npm package: @phase2/outline-admin-links
Description: The Outline Components for the outline-admin-links component
Author: Phase2 Technology
Latest version: 0.1.8

# outline-admin-links

The Outline Admin Links component

## Properties

| Property | Type             | Default                                          |
|----------|------------------|--------------------------------------------------|
| `slots`  | `SlotController` | "new SlotController(\n    this, // This, the host element.\n    true // To shift or not to shift LightDom nodes to ShadowDOM.\n  )" |

## Slots

| Name | Description                        |
|------|------------------------------------|
|      | The default slot for this element. |

## CSS Custom Properties

| Property                                | Description                                      |
|-----------------------------------------|--------------------------------------------------|
| `--outline-admin-links--bg`             | default: The default background color for the admin links. |
| `--outline-admin-links--color`          | default: The default text color for the admin links. |
| `--outline-admin-links--link-spacing-x` | spacing: The horizontal padding for the individual admin links. |
| `--outline-admin-links--link-spacing-y` | spacing: The vertical padding for the individual admin links. |
| `--outline-admin-links--spacing-y`      | spacing: The vertical spacing for the admin links group. |
npm package: @phase2/outline-alert
Description: The Outline Components for the web alert component
Author: Phase2 Technology
Latest version: 0.1.10

# outline-alert

The Outline Alert component

## Properties

| Property         | Attribute        | Type                                          | Default | Description                                     |
|------------------|------------------|-------------------------------------------------|---------|-----------------------------------------------|
| `isInteractive`  | `is-interactive`   | `boolean`                                     | false   | This is important context for screen readers. |
| `shouldShowIcon` | `should-show-icon` | `boolean`                                     | false   |                                               |
| `size`           | `size`             | `"small" \| "large"`                          | "large" |                                               |
| `status`     | `status`           | `"info" \| "warning" \| "error" \| "success"` | "info"  |                                               |

## Slots

| Name      | Description              |
|-----------|--------------------------|
| `default` | The alert contents.      |
| `header`  | The header in the alert. |

## CSS Custom Properties

| Property                   | Description                                               |
|----------------------------|-----------------------------------------------------------|
| `--outline-alert--error`   | background: The background color for the error alert.     |
| `--outline-alert--info`    | background: The background color for the info alert.      |
| `--outline-alert--success` | background: The background color for the success alert.   |
| `--outline-alert--warning` | background: The background color for the warning alert.   |
npm package: @phase2/outline-breadcrumbs
Description: The Outline Components for the web breadcrumb component
Author: Phase2 Technology
Latest version: 0.1.7

# outline-breadcrumbs

The Outline  Breadcrumbs component

## Properties

| Property          | Attribute          | Type             | Default                                          | Description                                    |
|-------------------|--------------------|------------------|--------------------------------------------------|------------------------------------------------|
| `slots`           |                    | `SlotController` | "new SlotController(\n    this, // This, the host element.\n    true // To shift or not to shift LightDom nodes to ShadowDOM.\n  )" |                                                |
| `stringSeparator` | `string-separator` | `string`         | "/"                                              | Property to define the value of the separator. |

## Slots

| Name | Description                        |
|------|------------------------------------|
|      | The default slot for this element. |

## CSS Custom Properties

| Property                                | Description                                      |
|-----------------------------------------|--------------------------------------------------|
| `--outline-breadcrumb--bg`              | color: The background color for the breadcrumbs. |
| `--outline-breadcrumb--link-color`      | default: The default link color for the breadcrumbs. |
| `--outline-breadcrumb--link-decoration` | default: The default text decoration for the breadcrumb links. |
| `--outline-breadcrumb--separator`       | spacing: The spacing between the breadcrumbs.    |
| `--outline-breadcrumb--text-color`      | default: The default text color for the breadcrumbs. |
npm package: @phase2/outline-button-group
Description: The Outline Components for the web button group component
Author: Phase2 Technology
Latest version: 0.1.6

# outline-button-group

The OutlineButtonGroup component

## Properties

| Property      | Attribute     | Type                                | Default                           | Description                                      |
|---------------|---------------|-------------------------------------|-----------------------------------|--------------------------------------------------|
| `navLabel`    | `nav-label`   | `string \| undefined`               |                                   | If set will wrap list in a nav tag<br />with the passed string set as the aria-label. |
| `orientation` | `orientation` | `"column" \| "row" \| "col-center"` | "row"                             | Sets orientation of list.<br />column \| row     |
| `slots`       |               | `SlotController`                    | "new SlotController(this, false)" |                                                  |

## Slots

| Name | Description   |
|------|---------------|
|      | default slot. |
npm package: @phase2/outline-card
Description: The Outline Components for the web card component
Author: Phase2 Technology
Latest version: 0.0.9

# outline-card

The Card component.

## Properties

| Property         | Attribute        | Type            | Default | Description                                      |
|------------------|------------------|-----------------|---------|--------------------------------------------------|
| `bgColorContent` | `bgColorContent` | `AllowedColors` |         | The color class to apply to the content slot.    |
| `bgColorFooter`  | `bgColorFooter`  | `AllowedColors` |         | The color class to apply to the footer slot.     |
| `bgColorHeader`  | `bgColorHeader`  | `AllowedColors` |         | The color class to apply to the header slot.     |
| `hasContentSlot` |                  | `boolean`       |         |                                                  |
| `hasFooterSlot`  |                  | `boolean`       |         |                                                  |
| `hasHeaderSlot`  |                  | `boolean`       |         |                                                  |
| `hasShadow`      | `has-shadow`     | `boolean`       | false   | Whether or not this card has a shadow.           |
| `isRounded`      | `is-rounded`     | `boolean`       | false   | Whether or not this is a nested container. If it's nested, remove padding. |

## Methods

| Method            | Type                                             |
|-------------------|--------------------------------------------------|
| `contentTemplate` | `(contentBackgroundClasses: ClassInfo): TemplateResult<ResultType> \| null` |
| `footerTemplate`  | `(footerBackgroundClasses: ClassInfo): TemplateResult<ResultType> \| null` |
| `headerTemplate`  | `(headerBackgroundClasses: ClassInfo): TemplateResult<ResultType> \| null` |

## Slots

| Name      | Description                                  |
|-----------|----------------------------------------------|
| `content` | The primary slot to render the card content. |
| `footer`  | The footer slot.                             |
| `header`  | The header slot.                             |
npm package: @phase2/outline-container
Description: The Outline Components for the container web component
Author: Phase2 Technology
Latest version: 0.1.8

# outline-container

The `outline-container` Web Component.

## Properties

| Property           | Attribute           | Type      | Default | Description                                      |
|--------------------|---------------------|-----------|---------|--------------------------------------------------|
| `bottomMargin`     | `bottom-margin`     | `string`  |         | Sets the bottom margin of the container. Options are none, small, medium, and large. |
| `componentSpacing` | `component-spacing` | `string`  |         |                                                  |
| `containerWidth`   | `container-width`   | `string`  | "wide"  | Sets the width of the container. Options are wide, medium, narrow, and full. |
| `justifyEnd`       | `justify-end`       | `boolean` | false   | Sets the container to justify content to the end. |
| `topMargin`        | `top-margin`        | `string`  |         | The vertical space from the component above it (using Utopia fluid space variables defined in outline.theme.css, ie. space-3xl) |

## Slots

| Name | Description   |
|------|---------------|
|      | Default Slot. |
npm package: @phase2/outline-controller-light-dom-styles-controller
Description: Deprecated controller to manage styles via Light DOM.
Author: Phase2 Technology
Latest version: 0.0.4

[![Latest version for outline-controller-light-dom-styles-controller](https://img.shields.io/npm/v/@phase2/outline-controller-light-dom-styles-controller)](https://www.npmjs.com/package/@phase2/outline-controller-light-dom-styles-controller)

# `LightDomStyles` Controller

> This controller is deprecated, and the `StyleController` from `@phase2/outline-controller-style-controller` should be utilized in its place when possible.

## Using the `LightDomStyles` Controller

If you are using the `LightDomStyles` Controller, it is assumed you were likely using the original version supplied via the `@phase2/outline-core` package. In that case, the following should help you upgrade any components from the version of `light-dom-style.ts` from `outline-core`, to the newly packaged version.

This version will remain an active, but deprecated package to support legacy applications utilizing this method and controller.

## Installing the `LightDomStyles` Controller

Install the new package:

```bash
yarn add @phase2/outline-controller-light-dom-styles-controller --dev
```

Upgrade `outline-core` to `@phase2/outline-core@^2.0.0` to remove the original controller. `@phase2/outline-form` should also be updated.

```bash
yarn upgrade @phase2/outline-core @phase2/outline-form
```

## Upgrading existing components

In current components that are using the `LightDomStyles` controller, you may see a line such as this:

```typescript
import { OutlineElement, LightDomStyles } from '@phase2/outline-core';
```

This would be replaced with the following:

```typescript
import { OutlineElement } from '@phase2/outline-core';
import { LightDomStyles } from '@phase2/outline-controller-light-dom-styles-controller';
```

Beyond that, the typical implementation looks as follows:

```typescript
lightDomStyles = new LightDomStyles(this, globalStyles);
```

This line, implementing the reactive controller should not need to be changed on any application that is not upgrading to the `StyleController`.
npm package: @phase2/outline-core-alert
Description: The Outline Components for the image component
Author: Phase2 Technology
Latest version: 0.0.4

# outline-core-alert

The Outline Core Alert component

## Properties

| Property             | Attribute        | Type                                          | Default | Description                                   |
|----------------------|------------------|-----------------------------------------------|---------|-----------------------------------------------|
| `adoptedStylesheets` |                  | `AdoptedStylesheets`                          |         |                                               |
| `debug`              |                  | `boolean`                                     | false   |                                               |
| `isInteractive`      | `is-interactive` | `boolean`                                     | false   | This is important context for screen readers. |
| `status`             | `status`         | `"info" \| "warning" \| "error" \| "success"` | "info"  |                                               |

## Slots

| Name         | Description                                    |
|--------------|------------------------------------------------|
| `default`    | The alert contents.                            |
| `header`     | The header in the alert.                       |
| `icon-end`   | The icon to display at the end of the alert.   |
| `icon-start` | The icon to display at the start of the alert. |

## CSS Custom Properties

| Property                   | Description                                      |
|----------------------------|--------------------------------------------------|
| `--outline-alert--error`   | background: The background color for the error alert. |
| `--outline-alert--info`    | background: The background color for the info alert. |
| `--outline-alert--success` | background: The background color for the success alert. |
| `--outline-alert--warning` | background: The background color for the warning alert. |
npm package: @phase2/outline-docs
Description: Outline Documentation
Author: Phase2 Technology
Latest version: 0.0.21

# outline-docs

This provides a base set of documentation about Outline for projects to include in their storybook instances.

The following shows a very minimal sample of how to get the included stories into your Storybook instance.

Use it as a guide to modify your `src/.storybook/main.js` file or wherever your project is defining config for storybook.

```js
module exports {
  features: {
    storyStoreV7: true,
    postcss: false,
    buildStoriesJson: true,
    modernInlineRender: true,
  },
  framework: {
    name: '@storybook/web-components-vite',
    options: {},
  },
  docs: {
    autodocs: true,
    defaultName: 'Full Documentation', // set to change the name of generated docs entries
  },
  stories: [
    '../components/**/*.stories.@(js|ts|mdx)',
    './stories/!(guides|tokens|demonstration|examples)**/*.stories.@(js|jsx|ts|tsx|mdx)',
  ],
}
```
npm package: @phase2/outline-grid
Description: The Outline Components for the grid web component
Author: Phase2 Technology
Latest version: 0.0.9

# outline-grid

The Outline Grid component

## Properties

| Property         | Attribute         | Type                                       | Default  | Description                                      |
|------------------|-------------------|--------------------------------------------|----------|--------------------------------------------------|
| `containerAlign` | `container-align` | `"none" \| "left" \| "center" \| "right"`  | "center" | The horizontal position of the container.        |
| `fullBleed`      | `full-bleed`      | `boolean`                                  | false    | Whether or not this is a full bleed container.   |
| `gapSize`        | `gap-size`        | `"small" \| "large" \| "medium" \| "none"` | "small"  | How much of a gap should exist between columns? (This affects both the vertical and horizontal column/row gaps.) |
| `gapSizeLg`      | `gap-size-lg`     | `"small" \| "large" \| "medium" \| "none"` |          | How much of a gap should exist between columns on large+ screens? (This affects both the vertical and horizontal column/row gaps.) |
| `gapSizeMd`      | `gap-size-md`     | `"small" \| "large" \| "medium" \| "none"` |          | How much of a gap should exist between columns on medium+ screens? (This affects both the vertical and horizontal column/row gaps.) |
| `gapSizeSm`      | `gap-size-sm`     | `"small" \| "large" \| "medium" \| "none"` |          | How much of a gap should exist between columns on small+ screens? (This affects both the vertical and horizontal column/row gaps.) |
| `gapSizeXl`      | `gap-size-xl`     | `"small" \| "large" \| "medium" \| "none"` |          | How much of a gap should exist between columns on extra large+ screens? (This affects both the vertical and horizontal column/row gaps.) |
| `gapSizeXxl`     | `gap-size-xxl`    | `"small" \| "large" \| "medium" \| "none"` |          | How much of a gap should exist between columns on extra extra large+ screens? (This affects both the vertical and horizontal column/row gaps.) |
| `gapSizeXxxl`    | `gap-size-xxxl`   | `"small" \| "large" \| "medium" \| "none"` |          | How much of a gap should exist between columns on extra extra extra large+ screens? (This affects both the vertical and horizontal column/row gaps.) |
| `xPadding`       | `x-padding`       | `boolean`                                  | false    | Whether or not this container has left/right padding. |
| `yPadding`       | `y-padding`       | `boolean`                                  | false    | Whether or not this container has left/right padding. |

## Slots

| Name | Description                        |
|------|------------------------------------|
|      | The default slot for this element. |
npm package: @phase2/outline-heading
Description: The Outline Components for the web heading component
Author: Phase2 Technology
Latest version: 0.1.5

# outline-heading

The Heading component.

## Properties

| Property     | Attribute     | Type                                             | Default | Description                                      |
|--------------|---------------|--------------------------------------------------|---------|--------------------------------------------------|
| `level`      | `level`       | `string \| undefined`                            | "h2"    | The tag to apply: h1 \| h2 \| h3 \| h4 \| h5 \| h6 |
| `levelSize`  | `level-size`  | `"xs" \| "sm" \| "base" \| "lg" \| "xl" \| "2xl" \| "3xl" \| "4xl" \| "5xl" \| "6xl" \| "7xl" \| "8xl" \| "9xl"` |         | The heading level size to apply. Optional override to default styles for a given level |
| `levelStyle` | `level-style` | `"medium" \| "black" \| "thin" \| "extralight" \| "light" \| "normal" \| "semibold" \| "bold" \| "extrabold"` | "bold"  | The heading level style to apply. Optional override to default styles for a given level |

## Slots

| Name          |
|---------------|
| `defaultSlot` |
npm package: @phase2/outline-icon
Description: The Outline Components for the icon component
Author: Phase2 Technology
Latest version: 0.1.5

# outline-icon

## Properties

| Property  | Attribute | Type                  | Default   | Description                                      |
|-----------|-----------|-----------------------|-----------|--------------------------------------------------|
| `label`   | `label`   | `string \| boolean`   | false     |                                                  |
| `library` | `library` | `string`              | "library" | The name of a registered custom icon library.    |
| `name`    | `name`    | `string \| undefined` |           | The name of the icon to draw.                    |
| `size`    | `size`    | `string \| boolean`   | "32px"    | The width and height of the icon.                |
| `src`     | `src`     | `string \| undefined` |           | An external URL of an SVG file.<br /><br />WARNING: Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks. |

## Methods

| Method    | Type                |
|-----------|---------------------|
| `redraw`  | `(): void`          |
| `setIcon` | `(): Promise<void>` |

## Events

| Event           | Description                                      |
|-----------------|--------------------------------------------------|
| `outline-error` | Emitted when the icon fails to load due to an error. |
| `outline-load`  | Emitted when the icon has loaded.                |

## CSS Shadow Parts

| Part   | Description                   |
|--------|-------------------------------|
| `base` | The component's base wrapper. |
npm package: @phase2/outline-image
Description: The Outline Components for the image component
Author: Phase2 Technology
Latest version: 0.1.9

# outline-image

The image component, with support for parallax scrolling.

## Properties

| Property         | Attribute     | Type                                             | Default                          | Description                                      |
|------------------|---------------|--------------------------------------------------|----------------------------------|--------------------------------------------------|
| `hasCaptionSlot` |               | `boolean`                                        |                                  |                                                  |
| `imageHref`      | `image-href`  | `string \| boolean`                              | false                            | Image url                                        |
| `imageLabel`     | `image-label` | `string \| boolean`                              | false                            | Image text                                       |
| `imageRatio`     | `image-ratio` | `"default" \| "1/1" \| "3/2" \| "3/4" \| "4/3" \| "5/4" \| "16/9" \| "9/16" \| "21/9"` |                                  | Image aspect ratio.<br /><br />This value can be customized per image usage.<br />It will work with the property usages of image-href and image-label.<br /><br />If using a slotted image, it will work if the structure is an<br />img tag wrapped in a picture tag. |
| `slots`          |               | `SlotController`                                 | "new SlotController(this, true)" |                                                  |

## Methods

| Method                | Type                                     |
|-----------------------|------------------------------------------|
| `captionSlotTemplate` | `(): TemplateResult<ResultType> \| null` |

## Slots

| Name      | Description                     |
|-----------|---------------------------------|
|           | The image to be presented.      |
| `caption` | The caption text for the image. |
npm package: @phase2/outline-image-slider
Description: The Outline Components for the image slider component
Author: Phase2 Technology
Latest version: 0.1.6

# outline-image-slider

The Image Slider component

## Properties

| Property            | Type                                 | Default                                          |
|---------------------|--------------------------------------|--------------------------------------------------|
| `imageListTemplate` | `() => TemplateResult<ResultType>[]` | "(): TemplateResult[] => {\n    let counter = 0;\n    const templateArr: TemplateResult[] = [];\n\n    while (counter < this.childElementCount) {\n      templateArr.push(\n        html` <div\n          class=\"splide__slide\"\n          role=\"group\"\n          aria-label=\"slide ${counter + 1} of ${this.childElementCount}\"\n        >\n          <slot name=\"image-${counter + 1}\"></slot>\n          <div aria-hidden=\"true\" class=\"slide-count\">\n            <span>${counter + 1} / ${this.childElementCount}</span>\n          </div>\n        </div>`\n      );\n\n      counter++;\n    }\n\n    return templateArr;\n  }" |
| `nextBtn`           | `HTMLElement`                        |                                                  |
| `observer`          | `MutationObserver`                   |                                                  |
| `prevBtn`           | `HTMLElement`                        |                                                  |
| `setSlots`          | `() => void`                         | "() => {\n    let counter = 0;\n    while (counter <= this.childElementCount) {\n      if (this.children[counter]) {\n        this.children[counter].setAttribute('slot', `image-${counter + 1}`);\n      }\n      counter++;\n    }\n    this.requestUpdate();\n  }" |
| `splide`            | `Splide`                             |                                                  |
| `splideEl`          | `HTMLElement`                        |                                                  |

## Slots

| Name             | Description                                      |
|------------------|--------------------------------------------------|
| `image-<number>` | slots are generated in code, component accepts stack of desired elements to display |
npm package: @phase2/outline-include
Description: The Outline Components for the include component
Author: Phase2 Technology
Latest version: 0.1.5

# outline-include

## Properties

| Property       | Attribute       | Type                                   | Default | Description                                      |
|----------------|-----------------|----------------------------------------|---------|--------------------------------------------------|
| `allowScripts` | `allow-scripts` | `boolean`                              | false   | Allows included scripts to be executed. You must ensure the content you're including is trusted, otherwise this<br />option can lead to XSS vulnerabilities in your app! |
| `mode`         | `mode`          | `"cors" \| "no-cors" \| "same-origin"` | "cors"  | The fetch mode to use.                           |
| `src`          | `src`           | `string`                               |         | The location of the HTML file to include.<br /><br />WARNING: Be sure you trust the content you are including as it will be executed as code and can result in XSS attacks. |

## Methods

| Method            | Type                                |
|-------------------|-------------------------------------|
| `executeScript`   | `(script: HTMLScriptElement): void` |
| `handleSrcChange` | `(): Promise<void>`                 |

## Events

| Event           | Type                 | Description                                      |
|-----------------|----------------------|--------------------------------------------------|
| `outline-error` | `{ status: number }` | Emitted when the included file fails to load due to an error. |
| `outline-load`  |                      | Emitted when the included file is loaded.        |
npm package: @phase2/outline-link
Description: The Outline Components for the web link component
Author: Phase2 Technology
Latest version: 0.1.8

# outline-link

The Outline  Link component

## Properties

| Property     | Attribute     | Type                | Default | Description |
|--------------|---------------|---------------------|---------|-------------|
| `linkHref`   | `link-href`   | `string \| boolean` | false   | Link url    |
| `linkRel`    | `link-rel`    | `LinkRelType`       |         | Link rel    |
| `linkTarget` | `link-target` | `LinkTargetType`    |         | Link target |
| `linkText`   | `link-text`   | `string \| boolean` | false   | Link text   |

## Slots

| Name | Description                        |
|------|------------------------------------|
|      | The default slot for this element. |

## CSS Custom Properties

| Property                           | Description                                      |
|------------------------------------|--------------------------------------------------|
| `--outline-link-color`             | default: The default link color.                 |
| `--outline-link-color-default`     | decoration: Text decoration for the default link. |
| `--outline-link-color-hover`       | decoration: Text decoration for the link when hovering. |
| `--outline-link-transition`        | property: The CSS transition property to use for the link. |
| `--outline-link-transition-timing` | function: The CSS transition timing function to use for the link. |
npm package: @phase2/outline-list
Description: The Outline Components for the web list component
Author: Phase2 Technology
Latest version: 0.1.6

# outline-list

The OutlineList component

## Properties

| Property      | Attribute     | Type                                | Default  | Description                                      |
|---------------|---------------|-------------------------------------|----------|--------------------------------------------------|
| `listType`    | `list-type`   | `"ol" \| "ul" \| "div"`             |          | Determines which type of list is rendered.<br />ol \| ul \| div |
| `navLabel`    | `nav-label`   | `string \| undefined`               |          | If set will wrap list in a nav tag<br />with the passed string set as the aria-label. |
| `orientation` | `orientation` | `"column" \| "row" \| "col-center"` | "column" | Sets orientation of list.<br />column \| row     |

## Methods

| Method     | Type                                      |
|------------|-------------------------------------------|
| `listCase` | `(classes: ClassInfo): TemplateResult<1>` |

## Slots

| Name | Description   |
|------|---------------|
|      | default slot. |

## CSS Custom Properties

| Property                       | Description                                      |
|--------------------------------|--------------------------------------------------|
| `--outline-list--spacing`      | The default spacing between items.               |
| `--outline-list--spacing-lg`   | The default spacing between items for large screens. |
| `--outline-list--spacing-md`   | The default spacing between items for medium screens. |
| `--outline-list--spacing-sm`   | The default spacing between items for small screens. |
| `--outline-list--spacing-xl`   | The default spacing between items for extra large screens. |
| `--outline-list--spacing-xs`   | The default spacing between items for extra small screens. |
| `--outline-list--spacing-xxl`  | The default spacing between items for extra extra large screens. |
| `--outline-list--spacing-xxxl` | The default spacing between items for extra extra extra large screens. |
npm package: @phase2/outline-modal
Description: The Outline Components for the web modal component
Author: Phase2 Technology
Latest version: 0.1.8

# outline-modal

The Outline Modal component

## Properties

| Property                 | Attribute                | Type                                             | Default  | Description                                      |
|--------------------------|--------------------------|--------------------------------------------------|----------|--------------------------------------------------|
| `close`                  |                          | `() => void`                                     |          |                                                  |
| `elementToFocusSelector` | `elementToFocusSelector` | `string \| undefined`                            |          |                                                  |
| `isOpen`                 |                          | `boolean`                                        | false    |                                                  |
| `open`                   |                          | `() => void`                                     |          |                                                  |
| `shouldForceAction`      | `shouldForceAction`      | `boolean`                                        | false    | If we force the user to take an action, the consumer must provide a way to close the modal on their own. |
| `size`                   | `size`                   | `"small" \| "medium" \| "full-screen" \| undefined` | "medium" |                                                  |

## Methods

| Method  | Type                |
|---------|---------------------|
| `close` | `(): Promise<void>` |
| `open`  | `(): Promise<void>` |

## Events

| Event    |
|----------|
| `closed` |
| `opened` |

## Slots

| Name                                       | Description                                      |
|--------------------------------------------|--------------------------------------------------|
| `default`                                  | The modal contents                               |
| `outline-modal--accessibility-description` | The accessibility description which is used by screen readers. |
| `outline-modal--header`                    | The header in the modal                          |
| `outline-modal--trigger`                   | The trigger for the modal                        |
npm package: @phase2/outline-styled-text
Description: The Outline Components for the web styled text component
Author: Phase2 Technology
Latest version: 0.0.10

# outline-styled-text

The Outline Styled Text component

## Properties

| Property | Type             | Default                                          |
|----------|------------------|--------------------------------------------------|
| `slots`  | `SlotController` | "new SlotController(\n    this, // This, the host element.\n    true // To shift or not to shift LightDom nodes to ShadowDOM.\n  )" |

## Slots

| Name | Description  |
|------|--------------|
|      | default slot |
npm package: @phase2/outline-video-vimeo
Description: The Outline Components for the web video vimeo component
Author: Phase2 Technology
Latest version: 0.1.5

# outline-video-vimeo

The Outline VideoVimeo component

## Properties

| Property  | Attribute  | Type     |
|-----------|------------|----------|
| `videoID` | `video-id` | `string` |