New Case Study:See how Anthropic automated 95% of dependency reviews with Socket.Learn More
Socket
Sign inDemoInstall
Socket

@spectrum-web-components/banner

Package Overview
Dependencies
Maintainers
5
Versions
204
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@spectrum-web-components/banner - npm Package Compare versions

Comparing version 0.2.6 to 0.2.7-alpha.38

sp-banner.d.ts

29

package.json

@@ -21,15 +21,24 @@ {

],
"version": "0.2.6",
"version": "0.2.7-alpha.38+3926abb2",
"description": "",
"main": "lib/index.js",
"module": "lib/index.js",
"main": "src/index.js",
"module": "src/index.js",
"type": "module",
"exports": {
"./src/": "./src/",
"./custom-elements.json": "./custom-elements.json",
"./package.json": "./package.json",
"./sp-banner": "./sp-banner.js",
"./sp-banner.js": "./sp-banner.js"
},
"files": [
"custom-elements.json",
"/lib/",
"*.d.ts",
"*.js",
"*.js.map",
"/src/"
],
"sideEffects": [
"./lib/index.js",
"./src/index.ts"
"./sp-banner.js",
"./sp-banner.ts"
],

@@ -41,6 +50,2 @@ "scripts": {

"license": "Apache-2.0",
"peerDependencies": {
"lit-element": "^2.1.0",
"lit-html": "^1.0.0"
},
"devDependencies": {

@@ -50,5 +55,7 @@ "@spectrum-css/banner": "^2.0.5"

"dependencies": {
"lit-element": "^2.1.0",
"lit-html": "^1.0.0",
"tslib": "^2.0.0"
},
"gitHead": "16b57d15356859cee73278cdf796274e3245320b"
"gitHead": "3926abb2769a9bab28762bf3b3e1fab7c5f03589"
}
## Description
An **sp-banner** is an additional label an existing component may have. Banners cannot be interacted with. Banners in Spectrum have three variations for different uses as well as the ability to place it overlaid in the top-right corner of a container.
An `<sp-banner>` is an additional label an existing component may have. Banners cannot be interacted with. Banners in Spectrum have three variations for different uses as well as the ability to place it overlaid in the top-right corner of a container.
### Installation
### Usge

@@ -11,9 +11,17 @@ [![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/banner?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/banner)

```
npm install @spectrum-web-components/banner
yarn add @spectrum-web-components/banner
```
# or
Import the side effectful registration of `<sp-banner>` via:
yarn add @spectrum-web-components/banner
```
import '@spectrum-web-components/banner/sp-banner.js';
```
When looking to leverage the `Banner` base class as a type and/or for extension purposes, do so via:
```
import { Banner } from '@spectrum-web-components/banner';
```
## Example

@@ -41,13 +49,2 @@

### Warning banners
Banners intended to provided a warning with a brief description. Less severe than an error banner.
```html
<sp-banner type="warning">
<div slot="header">This is a warning banner</div>
<div slot="content">Be careful!</div>
</sp-banner>
```
### Error banners

@@ -72,3 +69,3 @@

>
<sp-banner type="warning" corner>
<sp-banner corner>
<div slot="header">This banner is in a corner</div>

@@ -75,0 +72,0 @@ <div slot="content">Neat!</div>

@@ -12,15 +12,2 @@ /*

*/
export * from './banner.js';
import { Banner } from './banner.js';
/* istanbul ignore else */
if (!customElements.get('sp-banner')) {
customElements.define('sp-banner', Banner);
}
declare global {
interface HTMLElementTagNameMap {
'sp-banner': Banner;
}
}
export * from './Banner.js';
SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc