open-index/open-npm huggingface dataset:
npm package: @spectrum-tools/gh-action-file-diff
Description: A GitHub Action to compare asset sizes and generate a diff if changes are found.
Author: Adobe
Latest version: 2.0.5

# File diff

A GitHub Action for comparing compiled assets between branches.

## Inputs

### `head-path`

**Required** Path to file or directory for file sizes analysis.

### `base-path`

**Optional** Path to another directory against which to perform file comparisons.

### `token`

**Optional** GitHub token for accessing the GitHub API. Defaults to `${{ github.token }}`.

### `file-glob-pattern`

**Optional** Glob pattern for selecting files to compare. Defaults to `dist/*`.

### `comment`

**Optional** If true, add a comment on the pull request with the results of the comparison. Defaults to `true`.

### `comment-header`

**Optional** Header content for the comment. Markdown is supported. Defaults to `## File metrics`.

## Outputs

### `has-changed`

True if the overall file size has changed, false otherwise.

### `total-size`

Total size of all files for this branch in bytes.

## Example usage

```yaml
name: Compare compiled output file size
uses: "spectrum-tools/gh-action-file-diff"
with:
    head-path: ${{ github.workspace }}/pull-request
    base-path: ${{ github.workspace }}/base-branch
    file-glob-pattern: |
        components/*/dist/*.{css,json}
        components/*/dist/themes/*.css
```
npm package: @spectrum-tools/postcss-add-theming-layer
Description: Leveraging style container queries to create an abstraction layer for supporting multiple theming systems
Author: Adobe
Latest version: 1.0.2

# postcss-add-theming-layer

> Leveraging style container queries to create an abstraction layer for supporting multiple theming systems.

## Installation

Add the dependency to your project:

```sh
npm install postcss-add-theming-layer
```

or

```sh
yarn add -DW postcss-add-theming-layer
```

Use the plugin in your PostCSS configuration:

```js
module.exports = {
	plugins: {
		"postcss-add-theming-layer": {},
	},
};
```

or as part of your CLI command:

```sh
postcss -u postcss-add-theming-layer -o dist/index.css src/index.css
```

## Options

### `selectorPrefix` [string]

This optional input will prefix the new theming layer selector with the provided string. This can be useful if you want to namespace the injected selectors for the new theming layer to avoid conflicts.

### `skipMapping` [boolean=false]

Skip the mapping of the variables to the system variables. This can be useful if you only want to extract the variables and not map them to the system variables.

### `preserveVariables` [boolean=true]

When used with `skipMapping`, this option will preserve the variables defined inside the container query in the output by injecting them to the root selector.

### `referencesOnly` [boolean=false]

This option will only output those variables that are referencing the newly created system variables and not the system variables themselves. This can be used as a bridge between an old and new implementation for the component.

### `stripLocalSelectors` [boolean=false]

This option will remove the local selectors (those that map to system variables) from the output leaving only the system definitions.

### `processIdentifier` [(identifierValue: string, identifierName: string) => string]`

Customize the selectors that variables are placed in. Passed the value and key of the variable that was passed to the container, i.e. `identifierValue = spectrum` and `identifierName = system` for the example below. By default, `identifierName` is used as-is.

## Usage

This plugin turns this:

```css
@container style(--system: legacy) {
	.component {
		--background-color: blue;
	}
	.component.is-selected {
		--background-color: darkblue;
	}
	.component .icon {
		--color: gray;
	}
}

@container style(--system: modern) {
	.component {
		--background-color: purple;
	}
	.component.is-selected {
		--background-color: darkpurple;
	}
	.component .icon {
		--color: white;
	}
}
```

Into this:

```css
.legacy {
	--system-component-background-color: blue;
	--system-component-selected-background-color: darkblue;
}

.modern {
	--system-component-background-color: purple;
	--system-component-selected-background-color: darkpurple;
}

.component {
	--background-color: var(--system-component-background-color);
}

.component.is-selected {
	--background-color: var(--system-component-selected-background-color);
}
```

## Usage notes

This plugin will ignore any underscore-prefixed variables, as they are considered private and not part of the theming layer.
npm package: @spectrum-tools/postcss-property-rollup
Description: Combines custom properties from multiple selectors into a single selector
Author: Adobe
Latest version: 0.0.1

