@deckdeckgo/color - npm Package Compare versions

Comparing version 3.1.1 to 4.0.0

CHANGELOG.md

@@ -0,1 +1,11 @@
+# 4.0.0 (2021-05-01)
+
+### Breaking
+
+- `more` property and the option to display a native picker have been removed
+
+### Features
+
+- `input` field to enter custom color
+
 # 3.1.1 (2020-10-23)
@@ -2,0 +12,0 @@

dist/cjs/deckdeckgo-color.cjs.js

 'use strict';
 
-const index = require('./index-83e40f76.js');
+const index = require('./index-7feb59af.js');
 
 /*
- Stencil Client Patch Browser v2.0.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.5.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = (typeof document === 'undefined' ? new (require('u' + 'rl').URL)('file:' + __filename).href : (document.currentScript && document.currentScript.src || new URL('deckdeckgo-color.cjs.js', document.baseURI).href));
-    const opts =  {};
-    if ( importMeta !== '') {
+    const opts = {};
+    if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
@@ -18,3 +18,3 @@ }
 patchBrowser().then(options => {
-  return index.bootstrapLazy([["deckgo-color_2.cjs",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"label":[4],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32],"selectedColorLabel":[32]}],[1,"deckgo-color-label",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"colorLabel":[1,"color-label"],"customColorRgb":[1,"custom-color-rgb"],"color":[32]}]]]], options);
+  return index.bootstrapLazy([["deckgo-color_2.cjs",[[1,"deckgo-color",{"palette":[1040],"inputAlt":[1,"input-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32]}],[1,"deckgo-color-input",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"customColorRgb":[1,"custom-color-rgb"],"inputAlt":[1,"input-alt"],"color":[32]}]]]], options);
 });

dist/cjs/deckgo-color_2.cjs.entry.js

@@ -5,3 +5,3 @@ 'use strict';
 
-const index = require('./index-83e40f76.js');
+const index = require('./index-7feb59af.js');
 const deckdeckgoPalette = require('./deckdeckgo-palette-0d57139a.js');
@@ -47,3 +47,3 @@
 
-const deckdeckgoColorCss = ":host{display:block}div.color-container{position:relative;display:flex;align-items:center;flex-wrap:var(--deckgo-flex-wrap, wrap);overflow:var(--deckgo-overflow, visible)}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width, 28px);min-width:var(--deckgo-button-width, 28px);height:var(--deckgo-button-height, 28px);min-height:var(--deckgo-button-height, 28px);margin:var(--deckgo-button-margin, 4px);padding:0;outline:var(--deckgo-button-outline, none)}div.color-container button{cursor:pointer;border:1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));border-radius:var(--deckgo-button-border-radius, 50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}div.color-container button:not(.selected):hover,div.color-container button:not(.selected):focus{box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}div.color-container div.more{display:inline-block;position:relative;outline:none;border:none}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;transform:translate(-50%, -50%);margin:0;border-radius:var(--deckgo-button-more-border-radius, 50%);outline:var(--deckgo-button-more-outline, none);border:var(--deckgo-button-more-border, none);background:var(--deckgo-button-more-background, transparent)}div.color-container div.more button.selected{border:1px solid var(--deckdeckgo-palette-color-hex, var(--deckgo-button-more-border))}div.color-container div.more input{bottom:0;right:0;width:1px;height:1px;visibility:hidden;opacity:0;transform:translate(100%, 100%)}";
+const deckdeckgoColorCss = ":host{display:flex;align-items:center;flex-wrap:var(--deckgo-color-flex-wrap, wrap);overflow:var(--deckgo-color-overflow, visible);padding:var(--deckgo-color-padding, 8px);width:var(--deckgo-color-width, 288px)}button{width:var(--deckgo-color-button-width, 28px);height:var(--deckgo-color-button-height, 28px);margin:var(--deckgo-color-button-margin, 4px);padding:0;outline:var(--deckgo-color-button-outline, none);cursor:pointer;border:1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));border-radius:var(--deckgo-color-button-border-radius, 2px);background:var(--deckdeckgo-palette-color-hex)}button.selected{box-shadow:0 0 4px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}button:not(.selected):hover,button:not(.selected):focus{box-shadow:0 0 2px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}";
 
@@ -54,15 +54,14 @@ const DeckdeckgoColor = class {
     this.colorChange = index.createEvent(this, "colorChange", 7);
+    /**
+     * The palette of color.
+     */
     this.palette = deckdeckgoPalette.DEFAULT_PALETTE;
-    this.more = true;
-    this.moreAlt = 'More';
-    this.label = true;
+    /**
+     * An accessibility label for the color input field
+     */
+    this.inputAlt = 'Input a color (hex)';
     this.selectedColorPalette = false;
     this.selectColor = async ($event) => {
-      const selectedColor = $event.target.value;
-      const rgb = await hexToRgb(selectedColor);
-      const color = {
-        hex: selectedColor,
-        rgb: rgb,
-      };
-      this.applyColorHexChange(selectedColor, rgb);
+      const color = $event.detail;
+      this.applyColorHexChange(color.hex, color.rgb);
       this.colorChange.emit(color);
@@ -72,3 +71,2 @@ };
       this.selectedColorPalette = await this.initSelectedColorPalette();
-      await this.initSelectedColorPaletteAlt();
       this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
@@ -81,3 +79,2 @@ }, 150);
     this.selectedColorPalette = await this.initSelectedColorPalette();
-    await this.initSelectedColorPaletteAlt();
     if (!this.selectedColorPalette) {
@@ -87,8 +84,2 @@ this.selectedCustomColorRgb = this.selectedColorRgb;
   }
-  async componentDidLoad() {
-    await this.colorPickerListener(true);
-  }
-  async disconnectedCallback() {
-    await this.colorPickerListener(false);
-  }
   async onColorHexChange() {
@@ -121,3 +112,2 @@ this.applyColorHexChange(this.colorHex, undefined);
       this.selectedColorPalette = true;
-      await this.initSelectedColorPaletteAlt();
       this.selectedCustomColorRgb = undefined;
@@ -127,29 +117,2 @@ resolve();
   }
