@thednp/color-picker 2.0.0-alpha6 → 2.0.0-alpha8

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thednp/color-picker",
-  "version": "2.0.0-alpha6",
+  "version": "2.0.0-alpha8",
   "author": "thednp",
   "license": "MIT",
   "description": "🎨 Modern Color Picker Component",
@@ -16,13 +16,13 @@
       "import": "./dist/js/color-picker.mjs",
       "types": "./dist/js/color-picker.d.ts"
     },
-    "./dist/color-picker.css": {
-      "import": "./dist/color-picker.css",
-      "require": "./dist/color-picker.css"
+    "./dist/css/color-picker.css": {
+      "import": "./dist/css/color-picker.css",
+      "require": "./dist/css/color-picker.css"
     },
-    "./dist/color-picker.rtl.css": {
-      "import": "./dist/color-picker.rtl.css",
-      "require": "./dist/color-picker.rtl.css"
+    "./dist/css/color-picker.rtl.css": {
+      "import": "./dist/css/color-picker.rtl.css",
+      "require": "./dist/css/color-picker.rtl.css"
     },
     "./src/scss/color-picker.scss": {
       "import": "./src/scss/color-picker.scss",
@@ -80,35 +80,35 @@
   ],
   "dependencies": {
     "@thednp/color": "^1.0.8",
-    "@thednp/event-listener": "^2.0.1",
-    "@thednp/shorty": "^2.0.0-alpha15"
+    "@thednp/event-listener": "^2.0.2",
+    "@thednp/shorty": "^2.0.0-alpha16"
   },
   "devDependencies": {
     "@bahmutov/cypress-esbuild-preprocessor": "^2.2.0",
-    "@cypress/code-coverage": "^3.10.8",
+    "@cypress/code-coverage": "^3.11.0",
     "@types/istanbul-lib-instrument": "^1.7.4",
-    "@typescript-eslint/eslint-plugin": "^5.60.1",
-    "@typescript-eslint/parser": "^5.60.1",
-    "cypress": "^12.16.0",
+    "@typescript-eslint/eslint-plugin": "^6.3.0",
+    "@typescript-eslint/parser": "^6.3.0",
+    "cypress": "^12.17.3",
     "dts-bundle-generator": "^8.0.1",
-    "eslint": "^8.44.0",
-    "eslint-plugin-jsdoc": "^46.4.3",
+    "eslint": "^8.47.0",
+    "eslint-plugin-jsdoc": "^46.4.6",
     "eslint-plugin-prefer-arrow": "^1.2.3",
-    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-prettier": "^5.0.0",
     "istanbul-lib-coverage": "^3.2.0",
-    "istanbul-lib-instrument": "^5.2.1",
+    "istanbul-lib-instrument": "^6.0.0",
     "ncp": "^2.0.0",
     "npm-run-all": "^4.1.5",
     "nyc": "^15.1.0",
-    "prettier": "^2.8.8",
+    "prettier": "^3.0.1",
     "rimraf": "^5.0.1",
-    "sass": "^1.63.6",
-    "stylelint": "^15.9.0",
-    "stylelint-config-standard": "^33.0.0",
+    "sass": "^1.65.1",
+    "stylelint": "^15.10.2",
+    "stylelint-config-standard": "^34.0.0",
     "stylelint-config-standard-scss": "^10.0.0",
     "stylelint-order": "^6.0.3",
-    "stylelint-scss": "^5.0.1",
+    "stylelint-scss": "^5.1.0",
     "typescript": "^5.1.6",
-    "vite": "^4.3.9"
+    "vite": "^4.4.9"
   }
 }

package/src/scss/color-picker.scss

@@ -5,6 +5,10 @@
   position: relative;
   display: flex;
 
+  *, *::before, *::after {
+    box-sizing: border-box;
+  }
+
   @each $name in "white", "black" {
     @each $lvl in $transparency-levels {
       @if  type-of($name) == "string" and type-of($lvl) == "number" {
@@ -98,7 +102,8 @@
 /* btn-appearance */
 .btn-appearance {
   width: 100%;
-  height: 1.5rem;
+
+  // height: 1.5rem;
   padding: .6rem 1rem;
   font-size: 1rem;
   line-height: 1.5;
@@ -151,10 +156,10 @@
 /* picker-toggle */
 .picker-toggle {
   position: absolute;
-  top: 0;
-  left: 0;
+  inset: 0;
   width: 100%;
   height: 100%;
+  cursor: pointer;
   background: transparent;
   border: 0;
 }
@@ -461,6 +466,7 @@
   position: absolute;
   top: 0;
   left: 0;
+  width: 100%;
   height: 7px;
 
   /* important for mobile devices */