@eventcatalog/visualiser 3.21.0 → 3.21.1

package/dist/styles-core.css

@@ -107,6 +107,7 @@
   --color-slate-500: oklch(55.4% 0.046 257.417);
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
   --color-gray-50: oklch(98.5% 0.002 247.839);
   --color-gray-100: oklch(96.7% 0.003 264.542);
   --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -229,6 +230,9 @@
 .eventcatalog-visualizer .bottom-4 {
   bottom: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .bottom-full {
+  bottom: 100%;
+}
 .eventcatalog-visualizer .\!left-\[-0px\] {
   left: -0px !important;
 }
@@ -562,6 +566,9 @@
 .eventcatalog-visualizer .w-full {
   width: 100%;
 }
+.eventcatalog-visualizer .w-max {
+  width: max-content;
+}
 .eventcatalog-visualizer .max-w-40 {
   max-width: calc(var(--spacing) * 40);
 }
@@ -577,6 +584,9 @@
 .eventcatalog-visualizer .max-w-\[280px\] {
   max-width: 280px;
 }
+.eventcatalog-visualizer .max-w-\[320px\] {
+  max-width: 320px;
+}
 .eventcatalog-visualizer .max-w-full {
   max-width: 100%;
 }
@@ -636,6 +646,9 @@
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.eventcatalog-visualizer .rotate-45 {
+  rotate: 45deg;
+}
 .eventcatalog-visualizer .rotate-180 {
   rotate: 180deg;
 }
@@ -845,6 +858,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
+.eventcatalog-visualizer .border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .eventcatalog-visualizer .border-r-\[1px\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -1400,6 +1417,9 @@
 .eventcatalog-visualizer .bg-slate-500 {
   background-color: var(--color-slate-500);
 }
+.eventcatalog-visualizer .bg-slate-950 {
+  background-color: var(--color-slate-950);
+}
 .eventcatalog-visualizer .bg-teal-500 {
   background-color: var(--color-teal-500);
 }
@@ -1760,6 +1780,9 @@
 .eventcatalog-visualizer .px-2 {
   padding-inline: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .px-3 {
   padding-inline: calc(var(--spacing) * 3);
 }
@@ -1866,6 +1889,9 @@
 .eventcatalog-visualizer .text-\[10px\] {
   font-size: 10px;
 }
+.eventcatalog-visualizer .text-\[11px\] {
+  font-size: 11px;
+}
 .eventcatalog-visualizer .text-\[12px\] {
   font-size: 12px;
 }
@@ -2614,6 +2640,18 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.eventcatalog-visualizer .group-focus-within\:block {
+  .eventcatalog-visualizer &:is(:where(.group):focus-within *) {
+    display: block;
+  }
+}
+.eventcatalog-visualizer .group-hover\:block {
+  .eventcatalog-visualizer &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      display: block;
+    }
+  }
+}
 .eventcatalog-visualizer .group-hover\:text-\[rgb\(var\(--ec-accent\)\)\] {
   .eventcatalog-visualizer &:is(:where(.group):hover *) {
     @media (hover: hover) {
@@ -3654,6 +3692,9 @@
 .eventcatalog-visualizer .react-flow__node {
   cursor: pointer;
 }
+.eventcatalog-visualizer .react-flow__node:hover .ec-truncated-resource-name-tooltip {
+  display: block;
+}
 .eventcatalog-visualizer .ec-animating-layout .react-flow__node {
   transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 }

package/dist/styles.css

@@ -107,6 +107,7 @@
   --color-slate-500: oklch(55.4% 0.046 257.417);
   --color-slate-600: oklch(44.6% 0.043 257.281);
   --color-slate-700: oklch(37.2% 0.044 257.287);
+  --color-slate-950: oklch(12.9% 0.042 264.695);
   --color-gray-50: oklch(98.5% 0.002 247.839);
   --color-gray-100: oklch(96.7% 0.003 264.542);
   --color-gray-200: oklch(92.8% 0.006 264.531);
@@ -229,6 +230,9 @@
 .eventcatalog-visualizer .bottom-4 {
   bottom: calc(var(--spacing) * 4);
 }
+.eventcatalog-visualizer .bottom-full {
+  bottom: 100%;
+}
 .eventcatalog-visualizer .\!left-\[-0px\] {
   left: -0px !important;
 }
@@ -562,6 +566,9 @@
 .eventcatalog-visualizer .w-full {
   width: 100%;
 }
+.eventcatalog-visualizer .w-max {
+  width: max-content;
+}
 .eventcatalog-visualizer .max-w-40 {
   max-width: calc(var(--spacing) * 40);
 }
@@ -577,6 +584,9 @@
 .eventcatalog-visualizer .max-w-\[280px\] {
   max-width: 280px;
 }
+.eventcatalog-visualizer .max-w-\[320px\] {
+  max-width: 320px;
+}
 .eventcatalog-visualizer .max-w-full {
   max-width: 100%;
 }
@@ -636,6 +646,9 @@
   --tw-scale-z: 110%;
   scale: var(--tw-scale-x) var(--tw-scale-y);
 }
+.eventcatalog-visualizer .rotate-45 {
+  rotate: 45deg;
+}
 .eventcatalog-visualizer .rotate-180 {
   rotate: 180deg;
 }
@@ -845,6 +858,10 @@
   border-top-style: var(--tw-border-style);
   border-top-width: 1px;
 }
+.eventcatalog-visualizer .border-r {
+  border-right-style: var(--tw-border-style);
+  border-right-width: 1px;
+}
 .eventcatalog-visualizer .border-r-\[1px\] {
   border-right-style: var(--tw-border-style);
   border-right-width: 1px;
@@ -1400,6 +1417,9 @@
 .eventcatalog-visualizer .bg-slate-500 {
   background-color: var(--color-slate-500);
 }
+.eventcatalog-visualizer .bg-slate-950 {
+  background-color: var(--color-slate-950);
+}
 .eventcatalog-visualizer .bg-teal-500 {
   background-color: var(--color-teal-500);
 }
@@ -1760,6 +1780,9 @@
 .eventcatalog-visualizer .px-2 {
   padding-inline: calc(var(--spacing) * 2);
 }
+.eventcatalog-visualizer .px-2\.5 {
+  padding-inline: calc(var(--spacing) * 2.5);
+}
 .eventcatalog-visualizer .px-3 {
   padding-inline: calc(var(--spacing) * 3);
 }
@@ -1866,6 +1889,9 @@
 .eventcatalog-visualizer .text-\[10px\] {
   font-size: 10px;
 }
+.eventcatalog-visualizer .text-\[11px\] {
+  font-size: 11px;
+}
 .eventcatalog-visualizer .text-\[12px\] {
   font-size: 12px;
 }
@@ -2614,6 +2640,18 @@
   --tw-outline-style: none;
   outline-style: none;
 }
+.eventcatalog-visualizer .group-focus-within\:block {
+  .eventcatalog-visualizer &:is(:where(.group):focus-within *) {
+    display: block;
+  }
+}
+.eventcatalog-visualizer .group-hover\:block {
+  .eventcatalog-visualizer &:is(:where(.group):hover *) {
+    @media (hover: hover) {
+      display: block;
+    }
+  }
+}
 .eventcatalog-visualizer .group-hover\:text-\[rgb\(var\(--ec-accent\)\)\] {
   .eventcatalog-visualizer &:is(:where(.group):hover *) {
     @media (hover: hover) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eventcatalog/visualiser",
-  "version": "3.21.0",
+  "version": "3.21.1",
   "description": "ReactFlow nodes and visualiser components for EventCatalog - framework agnostic",
   "main": "dist/index.js",
   "module": "dist/index.mjs",