-  openColorPicker() {
-    return new Promise(async (resolve) => {
-      const colorPicker = this.el.shadowRoot.querySelector("input[name='color-picker']");
-      if (!colorPicker) {
-        resolve();
-        return;
-      }
-      colorPicker.click();
-      resolve();
-    });
-  }
-  colorPickerListener(bind) {
-    return new Promise((resolve) => {
-      const colorPicker = this.el.shadowRoot.querySelector("input[name='color-picker']");
-      if (!colorPicker) {
-        resolve();
-        return;
-      }
-      if (bind) {
-        colorPicker.addEventListener('change', this.selectColor, false);
-      }
-      else {
-        colorPicker.removeEventListener('change', this.selectColor, true);
-      }
-      resolve();
-    });
-  }
   isHexColorSelected(element) {
@@ -185,14 +148,4 @@ if (!element || !element.color || !element.color.hex) {
   }
-  async initSelectedColorPaletteAlt() {
-    if (!this.palette || this.palette.length <= 0) {
-      this.selectedColorLabel = undefined;
-      return undefined;
-    }
-    const palette = this.palette.find((element) => {
-      return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
-    });
-    this.selectedColorLabel = palette ? palette.alt : undefined;
-  }
   render() {
-    return (index.h(index.Host, null, index.h("div", { class: "color-container", part: "container" }, this.renderPalette(), this.renderMore()), this.renderLabel()));
+    return (index.h(index.Host, null, this.renderPalette(), this.renderInput()));
   }
@@ -217,23 +170,5 @@ renderPalette() {
   }
-  renderMore() {
-    if (this.more) {
-      let style = {};
-      if (!this.selectedColorPalette && this.selectedColorHex) {
-        style['--deckdeckgo-palette-color-hex'] = this.selectedColorHex;
-      }
-      if (!this.selectedColorPalette && this.selectedCustomColorRgb) {
-        style['--deckdeckgo-palette-color-rgb'] = this.selectedCustomColorRgb;
-      }
-      return (index.h("div", { class: "more" }, index.h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedCustomColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() }, index.h("slot", { name: "more" })), index.h("input", { type: "color", name: "color-picker" })));
-    }
-    else {
-      return undefined;
-    }
+  renderInput() {
+    return (index.h("deckgo-color-input", { colorHex: this.selectedColorHex, colorRgb: this.selectedColorRgb, customColorRgb: this.selectedCustomColorRgb, inputAlt: this.inputAlt, onSelectHexColor: this.selectColor }));
   }
-  renderLabel() {
-    if (!this.label) {
-      return undefined;
-    }
-    return (index.h("deckgo-color-label", { colorHex: this.selectedColorHex, colorRgb: this.selectedColorRgb, colorLabel: this.selectedColorLabel, customColorRgb: this.selectedCustomColorRgb }, index.h("slot", { name: "custom-label" }, "Custom")));
-  }
   get el() { return index.getElement(this); }
