🐛 Fix tooltip styles and components exports

packages/lib/src/components/core/lume-tooltip/components/lume-tooltip-item/lume-tooltip-item.vue

@@ -31,5 +31,5 @@ defineProps({
 </script>
 
 <style lang="scss" scoped>
-@use './styles';
+@use '../../styles';
 </style>

packages/lib/src/components/core/lume-tooltip/components/lume-tooltip-summary/lume-tooltip-summary.vue

@@ -13,5 +13,5 @@
 </template>
 
 <style lang="scss" scoped>
-@use './styles';
+@use '../../styles';
 </style>

packages/lib/src/components/core/lume-tooltip/components/lume-tooltip-title/lume-tooltip-title.vue

@@ -8,5 +8,5 @@
 </template>
 
 <style lang="scss" scoped>
-@use './styles';
+@use '../../styles';
 </style>

packages/lib/src/components/core/lume-tooltip/styles.scss

@@ -1,3 +1,5 @@
+@use 'sass:math';
+
 @use '@/styles/variables' as *;
 
 // Tooltip box -----------------------------------------------------------------
@@ -9,6 +11,15 @@ $lume-tooltip-max-width: 288px !default;
 $lume-tooltip-content-padding: $lume-spacing-10 !default;
 $lume-tooltip-z-index: 500 !default;
 
+$lume-tooltip-title-color: $lume-color-grey-100 !default;
+
+$lume-tooltip-item-color: $lume-color-grey-90 !default;
+$lume-tooltip-value-color: $lume-color-grey-100 !default;
+
+$lume-tooltip-item-line-height: $lume-line-height-sm !default;
+$lume-tooltip-item-min-width: 112px !default;
+$lume-tooltip-symbol-size: $lume-spacing-10 !default;
+
 .lume-tooltip {
   position: absolute;
   max-width: $lume-tooltip-max-width;
@@ -34,9 +45,46 @@ $lume-tooltip-z-index: 500 !default;
     }
   }
 
+  &__title {
+    margin-bottom: $lume-spacing-4;
+    font-weight: $lume-font-weight-medium;
+    color: $lume-tooltip-title-color;
+  }
+
   &__items {
     list-style: none;
     margin: 0;
     padding: 0;
   }
+
+  &__item {
+    display: flex;
+    min-width: $lume-tooltip-item-min-width;
+    margin-bottom: $lume-spacing-4;
+    color: $lume-tooltip-item-color;
+
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+
+  &__symbol {
+    margin-top: math.div(
+      $lume-tooltip-item-line-height - $lume-tooltip-symbol-size,
+      2
+    ); // default: 3px
+    margin-right: $lume-spacing-8;
+    width: $lume-tooltip-symbol-size;
+    height: $lume-tooltip-symbol-size;
+    flex-shrink: 0;
+    border-radius: 50%;
+  }
+
+  &__value {
+    flex-shrink: 0;
+    font-weight: $lume-font-weight-medium;
+    margin-left: auto;
+    padding-left: $lume-spacing-8;
+    color: $lume-tooltip-value-color;
+  }
 }

packages/lib/src/components/index.ts

@@ -17,7 +17,11 @@ export { default as LumeAxis } from './core/lume-axis/lume-axis.vue';
 export { default as LumeChart } from './core/lume-chart/lume-chart.vue';
 export { default as LumeChartContainer } from './core/lume-chart-container/lume-chart-container.vue';
 export { default as LumeChartLegend } from './core/lume-chart-legend/lume-chart-legend.vue';
+
 export { default as LumeTooltip } from './core/lume-tooltip/lume-tooltip.vue';
+export { default as LumeTooltipItem } from './core/lume-tooltip/components/lume-tooltip-item/lume-tooltip-item.vue';
+export { default as LumeTooltipSummary } from './core/lume-tooltip/components/lume-tooltip-summary/lume-tooltip-summary.vue';
+export { default as LumeTooltipTitle } from './core/lume-tooltip/components/lume-tooltip-title/lume-tooltip-title.vue';
 
 export { default as LumeBar } from './core/lume-bar/lume-bar.vue';
 export { default as LumeLine } from './core/lume-line/lume-line.vue';