Search results

377 packages found

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

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

`<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

published 0.42.5 3 days ago
M
Q
P

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. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various a

published 0.42.5 3 days ago
M
Q
P

`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

published 0.42.5 3 days ago
M
Q
P

ReactiveControllers for powering common UI patterns

published 0.42.5 3 days ago
M
Q
P

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.

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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>`. Often a `<sp-menu>` element will appear in a `<sp-popover>` element so that it displays as a togg

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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.

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

An `<sp-progress-circle>` shows the progression of a system operation such as downloading, uploading, processing, etc. in a visual way. It can represent determinate or indeterminate progress.

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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

published 0.42.5 3 days ago
M
Q
P

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.

published 0.42.5 3 days ago
M
Q
P