@operato/styles - npm Package Compare versions

Comparing version 2.0.0-beta.5 to 2.0.0-beta.13

CHANGELOG.md

@@ -6,2 +6,11 @@ # Change Log
 
+## [2.0.0-beta.13](https://github.com/hatiolab/operato/compare/v2.0.0-beta.12...v2.0.0-beta.13) (2024-06-09)
+
+
+### :rocket: New Features
+
+* tooltip-reactive-controller for mouse over/out ([73f069b](https://github.com/hatiolab/operato/commit/73f069b4e8c1472cc991010bbe7b3866035a05f0))
+
+
+
 ## [2.0.0-beta.5](https://github.com/hatiolab/operato/compare/v2.0.0-beta.4...v2.0.0-beta.5) (2024-06-04)
@@ -8,0 +17,0 @@

dist/src/tooltip-styles.js

 import { css } from 'lit';
 export const TooltipStyles = css `
   /* for tooltip */
-  [data-tooltip]:after {
-    position: absolute;
+  [data-tooltip]::after {
+    position: fixed;
     content: attr(data-tooltip);
-    color: #fff;
+    color: var(--tooltip-color, var(--md-sys-color-surface));
+    pointer-events: none;
     z-index: 1000;
-    pointer-events: none;
     display: block;
 
-    padding: var(--tooltip-padding);
-    background-color: var(--tooltip-background-color, black);
+    padding: var(--tooltip-padding, var(--spacing-small, 2px));
+    background-color: var(--tooltip-background-color, var(--md-sys-color-on-surface));
     font: var(--tooltip-font);
     box-shadow: var(--box-shadow);
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius, var(--md-sys-shape-corner-small, 2px));
 
-    left: var(--tooltip-left-positon-left);
-    top: var(--tooltip-left-position-top);
-    right: var(--tooltip-left-position-right);
-    bottom: var(--tooltip-left-position-bottom);
+    left: var(--tooltip-left);
+    top: var(--tooltip-top);
 
@@ -23,0 +21,0 @@ max-width: var(--tooltip-max-width, 300px);

package.json

@@ -5,3 +5,3 @@ {
   "author": "heartyoh",
-  "version": "2.0.0-beta.5",
+  "version": "2.0.0-beta.13",
   "main": "dist/src/index.js",
@@ -54,3 +54,3 @@ "module": "dist/src/index.js",
   "prettier": "@hatiolab/prettier-config",
-  "gitHead": "e313b5e6d8ece67e94618ee7ea7c1ef2f1036d40"
+  "gitHead": "719dcda3f81008118bc3593658f3e68570dd8866"
 }

src/tooltip-styles.ts

@@ -5,20 +5,18 @@ import { css } from 'lit'
   /* for tooltip */
-  [data-tooltip]:after {
-    position: absolute;
+  [data-tooltip]::after {
+    position: fixed;
     content: attr(data-tooltip);
-    color: #fff;
+    color: var(--tooltip-color, var(--md-sys-color-surface));
+    pointer-events: none;
     z-index: 1000;
-    pointer-events: none;
     display: block;
 
-    padding: var(--tooltip-padding);
-    background-color: var(--tooltip-background-color, black);
+    padding: var(--tooltip-padding, var(--spacing-small, 2px));
+    background-color: var(--tooltip-background-color, var(--md-sys-color-on-surface));
     font: var(--tooltip-font);
     box-shadow: var(--box-shadow);
-    border-radius: var(--border-radius);
+    border-radius: var(--border-radius, var(--md-sys-shape-corner-small, 2px));
 
-    left: var(--tooltip-left-positon-left);
-    top: var(--tooltip-left-position-top);
-    right: var(--tooltip-left-position-right);
-    bottom: var(--tooltip-left-position-bottom);
+    left: var(--tooltip-left);
+    top: var(--tooltip-top);
 
@@ -25,0 +23,0 @@ max-width: var(--tooltip-max-width, 300px);

No alert changes

Improved metrics

Total package byte prevSize

250647

increased by0.13%

Worsened metrics

Lines of code

3794

decreased by-0.11%

No dependency changes