@umbraco-ui/uui-color-swatch 1.2.0-rc.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2020 uui-app
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,31 @@
+# uui-color-swatch
+
+![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-color-swatch?logoColor=%231B264F)
+
+Umbraco style color-swatch component.
+
+## Installation
+
+### ES imports
+
+```zsh
+npm i @umbraco-ui/uui-color-swatch
+```
+
+Import the registration of `<uui-color-swatch>` via:
+
+```javascript
+import '@umbraco-ui/uui-color-swatch';
+```
+
+When looking to leverage the `UUIColorSwatchElement` base class as a type and/or for extension purposes, do so via:
+
+```javascript
+import { UUIColorSwatchElement } from '@umbraco-ui/uui-color-swatch';
+```
+
+## Usage
+
+```html
+<uui-color-swatch></uui-color-swatch>
+```

package/custom-elements.json

@@ -0,0 +1,146 @@
+{
+  "version": "experimental",
+  "tags": [
+    {
+      "name": "uui-color-swatch",
+      "path": "./lib/uui-color-swatch.element.ts",
+      "description": "Color swatch, can have label and be selectable. Depends on colord library and exposes it's utility functions under color property.",
+      "attributes": [
+        {
+          "name": "value",
+          "description": "Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "disabled",
+          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "type": " boolean ",
+          "default": "\"false\""
+        },
+        {
+          "name": "show-label",
+          "description": "When true shows element label below the color checkbox",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        },
+        {
+          "name": "selectable",
+          "description": "Enable the ability to select this element.",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "description": "Attribute applied when the element is selected.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "properties": [
+        {
+          "name": "styles",
+          "type": "CSSResult[]",
+          "default": "[null]"
+        },
+        {
+          "name": "value",
+          "attribute": "value",
+          "description": "Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.",
+          "type": " string ",
+          "default": "\"\\\"\\\"\""
+        },
+        {
+          "name": "disabled",
+          "attribute": "disabled",
+          "description": "Determines if the options is disabled. If true the option can't be selected",
+          "type": " boolean ",
+          "default": "\"false\""
+        },
+        {
+          "name": "showLabel",
+          "attribute": "show-label",
+          "description": "When true shows element label below the color checkbox",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "color",
+          "description": "Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)",
+          "type": "(Colord | null)"
+        },
+        {
+          "name": "isLight",
+          "description": "Returns true if the color brightness is >= 0.5",
+          "type": "boolean"
+        },
+        {
+          "name": "label",
+          "attribute": "label",
+          "description": "Label to be used for aria-label and potentially as visual label for some components",
+          "type": "string"
+        },
+        {
+          "name": "selectable",
+          "attribute": "selectable",
+          "description": "Enable the ability to select this element.",
+          "type": "boolean"
+        },
+        {
+          "name": "selected",
+          "attribute": "selected",
+          "description": "Attribute applied when the element is selected.",
+          "type": "boolean",
+          "default": "false"
+        },
+        {
+          "name": "active",
+          "attribute": "active",
+          "description": "Set this boolean to true for then the related composition is sorted.",
+          "type": "boolean",
+          "default": "false"
+        }
+      ],
+      "events": [
+        {
+          "name": "selected",
+          "description": "fires when the media card is selected"
+        },
+        {
+          "name": "unselected",
+          "description": "fires when the media card is unselected"
+        }
+      ],
+      "slots": [
+        {
+          "name": "label",
+          "description": "Default slot for the label."
+        },
+        {
+          "name": "",
+          "description": "Override the default label"
+        }
+      ],
+      "cssProperties": [
+        {
+          "name": "--uui-swatch-size",
+          "description": "The size of the swatch."
+        },
+        {
+          "name": "--uui-swatch-border-width",
+          "description": "The width of the border."
+        }
+      ]
+    }
+  ]
+}

package/lib/index.d.ts

@@ -0,0 +1 @@
+export * from './uui-color-swatch.element';

package/lib/index.js

@@ -0,0 +1,237 @@
+import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
+import { property } from 'lit/decorators.js';
+import { classMap } from 'lit/directives/class-map.js';
+import { LitElement, html, css } from 'lit';
+import { iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
+import { styleMap } from 'lit/directives/style-map.js';
+import { LabelMixin, SelectableMixin, ActiveMixin } from '@umbraco-ui/uui-base/lib/mixins';
+
+var r={grad:.9,turn:360,rad:360/(2*Math.PI)},t=function(r){return "string"==typeof r?r.length>0:"number"==typeof r},n=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=Math.pow(10,t)),Math.round(n*r)/n+0},e=function(r,t,n){return void 0===t&&(t=0),void 0===n&&(n=1),r>n?n:r>t?r:t},u=function(r){return (r=isFinite(r)?r%360:0)>0?r:r+360},a=function(r){return {r:e(r.r,0,255),g:e(r.g,0,255),b:e(r.b,0,255),a:e(r.a)}},o=function(r){return {r:n(r.r),g:n(r.g),b:n(r.b),a:n(r.a,3)}},i=/^#([0-9a-f]{3,8})$/i,s=function(r){var t=r.toString(16);return t.length<2?"0"+t:t},h=function(r){var t=r.r,n=r.g,e=r.b,u=r.a,a=Math.max(t,n,e),o=a-Math.min(t,n,e),i=o?a===t?(n-e)/o:a===n?2+(e-t)/o:4+(t-n)/o:0;return {h:60*(i<0?i+6:i),s:a?o/a*100:0,v:a/255*100,a:u}},b=function(r){var t=r.h,n=r.s,e=r.v,u=r.a;t=t/360*6,n/=100,e/=100;var a=Math.floor(t),o=e*(1-n),i=e*(1-(t-a)*n),s=e*(1-(1-t+a)*n),h=a%6;return {r:255*[e,i,o,o,s,e][h],g:255*[s,e,e,i,o,o][h],b:255*[o,o,s,e,e,i][h],a:u}},g=function(r){return {h:u(r.h),s:e(r.s,0,100),l:e(r.l,0,100),a:e(r.a)}},d=function(r){return {h:n(r.h),s:n(r.s),l:n(r.l),a:n(r.a,3)}},f=function(r){return b((n=(t=r).s,{h:t.h,s:(n*=((e=t.l)<50?e:100-e)/100)>0?2*n/(e+n)*100:0,v:e+n,a:t.a}));var t,n,e;},c=function(r){return {h:(t=h(r)).h,s:(u=(200-(n=t.s))*(e=t.v)/100)>0&&u<200?n*e/100/(u<=100?u:200-u)*100:0,l:u/2,a:t.a};var t,n,e,u;},l=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s*,\s*([+-]?\d*\.?\d+)%\s*,\s*([+-]?\d*\.?\d+)%\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,p=/^hsla?\(\s*([+-]?\d*\.?\d+)(deg|rad|grad|turn)?\s+([+-]?\d*\.?\d+)%\s+([+-]?\d*\.?\d+)%\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,v=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*,\s*([+-]?\d*\.?\d+)(%)?\s*(?:,\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,m=/^rgba?\(\s*([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s+([+-]?\d*\.?\d+)(%)?\s*(?:\/\s*([+-]?\d*\.?\d+)(%)?\s*)?\)$/i,y={string:[[function(r){var t=i.exec(r);return t?(r=t[1]).length<=4?{r:parseInt(r[0]+r[0],16),g:parseInt(r[1]+r[1],16),b:parseInt(r[2]+r[2],16),a:4===r.length?n(parseInt(r[3]+r[3],16)/255,2):1}:6===r.length||8===r.length?{r:parseInt(r.substr(0,2),16),g:parseInt(r.substr(2,2),16),b:parseInt(r.substr(4,2),16),a:8===r.length?n(parseInt(r.substr(6,2),16)/255,2):1}:null:null},"hex"],[function(r){var t=v.exec(r)||m.exec(r);return t?t[2]!==t[4]||t[4]!==t[6]?null:a({r:Number(t[1])/(t[2]?100/255:1),g:Number(t[3])/(t[4]?100/255:1),b:Number(t[5])/(t[6]?100/255:1),a:void 0===t[7]?1:Number(t[7])/(t[8]?100:1)}):null},"rgb"],[function(t){var n=l.exec(t)||p.exec(t);if(!n)return null;var e,u,a=g({h:(e=n[1],u=n[2],void 0===u&&(u="deg"),Number(e)*(r[u]||1)),s:Number(n[3]),l:Number(n[4]),a:void 0===n[5]?1:Number(n[5])/(n[6]?100:1)});return f(a)},"hsl"]],object:[[function(r){var n=r.r,e=r.g,u=r.b,o=r.a,i=void 0===o?1:o;return t(n)&&t(e)&&t(u)?a({r:Number(n),g:Number(e),b:Number(u),a:Number(i)}):null},"rgb"],[function(r){var n=r.h,e=r.s,u=r.l,a=r.a,o=void 0===a?1:a;if(!t(n)||!t(e)||!t(u))return null;var i=g({h:Number(n),s:Number(e),l:Number(u),a:Number(o)});return f(i)},"hsl"],[function(r){var n=r.h,a=r.s,o=r.v,i=r.a,s=void 0===i?1:i;if(!t(n)||!t(a)||!t(o))return null;var h=function(r){return {h:u(r.h),s:e(r.s,0,100),v:e(r.v,0,100),a:e(r.a)}}({h:Number(n),s:Number(a),v:Number(o),a:Number(s)});return b(h)},"hsv"]]},N=function(r,t){for(var n=0;n<t.length;n++){var e=t[n][0](r);if(e)return [e,t[n][1]]}return [null,void 0]},x=function(r){return "string"==typeof r?N(r.trim(),y.string):"object"==typeof r&&null!==r?N(r,y.object):[null,void 0]},M=function(r,t){var n=c(r);return {h:n.h,s:e(n.s+100*t,0,100),l:n.l,a:n.a}},H=function(r){return (299*r.r+587*r.g+114*r.b)/1e3/255},$=function(r,t){var n=c(r);return {h:n.h,s:n.s,l:e(n.l+100*t,0,100),a:n.a}},j=function(){function r(r){this.parsed=x(r)[0],this.rgba=this.parsed||{r:0,g:0,b:0,a:1};}return r.prototype.isValid=function(){return null!==this.parsed},r.prototype.brightness=function(){return n(H(this.rgba),2)},r.prototype.isDark=function(){return H(this.rgba)<.5},r.prototype.isLight=function(){return H(this.rgba)>=.5},r.prototype.toHex=function(){return r=o(this.rgba),t=r.r,e=r.g,u=r.b,i=(a=r.a)<1?s(n(255*a)):"","#"+s(t)+s(e)+s(u)+i;var r,t,e,u,a,i;},r.prototype.toRgb=function(){return o(this.rgba)},r.prototype.toRgbString=function(){return r=o(this.rgba),t=r.r,n=r.g,e=r.b,(u=r.a)<1?"rgba("+t+", "+n+", "+e+", "+u+")":"rgb("+t+", "+n+", "+e+")";var r,t,n,e,u;},r.prototype.toHsl=function(){return d(c(this.rgba))},r.prototype.toHslString=function(){return r=d(c(this.rgba)),t=r.h,n=r.s,e=r.l,(u=r.a)<1?"hsla("+t+", "+n+"%, "+e+"%, "+u+")":"hsl("+t+", "+n+"%, "+e+"%)";var r,t,n,e,u;},r.prototype.toHsv=function(){return r=h(this.rgba),{h:n(r.h),s:n(r.s),v:n(r.v),a:n(r.a,3)};var r;},r.prototype.invert=function(){return w({r:255-(r=this.rgba).r,g:255-r.g,b:255-r.b,a:r.a});var r;},r.prototype.saturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,r))},r.prototype.desaturate=function(r){return void 0===r&&(r=.1),w(M(this.rgba,-r))},r.prototype.grayscale=function(){return w(M(this.rgba,-1))},r.prototype.lighten=function(r){return void 0===r&&(r=.1),w($(this.rgba,r))},r.prototype.darken=function(r){return void 0===r&&(r=.1),w($(this.rgba,-r))},r.prototype.rotate=function(r){return void 0===r&&(r=15),this.hue(this.hue()+r)},r.prototype.alpha=function(r){return "number"==typeof r?w({r:(t=this.rgba).r,g:t.g,b:t.b,a:r}):n(this.rgba.a,3);var t;},r.prototype.hue=function(r){var t=c(this.rgba);return "number"==typeof r?w({h:r,s:t.s,l:t.l,a:t.a}):n(t.h)},r.prototype.isEqual=function(r){return this.toHex()===w(r).toHex()},r}(),w=function(r){return r instanceof j?r:new j(r)};
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let UUIColorSwatchElement = class extends LabelMixin(
+  "label",
+  SelectableMixin(ActiveMixin(LitElement))
+) {
+  constructor() {
+    super();
+    this._value = "";
+    this.disabled = false;
+    this.showLabel = false;
+    this._color = null;
+    this.addEventListener("click", this._setAriaAttributes);
+  }
+  get value() {
+    var _a;
+    return this._value ? this._value : ((_a = this.textContent) == null ? void 0 : _a.trim()) || "";
+  }
+  set value(newValue) {
+    const oldValue = this._value;
+    this._value = newValue;
+    this.requestUpdate("value", oldValue);
+  }
+  get color() {
+    return this._color;
+  }
+  set color(_) {
+    return;
+  }
+  get isLight() {
+    var _a, _b;
+    return (_b = (_a = this.color) == null ? void 0 : _a.isLight()) != null ? _b : false;
+  }
+  _initializeColor() {
+    var _a;
+    this._color = new j((_a = this.value) != null ? _a : "");
+    if (!this._color.isValid()) {
+      this.disabled = true;
+      console.error(
+        `Invalid color provided to uui-color-swatch: ${this.value}`
+      );
+    }
+  }
+  _setAriaAttributes() {
+    if (this.selectable)
+      this.setAttribute("aria-checked", this.selected.toString());
+  }
+  firstUpdated() {
+    this._initializeColor();
+    this._setAriaAttributes();
+  }
+  willUpdate(changedProperties) {
+    if (changedProperties.has("value")) {
+      this._initializeColor();
+    }
+    if (changedProperties.has("disabled")) {
+      if (this.selectable) {
+        this.selectable = !this.disabled;
+        this.unselectable = !this.disabled;
+      }
+    }
+    if (changedProperties.has("selectable") || changedProperties.has("selected")) {
+      this._setAriaAttributes();
+    }
+  }
+  render() {
+    return html`
+      <div
+        class=${classMap({
+      "color-swatch": true,
+      "color-swatch--transparent-bg": true,
+      "color-swatch--light": this.isLight
+    })}
+        role="button"
+        aria-label=${this.label}
+        aria-disabled="${this.disabled}">
+        <div
+          class="color-swatch__color"
+          style=${styleMap({ backgroundColor: this.value })}></div>
+        <div class="color-swatch__check">${iconCheck}</div>
+      </div>
+      ${this.showLabel ? this.renderLabel() : ""}
+    `;
+  }
+};
+UUIColorSwatchElement.styles = [
+  css`
+      :host {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        transition: box-shadow 100ms ease-out;
+        flex-direction: column;
+      }
+
+      :host(*),
+      * {
+        /* TODO: implement globally shared outline style */
+        outline-color: var(--uui-color-focus,#3879ff);
+        outline-offset: 4px;
+      }
+
+      :host(:focus-within:not([disabled])) {
+        outline: none;
+      }
+
+      :host(:focus:not([disabled])) .color-swatch {
+        outline-color: var(--uui-color-focus,#3879ff);
+        outline-width: var(--uui-swatch-border-width, 1px);
+        outline-style: solid;
+        outline-offset: var(--uui-swatch-border-width, 1px);
+      }
+
+      :host([selectable]) {
+        cursor: pointer;
+      }
+
+      :host([disabled]) {
+        cursor: not-allowed;
+      }
+
+      :host([selectable]) .color-swatch::after {
+        content: '';
+        position: absolute;
+        pointer-events: none;
+        inset: calc(var(--uui-swatch-border-width, 1px) * -1);
+        width: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));
+        height: calc(100% + calc(var(--uui-swatch-border-width, 1px) * 2));
+        box-sizing: border-box;
+        border: var(--uui-swatch-border-width, 1px) solid
+          var(--uui-color-selected,#3544b1);
+        border-radius: calc(
+          var(--uui-border-radius,3px) + var(--uui-swatch-border-width, 1px)
+        );
+        transition: opacity 100ms ease-out;
+        opacity: 0;
+      }
+      :host([selectable]:not([disabled]):hover) .color-swatch::after {
+        opacity: 0.33;
+      }
+      :host([selectable][selected]:not([disabled]):hover) .color-swatch::after {
+        opacity: 0.66;
+      }
+      :host([selectable][selected]:not([disabled])) .color-swatch::after {
+        opacity: 1;
+      }
+
+      .color-swatch {
+        position: relative;
+        width: var(--uui-swatch-size, 25px);
+        height: var(--uui-swatch-size, 25px);
+        border-radius: 3px;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+      }
+      .color-swatch--transparent-bg {
+        background-image: linear-gradient(
+            45deg,
+            var(--uui-palette-grey,#c4c4c4) 25%,
+            transparent 25%
+          ),
+          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey,#c4c4c4) 75%),
+          linear-gradient(45deg, transparent 75%, var(--uui-palette-grey,#c4c4c4) 75%),
+          linear-gradient(45deg, var(--uui-palette-grey,#c4c4c4) 25%, transparent 25%);
+        background-size: 10px 10px;
+        background-position: 0 0, 0 0, -5px -5px, 5px 5px;
+      }
+      .color-swatch__color {
+        width: 100%;
+        height: 100%;
+        border: 1px solid rgba(0, 0, 0, 0.125);
+        border-radius: inherit;
+        box-sizing: border-box;
+      }
+
+      .color-swatch__check {
+        position: absolute;
+        vertical-align: middle;
+        width: calc(var(--uui-swatch-size, 25px) / 2);
+        height: calc(var(--uui-swatch-size, 25px) / 2);
+        line-height: 0;
+        transition: fill 120ms, opacity 120ms;
+        fill: #fff;
+        pointer-events: none;
+        opacity: 0;
+      }
+
+      .color-swatch--light .color-swatch__check {
+        fill: #000;
+      }
+
+      :host([selected]) .color-swatch__check {
+        opacity: 1;
+      }
+
+      slot[name='label']::slotted(*),
+      .label {
+        font-size: var(--uui-size-4,12px);
+      }
+    `
+];
+__decorateClass([
+  property({ type: String })
+], UUIColorSwatchElement.prototype, "value", 1);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], UUIColorSwatchElement.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-label" })
+], UUIColorSwatchElement.prototype, "showLabel", 2);
+UUIColorSwatchElement = __decorateClass([
+  defineElement("uui-color-swatch")
+], UUIColorSwatchElement);
+
+export { UUIColorSwatchElement };

