|
@spectrum-web-components/accordion
|
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 |
Apache-2.0 |
23
greenflagged
/ 437 total
|
|
@spectrum-web-components/action-bar
|
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 |
Apache-2.0 |
17
greenflagged
/ 436 total
|
|
@spectrum-web-components/action-button
|
An `<sp-action-button>` represents an action a user can take. |
Apache-2.0 |
13
greenflagged
/ 428 total
|
|
@spectrum-web-components/action-group
|
`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 |
Apache-2.0 |
21
greenflagged
/ 437 total
|
|
@spectrum-web-components/action-menu
|
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 |
Apache-2.0 |
23
greenflagged
/ 502 total
|
|
@spectrum-web-components/alert-banner
|
Web component implementation of a Spectrum design AlertBanner |
Apache-2.0 |
17
greenflagged
/ 247 total
|
|
@spectrum-web-components/alert-dialog
|
Web component implementation of a Spectrum design AlertDialog |
Apache-2.0 |
17
greenflagged
/ 267 total
|
|
@spectrum-web-components/asset
|
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 |
Apache-2.0 |
19
greenflagged
/ 417 total
|
|
@spectrum-web-components/avatar
|
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. |
Apache-2.0 |
17
greenflagged
/ 431 total
|
|
@spectrum-web-components/badge
|
Web component implementation of a Spectrum design Badge |
Apache-2.0 |
19
greenflagged
/ 346 total
|
|
@spectrum-web-components/base
|
— |
— |
19
greenflagged
/ 406 total
|
|
@spectrum-web-components/breadcrumbs
|
Web component implementation of a Spectrum design Breadcrumbs |
Apache-2.0 |
14
greenflagged
/ 243 total
|
|
@spectrum-web-components/bundle
|
`@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 it versions all of the Spectrum Web Components packages collect |
Apache-2.0 |
19
greenflagged
/ 525 total
|
|
@spectrum-web-components/button
|
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 |
Apache-2.0 |
23
greenflagged
/ 472 total
|
|
@spectrum-web-components/button-group
|
`sp-button-group` delivers a set of buttons in horizontal or vertical orientation while ensuring the appropriate spacing between those buttons. |
Apache-2.0 |
21
greenflagged
/ 433 total
|
|
@spectrum-web-components/card
|
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. |
Apache-2.0 |
15
greenflagged
/ 475 total
|
|
@spectrum-web-components/checkbox
|
`<sp-checkbox>` allow users to select multiple items from a list of independent options, or to mark an individual option as selected. |
Apache-2.0 |
17
greenflagged
/ 466 total
|
|
@spectrum-web-components/clear-button
|
Web component implementation of a Spectrum design ClearButton |
Apache-2.0 |
17
greenflagged
/ 351 total
|
|
@spectrum-web-components/close-button
|
Web component implementation of a Spectrum design CloseButton |
Apache-2.0 |
17
greenflagged
/ 352 total
|
|
@spectrum-web-components/coachmark
|
`<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. |
Apache-2.0 |
12
greenflagged
/ 423 total
|
|
@spectrum-web-components/color-area
|
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. |
Apache-2.0 |
23
greenflagged
/ 408 total
|
|
@spectrum-web-components/color-field
|
Web component implementation of a Spectrum design ColorField |
Apache-2.0 |
23
greenflagged
/ 255 total
|
|
@spectrum-web-components/color-handle
|
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. |
Apache-2.0 |
17
greenflagged
/ 404 total
|
|
@spectrum-web-components/color-loupe
|
An `<sp-color-loupe>` shows the output color that would otherwise be covered by a cursor, stylus, or finger during color selection. |
Apache-2.0 |
14
greenflagged
/ 400 total
|
|
@spectrum-web-components/color-slider
|
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 |
Apache-2.0 |
17
greenflagged
/ 413 total
|
|
@spectrum-web-components/color-wheel
|
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. |
Apache-2.0 |
17
greenflagged
/ 412 total
|
|
@spectrum-web-components/combobox
|
Web component implementation of a Spectrum design Combobox |
Apache-2.0 |
22
greenflagged
/ 257 total
|
|
@spectrum-web-components/contextual-help
|
Web component implementation of a Spectrum design ContextualHelp |
Apache-2.0 |
23
greenflagged
/ 245 total
|
|
@spectrum-web-components/core
|
— |
— |
6
greenflagged
/ 62 total
|
|
@spectrum-web-components/dialog
|
`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 |
Apache-2.0 |
18
greenflagged
/ 447 total
|
|
@spectrum-web-components/divider
|
`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. |
Apache-2.0 |
17
greenflagged
/ 402 total
|
|
@spectrum-web-components/dropzone
|
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, |
Apache-2.0 |
17
greenflagged
/ 437 total
|
|
@spectrum-web-components/field-group
|
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. |
Apache-2.0 |
23
greenflagged
/ 413 total
|
|
@spectrum-web-components/field-label
|
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 |
Apache-2.0 |
17
greenflagged
/ 422 total
|
|
@spectrum-web-components/grid
|
— |
— |
23
greenflagged
/ 344 total
|
|
@spectrum-web-components/help-text
|
Web component implementation of a Spectrum design HelpText |
Apache-2.0 |
17
greenflagged
/ 355 total
|
|
@spectrum-web-components/icon
|
— |
— |
16
greenflagged
/ 444 total
|
|
@spectrum-web-components/icons
|
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 |
Apache-2.0 |
23
greenflagged
/ 429 total
|
|
@spectrum-web-components/icons-ui
|
— |
— |
18
greenflagged
/ 430 total
|
|
@spectrum-web-components/icons-workflow
|
— |
— |
9
greenflagged
/ 434 total
|
|
@spectrum-web-components/iconset
|
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 |
Apache-2.0 |
23
greenflagged
/ 426 total
|
|
@spectrum-web-components/illustrated-message
|
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). |
Apache-2.0 |
21
greenflagged
/ 454 total
|
|
@spectrum-web-components/infield-button
|
Web component implementation of a Spectrum design InfieldButton |
Apache-2.0 |
17
greenflagged
/ 263 total
|
|
@spectrum-web-components/link
|
— |
— |
18
greenflagged
/ 451 total
|
|
@spectrum-web-components/menu
|
— |
— |
22
greenflagged
/ 472 total
|
|
@spectrum-web-components/meter
|
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. |
Apache-2.0 |
17
greenflagged
/ 425 total
|
|
@spectrum-web-components/modal
|
— |
Apache-2.0 |
17
greenflagged
/ 408 total
|
|
@spectrum-web-components/number-field
|
Web component implementation of a Spectrum design NumberField |
Apache-2.0 |
23
greenflagged
/ 390 total
|
|
@spectrum-web-components/opacity-checkerboard
|
— |
— |
23
greenflagged
/ 269 total
|
|
@spectrum-web-components/overlay
|
— |
— |
17
greenflagged
/ 479 total
|
|
@spectrum-web-components/picker
|
— |
— |
22
greenflagged
/ 439 total
|
|
@spectrum-web-components/picker-button
|
Web component implementation of a Spectrum design PickerButton |
Apache-2.0 |
23
greenflagged
/ 332 total
|
|
@spectrum-web-components/popover
|
— |
— |
13
greenflagged
/ 485 total
|
|
@spectrum-web-components/progress-bar
|
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. |
Apache-2.0 |
17
greenflagged
/ 415 total
|
|
@spectrum-web-components/progress-circle
|
— |
— |
17
greenflagged
/ 401 total
|
|
@spectrum-web-components/radio
|
`<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. |
Apache-2.0 |
17
greenflagged
/ 456 total
|
|
@spectrum-web-components/reactive-controllers
|
— |
— |
23
greenflagged
/ 340 total
|
|
@spectrum-web-components/search
|
The `<sp-search>` element is used for searching and filtering items. |
Apache-2.0 |
23
greenflagged
/ 467 total
|
|
@spectrum-web-components/shared
|
— |
— |
17
greenflagged
/ 439 total
|
|
@spectrum-web-components/sidenav
|
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 |
Apache-2.0 |
17
greenflagged
/ 456 total
|
|
@spectrum-web-components/slider
|
`<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. |
Apache-2.0 |
12
greenflagged
/ 473 total
|
|
@spectrum-web-components/split-view
|
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 |
Apache-2.0 |
23
greenflagged
/ 401 total
|
|
@spectrum-web-components/status-light
|
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. |
Apache-2.0 |
19
greenflagged
/ 431 total
|
|
@spectrum-web-components/story-decorator
|
[](https://www.npmjs.com/package/@spectrum-web-components/story-decorator) [ an option, instead of selecting. |
Apache-2.0 |
13
greenflagged
/ 467 total
|
|
@spectrum-web-components/table
|
Web component implementation of a Spectrum design Table |
Apache-2.0 |
17
greenflagged
/ 342 total
|
|
@spectrum-web-components/tabs
|
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- |
Apache-2.0 |
17
greenflagged
/ 443 total
|
|
@spectrum-web-components/tags
|
Web component implementation of a Spectrum design Tags |
Apache-2.0 |
17
greenflagged
/ 449 total
|
|
@spectrum-web-components/textfield
|
— |
— |
23
greenflagged
/ 466 total
|
|
@spectrum-web-components/theme
|
`<sp-theme>` provides Spectrum design tokens (CSS custom properties) to everything in its DOM scope. Components inside a theme use these tokens to render correctly. The element itself does not visually “apply” styles to your app; it exposes the tokens so |
ISC |
9
greenflagged
/ 453 total
|
|
@spectrum-web-components/thumbnail
|
An `sp-thumbnail` can be used in a variety of locations as a way to display a preview of an image, layer, or effect. |
Apache-2.0 |
11
greenflagged
/ 399 total
|
|
@spectrum-web-components/toast
|
`<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. |
Apache-2.0 |
17
greenflagged
/ 461 total
|
|
@spectrum-web-components/tooltip
|
`<sp-tooltip>` allow users to get contextual help or information about specific components when hovering or focusing on them. |
Apache-2.0 |
17
greenflagged
/ 482 total
|
|
@spectrum-web-components/top-nav
|
`<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 |
Apache-2.0 |
20
greenflagged
/ 435 total
|
|
@spectrum-web-components/tray
|
Web component implementation of a Spectrum design Tray |
Apache-2.0 |
12
greenflagged
/ 383 total
|
|
@spectrum-web-components/truncated
|
— |
— |
23
greenflagged
/ 252 total
|
|
@spectrum-web-components/underlay
|
— |
— |
17
greenflagged
/ 418 total
|
|
@spectrum-web-components/vrt-compare
|
[](https://www.npmjs.com/package/@spectrum-web-components/vrt-compare) [![How big is this package in your project?](https://img.shields.io/bundlephobia |
Apache-2.0 |
16
greenflagged
/ 395 total
|