# postcss-property-rollup

> Combines multiple blocks of custom properties

## Installation

```sh
npm install postcss-property-rollup
```

## Usage

On the command line:

```sh
postcss -u postcss-property-rollup -o dist/index.css src/index.css
```

or in the PostCSS configuration:

```js
module.exports = {
	plugins: {
		"postcss-property-rollup": {},
	},
};
```

This plugin turns this:

```css
.lorem {
	--spectrum-actionbutton-background-color: blue;
	--spectrum-actionbutton-border-color: transparent;
}

.ipsum {
	--spectrum-actionbutton-background-color: purple;
}
```

Into this:

```css
.ipsum {
	--spectrum-actionbutton-border-color: transparent;
	--spectrum-actionbutton-background-color: purple;
}
```

The resulting selector comes from the last rule unless a `newSelector` option is provided, and all duplicate properties in the subsequent rules override the previous declarations.

## Options

### `newSelector`

Type: `string`<br>
Default: `null`

The selector to use for the combined rule. If not provided, the last selector in the list will be used.

### `ignore`

Type: `string[]`<br>
Default: `[]`

An array of selectors to ignore when combining rules.

### `keyword`

Type: `string`<br>
Default: `combine`

The `@` prefixed comment keyword to search for when determining what code to roll-up into the new selector.
npm package: @spectrum-tools/postcss-rgb-mapping
Description: Remaps rgb(a) values to an rgb postfixed variable
Author: Adobe
Latest version: 1.1.0

# postcss-rgb-mapping

> Remaps rgb(a) values to an `rgb` postfixed variable. If an opacity is found, creates a separate `opacity` postfixed variable.
> Also remaps values that reference a transparent token (for example, `transparent-black-300`) to `rgb` and `opacity` postfixed variables.

## Installation

```sh
yarn add -D @spectrum-tools/postcss-rgb-mapping
postcss -u postcss-rgb-mapping -o dist/index.css src/index.css
```

## Usage

### Example 1: RGB and opacity postfixed variables

This plugin turns this:

```css
.spectrum--lightest {
	--spectrum-seafoam-100: rgba(206, 247, 243);
	--spectrum-seafoam-200: rgba(170, 241, 234, 0.5);
}
```

Into this:

```css
.spectrum--lightest {
	/* Both --spectrum-seafoam-100 and --spectrum-seafoam-200 get split into separate
	"-rgb" and "-opacity" values when applicable. */
	--spectrum-seafoam-100-rgb: 206, 247, 243;
	--spectrum-seafoam-100: rgba(var(--spectrum-seafoam-100-rgb));
	--spectrum-seafoam-200-rgb: 170, 241, 234;
	--spectrum-seafoam-200-opacity: 0.5;
	/* The plugin then redefines the original custom variable to use the newly created
	"-rgb" and/or "-opacity" custom variables. */
	--spectrum-seafoam-200: rgba(
		var(--spectrum-seafoam-200-rgb),
		var(--spectrum-seafoam-200-opacity)
	);
}
```

### Example 2: Remapping of transparent tokens

This plugin turns this:

```css
.spectrum--lightest {
	--spectrum-transparent-white-100-rgb: 100, 100, 100;
	--spectrum-transparent-white-100-opacity: 0.5;
	--spectrum-transparent-white-100: rgba(
		var(--spectrum-transparent-white-100-rgb),
		var(--spectrum-transparent-white-100-opacity)
	);
	/* The custom properties below is defined as another, specifically "transparent," variable. */
	--disabled-static-white-background-color: var(
		--spectrum-transparent-white-100
	);
}
```

Into this:

