@thednp/color-picker 1.0.1 → 2.0.0-alpha2

package/cypress/fixtures/colorNamesFrench.js

@@ -0,0 +1,3 @@
+const colorNamesFrench = 'blanc,noir,gris,rouge,orange,brun,or,olive,jaune,citron,vert,sarcelle,cyan,bleu,violet,magenta,rose';
+
+export default colorNamesFrench;

package/cypress/fixtures/componentLabelsFrench.js

@@ -0,0 +1,21 @@
+const componentLabelsFrench = {
+  pickerLabel: "Couleur Sélection", 
+  appearanceLabel: "Apparence de la couleur", 
+  valueLabel: "Valeur de couleur", 
+  toggleLabel: "Sélectionner la couleur", 
+  presetsLabel: "Préréglages de couleur", 
+  defaultsLabel: "Couleur par défaut", 
+  formatLabel: "Format", 
+  alphaLabel: "Alpha", 
+  hexLabel: "Hexadécimal", 
+  hueLabel: "Nuance", 
+  whitenessLabel: "Blancheur", 
+  blacknessLabel: "Noirceur", 
+  saturationLabel: "Saturation", 
+  lightnessLabel: "Légèreté", 
+  redLabel: "Rouge", 
+  greenLabel: "Vert", 
+  blueLabel: "Bleu",
+};
+
+export default componentLabelsFrench;

package/cypress/fixtures/format.js

@@ -0,0 +1,3 @@
+const FORMAT = ['hsl', 'rgb', 'hwb', 'hex'];
+
+export default FORMAT;

package/cypress/fixtures/getCEMarkup.js

@@ -0,0 +1,29 @@
+import ColorPickerElement from '../../src/js/color-picker-element';
+
+import getRandomInt from './getRandomInt';
+import testSample from './testSample';
+import FORMAT from './format';
+import colorNamesFrench from './colorNamesFrench';
+import componentLabelsFrench from './componentLabelsFrench';
+
+export default function getCEMarkup(body) {
+  const id = getRandomInt(0,9999);
+  const format = FORMAT[getRandomInt(0,3)];
+  const sample = testSample[getRandomInt(0,2)];
+  const value = sample[format];
+
+  // const cpe = document.createElement('color-picker');
+  const cpe = new ColorPickerElement();
+  cpe.setAttribute('data-id', `cpe-${format}-${id}`);
+  cpe.setAttribute('data-format', format);
+  cpe.setAttribute('data-value', value);
+  cpe.setAttribute('data-component-labels', JSON.stringify(componentLabelsFrench));
+  cpe.setAttribute('data-color-labels', colorNamesFrench);
+  cpe.setAttribute('data-color-keywords', 'red,gree,blue');
+  cpe.setAttribute('data-color-presets', '#330000,#990000,#ff0000,#ff6666,#ffcccc,#003333,#009999,#00ffff,#66ffff,#ccffff');
+
+  if (body) {
+    body.append(cpe);
+  }
+  return {value, id, format};
+}

package/cypress/fixtures/getMarkup.js

@@ -0,0 +1,28 @@
+import testSample from "./testSample";
+import getRandomInt from "./getRandomInt";
+
+export default function getMarkup(body, id, format) {
+  const set = testSample[getRandomInt(0,3)];
+  const value = set[format];
+
+  const label = document.createElement('label');
+  label.setAttribute('for', `color-picker-${id}`);
+  label.innerText = `Color Picker Test`;
+
+  const cpWrapper = document.createElement('div');
+  cpWrapper.className = 'color-picker';
+
+  const input = document.createElement('input');
+  input.type = 'text';
+  input.id = `color-picker-${id}`;
+  input.className = 'btn-appearance color-preview';
+  input.setAttribute('value', value);
+  input.setAttribute('autocomplete', "off");
+  input.setAttribute('spellcheck', "false");
+  input.setAttribute('data-format', format);
+  cpWrapper.append(input);
+  if (body) {
+    body.append(label, cpWrapper);
+  }
+  return {set, value};
+}

package/cypress/fixtures/getRandomInt.js

@@ -0,0 +1,6 @@
+export default function getRandomInt(min, max) {
+  min = Math.ceil(min);
+  max = Math.round(max);
+  // The maximum is exclusive and the minimum is inclusive
+  return Math.round(Math.random() * (max - min) + min);
+}

package/cypress/fixtures/sampleWebcolors.js

