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-color-area>` allows users to visually select two properties of a color simultaneously. It's commonly used together with a color slider or color wheel.
An `<sp-color-slider>` lets users visually change an individual channel of a color. The background of the `<sp-color-slider>` is a visual representation of the range of values a user can select from. This can represent color properties such as hues, color
An `<sp-color-wheel>` lets users visually change an individual channel of a color on a circular track.
The `<sp-color-handle>` is used to select a colour on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It functions similarly to the handle on an `<sp-slider>`.
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-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.
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
Create SWC uxp apps with minimal build configuration.
Web component implementation of a Spectrum design AlertDialog
Web component implementation of a Spectrum design Badge
Web component implementation of a Spectrum design NumberField
The `opacity-checkerboard` class is used to highlight opacity. Leverage these styles in your component as outlined below to unify you application's visuals with those delivered by various Spectrum Web Components.
Web component implementation of a Spectrum design PickerButton