@@ -247,7 +182,11 @@ static get watchers() { return {
 
-const deckdeckgoColorLabelCss = "p.color-label{margin:var(--deckgo-color-label-margin, 0);padding:var(--deckgo-color-label-padding, 12px 8px);font-size:var(--deckgo-color-label-font-size, 12px);min-height:var(--deckgo-color-label-min-height, 15px);text-align:var(--deckgo-color-label-text-align, center)}p.color-label small{font-weight:var(--deckgo-color-label-color-font-weight, 300)}";
+const deckdeckgoColorInputCss = ":host{display:flex;position:relative;margin:var(--deckgo-color-input-margin, 4px)}span{width:var(--deckgo-color-hash-width, 28px);height:var(--deckgo-color-hash-height, 28px);display:inline-flex;justify-content:center;align-items:center;background:var(--deckgo-color-hash-background, #f0f0f0 none repeat scroll 0 0);color:var(--deckgo-color-hash-color, #98a1a4);border-radius:var(--deckgo-color-hash-border-radius, 4px 0 0 4px)}input{color:var(--deckgo-color-input-color, #666666);border:none;outline:none;height:var(--deckgo-color-input-height, 28px);box-shadow:var(--deckgo-color-input-box-shadow, #f0f0f0 0 0 0 1px inset);border-radius:var(--deckgo-color-input-border-radius, 0 4px 4px 0);padding:var(--deckgo-color-input-padding, 0 4px);max-width:var(--deckgo-color-input-max-width, 136px)}";
 
-const DeckdeckgoColorLabel = class {
+const DeckdeckgoColorInput = class {
   constructor(hostRef) {
     index.registerInstance(this, hostRef);
+    this.selectHexColor = index.createEvent(this, "selectHexColor", 7);
+    this.debounceSelectColor = debounce(async (inputColor) => {
+      await this.emitColor(inputColor);
+    }, 500);
   }
@@ -269,8 +208,17 @@ async componentWillLoad() {
   }
-  render() {
-    if (!this.colorHex && !this.customColorRgb && !this.colorRgb) {
-      return index.h("p", { class: "color-label" });
+  async emitColor(inputColor) {
+    const hex = `#${inputColor.replace('#', '')}`;
+    const rgb = await hexToRgb(hex);
+    if (!rgb) {
+      return;
     }
-    return (index.h("p", { class: "color-label" }, index.h("span", null, this.colorLabel ? this.colorLabel : index.h("slot", null)), " ", index.h("small", null, this.color)));
+    this.selectHexColor.emit({
+      hex,
+      rgb,
+    });
   }
+  render() {
+    var _a;
+    return (index.h(index.Host, null, index.h("span", null, "#"), index.h("input", { type: "text", name: "color-picker", "aria-label": this.inputAlt, onInput: ($event) => this.debounceSelectColor($event.target.value), value: (_a = this.color) === null || _a === void 0 ? void 0 : _a.replace('#', '') })));
+  }
   static get watchers() { return {
@@ -282,5 +230,5 @@ "colorHex": ["watchColors"],
 };
-DeckdeckgoColorLabel.style = deckdeckgoColorLabelCss;
+DeckdeckgoColorInput.style = deckdeckgoColorInputCss;
 
 exports.deckgo_color = DeckdeckgoColor;
-exports.deckgo_color_label = DeckdeckgoColorLabel;
+exports.deckgo_color_input = DeckdeckgoColorInput;

dist/cjs/loader.cjs.js

@@ -5,6 +5,6 @@ 'use strict';
 
-const index = require('./index-83e40f76.js');
+const index = require('./index-7feb59af.js');
 
 /*
- Stencil Client Patch Esm v2.0.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.5.2 | MIT Licensed | https://stenciljs.com
  */
@@ -18,3 +18,3 @@ const patchEsm = () => {
   return patchEsm().then(() => {
-  return index.bootstrapLazy([["deckgo-color_2.cjs",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"label":[4],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32],"selectedColorLabel":[32]}],[1,"deckgo-color-label",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"colorLabel":[1,"color-label"],"customColorRgb":[1,"custom-color-rgb"],"color":[32]}]]]], options);
+  return index.bootstrapLazy([["deckgo-color_2.cjs",[[1,"deckgo-color",{"palette":[1040],"inputAlt":[1,"input-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32]}],[1,"deckgo-color-input",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"customColorRgb":[1,"custom-color-rgb"],"inputAlt":[1,"input-alt"],"color":[32]}]]]], options);
   });
@@ -21,0 +21,0 @@ };

dist/collection/collection-manifest.json

 {
   "entries": [
     "./components/color/deckdeckgo-color.js",
-    "./components/label/deckdeckgo-color-label.js"
+    "./components/input/deckdeckgo-color-input.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.0.2",
-    "typescriptVersion": "4.0.2"
+    "version": "2.5.2",
+    "typescriptVersion": "4.2.3"
   },
@@ -11,0 +11,0 @@ "collections": [],

dist/collection/components/color/deckdeckgo-color.js

@@ -6,15 +6,14 @@ import { Component, h, Prop, Event, Element, Host, State, Watch } from '@stencil/core';
   constructor() {
+    /**
+     * The palette of color.
+     */
     this.palette = DEFAULT_PALETTE;
-    this.more = true;
-    this.moreAlt = 'More';
-    this.label = true;
+    /**
+     * An accessibility label for the color input field
+     */
+    this.inputAlt = 'Input a color (hex)';
     this.selectedColorPalette = false;
     this.selectColor = async ($event) => {
-      const selectedColor = $event.target.value;
-      const rgb = await hexToRgb(selectedColor);
-      const color = {
-        hex: selectedColor,
-        rgb: rgb,
-      };
-      this.applyColorHexChange(selectedColor, rgb);
+      const color = $event.detail;
+      this.applyColorHexChange(color.hex, color.rgb);
       this.colorChange.emit(color);
@@ -24,3 +23,2 @@ };
       this.selectedColorPalette = await this.initSelectedColorPalette();
-      await this.initSelectedColorPaletteAlt();
       this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
@@ -33,3 +31,2 @@ }, 150);
     this.selectedColorPalette = await this.initSelectedColorPalette();
-    await this.initSelectedColorPaletteAlt();
     if (!this.selectedColorPalette) {
@@ -39,8 +36,2 @@ this.selectedCustomColorRgb = this.selectedColorRgb;
   }
-  async componentDidLoad() {
-    await this.colorPickerListener(true);
-  }
-  async disconnectedCallback() {
-    await this.colorPickerListener(false);
-  }
   async onColorHexChange() {
@@ -73,3 +64,2 @@ this.applyColorHexChange(this.colorHex, undefined);
       this.selectedColorPalette = true;
-      await this.initSelectedColorPaletteAlt();
       this.selectedCustomColorRgb = undefined;
@@ -79,29 +69,2 @@ resolve();
   }
-  openColorPicker() {
-    return new Promise(async (resolve) => {
-      const colorPicker = this.el.shadowRoot.querySelector("input[name='color-picker']");
-      if (!colorPicker) {
-        resolve();
-        return;
-      }
-      colorPicker.click();
-      resolve();
-    });
-  }
-  colorPickerListener(bind) {
-    return new Promise((resolve) => {
-      const colorPicker = this.el.shadowRoot.querySelector("input[name='color-picker']");
-      if (!colorPicker) {
-        resolve();
-        return;
-      }
-      if (bind) {
-        colorPicker.addEventListener('change', this.selectColor, false);
-      }
-      else {
-        colorPicker.removeEventListener('change', this.selectColor, true);
-      }
-      resolve();
-    });
-  }
   isHexColorSelected(element) {
@@ -137,18 +100,6 @@ if (!element || !element.color || !element.color.hex) {
   }
-  async initSelectedColorPaletteAlt() {
-    if (!this.palette || this.palette.length <= 0) {
-      this.selectedColorLabel = undefined;
-      return undefined;
-    }
-    const palette = this.palette.find((element) => {
-      return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
-    });
-    this.selectedColorLabel = palette ? palette.alt : undefined;
-  }
   render() {
     return (h(Host, null,
-      h("div", { class: "color-container", part: "container" },
-        this.renderPalette(),
-        this.renderMore()),
-      this.renderLabel()));
+      this.renderPalette(),
+      this.renderInput()));
   }
@@ -173,27 +124,5 @@ renderPalette() {
   }
-  renderMore() {
-    if (this.more) {
-      let style = {};
-      if (!this.selectedColorPalette && this.selectedColorHex) {
-        style['--deckdeckgo-palette-color-hex'] = this.selectedColorHex;
-      }
-      if (!this.selectedColorPalette && this.selectedCustomColorRgb) {
-        style['--deckdeckgo-palette-color-rgb'] = this.selectedCustomColorRgb;
-      }
-      return (h("div", { class: "more" },
-        h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedCustomColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() },
-          h("slot", { name: "more" })),
-        h("input", { type: "color", name: "color-picker" })));
-    }
-    else {
-      return undefined;
-    }
+  renderInput() {
+    return (h("deckgo-color-input", { colorHex: this.selectedColorHex, colorRgb: this.selectedColorRgb, customColorRgb: this.selectedCustomColorRgb, inputAlt: this.inputAlt, onSelectHexColor: this.selectColor }));
   }
-  renderLabel() {
-    if (!this.label) {
-      return undefined;
-    }
-    return (h("deckgo-color-label", { colorHex: this.selectedColorHex, colorRgb: this.selectedColorRgb, colorLabel: this.selectedColorLabel, customColorRgb: this.selectedCustomColorRgb },
-      h("slot", { name: "custom-label" }, "Custom")));
-  }
   static get is() { return "deckgo-color"; }
@@ -225,25 +154,7 @@ static get encapsulation() { return "shadow"; }
         "tags": [],
-        "text": ""
+        "text": "The palette of color."
       },
       "defaultValue": "DEFAULT_PALETTE"
     },
-    "more": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "more",
-      "reflect": false,
-      "defaultValue": "true"
-    },
-    "moreAlt": {
+    "inputAlt": {
       "type": "string",
@@ -260,7 +171,7 @@ "mutable": false,
         "tags": [],
-        "text": ""
+        "text": "An accessibility label for the color input field"
       },
-      "attribute": "more-alt",
+      "attribute": "input-alt",
       "reflect": false,
-      "defaultValue": "'More'"
+      "defaultValue": "'Input a color (hex)'"
     },
@@ -279,3 +190,3 @@ "colorHex": {
         "tags": [],
-        "text": ""
+        "text": "The current selected color provided as hexadecimal value"
       },
@@ -297,24 +208,6 @@ "attribute": "color-hex",
         "tags": [],
-        "text": ""
+        "text": "The current selected color provided as a rgb value (without \"rgb()\", only value such as for example 255, 67, 54)"
       },
       "attribute": "color-rgb",
       "reflect": false
-    },
-    "label": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": ""
-      },
-      "attribute": "label",
-      "reflect": false,
-      "defaultValue": "true"
     }