@@ -0,0 +1,18 @@
+const sampleWebcolors = [
+  {name:"white",rgb:"rgb(255, 255, 255)",hex:"#ffffff",hsl:"hsl(0, 0%, 100%)",hsl4:"hsl(0deg 0% 100%)",hwb:"hwb(0deg 100% 0%)",hsv:{h:0,s:0,v:1,a:1}},
+  {name:"black",rgb:"rgb(0, 0, 0)",hex:"#000000",hsl:"hsl(0, 0%, 0%)",hsl4:"hsl(0deg 0% 0%)",hwb:"hwb(0deg 0% 100%)",hsv:{h:0,s:0,v:0,a:1}},
+  {name:"yellow",rgb:"rgb(255, 255, 0)",hex:"#ffff00",hsl:"hsl(60, 100%, 50%)",hsl4:"hsl(60deg 100% 50%)",hwb:"hwb(60deg 0% 0%)",hsv: {h: 0.167, s: 1, v: 1, a: 1}},
+  {name:"green",rgb:"rgb(0, 128, 0)",hex:"#008000",hsl:"hsl(120, 100%, 25%)",hsl4:"hsl(120deg 100% 25%)",hwb:"hwb(120deg 0% 50%)",hsv: {h: 0.333, s: 1, v: 0.502, a: 1}},
+  {name:"red",rgb:"rgb(255, 0, 0)",hex:"#ff0000",hsl:"hsl(0, 100%, 50%)",hsl4:"hsl(0deg 100% 50%)",hwb:"hwb(0deg 0% 0%)",hsv:{h:0,s:1,v:1,a:1}},
+  {name:"pink",rgb:"rgb(255, 192, 203)",hex:"#ffc0cb",hsl:"hsl(350, 100%, 88%)",hsl4:"hsl(350deg 100% 88%)",hwb:"hwb(350deg 75% 0%)",hsv:{h:0.971,s:0.247,v:1,a:1}},
+  {name:"brown",rgb:"rgb(165, 42, 42)",hex:"#a52a2a",hsl:"hsl(0, 59%, 41%)",hsl4:"hsl(0deg 59% 41%)",hwb:"hwb(0deg 16% 35%)",hsv:{h:0,s:0.745,v:0.647,a:1}},
+  {name:"orange",rgb:"rgb(255, 165, 0)",hex:"#ffa500",hsl:"hsl(39, 100%, 50%)",hsl4:"hsl(39deg 100% 50%)",hwb:"hwb(39deg 0% 0%)",hsv:{h:0.108,s:1,v:1,a:1}},
+  {name:"darkorange",rgb:"rgb(255, 140, 0)",hex:"#ff8c00",hsl:"hsl(33, 100%, 50%)",hsl4:"hsl(33deg 100% 50%)",hwb:"hwb(33deg 0% 0%)",hsv:{h:0.092,s:1,v:1,a:1}},
+  {name:"cyan",rgb:"rgb(0, 255, 255)",hex:"#00ffff",hsl:"hsl(180, 100%, 50%)",hsl4:"hsl(180deg 100% 50%)",hwb:"hwb(180deg 0% 0%)",hsv:{h:0.5,s:1,v:1,a:1}},
+  {name:"yellow",rgb:"rgb(255, 255, 0)",hex:"#ffff00",hsl:"hsl(60, 100%, 50%)",hsl4:"hsl(60deg 100% 50%)",hwb:"hwb(60deg 0% 0%)",hsv:{h:0.167,s:1,v:1,a:1}},
+  {name:"navy",rgb:"rgb(0, 0, 128)",hex:"#000080",hsl:"hsl(240, 100%, 25%)",hsl4:"hsl(240deg 100% 25%)",hwb:"hwb(240deg 0% 50%)",hsv:{h:0.667,s:1,v:0.502,a:1}},
+  {name:"orchid",rgb:"rgb(218, 112, 214)",hex:"#da70d6",hsl:"hsl(302, 59%, 65%)",hsl4:"hsl(302deg 59% 65%)",hwb:"hwb(302deg 44% 15%)",hsv:{h: 0.84, s: 0.486, v: 0.855, a: 1}},
+  {name:"indigo",rgb:"rgb(75, 0, 130)",hex:"#4b0082",hsl:"hsl(275, 100%, 25%)",hsl4:"hsl(275deg 100% 25%)",hwb:"hwb(275deg 0% 49%)",hsv:{h: 0.763, s: 1, v: 0.51, a: 1}},
+];
+
+export default sampleWebcolors;

package/cypress/fixtures/testSample.js