```css
.spectrum--lightest {
	--spectrum-transparent-white-100-rgb: 100, 100, 100;
	--spectrum-transparent-white-100-opacity: 0.5;
	--spectrum-transparent-white-100: rgba(
		var(--spectrum-transparent-white-100-rgb),
		var(--spectrum-transparent-white-100-opacity)
	);
	/* In a similar fashion, the plugin creates new "-rgb" and "-opacity" postfixed custom
	variables, that correspond to the definition's transparent "-rgb" and "-opacity"
	postfixed custom variables. */
	--disabled-static-white-background-color-rgb: var(
		--spectrum-transparent-white-100-rgb
	);
	--disabled-static-white-background-color-opacity: var(
		--spectrum-transparent-white-100-opacity
	);
	/* Then reassembles the original to use and reference these newly created variables. */
	--disabled-static-white-background-color: rgba(
		var(--disabled-static-white-background-color-rgb),
		var(--disabled-static-white-background-color-opacity)
	);
}
```
npm package: @spectrum-tools/stylelint-no-missing-var
Description: Check for custom properties without a var function around them
Author: Adobe
Latest version: 2.0.2

# stylelint-no-missing-var

> Validates classnames for any missing var before a custom property

## Description

This stylelint plugin will validate against all custom properties in css and lints when it fails to find var before a custom property. This plugin also works for custom property defined in other sources too.

## Installation

```sh
yarn add -D stylelint-no-missing-var
```

## How to use

In your stylelintrc.json add stylelint-no-missing-var to your plugins array and to your rules array like this:

```js
plugins: ['stylelint-no-missing-var'],
rules: {
  "custom-rule/no-missing-var": true,
}
```

## Usage

Wrong: Throws an error here

```css
.spectrum-Well-Component {
	background-color: (--prefix-component-background-color);
}
```

Correct:

```css
.spectrum-Well-Component {
	background-color: var(--prefix-component-background-color);
}
```
npm package: @spectrum-tools/stylelint-no-unknown-custom-properties
Description: Report on any unknown custom property definitions
Author: Adobe
Latest version: 2.0.3

# stylelint-no-unknown-custom-properties

> Report on any unused variable definitions

## Installation

```sh
yarn add -D @spectrum-tools/stylelint-no-unknown-custom-properties
```

## Usage

Assuming you have some variables defined and rule(s) that use them:

```css
:root {
	--prefix-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}

.component {
	background-color: var(--prefix-component-background-color);

	width: var(--prefix-component-width);
	height: var(--prefix-component-height);
}
```

The variables that are not used in any rule will be reported to the console.

## Options

### `ignoreList` (default: `[]`)

An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored.

### `skipDependencies` (default: `true`)

If set to `false`, the plugin will pull in and read the `peerDependencies` and `dependencies` for the package in which it is installed. It will then read-in and parse the provided CSS assets and check for any variables that are defined in the package's dependencies. If any are found, those variables will not be reported as unused.
npm package: @spectrum-tools/stylelint-no-unused-custom-properties
Description: Report on any unused custom property definitions
Author: Adobe
Latest version: 2.0.5

# stylelint-no-unused-custom-properties

> Remove or report on unused variable definitions

## Installation

```sh
yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties
```

## Usage

Assuming you have some variables defined and rule(s) that use them:

```css
:root {
	--prefix-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}

.component {
	background-color: var(--prefix-component-background-color);

	width: var(--prefix-component-width);
	height: var(--prefix-component-height);
}
```

The variables that are not used in any rule will be removed from the output or reported to the console:

```css
:root {
	--prefix-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
}

.component {
	background-color: var(--prefix-component-background-color);

	width: var(--prefix-component-width);
	height: var(--prefix-component-height);
}
```

To allow variables to be defined without being used, such as when you want to pass custom properties down to a child component, you can add a `/* @passthrough */` comment to the variable definition:

```css
:root {
	/* @passthrough */
	--nested-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}
```

To allow a group of properties to be passed down, you can prefix the set with `/* @passthrough start */` and suffix it with `/* @passthrough end */`:

```css
:root {
	/* @passthrough start */
	--nested-component-background-color: blue;
	--nested-component-width: 10px;
	/* @passthrough end */

	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}
```

## Options

### `ignoreList` (default: `[]`)

An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored.
npm package: @spectrum-tools/stylelint-theme-alignment
Description: A utility to ensure that all custom properties are intially defined in a core resource file and all subsequent uses leverage only values defined there first.
Author: Adobe
Latest version: 1.2.1

# stylelint-no-unused-custom-properties

> Remove or report on unused variable definitions

## Installation

```sh
yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties
```

## Usage

Assuming you have some variables defined and rule(s) that use them:

```css
:root {
	--prefix-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}

.component {
	background-color: var(--prefix-component-background-color);

	width: var(--prefix-component-width);
	height: var(--prefix-component-height);
}
```

The variables that are not used in any rule will be removed from the output or reported to the console:

```css
:root {
	--prefix-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
}

.component {
	background-color: var(--prefix-component-background-color);

	width: var(--prefix-component-width);
	height: var(--prefix-component-height);
}
```

To allow variables to be defined without being used, such as when you want to pass custom properties down to a child component, you can add a `/* @passthrough */` comment to the variable definition:

```css
:root {
	/* @passthrough */
	--nested-component-background-color: blue;
	--prefix-component-width: 10px;
	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}
```

To allow a group of properties to be passed down, you can prefix the set with `/* @passthrough start */` and suffix it with `/* @passthrough end */`:

```css
:root {
	/* @passthrough start */
	--nested-component-background-color: blue;
	--nested-component-width: 10px;
	/* @passthrough end */

	--prefix-component-height: 10px;
	--prefix-component-size: 10px;
}
```

## Options

### `ignoreList` (default: `[]`)

An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored.
npm package: @spectrum-tools/theme-alignment
Description: > Remove or report on unused variable definitions
Author: Adobe
Latest version: 1.1.0

# stylelint-no-unused-custom-properties

> Remove or report on unused variable definitions

## Installation

```sh
yarn add -D @spectrum-tools/stylelint-no-unused-custom-properties
```

## Usage

Assuming you have some variables defined and rule(s) that use them:

```css
:root {
  --prefix-component-background-color: blue;
  --prefix-component-width: 10px;
  --prefix-component-height: 10px;
  --prefix-component-size: 10px;
}

.component {
  background-color: var(--prefix-component-background-color);

  width: var(--prefix-component-width);
  height: var(--prefix-component-height);
}
```

The variables that are not used in any rule will be removed from the output or reported to the console:

```css
:root {
  --prefix-component-background-color: blue;
  --prefix-component-width: 10px;
  --prefix-component-height: 10px;
}

.component {
  background-color: var(--prefix-component-background-color);

  width: var(--prefix-component-width);
  height: var(--prefix-component-height);
}
```

To allow variables to be defined without being used, such as when you want to pass custom properties down to a child component, you can add a `/* @passthrough */` comment to the variable definition:

```css
:root {
  /* @passthrough */
  --nested-component-background-color: blue;
  --prefix-component-width: 10px;
  --prefix-component-height: 10px;
  --prefix-component-size: 10px;
}
```

To allow a group of properties to be passed down, you can prefix the set with `/* @passthrough start */` and suffix it with `/* @passthrough end */`:

```css
:root {
  /* @passthrough start */
  --nested-component-background-color: blue;
  --nested-component-width: 10px;
  /* @passthrough end */

  --prefix-component-height: 10px;
  --prefix-component-size: 10px;
}
```

## Options

### `ignoreList` (default: `[]`)

An array of strings or regular expressions that will be matched against the variable name. If a match is found, the variable will be ignored.
npm package: @spectrum-web-components/action-menu
Description: An `<sp-action-menu>` is an action button that triggers an overlay with `<sp-menu-items>` for activation. Use an `<sp-menu>` element to outline the items that will be made available to the user when interacting with the `<sp-action-menu>` element. By defa
Author: Adobe
Latest version: 1.11.2
npm package: @spectrum-web-components/menu
Description: An `<sp-menu>` is used for creating a menu list. The various elements inside a menu are given as [`<sp-menu-group>`](../menu-group), [`<sp-menu-item>`](../menu-item), or `<sp-menu-divider>`. Often a `<sp-menu>` element will appear in a [`<sp-popover>`](..
Author: Adobe
Latest version: 1.11.2
npm package: @spectrum-web-components/menu-group
Description: An `<sp-menu />` is used for creating a menu list. The various elements inside a menu are given as `<sp-menu-group/>`, `<sp-menu-item />`, or `<sp-menu-divider />`.
Latest version: 0.1.11

## Description

An `<sp-menu />` is used for creating a menu list. The various elements inside a menu are given as `<sp-menu-group/>`, `<sp-menu-item />`, or `<sp-menu-divider />`.

### Installation

[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/menu-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/menu-group)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/menu-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/menu-group)