@@ -326,4 +219,3 @@ }; }
     "selectedColorPalette": {},
-    "selectedCustomColorRgb": {},
-    "selectedColorLabel": {}
+    "selectedCustomColorRgb": {}
   }; }
@@ -338,3 +230,3 @@ static get events() { return [{
         "tags": [],
-        "text": ""
+        "text": "Emit the selected color"
       },
@@ -341,0 +233,0 @@ "complexType": {

dist/deckdeckgo-color/deckdeckgo-color.esm.js

@@ -1,1 +0,1 @@
-import{p as o,b as l}from"./p-904aaf21.js";(()=>{const l=import.meta.url,e={};return""!==l&&(e.resourcesUrl=new URL(".",l).href),o(e)})().then(o=>l([["p-65b6d523",[[1,"deckgo-color",{palette:[1040],more:[4],moreAlt:[1,"more-alt"],colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],label:[4],selectedColorHex:[32],selectedColorRgb:[32],selectedColorPalette:[32],selectedCustomColorRgb:[32],selectedColorLabel:[32]}],[1,"deckgo-color-label",{colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],colorLabel:[1,"color-label"],customColorRgb:[1,"custom-color-rgb"],color:[32]}]]]],o));
+import{p as o,b as e}from"./p-f62e3fe2.js";(()=>{const e=import.meta.url,l={};return""!==e&&(l.resourcesUrl=new URL(".",e).href),o(l)})().then((o=>e([["p-2dedaf25",[[1,"deckgo-color",{palette:[1040],inputAlt:[1,"input-alt"],colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],selectedColorHex:[32],selectedColorRgb:[32],selectedColorPalette:[32],selectedCustomColorRgb:[32]}],[1,"deckgo-color-input",{colorHex:[1,"color-hex"],colorRgb:[1,"color-rgb"],customColorRgb:[1,"custom-color-rgb"],inputAlt:[1,"input-alt"],color:[32]}]]]],o)));

dist/esm/deckdeckgo-color.js