package/lib/uui-color-swatch.element.d.ts

@@ -0,0 +1,64 @@
+import { Colord } from 'colord';
+import { LitElement } from 'lit';
+declare const UUIColorSwatchElement_base: (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").LabelMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").SelectableMixinInterface) & (new (...args: any[]) => import("@umbraco-ui/uui-base/lib/mixins").ActiveMixinInterface) & typeof LitElement;
+/**
+ * Color swatch, can have label and be selectable. Depends on colord library and exposes it's utility functions under color property.
+ *
+ * @element uui-color-swatch
+ * @cssprop --uui-swatch-size - The size of the swatch.
+ * @cssprop --uui-swatch-border-width - The width of the border.
+ * @slot label - Default slot for the label.
+ */
+export declare class UUIColorSwatchElement extends UUIColorSwatchElement_base {
+    static styles: import("lit").CSSResult[];
+    private _value;
+    /**
+     * Value of the swatch. Should be a valid hex, hexa, rgb, rgba, hsl or hsla string. Should fulfill this [css spec](https://www.w3.org/TR/css-color-4/#color-type). If not provided element will look at its text content.
+     * @type { string }
+     * @attr
+     * @default ""
+     */
+    get value(): string;
+    set value(newValue: string);
+    /**
+     * Determines if the options is disabled. If true the option can't be selected
+     * @type { boolean }
+     * @attr
+     * @default false
+     */
+    disabled: boolean;
+    /**
+     * When true shows element label below the color checkbox
+     *
+     * @memberof UUIColorSwatchElement
+     */
+    showLabel: boolean;
+    /**
+     * Colord object instance based on the value provided to the element. If the value is not a valid color, it falls back to black (like Amy Winehouse). For more information about Colord, see [Colord](https://omgovich.github.io/colord/)
+     *
+     * @type {(Colord | null)}
+     * @memberof UUIColorSwatchElement
+     */
+    get color(): Colord | null;
+    set color(_: Colord | null);
+    private _color;
+    /**
+     * Returns true if the color brightness is >= 0.5
+     *
+     * @readonly
+     * @memberof UUIColorSwatchElement
+     */
+    get isLight(): boolean;
+    constructor();
+    private _initializeColor;
+    private _setAriaAttributes;
+    firstUpdated(): void;
+    willUpdate(changedProperties: Map<string, any>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'uui-color-swatch': UUIColorSwatchElement;
+    }
+}
+export {};

