JSPM

Deliver [Spectrum Workflow Icons](https://spectrum.adobe.com/page/icons/) as either:

The `SpectrumElement` base class as created by mixing `SpectrumMixin` onto `LitElement` adopts `dir` values from the `document` at connection time with a fallback to `lrt`. In a TypeScript context, it also enforces the presence of `this.shadowRoot` on ext

`<sp-icon>` renders an icon to the page. By default the `name` attribute will pair with separately registered icon sets to deliver the icons. When not present, `<sp-icon>` will subsequently check for its `src` attribute which could populate the icon via a

Shared mixins, tools, etc. that support developing Spectrum Web Components.

An `<sp-button>` represents an action a user can take. sp-buttons can be clicked or tapped to perform an action or to navigate to another page. Buttons in Spectrum have several variations for different uses and multiple levels of loudness for various atte

Extend either the `Iconset` or `IconsetSVG` exports of this package to supply your application with a custom icon set to power the use of `<sp-icon>` elements throughout. Give your new icon set a custom name, and you'll be ready to supply them as `<sp-ico

Web component implementation of a Spectrum design CloseButton

An `<sp-overlay>` element is used to decorate content that you would like to present to your visitors as "overlaid" on the rest of the application. This includes dialogs (modal and not), pickers, tooltips, context menus, et al.

Deliver [Spectrum UI Icons](https://spectrum.adobe.com/page/icons/) as either:

An `<sp-action-button>` represents an action a user can take.

`sp-theme` applies a Spectrum theme by using CSS custom properties to set default sizes & colors for all of the components in its scope. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different s

Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org)-powered web component library of patterns built on top of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are ma

An `<sp-progress-circle>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent both determinate and indeterminate progress, helping users understand the status of ongoing operations

Web component implementation of a Spectrum design ClearButton

ReactiveControllers for powering common UI patterns

An `<sp-popover>` is used to display transient content (menus, options, additional actions etc.) and appears when clicking/tapping on a source (tools, buttons, etc.) It stands out via its visual style (stroke and drop shadow) and floats on top of the rest

Web component implementation of a Spectrum design Tray

`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them.

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>`](..

`sp-divider` brings clarity to a layout by grouping and dividing content that exists in close proximity. It can also be used to establish rhythm and hierarchy.

An `<sp-link>` allows users to navigate to a different location. They can be presented in-line inside a paragraph or as a standalone text.

`sp-action-group` delivers a set of action buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. The `compact` attribute merges these buttons so that they are visually joined to clarify their relations

`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected.

An `<sp-field-label>` provides accessible labelling for form elements. Use the `for` attribute to outline the `id` of an element in the same DOM tree to which it should associate itself. Field labels give context to information that a user needs to input

`sp-textfield` components are text boxes that allow users to input custom text entries with a keyboard. Various decorations can be displayed around the field to communicate the entry requirements.

An `<sp-underlay>` provides a visual layer between overlay content and the rest of your application. It is commonly used with modal dialogs and other overlay elements to create a visual separation and prevent interaction with the background content while

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

An `<sp-picker>` is an alternative to HTML's `<select>` element. Use [`<sp-menu-item>`](../menu-item) elements to outline the options that will be made available to the user when interacting with the `<sp-picker>` element.

Side navigation allows users to locate information and features within the UI. It can be used for either hierarchical or flat navigation, and gives the ability to group navigable items categorically. Side navigation is an opportunity to prioritize content

An `<sp-card>` represents a rectangular card that contains a variety of text and image layouts. Cards are typically used to encapsulate units of a data set, such as a gallery of image/caption pairs.

Web component implementation of a Spectrum design Badge

The `<sp-search>` element is used for searching and filtering items.

The `opacity-checkerboard` class provides a CSS utility that displays a checkerboard pattern background, commonly used to highlight transparent or semi-transparent areas in UI components. This visual indicator helps users distinguish between transparent a

`<sp-slider>` allows users to quickly select a value within a range. They should be used when the upper and lower bounds of the range are invariable.

`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons.

An `<sp-illustrated-message>` displays an outline illustration and a message, usually in an empty state or on an error page. It is also used inside a [DropZone](/components/dropzone).

`<sp-toast>` elements display brief, temporary notifications. They are noticeable but do not disrupt the user experience and do not require an action to be taken.

Web component implementation of a Spectrum design HelpText

Web component implementation of a Spectrum design AlertDialog

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-

`sp-dialog` displays important information that users need to acknowledge. They appear over the interface and block further interactions. When used directly the `sp-dialog` element surfaces a `slot` based API for deep customization of the content to be in

Simple Ember component wrapper for the Spectrum.js color picker.

An `<sp-field-group>` element is used to layout a group of fields, usually `<sp-checkbox>` elements. It can be leveraged for `vertical` or `horizontal` organization of the fields that are supplied as its children.

An `<sp-status-light>` is a great way to convey semantic meaning, such as statuses and categories. It provides visual indicators through colored dots accompanied by descriptive text.

`<sp-coachmark>` is a temporary message that educates users through new or unfamiliar product experiences. They can be chained into a sequence to form a tour.

An `<sp-switch>` is used to turn an option on or off. Switches allow users to select the state of a single option at a time. Use a switch rather than a checkbox when activating (or deactivating) an option, instead of selecting.

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 to create comprehensive color selection interfaces.

Web component implementation of a Spectrum design Tags

Use an `<sp-asset>` element to visually represent a file, folder or image in your application. File and folder representations will center themselves horizontally and vertically in the space provided to the element. Images will be contained to the element

`<sp-radio>` and [`<sp-radio-group>`](../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.

The `<sp-icons-medium>` and `<sp-icons-large>` elements included in this package supply your application with the Spectrum CSS medium and large icons for use in the `<sp-icon>` element. Include at least one of these elements in a project that makes use of

Web component implementation of a Spectrum design Table

The `<sp-color-handle>` is used to select a color on an `<sp-color-area>`, `<sp-color-slider>`, or `<sp-color-wheel>`. It provides a draggable control point for precise color selection within color components.

A `<sp-dropzone>` is an area on the screen into which an object can be dragged and dropped to accomplish a task. For example, a drop zone might be used in an upload workflow to enable the user to drop a file from their operating system into the drop zone,

An `<sp-progress-bar>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc. By default, progress bars have a blue fill that shows the progress.

Web component implementation of a Spectrum design NumberField

An `<sp-color-wheel>` allows users to visually select the hue of a color on a circular track. It's commonly used together with other color components to create comprehensive color selection interfaces.

An `<sp-avatar>` is a thumbnail representation of an entity, such as a user or an organization. Avatars can have a defined image, which is usually uploaded by a user.

An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect.

A `<sp-action-bar>` delivers a floating action bar that is a convenient way to deliver stateful actions in cases like selection mode. `<sp-action-bar>` can be deployed in two variants beyond the default: `[varient="fixed"]` to position the element in rela

The Spectrum CSS typography component

Web component implementation of a Spectrum design InfieldButton

An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection.

`<sp-top-nav>` delivers site navigation, particularly for when that navigation will change the majority of the page's content and/or the page's URL when selected. All primary elements of an `<sp-top-nav>` should be directly accessible in the tab order, ty

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

An `sp-split-view` element displays its first two direct child elements side by side (horizontal) or stacked (vertical with `vertical` attribute). The component automatically distributes the available space between the two panels. When the `resizable` att

The Spectrum CSS tokens package

Web component implementation of a Spectrum design Swatch

The Spectrum CSS button component

Web component implementation of a Spectrum design ContextualHelp

The Spectrum CSS action button component

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

The Spectrum CSS card component

Web component implementation of a Spectrum design AlertBanner

An `<sp-meter>` is a visual representation of a quantity or achievement. The meter's progress is determined by user actions, rather than system actions.

Web component implementation of a Spectrum design Grid

The Spectrum CSS dialog component

The Spectrum CSS link component

The Spectrum CSS textfield component

Kelvin color temperature to RGB convertor

The Spectrum CSS menu component

The Spectrum CSS table component

The Spectrum CSS page component

The Spectrum CSS search component

Web component implementation of a Spectrum design Breadcrumbs

The Spectrum CSS buttongroup component

The Spectrum CSS actiongroup component

The Spectrum CSS tooltip component

The Spectrum CSS accordion component

The Spectrum CSS toast component

The Spectrum CSS divider component

The Spectrum CSS in-line alert component

The Spectrum CSS stepper component

Abstract base classes for Spectrum Web Components

The Spectrum CSS popover component

The Spectrum CSS icon component

The Spectrum CSS checkbox component

The Spectrum CSS radio component

The Spectrum CSS sidenav component

The Spectrum CSS switch component

The Spectrum CSS progress bar component

The Spectrum CSS slider component

The Spectrum CSS dropzone component

Web component implementation of a Spectrum design PickerButton

The Spectrum CSS progress circle component

The Spectrum CSS tags component

Web component implementation of a Spectrum design ColorField

The Spectrum CSS illustratedmessage component

The Spectrum CSS tabs component

The Spectrum CSS Tree view component

`@spectrum-web-components/bundle` is a master dependency that allows a project to import any and all of the Spectrum Web Components. While it is a great approach to prototyping, the fact that is versions all of the Spectrum Web Components packages collect

The Spectrum CSS statuslight component

The Spectrum CSS underlay component

The Spectrum CSS modal component

The Spectrum CSS fieldgroup component

The Spectrum CSS picker component

The Spectrum CSS calendar component

The Spectrum CSS fieldlabel component

Web component implementation of a Spectrum design Truncated

## Complex Forms in the blink of an eye

Web component implementation of a Spectrum design Combobox

The Spectrum CSS avatar component

The Spectrum CSS Pagination component

The Spectrum CSS breadcrumb component

The Spectrum CSS actionbar component

The Spectrum CSS badge component

Embeddable AI Widget - Add trusted, evidence-based answers directly to your website. Simple installation, enterprise-grade security.

The Spectrum CSS asset component

The Spectrum CSS close button component

Official React component for squares.vote embeds

The Spectrum CSS actionmenu component

The Spectrum CSS Color slider component

The Spectrum CSS tray component

The Spectrum CSS Color Handle component

The Spectrum CSS coachmark component

The Spectrum CSS Color Area component

The Spectrum CSS Color Area component

The Spectrum CSS contextualhelp component

The Spectrum CSS splitview component

The Spectrum CSS assetlist component

A Spectrum CSS preview

The Spectrum CSS helptext component

The Spectrum CSS Color Loupe component

Preset columns spans, for a 12-column CSS-grid.

Generate colorful text placeholders 🎨

The Spectrum CSS tag group component

The Spectrum CSS well component

The Spectrum CSS steplist component

The Spectrum CSS thumbnail component

The Spectrum CSS picker button component

Basic grid element for 1-12 columns. Accepts all props of native html div element.

A set of CSS components to align elements.

The Spectrum CSS Color swatch component

The Spectrum CSS rating component

Spectrum is a lightweight JS / TS library designed to simplify color manipulation and conversion tasks within the RGB, HSL, and HEX color spaces

WebComponents UI implementation

Customizable O(1) ES6 generators for colored noise

The Spectrum CSS combobox component

React Spectrum Renderer Set for JSONForms

Cordova Epson Plugin.

The Spectrum CSS Color swatch group component

The Spectrum CSS miller component

Customizable React components for real-time audio visualization

The Spectrum CSS infield button component

The Spectrum CSS clearbutton component

The Spectrum CSS alertbanner component

The Spectrum CSS alertdialog component

The Spectrum CSS opacitycheckerboard component

Open source design systems, expressed as DTCG JSON

The Spectrum CSS dropindicator component

The Spectrum CSS dial component

The Spectrum CSS asset card component

Adobe UXP Spectrum Web Components for React

Converts BASIC to Text and back again

The Spectrum CSS logicbutton component

The Spectrum CSS datepicker component

The Spectrum CSS Coach Indicator component

Convert spectrum, like FFT result, to a color

Generate comprehensive diffs between design token sets with support for multiple output formats including CLI, JSON, and Markdown. Detects added, deleted, renamed, deprecated, and updated tokens across different schema versions.

The Spectrum CSS floatingactionbutton component

Helper function for Jest + RAF

Embeddable AI Widget - Add trusted, evidence-based answers directly to your website. Simple installation, enterprise-grade security.