```
npm install @spectrum-web-components/menu-group

# or

yarn add @spectrum-web-components/menu-group
```

## Variants

### Organization

The content of a menu can be organized by either adding `<sp-menu-divider />` elements to a flat list, or by labeling groups of items in a longer list with a `<sp-menu-group />` element which provides a slot for a group header; `[slot="header"]`.

<!-- prettier-ignore -->
```html
<sp-popover open style="position: relative">
    <sp-menu>
        <sp-menu-group>
            <span slot="header">New York</span>
            <sp-menu-item>
                Central Park
            </sp-menu-item>
            <sp-menu-item>
                Prospect Park
            </sp-menu-item>
        </sp-menu-group>
        <sp-menu-divider></sp-menu-divider>
        <sp-menu-group>
            <span slot="header">San Fransisco</span>
            <sp-menu-item>
                Golden Gate Park
            </sp-menu-item>
            <sp-menu-item>
                Lake Merced Park
            </sp-menu-item>
        </sp-menu-group>
    </sp-menu>
</sp-popover>
```

## Accessibility

`<sp-menu />`, `<sp-menu-group />`, and `<sp-menu-item />` each deliver a different part of the wai-aria "menu" pattern and support the `menu`, `group`, and `menuitem` roles respectively. To support ease of keyboard navigation, only the first active _or_ first selected `<sp-menu-item />` can be accessed in the tab order. Once the focus has entered the menu the up and down arrow keys can be used to access the rest of the menu.
npm package: @spectrum-web-components/overlay-root
Description: An **overlay-root** defines the DOM element which defines the bounds in which overlay elements (e.g. `sp-popover`) are rendered. An overlay root is intended to be used with an [`overlay-trigger`](/components/overlay-trigger). Please see the documentation 
Latest version: 0.1.7

## Overview

An **overlay-root** defines the DOM element which defines the bounds in which overlay
elements (e.g. `sp-popover`) are rendered. An overlay root is intended to be used with
an [`overlay-trigger`](/components/overlay-trigger). Please see the documentation for
[`overlay-trigger`](/components/overlay-trigger).
npm package: @spectrum-web-components/overlay-trigger
Description: An **overlay-trigger** is used to overlay content that is positioned relative to another control. Two kinds of triggers are supported, `hover` and `click`. Each may have it's own content.
Latest version: 0.1.7

## Overview

An **overlay-trigger** is used to overlay content that is positioned relative to
another control. Two kinds of triggers are supported, `hover` and `click`. Each
may have it's own content.

Please note that you need to wrap your UI in an
[`overlay-root`](/components/overlay-root) component, which acts as a host for
the overlay content. You only need a single `overlay-root` for all of your
overlays.

## Example

```html
<style>
    overlay-root {
        position: relative;
        width: 100%;
        height: 400px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    overlay-trigger {
        flex: none;
    }

    .tooltip {
        background-color: var(--spectrum-global-color-gray-800);
        color: var(--spectrum-global-color-gray-50);
        padding: 4px 10px;
        font-size: 10px;
    }
</style>
<overlay-root placement="bottom" offset="6">
    <overlay-trigger id="trigger" placement="bottom" offset="6">
        <sp-button variant="primary" slot="trigger">
            Bottom Popover
        </sp-button>
        <sp-popover dialog slot="click-content" direction="bottom" tip open>
            <div class="options-popover-content">
                <sp-slider
                    value="5"
                    step="0.5"
                    min="0"
                    max="20"
                    label="Awesomeness"
                ></sp-slider>
                <sp-button>Press Me</sp-button>
            </div>
        </sp-popover>
        <div slot="hover-content" class="tooltip" delay="100">
            Tooltip
        </div>
    </overlay-trigger>
</overlay-root>
```
npm package: @spectrum-web-components/radio-group
Description: **sp-radio** and **sp-radio-group** allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.
Latest version: 0.1.18

## Description

**sp-radio** and **sp-radio-group** allow users to select a single option from a list of mutually exclusive options. All possible options are exposed up front for users to compare.

