fix(tooltip): convert tooltip css variables to private (#204)

* fix(tooltip): convert tooltip css variables to private

* refactor(tooltip): linter fixes

src/components/tooltip/bl-tooltip.css

@@ -4,6 +4,10 @@
 }
 
 .tooltip {
+  --left: 0;
+  --top: 0;
+  --visibility: hidden;
+
   position: fixed;
   box-sizing: border-box;
   border: none;
@@ -13,29 +17,30 @@
   pointer-events: none;
   font: var(--bl-font-title-3-regular);
   padding: var(--bl-size-m);
-  left: var(--bl-tooltip-left, 0);
-  top: var(--bl-tooltip-top, 0);
-  visibility: var(--bl-tooltip-visibility, hidden);
+  left: var(--left);
+  top: var(--top);
+  visibility: var(--visibility);
   z-index: 999;
   max-width: 424px;
 }
 
 .arrow {
+  --arrow-top: 0;
+  --arrow-bottom: 0;
+  --arrow-right: 0;
+  --arrow-left: 0;
+
   position: absolute;
   background-color: var(--bl-color-secondary);
   width: var(--bl-size-2xs);
   height: var(--bl-size-2xs);
   transform: rotate(45deg);
-  top: var(--bl-tooltip-arrow-top, 0);
-  bottom: var(--bl-tooltip-arrow-bottom, 0);
-  right: var(--bl-tooltip-arrow-right, 0);
-  left: var(--bl-tooltip-arrow-left, 0);
+  top: var(--arrow-top);
+  bottom: var(--arrow-bottom);
+  right: var(--arrow-right);
+  left: var(--arrow-left);
 }
 
 .visible {
-  --bl-tooltip-visibility: visible;
-}
-
-.hidden {
-  --bl-tooltip-visibility: hidden;
+  --visibility: visible;
 }

src/components/tooltip/bl-tooltip.ts

@@ -25,8 +25,6 @@ export type Placement =
  * @summary Baklava Tooltip component
  *
  * @property {string} placement - Sets the tooltip placement
- *
- * @cssproperty --bl-tooltip-position - Sets the position. Default value is 'absolute'
  */
 
 @customElement('bl-tooltip')
@@ -79,13 +77,13 @@ export default class BlTooltip extends LitElement {
       const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowDirections;
       const arrowDirection = arrowDirections[tooltipPlacement];
 
-      this.tooltip.style.setProperty('--bl-tooltip-left', `${x}px`);
-      this.tooltip.style.setProperty('--bl-tooltip-top', `${y}px`);
-      this.arrow.style.setProperty('--bl-tooltip-arrow-left', arrowX);
-      this.arrow.style.setProperty('--bl-tooltip-arrow-top', arrowY);
-      this.arrow.style.setProperty('--bl-tooltip-arrow-bottom', '0');
-      this.arrow.style.setProperty('--bl-tooltip-arrow-right', '0');
-      this.arrow.style.setProperty(`--bl-tooltip-arrow-${arrowDirection}`, '-4px');
+      this.tooltip.style.setProperty('--left', `${x}px`);
+      this.tooltip.style.setProperty('--top', `${y}px`);
+      this.arrow.style.setProperty('--arrow-left', arrowX);
+      this.arrow.style.setProperty('--arrow-top', arrowY);
+      this.arrow.style.setProperty('--arrow-bottom', '0');
+      this.arrow.style.setProperty('--arrow-right', '0');
+      this.arrow.style.setProperty(`--arrow-${arrowDirection}`, '-4px');
     });
   }