@thednp/color-picker 2.0.0-alpha1 → 2.0.0-alpha10

package/.eslintrc.cjs

@@ -127,7 +127,7 @@ module.exports = {
     indent: 'off',
     'jsdoc/check-alignment': 'error',
     'jsdoc/check-indentation': 'error',
-    'jsdoc/newline-after-description': 'error',
+    // 'jsdoc/newline-after-description': 'error',
     'linebreak-style': 'off',
     'max-classes-per-file': ['error', 1],
     'max-len': 'off',

package/README.md

@@ -4,13 +4,13 @@
 [![ci](https://github.com/thednp/color-picker/actions/workflows/ci.yml/badge.svg)](https://github.com/thednp/color-picker/actions/workflows/ci.yml)
 [![jsDeliver](https://img.shields.io/jsdelivr/npm/hw/@thednp/color-picker)](https://www.jsdelivr.com/package/npm/@thednp/color-picker)
 [![NPM Version](https://img.shields.io/npm/v/@thednp/color-picker.svg)](https://www.npmjs.com/package/@thednp/color-picker)
-[![typescript version](https://img.shields.io/badge/typescript-5.0.3-brightgreen)](https://www.typescriptlang.org/)
-[![eslint version](https://img.shields.io/badge/eslint-8.37.0-brightgreen)](https://github.com/eslint)
-[![prettier version](https://img.shields.io/badge/prettier-2.8.7-brightgreen)](https://prettier.io/)
-[![cypress version](https://img.shields.io/badge/cypress-12.9.0-brightgreen)](https://cypress.io/)
-[![vite version](https://img.shields.io/badge/vite-4.3.9-brightgreen)](https://github.com/vitejs)
+[![typescript version](https://img.shields.io/badge/typescript-5.2.2-brightgreen)](https://www.typescriptlang.org/)
+[![eslint version](https://img.shields.io/badge/eslint-8.49.0-brightgreen)](https://github.com/eslint)
+[![prettier version](https://img.shields.io/badge/prettier-3.0.3-brightgreen)](https://prettier.io/)
+[![cypress version](https://img.shields.io/badge/cypress-13.1.0-brightgreen)](https://cypress.io/)
+[![vite version](https://img.shields.io/badge/vite-4.4.9-brightgreen)](https://github.com/vitejs)
 
-The feature rich **ColorPicker** component for the modern web sourced with TypeScript, Cypress tested, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply [Color](http://github.com/thednp/color).
+The feature rich **ColorPicker** component for the modern web, sourced with TypeScript, Cypress tested, WAI-ARIA compliant and lots of goodies. In addition, it features its own version of [TinyColor](https://github.com/bgrins/TinyColor) called simply [Color](http://github.com/thednp/color).
 
 **ColorPicker** can use existing colour palettes or generate custom ones via DATA API configuration. If you want to play, check out [this codepen](https://codepen.io/thednp/pen/WNdRWPN) I've setup for you. Have fun!
 
@@ -19,12 +19,13 @@ The feature rich **ColorPicker** component for the modern web sourced with TypeS
 ## Highlights
 
 - Accessibility Focus for WAI-ARIA compliance
-- ES6+ sources with TypeScript definitions
+- TypeScript sourced code base
 - Framework agnostic and flexible design
 - Supporting HEX(a), RGB(a), HSL(a) and HWB, the last three also in CSS4 Color Module flavours
 - Supports keyboard and touch events
 - Automatic repositioning of the popup dropdown on show / window scroll
 - SCSS sources with minimal style required
+- Cypress tested
 - Right To Left Languages Supported
 - light footprint, `10kb` in size when minified and gZipped
 

package/compile.js

@@ -2,12 +2,15 @@
 // Build script to compile and minify the CSS file from SCSS folder
 // Usage: npm run compile-scss
 
-const fs = require("fs");
-const writeFileSync = fs.writeFileSync;
+const {writeFileSync} = require("fs");
+// const writeFileSync = fs.writeFileSync;
+// import { writeFileSync } from "fs";
 const sass = require("sass");
 const pkg = require("./package.json");
 const year = new Date().getFullYear();
 const args = {};
+const pkName = pkg.name.includes(pkg.author) ? pkg.name.replace('@','') : `${pkg.author}/${pkg.name}`;
+const home = `https://github.com/${pkName}`;
 
 const ARGS = process.argv.slice(-1)[0].split(",");
 ARGS.map((x) => {
@@ -22,7 +25,7 @@ const banner =
     : `/*!
 * ColorPicker v${pkg.version} (${pkg.homepage})
 * Copyright ${year} © ${pkg.author}
-* Licensed under MIT (${pkg.license}/blob/main/LICENSE)
+* Licensed under MIT (${home}/blob/main/LICENSE)
 */`;
 
 const DIR = args.DIR === "rtl" ? ".rtl" : "";

package/cypress/e2e/color-picker.cy.ts

@@ -80,11 +80,10 @@ describe('ColorPicker Class Test', () => {
       });
       
     cy.document().should('not.be.undefined')
-      .get('@input').should('exist')
-      cy.document().invoke('querySelectorAll', selector)
-      .then((nodelist ) => {
-        [...nodelist as NodeListOf<HTMLInputElement>].forEach(init);
-      })
+    cy.get('@input').should('exist')
+    cy.document().invoke('querySelectorAll', selector).then((nodelist ) => {
+      [...nodelist as NodeListOf<HTMLInputElement>].forEach(init);
+    })
 
     cy.get('@input').then(($input) => {
       if ($input.length) {
@@ -95,8 +94,9 @@ describe('ColorPicker Class Test', () => {
 
     cy.get('@cp').should('exist')
       .get('@cp').then(() => {
-        cy.get('@cp').its('colorLabels').then(({white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink}) => {
-          expect([white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink])
+        cy.get('@cp').its('colorLabels').then((lbls) => {
+          // console.log(lbls)
+          expect(Object.values(lbls))
             .to.deep.equal(colorNamesFrench.split(','));
         })
 
@@ -130,17 +130,18 @@ describe('ColorPicker Class Test', () => {
             colorLabels: colorNamesFrench,
             componentLabels: componentLabelsFrench,
           });
-          console.log(cp)
+          // console.log(cp)
           cy.wrap(cp).as('cp');
           cy.get('@cp').then(() => {
             cy.get('@cp').its('input').should('equal', input[0]);
             cy.get('@cp').its('format').should('equal', format);
             cy.get('@cp').its('value').should('equal', value);
             cy.get('@cp').its('colorPresets').should('be.instanceOf', Array);
-            cy.get('@cp').its('colorLabels')
-              .then(({white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink}) => {
-                expect([white,black,grey,red,orange,brown,gold,olive,yellow,lime,green,teal,cyan,blue,violet,magenta,pink]).to.deep.equal(colorNamesFrench.split(','));
-              });
+            cy.get('@cp').its('colorLabels').then((lbls) => {
+              // console.log(lbls)
+              expect(Object.values(lbls))
+                .to.deep.equal(colorNamesFrench.split(','));
+            })
             cy.get('@cp').its('colorKeywords').should('deep.equal', ['orange', 'lime', 'darkred']);
             cy.get('@cp').its('colorPicker').should('be.instanceOf', HTMLDivElement);
             cy.get('@cp').its('colorMenu').should('be.instanceOf', HTMLDivElement);
@@ -180,10 +181,7 @@ describe('ColorPicker Class Test', () => {
           cy.wrap(new ColorPicker(input[0], {
             colorPresets: '#330033, #990099, #ff00ff, #ff66ff, #ffccff'.split(','),
           })).as('cp');
-          // cy.get('@cp')
-          // .then(() => {
-            cy.get('@cp').its('colorPresets').should('be.instanceOf', Array);
-          // });
+          cy.get('@cp').its('colorPresets').should('be.instanceOf', Array);
         }
       });
     });
@@ -203,12 +201,15 @@ describe('ColorPicker Class Test', () => {
             cy.wrap(input[0]).focus().clear().type('hsl 0 100 50{enter}')
             cy.wait(50)
             cy.get('@cp').its('rgb').then((rgb) => {
-                cy.get('.visual-control').eq(0).trigger('pointerdown', 0, 0, { force: true, pointerType: 'touch' })
-                cy.get('.visual-control').eq(0).trigger('pointermove', -5, -5, { force: true, pointerType: 'touch' })
-                cy.get('.visual-control').eq(0).trigger('pointermove', 500, 500, { force: true, pointerType: 'touch' })
-                cy.get('.visual-control').eq(0).trigger('pointermove', 100, 100, { force: true, pointerType: 'touch' })
-                cy.get('.visual-control').eq(0).trigger('pointerup', 100, 100, { force: true, pointerType: 'touch' }).then(() => {
-                  cy.wait(17)
+                // cy.wait(17)
+
+              cy.get('.visual-control').eq(0)
+                .trigger('pointerdown', 0, 0, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                .trigger('pointermove', -5, -5, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                .trigger('pointermove', 500, 500, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                .trigger('pointermove', 100, 100, {eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                .trigger('pointerup', 100, 100, {eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                .then(() => {
                   cy.get('@cp').its('rgb').should('not.deep.equal', rgb);
                 })
             });
@@ -216,26 +217,25 @@ describe('ColorPicker Class Test', () => {
             cy.wrap(input[0]).focus().clear().type('hsl 0 100 50{enter}')
               .get('@cp').its('rgb').then((rgb) => {
                 cy.get('.visual-control').eq(1)
-                  .trigger('pointerdown', 3, 0, { force: true, pointerType: 'touch' })
-                  .trigger('pointermove', 0, -5, { force: true, pointerType: 'touch' })
-                  .trigger('pointermove', 3, 500, { force: true, pointerType: 'touch' })
-                  .trigger('pointermove', 3, 100, { force: true, pointerType: 'touch' })
-                  .trigger('pointerup', 3, 100, { force: true, pointerType: 'touch' })
+                  .trigger('pointerdown', 3, 0, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointermove', 0, -5, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointermove', 3, 500, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointermove', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointerup', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
                   .then(() => {
-                    cy.wait(17)
-                      .get('@cp').its('rgb').should('not.deep.equal', rgb);
+                    cy.get('@cp').its('rgb').should('not.deep.equal', rgb);
                   })
               });
         
               cy.wrap(input[0]).focus().clear().type('hsl 0 100 50{enter}')
-              .get('@cp').its('rgb').then((rgb) => {
+              cy.get('@cp').its('rgb').then((rgb) => {
                 cy.get('.visual-control').eq(2)
-                  .trigger('pointerdown', 3, 0, { force: true, pointerType: 'touch' })
-                  .trigger('pointermove', 3, -5, { force: true, pointerType: 'touch' })
-                  .trigger('pointermove', 3, 200, { force: true, pointerType: 'touch' })
-                  .trigger('pointermove', 3, 500, { force: true, pointerType: 'touch' })
-                  .trigger('pointermove', 3, 100, { force: true, pointerType: 'touch' })
-                  .trigger('pointerup', 3, 100, { force: true, pointerType: 'touch' })
+                  .trigger('pointerdown', 3, 0, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointermove', 3, -5, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointermove', 3, 200, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointermove', 3, 500, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointermove', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
+                  .trigger('pointerup', 3, 100, { eventConstructor: 'PointerEvent', force: true, pointerType: 'touch' })
                   .then(() => {
                     cy.wait(17)
                     .get('@cp').its('rgb').should('not.deep.equal', rgb);
@@ -253,11 +253,7 @@ describe('ColorPicker Class Test', () => {
       const format = FORMAT[getRandomInt(0,3)];
       getMarkup(body, id, format);
 
-      const a = document.createElement('button');
-      // a.setAttribute('href', '#');
-      a.innerText = 'Some link';
-      body.append(a);
-      cy.wrap(a).as('a');
+      // cy.wrap(a).as('a');
       // cy.get(`#color-picker-${id}`).then((input) => {
       cy.get('input').then((input) => {
         cy.wrap(input[0]).as('input');
@@ -329,16 +325,9 @@ describe('ColorPicker Class Test', () => {
     cy.wait(17);
 
     cy.log('Testing `focusout` on `input`');
-    cy.get('@a').focus()
-    cy.get('@a').blur()
 
-    // cy.get('@a').focus();
-    cy.wait(17)
-    // cy.get('@a').trigger('focusin', {force: true})
-    // cy.get('@a').trigger('focusout', {force: true})
-      // .then(() => {
-        cy.get('.color-dropdown.picker').should('not.have.class', 'show')
-      // });
+    cy.get('a.my-link').eq(0).click({force: true})
+    cy.get('.color-dropdown.picker').should('not.have.class', 'show')
 
     cy.wait(17);
 
@@ -601,12 +590,12 @@ describe('ColorPicker Class Test', () => {
             const { width, height} = visual[0].getBoundingClientRect();
             
             cy.get('.knob').eq(0)
-              .trigger('pointerdown', { force: true })
-              .trigger('pointermove', -width, -height, { force: true })
-              .trigger('pointermove', -width - 100, -height - 100, { force: true })
-              .trigger('pointermove', 300, 300, { force: true })
-              .trigger('pointermove', -width + 50, -height + 50, { force: true })
-              .wait(17)
+              .trigger('pointerdown', { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', -width, -height, { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', -width - 100, -height - 100, { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', 300, 300, { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', -width + 50, -height + 50, { eventConstructor: 'PointerEvent', force: true })
+              // .wait(17)
               .get('@cp').its('rgb').should('not.deep.equal', rgb);
           });
         });
@@ -617,11 +606,11 @@ describe('ColorPicker Class Test', () => {
             const { width, height } = visual[0].getBoundingClientRect();
   
             cy.get('.knob').eq(1)
-              .trigger('pointerdown', { force: true })
-              .trigger('pointermove', width / 2, -height - 100, { force: true })
-              .trigger('pointermove', width / 2, 300, { force: true })
-              .trigger('pointermove', width / 2, -height + 20, { force: true })
-              .wait(17)
+              .trigger('pointerdown', { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', width / 2, -height - 100, { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', width / 2, 300, { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', width / 2, -height + 20, { eventConstructor: 'PointerEvent', force: true })
+              // .wait(17)
               .get('@cp').its('rgb').should('not.deep.equal', rgb);
             });
           });
@@ -632,11 +621,11 @@ describe('ColorPicker Class Test', () => {
             const { width, height } = visual[0].getBoundingClientRect();
   
             cy.get('.knob').eq(2)
-              .trigger('pointerdown', { force: true })
-              .trigger('pointermove', width / 2, -height - 100, { force: true })
-              .trigger('pointermove', width / 2, 300, { force: true })
-              .trigger('pointermove', width / 2, -height + 20, { force: true })
-              .wait(17)
+              .trigger('pointerdown', { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', width / 2, -height - 100, { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', width / 2, 300, { eventConstructor: 'PointerEvent', force: true })
+              .trigger('pointermove', width / 2, -height + 20, { eventConstructor: 'PointerEvent', force: true })
+              // .wait(17)
               .get('@cp').its('rgb').should('not.deep.equal', rgb);
             });
           });
@@ -653,7 +642,7 @@ describe('ColorPicker Class Test', () => {
           .trigger('keydown', { code: 'ArrowRight' })
           .trigger('keydown', { code: 'ArrowRight' })
           .trigger('keydown', { code: 'ArrowLeft' })
-          .wait(17)
+          // .wait(17)
           .get('@cp').its('rgb').should('not.deep.equal', rgb);
       });
   
@@ -667,7 +656,7 @@ describe('ColorPicker Class Test', () => {
           .trigger('keydown', { code: 'ArrowLeft' })
           .trigger('keydown', { code: 'ArrowLeft' })
           .trigger('keydown', { code: 'ArrowRight' })
-          .wait(17)
+          // .wait(17)
           .get('@cp').its('rgb').should('not.deep.equal', rgb);
       });
   
@@ -681,7 +670,7 @@ describe('ColorPicker Class Test', () => {
           .trigger('keydown', { code: 'ArrowLeft' })
           .trigger('keydown', { code: 'ArrowLeft' })
           .trigger('keydown', { code: 'ArrowRight' })
-          .wait(17)
+          // .wait(17)
           .get('@cp').its('rgb').should('not.deep.equal', rgb);
       });      
     });

package/cypress/fixtures/getMarkup.js

@@ -20,9 +20,16 @@ export default function getMarkup(body, id, format) {
   input.setAttribute('autocomplete', "off");
   input.setAttribute('spellcheck', "false");
   input.setAttribute('data-format', format);
+
+  const a = document.createElement('a');
+  a.setAttribute('href', '#');
+  a.innerText = 'Some link';
+  a.className = 'my-link';
+  a.style = 'position: absolute; top: 20px; opacity: 0.015';
+  // body.append(a);
   cpWrapper.append(input);
   if (body) {
-    body.append(label, cpWrapper);
+    body.append(label, cpWrapper, a);
   }
   return {set, value};
 }

package/dist/css/color-picker.css

@@ -1,7 +1,7 @@
 /*!
-* ColorPicker v2.0.0-alpha1 (http://thednp.github.io/color-picker)
+* ColorPicker v2.0.0-alpha10 (http://thednp.github.io/color-picker)
 * Copyright 2023 © thednp
-* Licensed under MIT (MIT/blob/main/LICENSE)
+* Licensed under MIT (https://github.com/thednp/color-picker/blob/main/LICENSE)
 */
 /* :host */
 .color-picker {
@@ -40,6 +40,9 @@
   --option-bg-active: var(--white-90);
   --visual-shadow: 0 0 0 1px var(--white-15) inset;
 }
+.color-picker *, .color-picker *::before, .color-picker *::after {
+  box-sizing: border-box;
+}
 
 .color-picker:focus {
   outline: none;
@@ -107,7 +110,6 @@
 /* btn-appearance */
 .btn-appearance {
   width: 100%;
-  height: 1.5rem;
   padding: 0.6rem 1rem;
   font-size: 1rem;
   line-height: 1.5;
@@ -157,10 +159,10 @@
 /* picker-toggle */
 .picker-toggle {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
   background: transparent;
   border: 0;
 }
@@ -291,7 +293,7 @@
   transition: var(--options-transition);
 }
 
-.color-options.scrollable:hover {
+.color-dropdown.menu:hover .scrollable {
   height: var(--grid-hover-height);
 }
 
@@ -312,7 +314,7 @@
   width: var(--grid-item-size);
   height: var(--grid-item-size);
   overflow: hidden;
-  text-indent: 2.1rem;
+  color: rgba(0, 0, 0, 0);
 }
 .color-options .color-option:active, .color-options .color-option:focus {
   outline: none;
@@ -397,14 +399,14 @@
 
 /* visual control */
 .visual-control {
-  height: 150px;
+  height: 230px;
   /* important for mobile devices */
   touch-action: none;
   box-shadow: var(--visual-shadow);
 }
 
 .visual-control1 {
-  width: 150px;
+  width: 230px;
 }
 
 .visual-control2,
@@ -413,15 +415,7 @@
   cursor: ns-resize;
 }
 
-@media (min-width: 578px) {
-  .visual-control {
-    height: 230px;
-  }
-  .visual-control1 {
-    width: 230px;
-  }
-}
-@media (min-width: 1200px) {
+@media (width >= 980px) {
   .visual-control {
     height: 300px;
   }
@@ -449,6 +443,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   height: 7px;
   /* important for mobile devices */
   touch-action: none;

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

@@ -1,2 +1,2 @@
-/* ColorPicker v2.0.0-alpha1 | 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(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-alpha10 | 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 *,.color-picker *::before,.color-picker *::after{box-sizing:border-box}.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%;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;inset:0;width:100%;height:100%;cursor:pointer;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-dropdown.menu:hover .scrollable{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;color:rgba(0,0,0,0)}.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:230px;touch-action:none;box-shadow:var(--visual-shadow)}.visual-control1{width:230px}.visual-control2,.visual-control3{width:21px;cursor:ns-resize}@media(width >= 980px){.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;width:100%;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,7 +1,7 @@
 /*!
-* ColorPicker v2.0.0-alpha1 (http://thednp.github.io/color-picker)
+* ColorPicker v2.0.0-alpha10 (http://thednp.github.io/color-picker)
 * Copyright 2023 © thednp
-* Licensed under MIT (MIT/blob/main/LICENSE)
+* Licensed under MIT (https://github.com/thednp/color-picker/blob/main/LICENSE)
 */
 /* :host */
 .color-picker {
@@ -40,6 +40,9 @@
   --option-bg-active: var(--white-90);
   --visual-shadow: 0 0 0 1px var(--white-15) inset;
 }
+.color-picker *, .color-picker *::before, .color-picker *::after {
+  box-sizing: border-box;
+}
 
 .color-picker:focus {
   outline: none;
@@ -107,7 +110,6 @@
 /* btn-appearance */
 .btn-appearance {
   width: 100%;
-  height: 1.5rem;
   padding: 0.6rem 1rem;
   font-size: 1rem;
   line-height: 1.5;
@@ -157,10 +159,10 @@
 /* picker-toggle */
 .picker-toggle {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
   background: transparent;
   border: 0;
 }
@@ -291,7 +293,7 @@
   transition: var(--options-transition);
 }
 
-.color-options.scrollable:hover {
+.color-dropdown.menu:hover .scrollable {
   height: var(--grid-hover-height);
 }
 
@@ -312,7 +314,7 @@
   width: var(--grid-item-size);
   height: var(--grid-item-size);
   overflow: hidden;
-  text-indent: 2.1rem;
+  color: rgba(0, 0, 0, 0);
 }
 .color-options .color-option:active, .color-options .color-option:focus {
   outline: none;
@@ -397,14 +399,14 @@
 
 /* visual control */
 .visual-control {
-  height: 150px;
+  height: 230px;
   /* important for mobile devices */
   touch-action: none;
   box-shadow: var(--visual-shadow);
 }
 
 .visual-control1 {
-  width: 150px;
+  width: 230px;
 }
 
 .visual-control2,
@@ -413,15 +415,7 @@
   cursor: ns-resize;
 }
 
-@media (min-width: 578px) {
-  .visual-control {
-    height: 230px;
-  }
-  .visual-control1 {
-    width: 230px;
-  }
-}
-@media (min-width: 1200px) {
+@media (width >= 980px) {
   .visual-control {
     height: 300px;
   }
@@ -449,6 +443,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   height: 7px;
   /* important for mobile devices */
   touch-action: none;