@@ -0,0 +1,8 @@
+const testSample = [
+  {name: 'red', hex: '#f00', rgb: 'rgb(255, 0, 0)', hsl: 'hsl(0, 100%, 50%)', hwb: 'hwb(0deg 0% 0%)'},
+  {name: 'lime', hex: '#0f0', rgb: 'rgb(0, 255, 0)', hsl: 'hsl(120, 100%, 50%)', hwb: 'hwb(120deg 0% 0%)'},
+  {name: 'blue', hex: '#00f', rgb: 'rgb(0, 0, 255)', hsl: 'hsl(240, 100%, 50%)', hwb: 'hwb(240deg 0% 0%)'},
+  {name: 'pink', hex: '#f0f', rgb: 'rgb(255, 0, 255)', hsl: 'hsl(300, 100%, 50%)', hwb: 'hwb(300deg 0% 0%)'},
+];
+
+export default testSample;

package/cypress/plugins/esbuild-istanbul.ts

@@ -0,0 +1,50 @@
+// sources
+// * https://github.com/enketo/enketo-express/blob/master/tools/esbuild-plugin-istanbul.js
+'use strict';
+import esbuild from 'esbuild';
+import { promises } from 'fs';
+import { createInstrumenter } from 'istanbul-lib-instrument';
+import { extname, sep } from 'path';
+import tsCompile from './tsCompile';
+
+// import Cypress settings
+const sourceFolder = 'src';
+const [name] = process.cwd().split(sep).slice(-1);
+
+const sourceFilter = `${name}${sep}${sourceFolder}`;
+const instrumenter = createInstrumenter({
+  compact: false,
+  esModules: true,
+  preserveComments: true,
+  autoWrap: true,
+});
+
+const createEsbuildIstanbulPlugin = (): esbuild.Plugin => {
+  return {
+    name: 'istanbul',
+    setup(build: esbuild.PluginBuild) {
+      build.onLoad(
+        { filter: /\.(ts|tsx)$/ },
+        async ({ path }: esbuild.OnLoadArgs): Promise<{ contents: string } & Record<string, any>> => {
+          
+          if (!path.includes(sourceFilter)) {
+            // console.log("> compiling typescript %s for output build", path);
+            const contents = await promises.readFile(path, 'utf8');
+            return {
+              contents: ['.ts', '.tsx'].includes(extname(path)) ? tsCompile(path).outputText : contents,
+            };
+          }
+
+          // console.log("🧡 instrumenting %s for output coverage", path);
+          const { outputText, sourceMap } = tsCompile(path);
+
+          return {
+            contents: instrumenter.instrumentSync(outputText, path, sourceMap),
+          };
+        },
+      );
+    },
+  };
+};
+
+export default createEsbuildIstanbulPlugin;

package/cypress/plugins/tsCompile.ts

@@ -0,0 +1,34 @@
+// compile.ts
+import TypeScript from 'typescript';
+import { basename } from 'path';
+import { RawSourceMap } from 'source-map';
+import { readFileSync } from 'fs';
+
+export default function tsCompile(
+  path: string,
+  ops?: Partial<TypeScript.TranspileOptions>,
+): TypeScript.TranspileOutput & { sourceMap: RawSourceMap } {
+  // Default options -- you could also perform a merge, or use the project tsconfig.json
+  const options: TypeScript.TranspileOptions = Object.assign(
+    {
+      compilerOptions: {
+        allowJs: true,
+        esModuleInterop: true,
+        removeComments: false,
+        target: 99, // ESNext
+        allowSyntheticDefaultImports: true,
+        isolatedModules: true,
+        noEmitHelpers: true,
+        sourceMap: true,
+      } as Partial<TypeScript.CompilerOptions>,
+    },
+    ops,
+  );
+  const contents = readFileSync(path, { encoding: 'utf8' });
+  const { outputText, sourceMapText } = TypeScript.transpileModule(contents, options);
+  const sourceMap: RawSourceMap = JSON.parse(sourceMapText || '');
+  sourceMap.file = basename(path);
+  sourceMap.sources = [basename(path)];
+
+  return { outputText, sourceMap, sourceMapText };
+}

package/cypress/support/e2e.ts

@@ -0,0 +1,21 @@
+// ***********************************************************
+// This example support/index.js is processed and
+// loaded automatically before your test files.
+//
+// This is a great place to put global configuration and
+// behavior that modifies Cypress.
+//
+// You can change the location of this file or turn off
+// automatically serving support files with the
+// 'supportFile' configuration option.
+//
+// You can read more here:
+// https://on.cypress.io/configuration
+// ***********************************************************
+
+// Import commands.js using ES2015 syntax:
+// require('./commands')
+import './commands'
+
+// Alternatively you can use CommonJS syntax:
+import '@cypress/code-coverage/support'

