diff --git a/.circleci/config.yml b/.circleci/config.yml
index 085fdd0a07..00a4f1f04e 100644
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@@ -9,7 +9,7 @@ executors:
 parameters:
     current_golden_images_hash:
         type: string
-        default: 9586195fb1990d52099696881c1e0ae6a98762fc
+        default: ac5d05ad1177d733d638fd7a0e8606820e863ab5
 commands:
     downstream:
         steps:
diff --git a/packages/badge/.npmignore b/packages/badge/.npmignore
new file mode 100644
index 0000000000..c50cbe188c
--- /dev/null
+++ b/packages/badge/.npmignore
@@ -0,0 +1,2 @@
+stories
+test
\ No newline at end of file
diff --git a/packages/badge/README.md b/packages/badge/README.md
new file mode 100644
index 0000000000..fc5864055d
--- /dev/null
+++ b/packages/badge/README.md
@@ -0,0 +1,113 @@
+## Description
+
+`<sp-badge>` elements display a small amount of color-categorized metadata. They're ideal for getting a user's attention.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/badge?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/badge)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/badge?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/badge)
+
+```
+yarn add @spectrum-web-components/badge
+```
+
+Import the side effectful registration of `<sp-badge>` via:
+
+```
+import '@spectrum-web-components/badge/sp-badge.js';
+```
+
+When looking to leverage the `Badge` base class as a type and/or for extension purposes, do so via:
+
+```
+import { Badge } from '@spectrum-web-components/badge';
+```
+
+## Sizes
+
+<sp-tabs selected="m" auto label="Size Attribute Options">
+<sp-tab value="s">Small</sp-tab>
+<sp-tab-panel value="s">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="s">Label</sp-badge>
+    <sp-badge size="s">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="m">Medium</sp-tab>
+<sp-tab-panel value="m">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="m">Label</sp-badge>
+    <sp-badge size="m">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="l">Large</sp-tab>
+<sp-tab-panel value="l">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="l">Label</sp-badge>
+    <sp-badge size="l">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+<sp-tab value="xl">Extra Large</sp-tab>
+<sp-tab-panel value="xl">
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge size="xl">Label</sp-badge>
+    <sp-badge size="xl">
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+</div>
+```
+
+</sp-tab-panel>
+</sp-tabs>
+
+## Variants
+
+The `<sp-badge>` can the customized with either semantic or non-semantic variants.
+
+### Semantic
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge variant="neutral">Neutral</sp-badge>
+    <sp-badge variant="informative">Informative</sp-badge>
+    <sp-badge variant="positive">Positive</sp-badge>
+    <sp-badge variant="negative">Negative</sp-badge>
+</div>
+```
+
+### Non-Semantic
+
+```html demo
+<div style="display: flex; gap: var(--spectrum-global-dimension-size-50);">
+    <sp-badge variant="fuchsia">Fuchsia</sp-badge>
+    <sp-badge variant="indigo">Indigo</sp-badge>
+    <sp-badge variant="magenta">Magenta</sp-badge>
+    <sp-badge variant="purple">Purple</sp-badge>
+    <sp-badge variant="seafoam">Seafoam</sp-badge>
+    <sp-badge variant="yellow">Yellow</sp-badge>
+</div>
+```
diff --git a/packages/badge/package.json b/packages/badge/package.json
new file mode 100644
index 0000000000..7c39ee15ec
--- /dev/null
+++ b/packages/badge/package.json
@@ -0,0 +1,59 @@
+{
+    "name": "@spectrum-web-components/badge",
+    "version": "0.0.1",
+    "publishConfig": {
+        "access": "public"
+    },
+    "description": "Web component implementation of a Spectrum design Badge",
+    "license": "Apache-2.0",
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/badge"
+    },
+    "author": "",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/badge",
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        ".": "./src/index.js",
+        "./src/*": "./src/*.js",
+        "./package.json": "./package.json",
+        "./sp-badge": "./sp-badge.js",
+        "./sp-badge.js": "./sp-badge.js"
+    },
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "files": [
+        "**/*.d.ts",
+        "**/*.js",
+        "**/*.js.map",
+        "custom-elements.json",
+        "!stories/",
+        "!test/"
+    ],
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "dependencies": {
+        "@spectrum-web-components/base": "^0.5.6",
+        "@spectrum-web-components/shared": "^0.14.1",
+        "tslib": "^2.0.0"
+    },
+    "devDependencies": {
+        "@spectrum-css/badge": "^1.0.18"
+    },
+    "types": "./src/index.d.ts",
+    "customElementsManifest": "custom-elements.json",
+    "sideEffects": [
+        "./sp-*.js"
+    ]
+}
diff --git a/packages/badge/sp-badge.ts b/packages/badge/sp-badge.ts
new file mode 100644
index 0000000000..14aaea98fc
--- /dev/null
+++ b/packages/badge/sp-badge.ts
@@ -0,0 +1,21 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { Badge } from './src/Badge.js';
+
+customElements.define('sp-badge', Badge);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-badge': Badge;
+    }
+}
diff --git a/packages/badge/src/Badge.ts b/packages/badge/src/Badge.ts
new file mode 100644
index 0000000000..d913eda8ed
--- /dev/null
+++ b/packages/badge/src/Badge.ts
@@ -0,0 +1,61 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import {
+    CSSResultArray,
+    html,
+    SizedMixin,
+    SpectrumElement,
+    TemplateResult,
+} from '@spectrum-web-components/base';
+import { property } from '@spectrum-web-components/base/src/decorators.js';
+
+import { ObserveSlotText } from '@spectrum-web-components/shared/src/observe-slot-text.js';
+import styles from './badge.css.js';
+
+export const BADGE_VARIANTS = [
+    'neutral',
+    'informative',
+    'positive',
+    'negative',
+    'fuchsia',
+    'indigo',
+    'magenta',
+    'purple',
+    'seafoam',
+    'yellow',
+] as const;
+export type BadgeVariant = typeof BADGE_VARIANTS[number];
+
+/**
+ * @element sp-badge
+ *
+ * @slot - Text label of the badge
+ * @slot icon - Optional icon that appears to the left of the label
+ */
+export class Badge extends SizedMixin(ObserveSlotText(SpectrumElement, '')) {
+    public static get styles(): CSSResultArray {
+        return [styles];
+    }
+
+    @property({ type: String, reflect: true })
+    public variant: BadgeVariant = 'informative';
+
+    protected render(): TemplateResult {
+        return html`
+            <slot name="icon" ?icon-only=${!this.slotHasContent}></slot>
+            <div id="label">
+                <slot></slot>
+            </div>
+        `;
+    }
+}
diff --git a/packages/badge/src/badge.css b/packages/badge/src/badge.css
new file mode 100644
index 0000000000..718c4375e6
--- /dev/null
+++ b/packages/badge/src/badge.css
@@ -0,0 +1,132 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+@import './spectrum-badge.css';
+
+/* center align icons and text */
+
+:host {
+    display: inline-flex;
+    align-items: center;
+}
+
+/* implement fixed placement styling until Spectrum CSS adds it upstream */
+
+:host([fixed='top']) {
+    --spectrum-badge-neutral-textonly-border-top-left-radius: 0;
+    --spectrum-badge-neutral-textonly-border-top-right-radius: 0;
+}
+
+:host([fixed='right']) {
+    --spectrum-badge-neutral-textonly-border-top-right-radius: 0;
+    --spectrum-badge-neutral-textonly-border-bottom-right-radius: 0;
+}
+
+:host([fixed='bottom']) {
+    --spectrum-badge-neutral-textonly-border-bottom-left-radius: 0;
+    --spectrum-badge-neutral-textonly-border-bottom-right-radius: 0;
+}
+
+:host([fixed='left']) {
+    --spectrum-badge-neutral-textonly-border-top-left-radius: 0;
+    --spectrum-badge-neutral-textonly-border-bottom-left-radius: 0;
+}
+
+/* cascade badge's size to its icon */
+
+:host([size='s']) {
+    --spectrum-icon-tshirt-size-height: var(
+        --spectrum-alias-workflow-icon-size-s
+    );
+    --spectrum-icon-tshirt-size-width: var(
+        --spectrum-alias-workflow-icon-size-s
+    );
+    --spectrum-ui-icon-tshirt-size-height: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-75
+    );
+    --spectrum-ui-icon-tshirt-size-width: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-75
+    );
+}
+
+:host([size='m']) {
+    --spectrum-icon-tshirt-size-height: var(
+        --spectrum-alias-workflow-icon-size-m
+    );
+    --spectrum-icon-tshirt-size-width: var(
+        --spectrum-alias-workflow-icon-size-m
+    );
+    --spectrum-ui-icon-tshirt-size-height: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-100
+    );
+    --spectrum-ui-icon-tshirt-size-width: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-100
+    );
+}
+
+:host([size='l']) {
+    --spectrum-icon-tshirt-size-height: var(
+        --spectrum-alias-workflow-icon-size-l
+    );
+    --spectrum-icon-tshirt-size-width: var(
+        --spectrum-alias-workflow-icon-size-l
+    );
+    --spectrum-ui-icon-tshirt-size-height: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-200
+    );
+    --spectrum-ui-icon-tshirt-size-width: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-200
+    );
+}
+
+:host([size='xl']) {
+    --spectrum-icon-tshirt-size-height: var(
+        --spectrum-alias-workflow-icon-size-xl
+    );
+    --spectrum-icon-tshirt-size-width: var(
+        --spectrum-alias-workflow-icon-size-xl
+    );
+    --spectrum-ui-icon-tshirt-size-height: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-300
+    );
+    --spectrum-ui-icon-tshirt-size-width: var(
+        --spectrum-alias-ui-icon-cornertriangle-size-300
+    );
+}
+
+/* don't shrink icons and ensure they're separated from labels */
+
+::slotted([slot='icon']) {
+    flex-shrink: 0;
+    margin-right: calc(var(--spectrum-badge-neutral-textonly-padding-left) / 2);
+}
+
+slot[icon-only]::slotted([slot='icon']) {
+    margin-right: calc(
+        var(--spectrum-badge-neutral-textonly-text-padding-bottom) -
+            var(--spectrum-badge-neutral-textonly-padding-left)
+    );
+    margin-left: calc(
+        var(--spectrum-badge-neutral-textonly-text-padding-bottom) -
+            var(--spectrum-badge-neutral-textonly-padding-left)
+    );
+}
+
+/* limit badge size to two lines */
+
+#label {
+    max-height: calc(
+        var(--spectrum-badge-neutral-textonly-text-line-height) *
+            var(--spectrum-badge-neutral-textonly-text-size) * 2
+    );
+    overflow: hidden;
+}
diff --git a/packages/badge/src/index.ts b/packages/badge/src/index.ts
new file mode 100644
index 0000000000..5c1376d9c2
--- /dev/null
+++ b/packages/badge/src/index.ts
@@ -0,0 +1,13 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+export * from './Badge.js';
diff --git a/packages/badge/src/spectrum-badge.css b/packages/badge/src/spectrum-badge.css
new file mode 100644
index 0000000000..7b838805cd
--- /dev/null
+++ b/packages/badge/src/spectrum-badge.css
@@ -0,0 +1,392 @@
+/*
+Copyright 2022 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+/* THIS FILE IS MACHINE GENERATED. DO NOT EDIT */
+:host([size='s']) {
+    --spectrum-badge-neutral-textonly-text-padding-bottom: var(
+        --spectrum-badge-s-neutral-textonly-text-padding-bottom
+    ); /* .spectrum-Badge--sizeS */
+    --spectrum-badge-neutral-textonly-text-size: var(
+        --spectrum-badge-s-neutral-textonly-text-size,
+        var(--spectrum-global-dimension-font-size-75)
+    );
+    --spectrum-badge-neutral-textonly-text-padding-top: var(
+        --spectrum-badge-s-neutral-textonly-text-padding-top,
+        var(--spectrum-global-dimension-static-size-50)
+    );
+    --spectrum-badge-neutral-textonly-text-line-height: var(
+        --spectrum-badge-s-neutral-textonly-text-line-height,
+        var(--spectrum-alias-component-text-line-height)
+    );
+    --spectrum-badge-neutral-textonly-border-top-left-radius: var(
+        --spectrum-badge-s-neutral-textonly-border-top-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-top-right-radius: var(
+        --spectrum-badge-s-neutral-textonly-border-top-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(
+        --spectrum-badge-s-neutral-textonly-border-bottom-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(
+        --spectrum-badge-s-neutral-textonly-border-bottom-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-padding-right: var(
+        --spectrum-badge-s-neutral-textonly-padding-right,
+        var(--spectrum-global-dimension-size-115)
+    );
+    --spectrum-badge-neutral-textonly-padding-left: var(
+        --spectrum-badge-s-neutral-textonly-padding-left,
+        var(--spectrum-global-dimension-size-115)
+    );
+}
+:host([size='m']) {
+    --spectrum-badge-neutral-textonly-text-size: var(
+        --spectrum-badge-m-neutral-textonly-text-size,
+        var(--spectrum-global-dimension-font-size-100)
+    ); /* .spectrum-Badge--sizeM */
+    --spectrum-badge-neutral-textonly-text-padding-top: var(
+        --spectrum-badge-m-neutral-textonly-text-padding-top,
+        var(--spectrum-global-dimension-size-75)
+    );
+    --spectrum-badge-neutral-textonly-text-padding-bottom: var(
+        --spectrum-badge-m-neutral-textonly-text-padding-bottom,
+        var(--spectrum-global-dimension-size-115)
+    );
+    --spectrum-badge-neutral-textonly-text-line-height: var(
+        --spectrum-badge-m-neutral-textonly-text-line-height,
+        var(--spectrum-alias-component-text-line-height)
+    );
+    --spectrum-badge-neutral-textonly-border-top-left-radius: var(
+        --spectrum-badge-m-neutral-textonly-border-top-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-top-right-radius: var(
+        --spectrum-badge-m-neutral-textonly-border-top-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(
+        --spectrum-badge-m-neutral-textonly-border-bottom-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(
+        --spectrum-badge-m-neutral-textonly-border-bottom-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-padding-right: var(
+        --spectrum-badge-m-neutral-textonly-padding-right,
+        var(--spectrum-global-dimension-size-150)
+    );
+    --spectrum-badge-neutral-textonly-padding-left: var(
+        --spectrum-badge-m-neutral-textonly-padding-left,
+        var(--spectrum-global-dimension-size-150)
+    );
+}
+:host([size='l']) {
+    --spectrum-badge-neutral-textonly-text-padding-top: var(
+        --spectrum-badge-l-neutral-textonly-text-padding-top
+    ); /* .spectrum-Badge--sizeL */
+    --spectrum-badge-neutral-textonly-text-size: var(
+        --spectrum-badge-l-neutral-textonly-text-size,
+        var(--spectrum-global-dimension-font-size-200)
+    );
+    --spectrum-badge-neutral-textonly-text-padding-bottom: var(
+        --spectrum-badge-l-neutral-textonly-text-padding-bottom,
+        var(--spectrum-global-dimension-size-130)
+    );
+    --spectrum-badge-neutral-textonly-text-line-height: var(
+        --spectrum-badge-l-neutral-textonly-text-line-height,
+        var(--spectrum-alias-component-text-line-height)
+    );
+    --spectrum-badge-neutral-textonly-border-top-left-radius: var(
+        --spectrum-badge-l-neutral-textonly-border-top-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-top-right-radius: var(
+        --spectrum-badge-l-neutral-textonly-border-top-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(
+        --spectrum-badge-l-neutral-textonly-border-bottom-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(
+        --spectrum-badge-l-neutral-textonly-border-bottom-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-padding-right: var(
+        --spectrum-badge-l-neutral-textonly-padding-right,
+        var(--spectrum-global-dimension-size-185)
+    );
+    --spectrum-badge-neutral-textonly-padding-left: var(
+        --spectrum-badge-l-neutral-textonly-padding-left,
+        var(--spectrum-global-dimension-size-185)
+    );
+}
+:host([size='xl']) {
+    --spectrum-badge-neutral-textonly-text-size: var(
+        --spectrum-badge-xl-neutral-textonly-text-size,
+        var(--spectrum-global-dimension-font-size-300)
+    ); /* .spectrum-Badge--sizeXL */
+    --spectrum-badge-neutral-textonly-text-padding-top: var(
+        --spectrum-badge-xl-neutral-textonly-text-padding-top,
+        var(--spectrum-global-dimension-size-150)
+    );
+    --spectrum-badge-neutral-textonly-text-padding-bottom: var(
+        --spectrum-badge-xl-neutral-textonly-text-padding-bottom,
+        var(--spectrum-global-dimension-size-175)
+    );
+    --spectrum-badge-neutral-textonly-text-line-height: var(
+        --spectrum-badge-xl-neutral-textonly-text-line-height,
+        var(--spectrum-alias-component-text-line-height)
+    );
+    --spectrum-badge-neutral-textonly-border-top-left-radius: var(
+        --spectrum-badge-xl-neutral-textonly-border-top-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-top-right-radius: var(
+        --spectrum-badge-xl-neutral-textonly-border-top-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-right-radius: var(
+        --spectrum-badge-xl-neutral-textonly-border-bottom-right-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-border-bottom-left-radius: var(
+        --spectrum-badge-xl-neutral-textonly-border-bottom-left-radius,
+        var(--spectrum-alias-border-radius-regular)
+    );
+    --spectrum-badge-neutral-textonly-padding-right: var(
+        --spectrum-badge-xl-neutral-textonly-padding-right,
+        var(--spectrum-global-dimension-size-225)
+    );
+    --spectrum-badge-neutral-textonly-padding-left: var(
+        --spectrum-badge-xl-neutral-textonly-padding-left,
+        var(--spectrum-global-dimension-size-225)
+    );
+}
+:host([dir='ltr']) {
+    padding-left: var(
+        --spectrum-badge-neutral-textonly-padding-right
+    ); /* [dir=ltr] .spectrum-Badge */
+    padding-right: var(--spectrum-badge-neutral-textonly-padding-left);
+}
+:host([dir='rtl']) {
+    padding-left: var(--spectrum-badge-neutral-textonly-padding-left);
+    padding-right: var(
+        --spectrum-badge-neutral-textonly-padding-right
+    ); /* [dir=rtl] .spectrum-Badge */
+}
+:host {
+    -webkit-font-smoothing: subpixel-antialiased;
+    -moz-osx-font-smoothing: auto;
+    font-smoothing: subpixel-antialiased;
+    border-radius: var(--spectrum-badge-neutral-textonly-border-top-left-radius)
+        var(--spectrum-badge-neutral-textonly-border-top-right-radius)
+        var(--spectrum-badge-neutral-textonly-border-bottom-right-radius)
+        var(--spectrum-badge-neutral-textonly-border-bottom-left-radius);
+    cursor: default;
+    display: inline-block; /* .spectrum-Badge */
+    font-size: var(--spectrum-badge-neutral-textonly-text-size);
+    line-height: var(--spectrum-badge-neutral-textonly-text-line-height);
+    padding-bottom: var(--spectrum-badge-neutral-textonly-text-padding-bottom);
+    padding-top: var(--spectrum-badge-neutral-textonly-text-padding-top);
+    position: relative;
+    width: auto;
+}
+:host([variant='neutral']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-neutral-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--neutral */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-neutral-textonly-background-color,
+        var(--spectrum-semantic-neutral-background-color-default)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-neutral-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-neutral-textonly-background-color-hover,
+        var(--spectrum-semantic-neutral-background-color-hover)
+    );
+}
+:host([variant='informative']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-informative-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--informative */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-informative-textonly-background-color,
+        var(--spectrum-semantic-informative-background-color-default)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-informative-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-informative-textonly-background-color-hover,
+        var(--spectrum-semantic-informative-background-color-hover)
+    );
+}
+:host([variant='positive']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-positive-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--positive */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-positive-textonly-background-color,
+        var(--spectrum-semantic-positive-background-color-default)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-positive-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-positive-textonly-background-color-hover,
+        var(--spectrum-semantic-positive-background-color-hover)
+    );
+}
+:host([variant='negative']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-negative-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--negative */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-negative-textonly-background-color,
+        var(--spectrum-semantic-negative-background-color-default)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-negative-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-negative-textonly-background-color-hover,
+        var(--spectrum-semantic-negative-background-color-hover)
+    );
+}
+:host([variant='fuchsia']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-fuchsia-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--fuchsia */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-fuchsia-textonly-background-color,
+        var(--spectrum-global-color-static-fuchsia-600)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-fuchsia-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-fuchsia-textonly-background-color-hover,
+        var(--spectrum-global-color-static-fuchsia-700)
+    );
+}
+:host([variant='indigo']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-indigo-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--indigo */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-indigo-textonly-background-color,
+        var(--spectrum-global-color-static-indigo-600)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-indigo-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-indigo-textonly-background-color-hover,
+        var(--spectrum-global-color-static-indigo-700)
+    );
+}
+:host([variant='magenta']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-magenta-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--magenta */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-magenta-textonly-background-color,
+        var(--spectrum-global-color-static-magenta-600)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-magenta-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-magenta-textonly-background-color-hover,
+        var(--spectrum-global-color-static-magenta-700)
+    );
+}
+:host([variant='purple']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-purple-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--purple */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-purple-textonly-background-color,
+        var(--spectrum-global-color-static-purple-600)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-purple-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-purple-textonly-background-color-hover,
+        var(--spectrum-global-color-static-purple-700)
+    );
+}
+:host([variant='seafoam']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-seafoam-texticon-text-color,
+        var(--spectrum-global-color-static-white)
+    ); /* .spectrum-Badge--seafoam */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-seafoam-textonly-background-color,
+        var(--spectrum-global-color-static-seafoam-600)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-seafoam-textonly-text-color-hover,
+        var(--spectrum-global-color-static-white)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-seafoam-textonly-background-color-hover,
+        var(--spectrum-global-color-static-seafoam-700)
+    );
+}
+:host([variant='yellow']) {
+    --spectrum-badge-m-texticon-text-color: var(
+        --spectrum-badge-m-yellow-texticon-text-color,
+        var(--spectrum-global-color-static-black)
+    ); /* .spectrum-Badge--yellow */
+    --spectrum-badge-m-textonly-background-color: var(
+        --spectrum-badge-m-yellow-textonly-background-color,
+        var(--spectrum-alias-background-color-yellow-default)
+    );
+    --spectrum-badge-m-textonly-text-color-hover: var(
+        --spectrum-badge-m-yellow-textonly-text-color-hover,
+        var(--spectrum-global-color-static-black)
+    );
+    --spectrum-badge-m-textonly-background-color-hover: var(
+        --spectrum-badge-m-yellow-textonly-background-color-hover,
+        var(--spectrum-alias-background-color-yellow-hover)
+    );
+}
+:host {
+    background-color: var(--spectrum-badge-m-textonly-background-color);
+    color: var(--spectrum-badge-m-texticon-text-color); /* .spectrum-Badge */
+}
diff --git a/packages/badge/src/spectrum-config.js b/packages/badge/src/spectrum-config.js
new file mode 100644
index 0000000000..a15a282b1c
--- /dev/null
+++ b/packages/badge/src/spectrum-config.js
@@ -0,0 +1,69 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+const config = {
+    spectrum: 'badge',
+    components: [
+        {
+            name: 'badge',
+            host: {
+                selector: '.spectrum-Badge',
+            },
+            attributes: [
+                {
+                    type: 'enum',
+                    name: 'size',
+                    values: [
+                        {
+                            name: 's',
+                            selector: '.spectrum-Badge--sizeS',
+                        },
+                        {
+                            name: 'm',
+                            selector: '.spectrum-Badge--sizeM',
+                        },
+                        {
+                            name: 'l',
+                            selector: '.spectrum-Badge--sizeL',
+                        },
+                        {
+                            name: 'xl',
+                            selector: '.spectrum-Badge--sizeXL',
+                        },
+                    ],
+                },
+                {
+                    type: 'enum',
+                    name: 'variant',
+                    values: [
+                        // semantic
+                        '.spectrum-Badge--positive',
+                        '.spectrum-Badge--informative',
+                        '.spectrum-Badge--negative',
+                        '.spectrum-Badge--neutral',
+                        // non-semantic
+                        '.spectrum-Badge--seafoam',
+                        '.spectrum-Badge--indigo',
+                        '.spectrum-Badge--purple',
+                        '.spectrum-Badge--fuchsia',
+                        '.spectrum-Badge--magenta',
+                        '.spectrum-Badge--yellow',
+                    ],
+                },
+            ],
+            /* disable :hover until Spectrum CSS disables hover upstream */
+            exclude: [/\:hover/],
+        },
+    ],
+};
+
+export default config;
diff --git a/packages/badge/stories/badge.stories.ts b/packages/badge/stories/badge.stories.ts
new file mode 100644
index 0000000000..1c2bc8f960
--- /dev/null
+++ b/packages/badge/stories/badge.stories.ts
@@ -0,0 +1,146 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import '../sp-badge.js';
+import { html, TemplateResult } from '@spectrum-web-components/base';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
+
+export default {
+    title: 'Badge',
+    component: 'sp-badge',
+};
+
+export const Default = (): TemplateResult => {
+    return html`
+        <sp-badge>Badge</sp-badge>
+    `;
+};
+
+export const Icons = (): TemplateResult => {
+    return html`
+        <sp-badge>No icon</sp-badge>
+
+        <sp-badge>
+            <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+            Icon and label
+        </sp-badge>
+
+        <sp-badge>
+            <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        </sp-badge>
+    `;
+};
+
+export const Sizes = (): TemplateResult => {
+    return html`
+        <div style="display: flex; align-items: center; gap: 8px;">
+            <sp-badge size="s">
+                <sp-icon-checkmark-circle
+                    slot="icon"
+                ></sp-icon-checkmark-circle>
+                Small
+            </sp-badge>
+            <sp-badge size="m">
+                <sp-icon-checkmark-circle
+                    slot="icon"
+                ></sp-icon-checkmark-circle>
+                Medium
+            </sp-badge>
+            <sp-badge size="l">
+                <sp-icon-checkmark-circle
+                    slot="icon"
+                ></sp-icon-checkmark-circle>
+                Large
+            </sp-badge>
+            <sp-badge size="xl">
+                <sp-icon-checkmark-circle
+                    slot="icon"
+                ></sp-icon-checkmark-circle>
+                Extra-large
+            </sp-badge>
+            <sp-badge style="max-width: 180px">
+                <sp-icon-checkmark-circle
+                    slot="icon"
+                ></sp-icon-checkmark-circle>
+                This long content automatically wraps, but shows no more than
+                two lines
+            </sp-badge>
+        </div>
+    `;
+};
+
+export const Semantic = (): TemplateResult => {
+    return html`
+        <sp-badge variant="positive">Positive</sp-badge>
+        <sp-badge variant="informative">Informative</sp-badge>
+        <sp-badge variant="negative">Negative</sp-badge>
+        <sp-badge variant="neutral">Neutral</sp-badge>
+    `;
+};
+
+export const NonSemantic = (): TemplateResult => {
+    return html`
+        <sp-badge variant="seafoam">Seafoam</sp-badge>
+        <sp-badge variant="indigo">Indigo</sp-badge>
+        <sp-badge variant="purple">Purple</sp-badge>
+        <sp-badge variant="fuchsia">Fuchsia</sp-badge>
+        <sp-badge variant="magenta">Magenta</sp-badge>
+        <sp-badge variant="yellow">Yellow</sp-badge>
+    `;
+};
+
+export const Inline = (): TemplateResult => {
+    return html`
+        Badge is a simple
+        <sp-badge variant="positive" size="s">inline</sp-badge>
+        element that should
+        <sp-badge variant="magenta" size="s">flow</sp-badge>
+        with the rest of the page:
+        <sp-badge variant="negative">Missing</sp-badge>
+        <sp-badge variant="positive">Successful</sp-badge>
+        <sp-badge variant="purple">Purple</sp-badge>
+    `;
+};
+
+export const Fixed = (): TemplateResult => {
+    return html`
+        <div
+            style="position: relative; width: 400px; height: 200px; background: #eee"
+        >
+            <sp-badge>None</sp-badge>
+            <sp-badge
+                fixed="top"
+                style="position: absolute; top: 0; left: 200px;"
+            >
+                Top
+            </sp-badge>
+            <sp-badge
+                fixed="right"
+                style="position: absolute; right: 0; top: 100px;"
+            >
+                Right
+            </sp-badge>
+            <sp-badge
+                fixed="bottom"
+                style="position: absolute; bottom: 0; left: 200px;"
+            >
+                Bottom
+            </sp-badge>
+            <sp-badge
+                fixed="left"
+                style="position: absolute; left: 0; top: 100px;"
+            >
+                Left
+            </sp-badge>
+        </div>
+    `;
+};
diff --git a/packages/badge/test/badge.test.ts b/packages/badge/test/badge.test.ts
new file mode 100644
index 0000000000..8961808a00
--- /dev/null
+++ b/packages/badge/test/badge.test.ts
@@ -0,0 +1,36 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
+
+import '../sp-badge.js';
+import '../../icons-workflow/icons/sp-icon-checkmark-circle.js';
+import { Badge } from '../src/Badge.js';
+
+describe('Badge', () => {
+    it('loads default badge accessibly', async () => {
+        const el = await fixture<Badge>(
+            html`
+                <sp-badge>
+                    <sp-icon-checkmark-circle
+                        slot="icon"
+                    ></sp-icon-checkmark-circle>
+                    Icon and label
+                </sp-badge>
+            `
+        );
+
+        await elementUpdated(el);
+
+        await expect(el).to.be.accessible();
+    });
+});
diff --git a/packages/badge/test/benchmark/basic-test.ts b/packages/badge/test/benchmark/basic-test.ts
new file mode 100644
index 0000000000..fa0f2587fa
--- /dev/null
+++ b/packages/badge/test/benchmark/basic-test.ts
@@ -0,0 +1,23 @@
+/*
+Copyright 2020 Adobe. All rights reserved.
+This file is licensed to you under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License. You may obtain a copy
+of the License at http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software distributed under
+the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+OF ANY KIND, either express or implied. See the License for the specific language
+governing permissions and limitations under the License.
+*/
+
+import '@spectrum-web-components/badge/sp-badge.js';
+import '@spectrum-web-components/icons-workflow/icons/sp-icon-checkmark-circle.js';
+import { html } from '@spectrum-web-components/base';
+import { measureFixtureCreation } from '../../../../test/benchmark/helpers.js';
+
+measureFixtureCreation(html`
+    <sp-badge>
+        <sp-icon-checkmark-circle slot="icon"></sp-icon-checkmark-circle>
+        Icon and label
+    </sp-badge>
+`);
diff --git a/packages/badge/tsconfig.json b/packages/badge/tsconfig.json
new file mode 100644
index 0000000000..75919f9078
--- /dev/null
+++ b/packages/badge/tsconfig.json
@@ -0,0 +1,10 @@
+{
+    "extends": "../../tsconfig.json",
+    "compilerOptions": {
+        "composite": true,
+        "rootDir": "./"
+    },
+    "include": ["*.ts", "src/*.ts"],
+    "exclude": ["test/*.ts", "stories/*.ts"],
+    "references": [{ "path": "../base" }]
+}
diff --git a/packages/bundle/elements.ts b/packages/bundle/elements.ts
index 2664f9b4e1..53d271975e 100644
--- a/packages/bundle/elements.ts
+++ b/packages/bundle/elements.ts
@@ -17,6 +17,7 @@ import '@spectrum-web-components/action-group/sp-action-group.js';
 import '@spectrum-web-components/action-menu/sp-action-menu.js';
 import '@spectrum-web-components/asset/sp-asset.js';
 import '@spectrum-web-components/avatar/sp-avatar.js';
+import '@spectrum-web-components/badge/sp-badge.js';
 import '@spectrum-web-components/banner/sp-banner.js';
 import '@spectrum-web-components/button/sp-button.js';
 import '@spectrum-web-components/button/sp-clear-button.js';
diff --git a/packages/bundle/package.json b/packages/bundle/package.json
index b1368753fa..ccab48ce48 100644
--- a/packages/bundle/package.json
+++ b/packages/bundle/package.json
@@ -53,6 +53,7 @@
         "@spectrum-web-components/action-menu": "^0.13.13",
         "@spectrum-web-components/asset": "^0.6.7",
         "@spectrum-web-components/avatar": "^0.9.7",
+        "@spectrum-web-components/badge": "^0.0.1",
         "@spectrum-web-components/banner": "^0.8.3",
         "@spectrum-web-components/button": "^0.17.4",
         "@spectrum-web-components/button-group": "^0.8.7",
diff --git a/packages/bundle/src/index.ts b/packages/bundle/src/index.ts
index ba8340d1ff..5939401643 100644
--- a/packages/bundle/src/index.ts
+++ b/packages/bundle/src/index.ts
@@ -16,6 +16,7 @@ export * from '@spectrum-web-components/action-group';
 export * from '@spectrum-web-components/action-menu';
 export * from '@spectrum-web-components/avatar';
 export * from '@spectrum-web-components/asset';
+export * from '@spectrum-web-components/badge';
 export * from '@spectrum-web-components/banner';
 export * from '@spectrum-web-components/button';
 export * from '@spectrum-web-components/button-group';
diff --git a/packages/bundle/tsconfig.json b/packages/bundle/tsconfig.json
index 245ee2d311..db106b6c27 100644
--- a/packages/bundle/tsconfig.json
+++ b/packages/bundle/tsconfig.json
@@ -14,6 +14,7 @@
         { "path": "../action-menu" },
         { "path": "../asset" },
         { "path": "../avatar" },
+        { "path": "../badge" },
         { "path": "../banner" },
         { "path": "../button" },
         { "path": "../button-group" },
diff --git a/yarn.lock b/yarn.lock
index a21a496ffe..310b0c0839 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3831,6 +3831,11 @@
   resolved "https://registry.yarnpkg.com/@spectrum-css/avatar/-/avatar-5.0.16.tgz#0e44cfc2c928988c3c694b31b4ce2f0dfa689ad2"
   integrity sha512-0YXLOc0o5TYVG5qywFufViKaq9TPFUpu19g2i/H4vEj8VxmBdx/uEzaMmAXtgIgWfSetmCORu4sXmcxTRN8vHQ==
 
+"@spectrum-css/badge@^1.0.18":
+  version "1.0.18"
+  resolved "https://registry.yarnpkg.com/@spectrum-css/badge/-/badge-1.0.18.tgz#19333f648287ea552bd81a1c99e9f417a0c311a5"
+  integrity sha512-cyKbWe9j4cEWS/OWlhl5Zi6+Pcb9jj/iZbT5U60v67DPTLVYY1J8NspR0b2n2PvAthYiQe+i8bIprARHS5YTLw==
+
 "@spectrum-css/banner@3.0.0-beta.2":
   version "3.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/@spectrum-css/banner/-/banner-3.0.0-beta.2.tgz#df448a3dcb8ac63448bd628843a2895cec305780"