package/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "@umbraco-ui/uui-color-swatch",
+  "version": "1.2.0-rc.0",
+  "license": "MIT",
+  "keywords": [
+    "Umbraco",
+    "Custom elements",
+    "Web components",
+    "UI",
+    "Lit",
+    "Color Swatch"
+  ],
+  "description": "Umbraco UI color-swatch component",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/umbraco/Umbraco.UI.git",
+    "directory": "packages/uui-color-swatch"
+  },
+  "bugs": {
+    "url": "https://github.com/umbraco/Umbraco.UI/issues"
+  },
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "types": "./lib/index.d.ts",
+  "type": "module",
+  "customElements": "custom-elements.json",
+  "files": [
+    "lib/**/*.d.ts",
+    "lib/**/*.js",
+    "custom-elements.json"
+  ],
+  "dependencies": {
+    "@umbraco-ui/uui-base": "1.2.0-rc.0",
+    "@umbraco-ui/uui-icon-registry-essential": "1.2.0-rc.0",
+    "colord": "^2.9.3"
+  },
+  "scripts": {
+    "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
+    "clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
+    "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "homepage": "https://uui.umbraco.com/?path=/story/uui-color-swatch",
+  "gitHead": "43f1b9a8bd1721af30ba7c145517ee665d874df3"
+}