package/cypress/test.html

@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <title>ColorPicker Testing Page</title>
+  <meta name="description" content="A modern and fully featured color picker web component">
+  <meta name="keywords" content="color, picker, colorpicker, web component, hwb, hex, rgb, hsl, hsv">
+  <link id="styles" rel="stylesheet" href="../dist/css/color-picker.css">
+  <style>
+    body { padding: 65vh 0 65vh 0; margin: 0 auto; width: 60vw; font-family: sans-serif }
+    color-picker, .color-picker {
+      margin: 0 0 2.5rem;
+      --dropdown-transition: none;
+      --btn-transition: none;
+      --options-transition: none;
+    }
+    label { margin: 0.5rem 0;display: block;}
+    body > a { position: absolute; top: 50%; left: 1rem; /* color: white !important clip: 0px 0px 0px 0px; height:0; width: 0 */ }
+  </style>
+</head>
+<body>
+</body>
+</html>

package/cypress.config.ts

@@ -0,0 +1,29 @@
+import { defineConfig } from "cypress";
+import createBundler from "@bahmutov/cypress-esbuild-preprocessor";
+import createEsbuildIstanbulPlugin from "./cypress/plugins/esbuild-istanbul";
+
+async function setupNodeEvents(
+  on: Cypress.PluginEvents,
+  config: Cypress.PluginConfigOptions
+): Promise<Cypress.PluginConfigOptions> {
+  await require("@cypress/code-coverage/task")(on, config);
+
+  on(
+    "file:preprocessor",
+    createBundler({
+      plugins: [createEsbuildIstanbulPlugin()],
+    })
+  );
+
+  // Make sure to return the config object as it might have been modified by the plugin.
+  return config;
+}
+
+export default defineConfig({
+  e2e: {
+    specPattern: "cypress/e2e/**/*.{js,jsx,ts,tsx}",
+    supportFile: "cypress/support/e2e.ts",
+    video: false,
+    setupNodeEvents,
+  },
+});

package/dist/css/color-picker.css

@@ -1,10 +1,9 @@
 /*!
-* ColorPicker v1.0.1 (http://thednp.github.io/color-picker)
-* Copyright 2022 © thednp
-* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
+* ColorPicker v2.0.0-alpha2 (http://thednp.github.io/color-picker)
+* Copyright 2023 © thednp
+* Licensed under MIT (MIT/blob/main/LICENSE)
 */
 /* :host */
-color-picker,
 .color-picker {
   position: relative;
   display: flex;
@@ -42,7 +41,6 @@ color-picker,
   --visual-shadow: 0 0 0 1px var(--white-15) inset;
 }
 
-color-picker:focus,
 .color-picker:focus {
   outline: none;
 }
@@ -69,6 +67,7 @@ color-picker:focus,
 
 .color-dropdown.menu {
   right: 0;
+  max-height: 230px;
 }
 
 .open .color-dropdown.top {
@@ -127,8 +126,7 @@ color-picker:focus,
 /* color-preview */
 .color-preview {
   box-shadow: 0 0 0 1px rgba(120, 120, 120, 0.33) inset;
-  direction: ltr;
-  /* color value can never be rtl */
+  direction: ltr; /* color value can never be rtl */
 }
 
 .txt-dark .color-preview {
@@ -188,8 +186,6 @@ color-picker:focus,
 .txt-light .menu-toggle {
   background: var(--black-50);
 }
-
-.txt-light .menu-toggle:focus,
 .txt-light .menu-toggle:focus {
   background: var(--black-75);
 }
@@ -197,8 +193,6 @@ color-picker:focus,
 .txt-dark .menu-toggle {
   background: var(--white-33);
 }
-
-.txt-dark .menu-toggle:focus,
 .txt-dark .menu-toggle:focus {
   background: var(--white-50);
 }
@@ -241,8 +235,7 @@ color-picker:focus,
 /* color-defaults */
 .color-defaults {
   display: none;
-  flex-wrap: wrap;
-  flex-flow: column;
+  flex-flow: column wrap;
   margin: 0;
   list-style: none;
   padding-inline: 0;
@@ -253,10 +246,6 @@ color-picker:focus,
   display: flex;
 }
 
-.color-dropdown.menu {
-  max-height: 230px;
-}
-
 .color-defaults .color-option {
   padding: 0.25rem 0.5rem;
   color: inherit;
@@ -311,8 +300,7 @@ color-picker:focus,
 }
 
 .multiline + .color-defaults {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 }
 .multiline + .color-defaults .color-option {
   padding: 0.25rem 0.33rem;
@@ -326,18 +314,14 @@ color-picker:focus,
   overflow: hidden;
   text-indent: 2.1rem;
 }
-
-.color-options .color-option:active,
-.color-options .color-option:focus {
+.color-options .color-option:active, .color-options .color-option:focus {
   outline: none;
+  box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
 }
 
 .color-options .color-option::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .color-options .color-option:hover::before,
@@ -348,12 +332,7 @@ color-picker:focus,
   mix-blend-mode: difference;
 }
 
-.color-options .color-option:active,
-.color-options .color-option:focus {
-  box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
-}
-
-.color-options .color-option.active:after {
+.color-options .color-option.active::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -364,19 +343,18 @@ color-picker:focus,
   border-radius: 4px;
 }
 
-.txt-dark .color-options .color-option.active:after {
+.txt-dark .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--white-90);
 }
 
-.txt-light .color-options .color-option.active:after {
+.txt-light .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--black-90);
 }
 
 /* color-form */
 .color-form {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: center;
   padding: 0.25rem 0 0;
   font: 12px sans-serif;
@@ -435,20 +413,18 @@ color-picker:focus,
   cursor: ns-resize;
 }
 
