feat(color-slider): add color-slider pattern

packages/color-slider/README.md

@@ -0,0 +1,58 @@
+## Description
+
+An `<sp-color-slider>` lets users visually change an individual channel of a color. The background of the `<sp-color-slider>` is a visual representation of the range of values a user can select from. This can represent color properties such as hues, color channel values (such as RGB or CMYK levels), or opacity.
+
+### Usage
+
+[![See it on NPM!](https://img.shields.io/npm/v/@spectrum-web-components/color-slider?style=for-the-badge)](https://www.npmjs.com/package/@spectrum-web-components/color-slider)
+[![How big is this package in your project?](https://img.shields.io/bundlephobia/minzip/@spectrum-web-components/color-slider?style=for-the-badge)](https://bundlephobia.com/result?p=@spectrum-web-components/color-slider)
+
+```
+yarn add @spectrum-web-components/color-slider
+```
+
+Import the side effectful registration of `<sp-color-slider>` via:
+
+```
+import '@spectrum-web-components/color-slider/sp-color-slider.js';
+```
+
+When looking to leverage the `ColorSlider` base class as a type and/or for extension purposes, do so via:
+
+```
+import { ColorSlider } from '@spectrum-web-components/color-slider';
+```
+
+## Color Formatting
+
+When using the color elements, use `el.color` to access the `color` property, which should manage itself in the colour format supplied. If you supply a color in `rgb()` format, `el.color` should return the color in `rgb()` format, as well.
+
+The current color formats supported are as follows:
+
+-   Hex3, Hex4, Hex6, Hex8
+-   HSV, HSVA
+-   HSL, HSLA
+-   RGB, RGBA
+-   Strings (eg "red", "blue")
+-   TinyColor
+
+**Please note for the following formats: HSV, HSVA, HSL, HSLA**
+When setting a color's lightness or value to 100%, the hue and saturation value are not preserved. This is detailed in the [TinyColor documentation](https://www.npmjs.com/package/@ctrl/tinycolor). Currently, the Spectrum Web Components has a workaround to support the preservation of the hue.
+
+## Default
+
+```html
+<sp-color-slider></sp-color-slider>
+```
+
+### Vertical
+
+```html
+<sp-color-slider vertical></sp-color-slider>
+```
+
+### Disabled
+
+```html
+<sp-color-slider disabled></sp-color-slider>
+```

packages/color-slider/package.json

@@ -0,0 +1,59 @@
+{
+    "name": "@spectrum-web-components/color-slider",
+    "publishConfig": {
+        "access": "public"
+    },
+    "repository": {
+        "type": "git",
+        "url": "https://github.com/adobe/spectrum-web-components.git",
+        "directory": "packages/color-slider"
+    },
+    "bugs": {
+        "url": "https://github.com/adobe/spectrum-web-components/issues"
+    },
+    "homepage": "https://adobe.github.io/spectrum-web-components/components/color-slider",
+    "keywords": [
+        "spectrum css",
+        "web components",
+        "lit-element",
+        "lit-html"
+    ],
+    "version": "0.0.1",
+    "description": "",
+    "main": "src/index.js",
+    "module": "src/index.js",
+    "type": "module",
+    "exports": {
+        "./src/": "./src/",
+        "./custom-elements.json": "./custom-elements.json",
+        "./package.json": "./package.json",
+        "./sp-color-slider": "./sp-color-slider.js",
+        "./sp-color-slider.js": "./sp-color-slider.js"
+    },
+    "files": [
+        "custom-elements.json",
+        "*.d.ts",
+        "*.js",
+        "*.js.map",
+        "/src/"
+    ],
+    "sideEffects": [
+        "./sp-*.js",
+        "./sp-*.ts"
+    ],
+    "scripts": {
+        "test": "echo \"Error: run tests from mono-repo root.\" && exit 1"
+    },
+    "author": "",
+    "license": "Apache-2.0",
+    "devDependencies": {
+        "@spectrum-css/colorslider": "^1.0.0-beta.4"
+    },
+    "dependencies": {
+        "@ctrl/tinycolor": "^3.3.3",
+        "@spectrum-web-components/base": "^0.3.0",
+        "@spectrum-web-components/color-handle": "^0.0.1",
+        "@spectrum-web-components/shared": "^0.9.0",
+        "tslib": "^2.0.0"
+    }
+}

packages/color-slider/sp-color-slider.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 { ColorSlider } from './src/ColorSlider.js';
+
+customElements.define('sp-color-slider', ColorSlider);
+
+declare global {
+    interface HTMLElementTagNameMap {
+        'sp-color-slider': ColorSlider;
+    }
+}