feat(progress-circle): replace circle-loader with progress-circle

packages/progress-circle/README.md

@@ -0,0 +1,80 @@
+## Description
+
+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.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/progress-circle?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/progress-circle)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/progress-circle?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/progress-circle)
+
+```
+yarn add @spectrum-web-components/progress-circle
+```
+
+Import the side effectful registration of `<sp-progress-circle>` via:
+
+```
+import '@spectrum-web-components/progress-circle/sp-progress-circle.js';
+```
+
+When looking to leverage the `ProgressCircle` base class as a type and/or for extension purposes, do so via:
+
+```
+import { ProgressCircle } from '@spectrum-web-components/progress-circle';
+```
+
+## Variants
+
+### Default
+
+An `<sp-progress-circle>` is used to visually show the progression of a system operation such as downloading, uploading, processing, etc.
+
+```html
+<div
+    style="width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;"
+>
+    <sp-progress-circle progress="71" size="small"></sp-progress-circle>
+    <sp-progress-circle progress="22"></sp-progress-circle>
+    <sp-progress-circle progress="86" size="large"></sp-progress-circle>
+</div>
+```
+
+### Over background
+
+When a loader needs to be placed on top of a colored background, use the over background loader as signified by `[over-background]`. This loader uses a white opaque color no matter the background. Make sure the background offers enough contrast for the loader to be legible.
+
+```html
+<div
+    style="width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;  background-color: rgba(0,0,0,0.4);"
+>
+    <sp-progress-circle
+        progress="42"
+        over-background
+        size="small"
+    ></sp-progress-circle>
+    <sp-progress-circle progress="7" over-background></sp-progress-circle>
+    <sp-progress-circle
+        progress="68"
+        over-background
+        size="large"
+    ></sp-progress-circle>
+</div>
+```
+
+### Indeterminate
+
+A progress circle can be either determinate or indeterminate as signified by `[indeterminate]`. By default, loaders are determinate. Use a determinate loader when progress can be calculated against a specific goal (e.g., downloading a file of a known size). Use an indeterminate loader when progress is happening but the time or effort to completion can’t be determined (e.g., attempting to reconnect to a server).
+
+```html
+<div
+    style="width: 250px; height: 150px; display: flex; align-items: center; justify-content: space-around;"
+>
+    <sp-progress-circle indeterminate size="small"></sp-progress-circle>
+    <sp-progress-circle indeterminate></sp-progress-circle>
+    <sp-progress-circle indeterminate size="large"></sp-progress-circle>
+</div>
+```
+
+### Size
+
+Progress Circles come in 3 sizes: small (`[size="small"]`), medium (default), or large (`[size="large"]`). These are available to fit various contexts. For example, the small loader can be used in place of an icon or in tight spaces, while the large one can be used for full-page loading.

packages/circle-loader/package.json → packages/progress-circle/package.json

@@ -1,36 +1,36 @@
 {
-    "name": "@spectrum-web-components/circle-loader",
+    "name": "@spectrum-web-components/progress-circle",
     "publishConfig": {
         "access": "public"
     },
     "repository": {
         "type": "git",
         "url": "https://github.com/adobe/spectrum-web-components.git",
-        "directory": "packages/circle-loader"
+        "directory": "packages/progress-circle"
     },
     "bugs": {
         "url": "https://github.com/adobe/spectrum-web-components/issues"
     },
-    "homepage": "https://adobe.github.io/spectrum-web-components/components/circle-loader",
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/progress-circle",
     "keywords": [
         "spectrum css",
         "web components",
         "lit-element",
         "lit-html"
     ],
-    "version": "0.5.0",
+    "version": "0.0.1",
     "description": "",
-    "main": "./src/index.js",
-    "module": "./src/index.js",
-    "types": "./src/index.d.ts",
+    "main": "src/index.js",
+    "module": "src/index.js",
     "type": "module",
+    "types": "./src/index.d.ts",
     "exports": {
         ".": "./src/index.js",
         "./src/": "./src/",
         "./custom-elements.json": "./custom-elements.json",
         "./package.json": "./package.json",
-        "./sp-circle-loader": "./sp-circle-loader.js",
-        "./sp-circle-loader.js": "./sp-circle-loader.js"
+        "./sp-progress-circle": "./sp-progress-circle.js",
+        "./sp-progress-circle.js": "./sp-progress-circle.js"
     },
     "files": [
         "custom-elements.json",

packages/circle-loader/sp-circle-loader.ts → packages/progress-circle/sp-progress-circle.ts

@@ -9,12 +9,13 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-import { CircleLoader } from './src/CircleLoader.js';
 
-customElements.define('sp-circle-loader', CircleLoader);
+import { ProgressCircle } from './src/ProgressCircle.js';
+
+customElements.define('sp-progress-circle', ProgressCircle);
 
 declare global {
     interface HTMLElementTagNameMap {
-        'sp-circle-loader': CircleLoader;
+        'sp-progress-circle': ProgressCircle;
     }
 }

packages/circle-loader/src/CircleLoader.ts → packages/progress-circle/src/ProgressCircle.ts

@@ -11,20 +11,23 @@ governing permissions and limitations under the License.
 */
 
 import {
+    html,
+    SpectrumElement,
     CSSResultArray,
     TemplateResult,
-    html,
     property,
-    SpectrumElement,
     PropertyValues,
     ifDefined,
 } from '@spectrum-web-components/base';
 
-import circleLoaderStyles from './circle-loader.css.js';
+import progressCircleStyles from './progress-circle.css.js';
 
-export class CircleLoader extends SpectrumElement {
+/**
+ * @element sp-progress-circle
+ */
+export class ProgressCircle extends SpectrumElement {
     public static get styles(): CSSResultArray {
-        return [circleLoaderStyles];
+        return [progressCircleStyles];
     }
 
     @property({ type: Boolean, reflect: true })

packages/circle-loader/src/index.ts → packages/progress-circle/src/index.ts

@@ -9,4 +9,5 @@ the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTA
 OF ANY KIND, either express or implied. See the License for the specific language
 governing permissions and limitations under the License.
 */
-export * from './CircleLoader.js';
+
+export * from './ProgressCircle.js';

packages/circle-loader/src/circle-loader.css → packages/progress-circle/src/progress-circle.css

@@ -10,4 +10,4 @@ OF ANY KIND, either express or implied. See the License for the specific languag
 governing permissions and limitations under the License.
 */
 
-@import './spectrum-circle-loader.css';
+@import './spectrum-progress-circle.css';

packages/circle-loader/src/spectrum-config.js → packages/progress-circle/src/spectrum-config.js

@@ -1,10 +1,11 @@
 /*
 Copyright 2020 Adobe. All rights reserved.
-This file is licensed to you under the Apache License, Version 2.0 (the 'License');
+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
+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.
 */
@@ -13,8 +14,10 @@ const config = {
     spectrum: 'progresscircle',
     components: [
         {
-            name: 'circle-loader',
-            host: '.spectrum-ProgressCircle',
+            name: 'progress-circle',
+            host: {
+                selector: '.spectrum-ProgressCircle',
+            },
             attributes: [
                 {
                     type: 'boolean',