-@media (min-width: 578px) {
+@media (width >= 578px) {
   .visual-control {
     height: 230px;
   }
-
   .visual-control1 {
     width: 230px;
   }
 }
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
   .visual-control {
     height: 300px;
   }
-
   .visual-control1 {
     width: 300px;
   }

package/dist/css/color-picker.min.css

@@ -1,2 +1,2 @@
-/* ColorPicker v1.0.1 | thednp © 2022 | MIT-License */
-color-picker,.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}color-picker:focus,.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:var(--dropdown-color);background:var(--dropdown-bg);border-radius:.5rem;box-shadow:var(--dropdown-shadow);opacity:0;transition:var(--dropdown-transition)}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition:var(--btn-transition)}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px var(--black-15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:var(--white-75)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px var(--black-15)}.txt-dark .color-preview::placeholder{color:var(--white-50)}.txt-light .color-preview{color:var(--black-75)}.txt-light .color-preview:focus{color:var(--black-75);box-shadow:0 0 0 1px #000 inset,0 0 0 3px var(--black-15)}.txt-light .color-preview::placeholder{color:var(--black-50)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:var(--black-50)}.txt-light .menu-toggle:focus,.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus,.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:rgba(0,0,0,0);background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:var(--dropdown-scrollbar-bg)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--dropdown-scrollbar-bg-hover)}.color-defaults{display:none;flex-wrap:wrap;flex-flow:column;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-dropdown.menu{max-height:230px}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{color:var(--option-color-hover);background:var(--option-bg-hover);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:var(--option-color-active);background:var(--option-bg-active)}.color-options{--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;display:grid;padding:0;margin:0;list-style:none;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:var(--options-transition)}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-direction:row;flex-wrap:wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none}.color-options .color-option::before{position:absolute;top:0;right:0;bottom:0;left:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid var(--white-75);mix-blend-mode:difference}.color-options .color-option:active,.color-options .color-option:focus{box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option.active:after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active:after{box-shadow:0 0 0 4px var(--white-90)}.txt-light .color-options .color-option.active:after{box-shadow:0 0 0 4px var(--black-90)}.color-form{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:rgba(0,0,0,0);border:var(--input-border);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:var(--input-bg-hover);border:var(--input-border-hover)}.visual-control{height:150px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(min-width: 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(min-width: 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;touch-action:none;user-select:none;background-color:var(--knob-bg);border:var(--knob-border);border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:var(--knob-shadow-hover)}.knob:focus,.knob:active{z-index:1;box-shadow:var(--knob-shadow-active)}.color-pointer{width:7px;background-color:rgba(0,0,0,0);border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px var(--white-50)}.txt-light .color-pointer{box-shadow:0 0 0 5px var(--black-50)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px var(--white-75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px var(--black-75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px var(--white-90)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px var(--black-90)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}
+/* ColorPicker v2.0.0-alpha2 | thednp © 2023 | MIT-License */
+.color-picker{position:relative;display:flex;--white-15: rgba(255, 255, 255, 0.15);--white-25: rgba(255, 255, 255, 0.25);--white-33: rgba(255, 255, 255, 0.33);--white-50: rgba(255, 255, 255, 0.5);--white-75: rgba(255, 255, 255, 0.75);--white-90: rgba(255, 255, 255, 0.9);--black-15: rgba(0, 0, 0, 0.15);--black-25: rgba(0, 0, 0, 0.25);--black-33: rgba(0, 0, 0, 0.33);--black-50: rgba(0, 0, 0, 0.5);--black-75: rgba(0, 0, 0, 0.75);--black-90: rgba(0, 0, 0, 0.9);--dropdown-transition: transform 0.33s ease, opacity 0.33s ease;--btn-transition: box-shadow 0.33s ease, border 0.33s ease;--options-transition: height 0.33s ease;--dropdown-bg: var(--black-75);--dropdown-color: var(--white-75);--dropdown-shadow: 0 6px 12px var(--black-33);--dropdown-scrollbar-bg: var(--white-33);--dropdown-scrollbar-bg-hover: var(--white-50);--knob-bg: #000;--knob-border: 1px solid var(--white-90);--knob-shadow-hover: 0 0 0 6px var(--white-50);--knob-shadow-active: 0 0 0 6px var(--white-90);--input-border: 1px solid var(--white-15);--input-border-hover: 1px solid var(--white-33);--input-bg-hover: var(--black-15);--option-color-hover: var(--black-75);--option-bg-hover: var(--white-50);--option-color-active: var(--black-75);--option-bg-active: var(--white-90);--visual-shadow: 0 0 0 1px var(--white-15) inset}.color-picker:focus{outline:none}.color-dropdown{position:absolute;z-index:50;display:none;flex-direction:column;width:min-content;padding:.5rem;color:var(--dropdown-color);background:var(--dropdown-bg);border-radius:.5rem;box-shadow:var(--dropdown-shadow);opacity:0;transition:var(--dropdown-transition)}.color-dropdown.picker{left:0}.color-dropdown.menu{right:0;max-height:230px}.open .color-dropdown.top{top:auto;bottom:100%}.color-dropdown.bottom{top:100%}.open .color-dropdown.top,.open .color-dropdown.bottom{display:flex}.color-dropdown.show{opacity:1}.color-dropdown.show.top{transform:translate(0, -5px)}.color-dropdown.show.bottom{transform:translate(0, 5px)}.color-controls{display:none;flex-wrap:wrap;justify-content:space-between;width:max-content}.btn-appearance{width:100%;height:1.5rem;padding:.6rem 1rem;font-size:1rem;line-height:1.5;border:0;border-radius:.25rem;outline:none;appearance:none;transition:var(--btn-transition)}.btn-appearance:focus,.btn-appearance:hover{box-shadow:0 0 0 3px var(--black-15)}.color-preview{box-shadow:0 0 0 1px rgba(120,120,120,.33) inset;direction:ltr}.txt-dark .color-preview{color:var(--white-75)}.txt-dark .color-preview:focus{box-shadow:0 0 0 1px #fff inset,0 0 0 3px var(--black-15)}.txt-dark .color-preview::placeholder{color:var(--white-50)}.txt-light .color-preview{color:var(--black-75)}.txt-light .color-preview:focus{color:var(--black-75);box-shadow:0 0 0 1px #000 inset,0 0 0 3px var(--black-15)}.txt-light .color-preview::placeholder{color:var(--black-50)}.picker-toggle{position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0);border:0}.open .picker-toggle{z-index:-1}.menu-toggle{position:absolute;top:0;right:0;display:flex;width:3rem;height:100%;padding:0 .25rem;cursor:pointer;border:0;border-radius:0 .25rem .25rem 0}.txt-light .menu-toggle{background:var(--black-50)}.txt-light .menu-toggle:focus{background:var(--black-75)}.txt-dark .menu-toggle{background:var(--white-33)}.txt-dark .menu-toggle:focus{background:var(--white-50)}.menu-toggle svg{width:auto;height:100%}.scrollable{overflow-x:hidden;overflow-y:auto;scrollbar-width:thin}.scrollable::-webkit-scrollbar{width:.5rem}.scrollable::-webkit-scrollbar-track{background-color:rgba(0,0,0,0)}.scrollable::-webkit-scrollbar-thumb{width:.5rem;background-color:rgba(0,0,0,0);background-clip:content-box;border:0}.scrollable:hover::-webkit-scrollbar-thumb{background-color:var(--dropdown-scrollbar-bg)}.scrollable::-webkit-scrollbar-thumb:hover{background-color:var(--dropdown-scrollbar-bg-hover)}.color-defaults{display:none;flex-flow:column wrap;margin:0;list-style:none;padding-inline:0}.color-dropdown.menu .color-defaults,.color-dropdown.picker .color-controls{display:flex}.color-defaults .color-option{padding:.25rem .5rem;color:inherit}.color-option{cursor:pointer}.color-defaults .color-option:focus,.color-defaults .color-option:hover{color:var(--option-color-hover);background:var(--option-bg-hover);outline:none}.color-defaults .color-option:active,.color-defaults .color-option.active{color:var(--option-color-active);background:var(--option-bg-active)}.color-options{--grid-item-size: 2rem;--grid-fit: 5;--grid-gap: .25rem;--grid-height: auto;--grid-hover-height: auto;display:grid;padding:0;margin:0;list-style:none;grid-template-columns:repeat(var(--grid-fit), var(--grid-item-size));grid-template-rows:repeat(auto-fill, var(--grid-item-size));gap:var(--grid-gap)}.color-options.scrollable{height:var(--grid-height);margin:0 -0.5rem 0 0;overflow-y:scroll;transition:var(--options-transition)}.color-options.scrollable:hover{height:var(--grid-hover-height)}.color-options+.color-defaults{margin-top:.25rem}.multiline+.color-defaults{flex-flow:row wrap}.multiline+.color-defaults .color-option{padding:.25rem .33rem;font-size:12px}.color-options .color-option{position:relative;width:var(--grid-item-size);height:var(--grid-item-size);overflow:hidden;text-indent:2.1rem}.color-options .color-option:active,.color-options .color-option:focus{outline:none;box-shadow:0 0 0 4px rgba(125,125,125,.75) inset}.color-options .color-option::before{position:absolute;inset:0}.color-options .color-option:hover::before,.color-options .color-option:active::before,.color-options .color-option:focus::before{content:"";border:3px solid var(--white-75);mix-blend-mode:difference}.color-options .color-option.active::after{position:absolute;top:50%;left:50%;width:4px;height:4px;margin:-2px 0 0 -2px;content:"";border-radius:4px}.txt-dark .color-options .color-option.active::after{box-shadow:0 0 0 4px var(--white-90)}.txt-light .color-options .color-option.active::after{box-shadow:0 0 0 4px var(--black-90)}.color-form{display:flex;flex-flow:row wrap;align-items:center;padding:.25rem 0 0;font:12px sans-serif}.color-form.hex{max-width:initial}.color-form>*{flex:1 0 0%;width:17.5%;max-width:17.5%}.color-form label{width:7.5%;max-width:7.5%;text-align:center}.color-input{color:inherit;text-align:right;background:rgba(0,0,0,0);border:var(--input-border);outline:none}.color-input.hex{width:92.5%;max-width:92.5%}.color-input:active,.color-input:focus{background:var(--input-bg-hover);border:var(--input-border-hover)}.visual-control{height:150px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:150px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(width >= 578px){.visual-control{height:230px}.visual-control1{width:230px}}@media(width >= 1200px){.visual-control{height:300px}.visual-control1{width:300px}}.color-control{position:relative;display:inline-block}.color-slider{left:0;width:calc(100% - 2px);cursor:ns-resize}.color-control+.color-control{margin-left:.5rem}.knob{position:absolute;top:0;left:0;height:7px;touch-action:none;user-select:none;background-color:var(--knob-bg);border:var(--knob-border);border-radius:5px;outline:none;will-change:transform}.knob:hover{box-shadow:var(--knob-shadow-hover)}.knob:focus,.knob:active{z-index:1;box-shadow:var(--knob-shadow-active)}.color-pointer{width:7px;background-color:rgba(0,0,0,0);border:0}.txt-dark .color-pointer{box-shadow:0 0 0 5px var(--white-50)}.txt-light .color-pointer{box-shadow:0 0 0 5px var(--black-50)}.txt-dark .color-pointer:hover{box-shadow:0 0 0 5px var(--white-75)}.txt-light .color-pointer:hover{box-shadow:0 0 0 5px var(--black-75)}.txt-dark .color-pointer:focus,.txt-dark .color-pointer:active{box-shadow:0 0 0 5px var(--white-90)}.txt-light .color-pointer:focus,.txt-light .color-pointer:active{box-shadow:0 0 0 5px var(--black-90)}.v-hidden{position:absolute !important;width:1px !important;height:1px !important;padding:0 !important;margin:-1px !important;overflow:hidden !important;clip:rect(0, 0, 0, 0) !important;white-space:nowrap !important;border:0 !important}

package/dist/css/color-picker.rtl.css

@@ -1,10 +1,9 @@
 /*!
-* ColorPicker v1.0.1 (http://thednp.github.io/color-picker)
-* Copyright 2022 © thednp
-* Licensed under MIT (https://github.com/thednp/color-picker/blob/master/LICENSE)
+* ColorPicker v2.0.0-alpha2 (http://thednp.github.io/color-picker)
+* Copyright 2023 © thednp
+* Licensed under MIT (MIT/blob/main/LICENSE)
 */
 /* :host */
-color-picker,
 .color-picker {
   position: relative;
   display: flex;
@@ -42,7 +41,6 @@ color-picker,
   --visual-shadow: 0 0 0 1px var(--white-15) inset;
 }
 
-color-picker:focus,
 .color-picker:focus {
   outline: none;
 }
@@ -69,6 +67,7 @@ color-picker:focus,
 
 .color-dropdown.menu {
   right: 0;
+  max-height: 230px;
 }
 
 .open .color-dropdown.top {
@@ -127,8 +126,7 @@ color-picker:focus,
 /* color-preview */
 .color-preview {
   box-shadow: 0 0 0 1px rgba(120, 120, 120, 0.33) inset;
-  direction: ltr;
-  /* color value can never be rtl */
+  direction: ltr; /* color value can never be rtl */
 }
 
 .txt-dark .color-preview {
@@ -188,8 +186,6 @@ color-picker:focus,
 .txt-light .menu-toggle {
   background: var(--black-50);
 }
-
-.txt-light .menu-toggle:focus,
 .txt-light .menu-toggle:focus {
   background: var(--black-75);
 }
@@ -197,8 +193,6 @@ color-picker:focus,
 .txt-dark .menu-toggle {
   background: var(--white-33);
 }
-
-.txt-dark .menu-toggle:focus,
 .txt-dark .menu-toggle:focus {
   background: var(--white-50);
 }
@@ -241,8 +235,7 @@ color-picker:focus,
 /* color-defaults */
 .color-defaults {
   display: none;
-  flex-wrap: wrap;
-  flex-flow: column;
+  flex-flow: column wrap;
   margin: 0;
   list-style: none;
   padding-inline: 0;
@@ -253,10 +246,6 @@ color-picker:focus,
   display: flex;
 }
 
-.color-dropdown.menu {
-  max-height: 230px;
-}
-
 .color-defaults .color-option {
   padding: 0.25rem 0.5rem;
   color: inherit;
@@ -311,8 +300,7 @@ color-picker:focus,
 }
 
 .multiline + .color-defaults {
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
 }
 .multiline + .color-defaults .color-option {
   padding: 0.25rem 0.33rem;
@@ -326,18 +314,14 @@ color-picker:focus,
   overflow: hidden;
   text-indent: 2.1rem;
 }
-
-.color-options .color-option:active,
-.color-options .color-option:focus {
+.color-options .color-option:active, .color-options .color-option:focus {
   outline: none;
+  box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
 }
 
 .color-options .color-option::before {
   position: absolute;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
+  inset: 0;
 }
 
 .color-options .color-option:hover::before,
@@ -348,12 +332,7 @@ color-picker:focus,
   mix-blend-mode: difference;
 }
 
-.color-options .color-option:active,
-.color-options .color-option:focus {
-  box-shadow: 0 0 0 4px rgba(125, 125, 125, 0.75) inset;
-}
-
-.color-options .color-option.active:after {
+.color-options .color-option.active::after {
   position: absolute;
   top: 50%;
   left: 50%;
@@ -364,19 +343,18 @@ color-picker:focus,
   border-radius: 4px;
 }
 
-.txt-dark .color-options .color-option.active:after {
+.txt-dark .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--white-90);
 }
 
-.txt-light .color-options .color-option.active:after {
+.txt-light .color-options .color-option.active::after {
   box-shadow: 0 0 0 4px var(--black-90);
 }
 
 /* color-form */
 .color-form {
   display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
+  flex-flow: row wrap;
   align-items: center;
   padding: 0.25rem 0 0;
   font: 12px sans-serif;
@@ -435,20 +413,18 @@ color-picker:focus,
   cursor: ns-resize;
 }
 
-@media (min-width: 578px) {
+@media (width >= 578px) {
   .visual-control {
     height: 230px;
   }
-
   .visual-control1 {
     width: 230px;
   }
 }
-@media (min-width: 1200px) {
+@media (width >= 1200px) {
   .visual-control {
     height: 300px;
   }
-
   .visual-control1 {
     width: 300px;
   }