@@ -1,10 +0,10 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-06e43934.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-17ec0249.js';
 
 /*
- Stencil Client Patch Browser v2.0.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v2.5.2 | MIT Licensed | https://stenciljs.com
  */
 const patchBrowser = () => {
     const importMeta = import.meta.url;
-    const opts =  {};
-    if ( importMeta !== '') {
+    const opts = {};
+    if (importMeta !== '') {
         opts.resourcesUrl = new URL('.', importMeta).href;
@@ -16,3 +16,3 @@ }
 patchBrowser().then(options => {
-  return bootstrapLazy([["deckgo-color_2",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"label":[4],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32],"selectedColorLabel":[32]}],[1,"deckgo-color-label",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"colorLabel":[1,"color-label"],"customColorRgb":[1,"custom-color-rgb"],"color":[32]}]]]], options);
+  return bootstrapLazy([["deckgo-color_2",[[1,"deckgo-color",{"palette":[1040],"inputAlt":[1,"input-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32]}],[1,"deckgo-color-input",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"customColorRgb":[1,"custom-color-rgb"],"inputAlt":[1,"input-alt"],"color":[32]}]]]], options);
 });

dist/esm/deckgo-color_2.entry.js

@@ -1,2 +0,2 @@
-import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-06e43934.js';
+import { r as registerInstance, c as createEvent, h, H as Host, g as getElement } from './index-17ec0249.js';
 import { D as DEFAULT_PALETTE } from './deckdeckgo-palette-88019c01.js';
@@ -42,3 +42,3 @@
 
-const deckdeckgoColorCss = ":host{display:block}div.color-container{position:relative;display:flex;align-items:center;flex-wrap:var(--deckgo-flex-wrap, wrap);overflow:var(--deckgo-overflow, visible)}div.color-container button,div.color-container div.more{width:var(--deckgo-button-width, 28px);min-width:var(--deckgo-button-width, 28px);height:var(--deckgo-button-height, 28px);min-height:var(--deckgo-button-height, 28px);margin:var(--deckgo-button-margin, 4px);padding:0;outline:var(--deckgo-button-outline, none)}div.color-container button{cursor:pointer;border:1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));border-radius:var(--deckgo-button-border-radius, 50%);background:var(--deckdeckgo-palette-color-hex)}div.color-container button.selected{box-shadow:0 0 8px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}div.color-container button:not(.selected):hover,div.color-container button:not(.selected):focus{box-shadow:0 0 8px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}div.color-container div.more{display:inline-block;position:relative;outline:none;border:none}div.color-container div.more button,div.color-container div.more input{position:absolute}div.color-container div.more button{top:50%;left:50%;transform:translate(-50%, -50%);margin:0;border-radius:var(--deckgo-button-more-border-radius, 50%);outline:var(--deckgo-button-more-outline, none);border:var(--deckgo-button-more-border, none);background:var(--deckgo-button-more-background, transparent)}div.color-container div.more button.selected{border:1px solid var(--deckdeckgo-palette-color-hex, var(--deckgo-button-more-border))}div.color-container div.more input{bottom:0;right:0;width:1px;height:1px;visibility:hidden;opacity:0;transform:translate(100%, 100%)}";
+const deckdeckgoColorCss = ":host{display:flex;align-items:center;flex-wrap:var(--deckgo-color-flex-wrap, wrap);overflow:var(--deckgo-color-overflow, visible);padding:var(--deckgo-color-padding, 8px);width:var(--deckgo-color-width, 288px)}button{width:var(--deckgo-color-button-width, 28px);height:var(--deckgo-color-button-height, 28px);margin:var(--deckgo-color-button-margin, 4px);padding:0;outline:var(--deckgo-color-button-outline, none);cursor:pointer;border:1px solid var(--deckdeckgo-palette-border-color, var(--deckdeckgo-palette-color-hex));border-radius:var(--deckgo-color-button-border-radius, 2px);background:var(--deckdeckgo-palette-color-hex)}button.selected{box-shadow:0 0 4px 4px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}button:not(.selected):hover,button:not(.selected):focus{box-shadow:0 0 2px 2px rgba(var(--deckdeckgo-palette-box-shadow-color, var(--deckdeckgo-palette-color-rgb)), 0.4)}";
 
@@ -49,15 +49,14 @@ const DeckdeckgoColor = class {
     this.colorChange = createEvent(this, "colorChange", 7);
+    /**
+     * The palette of color.
+     */
     this.palette = DEFAULT_PALETTE;
-    this.more = true;
-    this.moreAlt = 'More';
-    this.label = true;
+    /**
+     * An accessibility label for the color input field
+     */
+    this.inputAlt = 'Input a color (hex)';
     this.selectedColorPalette = false;
     this.selectColor = async ($event) => {
-      const selectedColor = $event.target.value;
-      const rgb = await hexToRgb(selectedColor);
-      const color = {
-        hex: selectedColor,
-        rgb: rgb,
-      };
-      this.applyColorHexChange(selectedColor, rgb);
+      const color = $event.detail;
+      this.applyColorHexChange(color.hex, color.rgb);
       this.colorChange.emit(color);
@@ -67,3 +66,2 @@ };
       this.selectedColorPalette = await this.initSelectedColorPalette();
-      await this.initSelectedColorPaletteAlt();
       this.selectedCustomColorRgb = !this.selectedColorPalette ? this.selectedColorRgb : undefined;
@@ -76,3 +74,2 @@ }, 150);
     this.selectedColorPalette = await this.initSelectedColorPalette();
-    await this.initSelectedColorPaletteAlt();
     if (!this.selectedColorPalette) {
@@ -82,8 +79,2 @@ this.selectedCustomColorRgb = this.selectedColorRgb;
   }
-  async componentDidLoad() {
-    await this.colorPickerListener(true);
-  }
-  async disconnectedCallback() {
-    await this.colorPickerListener(false);
-  }
   async onColorHexChange() {
@@ -116,3 +107,2 @@ this.applyColorHexChange(this.colorHex, undefined);
       this.selectedColorPalette = true;
-      await this.initSelectedColorPaletteAlt();
       this.selectedCustomColorRgb = undefined;
@@ -122,29 +112,2 @@ resolve();
   }
-  openColorPicker() {
-    return new Promise(async (resolve) => {
-      const colorPicker = this.el.shadowRoot.querySelector("input[name='color-picker']");
-      if (!colorPicker) {
-        resolve();
-        return;
-      }
-      colorPicker.click();
-      resolve();
-    });
-  }
-  colorPickerListener(bind) {
-    return new Promise((resolve) => {
-      const colorPicker = this.el.shadowRoot.querySelector("input[name='color-picker']");
-      if (!colorPicker) {
-        resolve();
-        return;
-      }
-      if (bind) {
-        colorPicker.addEventListener('change', this.selectColor, false);
-      }
-      else {
-        colorPicker.removeEventListener('change', this.selectColor, true);
-      }
-      resolve();
-    });
-  }
   isHexColorSelected(element) {
@@ -180,14 +143,4 @@ if (!element || !element.color || !element.color.hex) {
   }
-  async initSelectedColorPaletteAlt() {
-    if (!this.palette || this.palette.length <= 0) {
-      this.selectedColorLabel = undefined;
-      return undefined;
-    }
-    const palette = this.palette.find((element) => {
-      return this.isHexColorSelected(element) || this.isRgbColorSelected(element);
-    });
-    this.selectedColorLabel = palette ? palette.alt : undefined;
-  }
   render() {
-    return (h(Host, null, h("div", { class: "color-container", part: "container" }, this.renderPalette(), this.renderMore()), this.renderLabel()));
+    return (h(Host, null, this.renderPalette(), this.renderInput()));
   }
@@ -212,23 +165,5 @@ renderPalette() {
   }
-  renderMore() {
-    if (this.more) {
-      let style = {};
-      if (!this.selectedColorPalette && this.selectedColorHex) {
-        style['--deckdeckgo-palette-color-hex'] = this.selectedColorHex;
-      }
-      if (!this.selectedColorPalette && this.selectedCustomColorRgb) {
-        style['--deckdeckgo-palette-color-rgb'] = this.selectedCustomColorRgb;
-      }
-      return (h("div", { class: "more" }, h("button", { "aria-label": this.more, style: style, class: !this.selectedColorPalette && (this.selectedColorHex || this.selectedCustomColorRgb) ? 'selected' : undefined, onClick: () => this.openColorPicker() }, h("slot", { name: "more" })), h("input", { type: "color", name: "color-picker" })));
-    }
-    else {
-      return undefined;
-    }
+  renderInput() {
+    return (h("deckgo-color-input", { colorHex: this.selectedColorHex, colorRgb: this.selectedColorRgb, customColorRgb: this.selectedCustomColorRgb, inputAlt: this.inputAlt, onSelectHexColor: this.selectColor }));
   }
-  renderLabel() {
-    if (!this.label) {
-      return undefined;
-    }
-    return (h("deckgo-color-label", { colorHex: this.selectedColorHex, colorRgb: this.selectedColorRgb, colorLabel: this.selectedColorLabel, customColorRgb: this.selectedCustomColorRgb }, h("slot", { name: "custom-label" }, "Custom")));
-  }
   get el() { return getElement(this); }
@@ -242,7 +177,11 @@ static get watchers() { return {
 
-const deckdeckgoColorLabelCss = "p.color-label{margin:var(--deckgo-color-label-margin, 0);padding:var(--deckgo-color-label-padding, 12px 8px);font-size:var(--deckgo-color-label-font-size, 12px);min-height:var(--deckgo-color-label-min-height, 15px);text-align:var(--deckgo-color-label-text-align, center)}p.color-label small{font-weight:var(--deckgo-color-label-color-font-weight, 300)}";
+const deckdeckgoColorInputCss = ":host{display:flex;position:relative;margin:var(--deckgo-color-input-margin, 4px)}span{width:var(--deckgo-color-hash-width, 28px);height:var(--deckgo-color-hash-height, 28px);display:inline-flex;justify-content:center;align-items:center;background:var(--deckgo-color-hash-background, #f0f0f0 none repeat scroll 0 0);color:var(--deckgo-color-hash-color, #98a1a4);border-radius:var(--deckgo-color-hash-border-radius, 4px 0 0 4px)}input{color:var(--deckgo-color-input-color, #666666);border:none;outline:none;height:var(--deckgo-color-input-height, 28px);box-shadow:var(--deckgo-color-input-box-shadow, #f0f0f0 0 0 0 1px inset);border-radius:var(--deckgo-color-input-border-radius, 0 4px 4px 0);padding:var(--deckgo-color-input-padding, 0 4px);max-width:var(--deckgo-color-input-max-width, 136px)}";
 
-const DeckdeckgoColorLabel = class {
+const DeckdeckgoColorInput = class {
   constructor(hostRef) {
     registerInstance(this, hostRef);
+    this.selectHexColor = createEvent(this, "selectHexColor", 7);
+    this.debounceSelectColor = debounce(async (inputColor) => {
+      await this.emitColor(inputColor);
+    }, 500);
   }
@@ -264,8 +203,17 @@ async componentWillLoad() {
   }
-  render() {
-    if (!this.colorHex && !this.customColorRgb && !this.colorRgb) {
-      return h("p", { class: "color-label" });
+  async emitColor(inputColor) {
+    const hex = `#${inputColor.replace('#', '')}`;
+    const rgb = await hexToRgb(hex);
+    if (!rgb) {
+      return;
     }
-    return (h("p", { class: "color-label" }, h("span", null, this.colorLabel ? this.colorLabel : h("slot", null)), " ", h("small", null, this.color)));
+    this.selectHexColor.emit({
+      hex,
+      rgb,
+    });
   }
+  render() {
+    var _a;
+    return (h(Host, null, h("span", null, "#"), h("input", { type: "text", name: "color-picker", "aria-label": this.inputAlt, onInput: ($event) => this.debounceSelectColor($event.target.value), value: (_a = this.color) === null || _a === void 0 ? void 0 : _a.replace('#', '') })));
+  }
   static get watchers() { return {
@@ -277,4 +225,4 @@ "colorHex": ["watchColors"],
 };
-DeckdeckgoColorLabel.style = deckdeckgoColorLabelCss;
+DeckdeckgoColorInput.style = deckdeckgoColorInputCss;
 
-export { DeckdeckgoColor as deckgo_color, DeckdeckgoColorLabel as deckgo_color_label };
+export { DeckdeckgoColor as deckgo_color, DeckdeckgoColorInput as deckgo_color_input };

dist/esm/loader.js

@@ -1,5 +0,5 @@
-import { p as promiseResolve, b as bootstrapLazy } from './index-06e43934.js';
+import { p as promiseResolve, b as bootstrapLazy } from './index-17ec0249.js';
 
 /*
- Stencil Client Patch Esm v2.0.2 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Esm v2.5.2 | MIT Licensed | https://stenciljs.com
  */
@@ -13,3 +13,3 @@ const patchEsm = () => {
   return patchEsm().then(() => {
-  return bootstrapLazy([["deckgo-color_2",[[1,"deckgo-color",{"palette":[1040],"more":[4],"moreAlt":[1,"more-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"label":[4],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32],"selectedColorLabel":[32]}],[1,"deckgo-color-label",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"colorLabel":[1,"color-label"],"customColorRgb":[1,"custom-color-rgb"],"color":[32]}]]]], options);
+  return bootstrapLazy([["deckgo-color_2",[[1,"deckgo-color",{"palette":[1040],"inputAlt":[1,"input-alt"],"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"selectedColorHex":[32],"selectedColorRgb":[32],"selectedColorPalette":[32],"selectedCustomColorRgb":[32]}],[1,"deckgo-color-input",{"colorHex":[1,"color-hex"],"colorRgb":[1,"color-rgb"],"customColorRgb":[1,"custom-color-rgb"],"inputAlt":[1,"input-alt"],"color":[32]}]]]], options);
   });
@@ -16,0 +16,0 @@ };

dist/esm/polyfills/index.js

@@ -11,3 +11,3 @@ export function applyPolyfills() {
 
-    function checkIfURLIsSupported() {
+    var checkIfURLIsSupported = function() {
       try {
@@ -20,3 +20,3 @@ var u = new URL('b', 'http://a');
       }
-    }
+    };
 
@@ -23,0 +23,0 @@ if (

dist/types/components.d.ts

@@ -11,14 +11,24 @@ /* eslint-disable */
     interface DeckgoColor {
+        /**
+          * The current selected color provided as hexadecimal value
+         */
         "colorHex": string;
+        /**
+          * The current selected color provided as a rgb value (without "rgb()", only value such as for example 255, 67, 54)
+         */
         "colorRgb": string;
-        "label": boolean;
-        "more": boolean;
-        "moreAlt": string;
+        /**
+          * An accessibility label for the color input field
+         */
+        "inputAlt": string;
+        /**
+          * The palette of color.
+         */
         "palette": DeckdeckgoPalette[];
     }
-    interface DeckgoColorLabel {
+    interface DeckgoColorInput {
         "colorHex": string;
-        "colorLabel": string;
         "colorRgb": string;
         "customColorRgb": string;
+        "inputAlt": string;
     }
@@ -33,11 +43,11 @@ }
     };
-    interface HTMLDeckgoColorLabelElement extends Components.DeckgoColorLabel, HTMLStencilElement {
+    interface HTMLDeckgoColorInputElement extends Components.DeckgoColorInput, HTMLStencilElement {
     }
-    var HTMLDeckgoColorLabelElement: {
-        prototype: HTMLDeckgoColorLabelElement;
-        new (): HTMLDeckgoColorLabelElement;
+    var HTMLDeckgoColorInputElement: {
+        prototype: HTMLDeckgoColorInputElement;
+        new (): HTMLDeckgoColorInputElement;
     };
     interface HTMLElementTagNameMap {
         "deckgo-color": HTMLDeckgoColorElement;
-        "deckgo-color-label": HTMLDeckgoColorLabelElement;
+        "deckgo-color-input": HTMLDeckgoColorInputElement;
     }
@@ -47,19 +57,33 @@ }
     interface DeckgoColor {
+        /**
+          * The current selected color provided as hexadecimal value
+         */
         "colorHex"?: string;
+        /**
+          * The current selected color provided as a rgb value (without "rgb()", only value such as for example 255, 67, 54)
+         */
         "colorRgb"?: string;
-        "label"?: boolean;
-        "more"?: boolean;
-        "moreAlt"?: string;
+        /**
+          * An accessibility label for the color input field
+         */
+        "inputAlt"?: string;
+        /**
+          * Emit the selected color
+         */
         "onColorChange"?: (event: CustomEvent<DeckdeckgoPaletteColor>) => void;
+        /**
+          * The palette of color.
+         */
         "palette"?: DeckdeckgoPalette[];
     }
-    interface DeckgoColorLabel {
+    interface DeckgoColorInput {
         "colorHex"?: string;
-        "colorLabel"?: string;
         "colorRgb"?: string;
         "customColorRgb"?: string;
+        "inputAlt"?: string;
+        "onSelectHexColor"?: (event: CustomEvent<DeckdeckgoPaletteColor>) => void;
     }
     interface IntrinsicElements {
         "deckgo-color": DeckgoColor;
-        "deckgo-color-label": DeckgoColorLabel;
+        "deckgo-color-input": DeckgoColorInput;
     }
@@ -72,5 +96,5 @@ }
             "deckgo-color": LocalJSX.DeckgoColor & JSXBase.HTMLAttributes<HTMLDeckgoColorElement>;
-            "deckgo-color-label": LocalJSX.DeckgoColorLabel & JSXBase.HTMLAttributes<HTMLDeckgoColorLabelElement>;
+            "deckgo-color-input": LocalJSX.DeckgoColorInput & JSXBase.HTMLAttributes<HTMLDeckgoColorInputElement>;
         }
     }
 }

dist/types/components/color/deckdeckgo-color.d.ts

@@ -5,8 +5,18 @@ import { EventEmitter } from '../../stencil-public-runtime';
   el: HTMLElement;
+  /**
+   * The palette of color.
+   */
   palette: DeckdeckgoPalette[];
-  more: boolean;
-  moreAlt: string;
+  /**
+   * An accessibility label for the color input field
+   */
+  inputAlt: string;
+  /**
+   * The current selected color provided as hexadecimal value
+   */
   colorHex: string;
+  /**
+   * The current selected color provided as a rgb value (without "rgb()", only value such as for example 255, 67, 54)
+   */
   colorRgb: string;
-  label: boolean;
   private selectedColorHex;
@@ -16,3 +26,5 @@ private selectedColorRgb;
   private selectedCustomColorRgb;
-  private selectedColorLabel;
+  /**
+   * Emit the selected color
+   */
   colorChange: EventEmitter<DeckdeckgoPaletteColor>;
@@ -22,4 +34,2 @@ private readonly debounceInitSelectedColorPalette;
   componentWillLoad(): Promise<void>;
-  componentDidLoad(): Promise<void>;
-  disconnectedCallback(): Promise<void>;
   onColorHexChange(): Promise<void>;
@@ -29,4 +39,2 @@ private applyColorHexChange;
   private pickColor;
-  private openColorPicker;
-  private colorPickerListener;
   private selectColor;
@@ -36,7 +44,5 @@ private isHexColorSelected;
   private initSelectedColorPalette;
-  private initSelectedColorPaletteAlt;
   render(): any;
   private renderPalette;
-  private renderMore;
-  private renderLabel;
+  private renderInput;
 }

dist/types/stencil-public-runtime.d.ts

@@ -155,2 +155,8 @@ declare type CustomMethodDecorator<T> = (target: Object, propertyKey: string | symbol, descriptor: TypedPropertyDescriptor<T>) => TypedPropertyDescriptor<T> | void;
 /**
+ * The `Env` object provides access to the "env" object declared in the project's `stencil.config.ts`.
+ */
+export declare const Env: {
+    [prop: string]: string | undefined;
+};
+/**
  * The `@Component()` decorator is used to provide metadata about the component class.
@@ -213,2 +219,3 @@ * https://stenciljs.com/docs/component
 export declare type ResolutionHandler = (elm: HTMLElement) => string | undefined | null;
+export declare type ErrorHandler = (err: any, element?: HTMLElement) => void;
 /**
@@ -273,2 +280,7 @@ * `setMode()` is used for libraries which provide multiple "modes" for styles.
 /**
+ * `setErrorHandler()` can be used to inject a custom global error handler.
+ * Unhandled exception raised while rendering, during event handling, or lifecycles will trigger the custom event handler.
+ */
+export declare const setErrorHandler: (handler: ErrorHandler) => void;
+/**
  * This file gets copied to all distributions of stencil component collections.
@@ -436,9 +448,9 @@ * - no imports
     function h(sel: any): VNode;
-    function h(sel: Node, data: VNodeData): VNode;
-    function h(sel: any, data: VNodeData): VNode;
+    function h(sel: Node, data: VNodeData | null): VNode;
+    function h(sel: any, data: VNodeData | null): VNode;
     function h(sel: any, text: string): VNode;
     function h(sel: any, children: Array<VNode | undefined | null>): VNode;
-    function h(sel: any, data: VNodeData, text: string): VNode;
-    function h(sel: any, data: VNodeData, children: Array<VNode | undefined | null>): VNode;
-    function h(sel: any, data: VNodeData, children: VNode): VNode;
+    function h(sel: any, data: VNodeData | null, text: string): VNode;
+    function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
+    function h(sel: any, data: VNodeData | null, children: VNode): VNode;
     namespace JSX {
@@ -450,2 +462,10 @@ interface IntrinsicElements extends LocalJSX.IntrinsicElements, JSXBase.IntrinsicElements {
 }
+export declare function h(sel: any): VNode;
+export declare function h(sel: Node, data: VNodeData | null): VNode;
+export declare function h(sel: any, data: VNodeData | null): VNode;
+export declare function h(sel: any, text: string): VNode;
+export declare function h(sel: any, children: Array<VNode | undefined | null>): VNode;
+export declare function h(sel: any, data: VNodeData | null, text: string): VNode;
+export declare function h(sel: any, data: VNodeData | null, children: Array<VNode | undefined | null>): VNode;
+export declare function h(sel: any, data: VNodeData | null, children: VNode): VNode;
 export interface VNode {
@@ -1427,6 +1447,6 @@ $flags$: number;
         onFocusCapture?: (event: FocusEvent) => void;
-        onFocusIn?: (event: FocusEvent) => void;
-        onFocusInCapture?: (event: FocusEvent) => void;
-        onFocusOut?: (event: FocusEvent) => void;
-        onFocusOutCapture?: (event: FocusEvent) => void;
+        onFocusin?: (event: FocusEvent) => void;
+        onFocusinCapture?: (event: FocusEvent) => void;
+        onFocusout?: (event: FocusEvent) => void;
+        onFocusoutCapture?: (event: FocusEvent) => void;
         onBlur?: (event: FocusEvent) => void;
@@ -1433,0 +1453,0 @@ onBlurCapture?: (event: FocusEvent) => void;

package.json

 {
   "name": "@deckdeckgo/color",
-  "version": "3.1.1",
+  "version": "4.0.0",
   "description": "A color picker developed with Web Components",
@@ -20,3 +20,3 @@ "main": "dist/index.cjs.js",
   "scripts": {
-    "build": "stencil build",
+    "build": "stencil build --docs",
     "start": "stencil build --dev --watch --serve",
@@ -28,9 +28,9 @@ "test": "stencil test --spec --e2e",
   "devDependencies": {
-    "@stencil/core": "^2.0.2",
+    "@stencil/core": "^2.5.2",
     "@stencil/postcss": "^1.0.1",
-    "@stencil/sass": "^1.3.2",
+    "@stencil/sass": "^1.4.1",
     "autoprefixer": "^9.8.6",
-    "husky": "^4.2.5",
-    "prettier": "2.1.1",
-    "pretty-quick": "^3.0.0"
+    "husky": "^6.0.0",
+    "prettier": "2.2.1",
+    "pretty-quick": "^3.1.0"
   },
@@ -62,3 +62,3 @@ "license": "MIT",
   "dependencies": {
-    "@deckdeckgo/utils": "^1.3.0"
+    "@deckdeckgo/utils": "^1.8.1"
   },
@@ -65,0 +65,0 @@ "husky": {

README.md

@@ -23,3 +23,3 @@ [![npm][npm-badge]][npm-badge-url]
 
-To get started with this Web Component, have a look to its [documentation](https://docs.deckdeckgo.com/components/color).
+To get started with this Web Component, have a look to its [documentation](https://docs.deckdeckgo.com/?path=/story/components-color--color).
 
@@ -26,0 +26,0 @@ ## Develop

Fixed alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Number of low supply chain risk alerts

1

decreased by-75%

Worsened metrics

Total package byte prevSize

343820

decreased by-1.71%

Lines of code

5805

decreased by-1.44%

Dependency changes

• Updated@deckdeckgo/utils@^1.8.1