**sp-radio-group** holds a list of **sp-radio** elements, and is responsible for deselecting radio buttons when a new one is selected, which in turn makes it responsible for keeping track of which one is selected. **sp-radio** is responsible for handling user interactions and for visually reflecting if it is the one that is checked or not.

### Installation

[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/radio-group?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/radio-group)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/radio-group?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/radio-group)

```
npm install @spectrum-web-components/radio-group

# or

yarn add @spectrum-web-components/radio-group
```

### Example

```html
<sp-radio-group selected="first" name="example">
    <sp-radio value="first">Option 1</sp-radio>
    <sp-radio value="second">Option 2</sp-radio>
    <sp-radio value="third">Option 3</sp-radio>
    <sp-radio value="fourth">Option 4</sp-radio>
</sp-radio-group>
```

### Radio group column

By default, radio groups are inline and appear vertically. By adding the `column` property to **sp-radio-group**
the radio buttons will be listed vertically on their own line.

```html
<sp-radio-group column name="column-example">
    <sp-radio value="first">Option 1</sp-radio>
    <sp-radio value="second">Option 2</sp-radio>
    <sp-radio value="third">Option 3</sp-radio>
</sp-radio-group>
```

## Accessibility

Radio buttons are accessible by default, rendered in HTML using the `<input type="radio">` element. Tabbing into a group of radio buttons places the focus on the first radio button selected. If none of the radio buttons are selected, the focus is set on the first one in the group. Space selects the radio button in focus (if not already selected). Using the arrow keys moves focus and selection to the previous or next radio button in the group (last becomes first, and first becomes last). The new radio button in focus gets selected even if the previous one was not.
npm package: @spectrum-web-components/story-decorator
Description: [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/story-decorator?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/story-decorator) [![How big is this package in your project?](https://img.shields.io/bund
Author: Adobe
Latest version: 1.11.2
npm package: @spectrum-web-components/tab
Description: The `<sp-tab>` component is intended to be the child of an `<sp-tab-list>` element and accepts both a `label` attribute and a `[slot="icon"]` child to define its contents. Those contents can be further customized with the `vertical` attribute which stacks
Latest version: 0.3.10

## Description

The `<sp-tab>` component is intended to be the child of an `<sp-tab-list>` element and accepts both a `label` attribute and a `[slot="icon"]` child to define its contents. Those contents can be further customized with the `vertical` attribute which stacks them in the UI rather than listing them in a row.

### Installation

[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/tab?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/tab)
[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/tab?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/tab)

```
npm install @spectrum-web-components/tab

# or

yarn add @spectrum-web-components/tab
```

## Example

```html
<sp-tab-list selected="1">
    <sp-tab label="Tab 1" value="1"></sp-tab>
    <sp-tab label="Tab 2" value="2"></sp-tab>
    <sp-tab label="Tab 3" value="3"></sp-tab>
    <sp-tab label="Tab 4" value="4"></sp-tab>
</sp-tab-list>
```

## Variants

### Icon

```html
<sp-icons-medium></sp-icons-medium>
<sp-tab label="Tab 1" value="1">
    <sp-icon slot="icon" size="s" name="ui:CheckmarkSmall"></sp-icon>
</sp-tab>
```

### Vertical w/ icon

```html
<sp-tab label="Tab 1" value="1" vertical>
    <sp-icon slot="icon" size="s" name="ui:CheckmarkSmall"></sp-icon>
</sp-tab>
```

## Accessibility

By default, an `<sp-tab>` element has `[tabindex="-1"]` so that it can be focused programmatically. When an `<sp-tab>` element is `[selected]` or isthe first `<sp-tab>` in an `<sp-tab-list>` element with no `selected` value, it will be given `[tabindex="0"]`.
npm package: @spectrum-web-components/tabs
Description: The `<sp-tabs>` displays a list of `<sp-tab>` element children as `role="tablist"`. An `<sp-tab>` element is associated with a sibling `<sp-tab-panel>` element via their `value` attribute. When an `<sp-tab>` element is `selected`, the associated `<sp-tab-
Author: Adobe
Latest version: 1.11.2
npm package: @spectrum-web-components/vrt-compare
Description: [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/vrt-compare?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/vrt-compare) [![How big is this package in your project?](https://img.shields.io/bundlephobia
Author: Adobe
Latest version: 1.11.2