662 packages found
Custom JavaScript <select> component. Easy-to-use, accessible, mobile friendly and super efficient
- select
- custom select
- web component
- customizable
- accessible
- mobile friendly
- select box
- lit
- element
- litelement
- lit-element
- multiple
- multiselect
- dropdown
A LitElement Router (1278 bytes gzip) that uses JavaScript Mixin, Decorators and RegExp.
- lit
- element
- litelement
- router
- routing
- lit-element
- lit-element-router
- authentication
- authorization
- regexp
- decorator
- decorators
- mixin
- mixins
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
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. sp-buttons in Spectrum have several variations for different uses and multiple levels of loudness for various a
`<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
`sp-theme` sets the rendering theme for all child components, and also sets a number of default sizes & colors for any child content. The Spectrum design system provides four color themes (`lightest`, `light`, `dark`, and `darkest`) and two different scal
Pega branded icon system.
A LitElement Router (1278 bytes gzip) that uses JavaScript Mixin, Decorators and RegExp.
- lit
- element
- litelement
- router
- routing
- lit-element
- lit-element-router
- authentication
- authorization
- regexp
- decorator
- decorators
- mixin
- mixins
An `<sp-action-button>` represents an action a user can take.
Spectrum Web Components are a [`LitElement`](https://lit-element.polymer-project.org) powered web component library of patterns built ontop of the [Spectrum CSS](https://opensource.adobe.com/spectrum-css) specification. Styles for these components are mad
`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-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.
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
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
A LitElement Router (1278 bytes gzip) that uses JavaScript Mixin, Decorators and RegExp.
- lit
- element
- litelement
- router
- routing
- lit-element
- lit-element-router
- authentication
- authorization
- regexp
- decorator
- decorators
- mixin
- mixins
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 HelpText
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
Overlays in Spectrum Web Components are created via the `Overlay` class system, which prepares an "overlay stack" that can manage the deployment of one or more overlays onto a page. Whether it's needed for transient content like a tooltip, for extended in