An `<sp-dropdown>` is an alternative to HTML's `<select>` element. Use an `<sp-menu>` element to outline the options that will be made available to the user when interacting with the `<sp-dropdown>` element.
An `<sp-banner>` is an additional label an existing component may have. Banners cannot be interacted with. Banners in Spectrum have three variations for different uses as well as the ability to place it overlaid in the top-right corner of a container.
`<sp-quick-actions>` allow users to perform contextual actions when hovering or focusing on a specific component. They're shortcuts meant to make workflows more efficient. Spectrum guidelines suggest a `<sp-quick-action>` element feature only text buttons
An `sp-split-button` surfaces an immediately envokable action via it's main button, as well as a list of alternative actions in its toggleable menu overlay. By default, any actions envoked from the overlay will replace the main action button. When leverag
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 />`.
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
The `<sp-tab-list>` component contains set of tab-item elements. This is typically used as the interface for controlling a set of layered sections of content that display one panel of content at a time
A `<sp-actionbar>` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode. `<sp-actionbar>` can be deployed in two variants beyond the default: `[varient="fixed"]`, to position the element in relat
### Usage
An `<sp-bar-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.
An `<sp-circle-loader>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.
**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.
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
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.
An **sp-theme** sets the rendering theme for all child components. The Spectrum design system supports four color themes and two different scales. `spectrum-web-components` currently supports two of the four color themes (dark and light) one one of the sc
`sp-rule` bring clarity to a layout by grouping and dividing content in close proximity. They can also be used to establish rhythm and hierarchy.
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 />`.
The `<sp-accordion>` element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a
`@future-ui/bundle` is a master dependancy that allows a project to import any and all of the the Spectrum Web Components. While it is a great approach to prototyping, the fact that is versions all of the Spectrum Web Components packages collectively mean