@neo4j-ndl/base 3.7.5 → 3.7.7

package/lib/cjs/tokens/js/storybook-design-token.js

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tokens = void 0;

package/lib/cjs/tokens/js/tokens-esm.js

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.tokens = void 0;

package/lib/cjs/tokens/js/tokens.js

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 module.exports = {
     "transitions": {

package/lib/esm/tokens/js/storybook-design-token.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 export const tokens = {
     "transitions": [

package/lib/esm/tokens/js/tokens-esm.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 export const tokens = {
     "transitions": {

package/lib/esm/tokens/js/tokens.js

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 module.exports = {
     "transitions": {

package/lib/neo4j-ds-styles.css

@@ -7665,37 +7665,48 @@ button.ndl-avatar:focus-visible {
   --spotlight-target-pulse-color:rgba(233, 222, 255, 0.5);
   --spotlight-overlay-z-index:var(--z-index-alias-blanket);
   --spotlight-target-z-index:calc(var(--spotlight-overlay-z-index) + 1);
+  --spotlight-z-index:var(--z-index-alias-popover);
 }
 .ndl-theme-dark{
   --spotlight-target-pulse-color:rgba(233, 222, 255, 0.2);
 }
 .ndl-spotlight-overlay {
-  visibility:hidden;
   position:fixed;
   top:0px;
   bottom:0px;
   right:0px;
   left:0px;
-  background-color:rgba(0, 0, 0, 0.4);
+  cursor:default;
+  background-color:transparent;
   transition:opacity 0.2s ease;
   opacity:0;
   z-index:var(--spotlight-overlay-z-index);
 }
-.ndl-spotlight-overlay.ndl-spotlight-overlay-open {
-  visibility:visible;
+.ndl-spotlight-overlay.ndl-spotlight-overlay-open{
     opacity:1;
-}
-.ndl-spotlight-overlay.ndl-spotlight-overlay-transparent {
-  background-color:transparent;
-}
+  }
+.ndl-spotlight-overlay.ndl-spotlight-overlay-opaque{
+    background-color:rgba(0, 0, 0, 0.4);
+  }
+.ndl-spotlight-overlay.ndl-spotlight-overlay-top{
+    z-index:var(--spotlight-z-index);
+  }
 .ndl-spotlight {
   width:320px;
   overflow:hidden;
+  border-radius:8px;
   border-width:1px;
   border-color:rgb(var(--theme-palette-discovery-border-strong));
   background-color:rgb(var(--theme-palette-discovery-bg-strong));
   padding-bottom:16px;
   color:rgb(var(--theme-palette-neutral-text-inverse));
+  --tw-shadow:var(--theme-shadow-overlay);
+  --tw-shadow-colored:var(--theme-shadow-overlay);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+  outline:2px solid transparent;
+  outline-offset:2px;
+
+  z-index:var(--spotlight-z-index);
 }
 .ndl-spotlight .ndl-spotlight-header,
   .ndl-spotlight .ndl-spotlight-body {
@@ -7777,6 +7788,12 @@ button.ndl-avatar:focus-visible {
   outline-offset:2px;
   outline-color:rgb(var(--theme-palette-primary-focus));
 }
+.ndl-spotlight-target.ndl-spotlight-target-fit-to-children {
+  height:-moz-fit-content;
+  height:fit-content;
+  width:-moz-fit-content;
+  width:fit-content;
+}
 .ndl-spotlight-target.ndl-spotlight-target-open {
   cursor:default;
     z-index:var(--spotlight-target-z-index);
@@ -7789,6 +7806,16 @@ button.ndl-avatar:focus-visible {
   --tw-ring-shadow:var(--tw-ring-inset) 0 0 0 calc(0px + var(--tw-ring-offset-width)) var(--tw-ring-color);
   box-shadow:var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
 }
+.ndl-spotlight-target .ndl-spotlight-target-inert.ndl-spotlight-target-inert-fit-to-children {
+  display:flex;
+}
+.ndl-spotlight-target.ndl-spotlight-target-overlay {
+  position:absolute;
+  top:0px;
+  left:0px;
+  height:100%;
+  width:100%;
+}
 .ndl-spotlight-target-indicator{
   z-index:var(--spotlight-target-z-index);
 }
@@ -8243,7 +8270,7 @@ button.ndl-avatar:focus-visible {
   color:rgb(var(--theme-palette-neutral-text-default));
 }
 .ndl-side-nav .ndl-side-nav-category-item .ndl-side-nav-item-button:hover {
-  cursor:context-menu;
+  cursor:default;
 }
 .ndl-side-nav .ndl-side-nav-category-header {
   display:flex;
@@ -8328,51 +8355,51 @@ button.ndl-avatar:focus-visible {
 .ndl-icon-indicator-wrapper .ndl-icon-indicator.ndl-danger {
   fill:rgb(var(--theme-palette-danger-bg-status));
 }
-.ndl-graph-viz-container {
+.ndl-graph-visualization-container {
   display:flex;
   height:100%;
   width:100%;
 }
-.ndl-graph-viz-container .ndl-graph-viz {
+.ndl-graph-visualization-container .ndl-graph-visualization {
   position:relative;
   height:100%;
   width:100%;
   background-color:rgb(var(--theme-palette-neutral-bg-default));
     min-width:25px;
 }
-.ndl-graph-viz-container .ndl-graph-resizable{
+.ndl-graph-visualization-container .ndl-graph-resizable{
     max-width:min(66%, calc(100% - 325px)) !important;
   }
-.ndl-graph-viz-container .ndl-graph-viz-interaction-island {
+.ndl-graph-visualization-container .ndl-graph-visualization-interaction-island {
   position:absolute;
 }
-.ndl-graph-viz-container .ndl-graph-viz-interaction-island.ndl-top-left {
+.ndl-graph-visualization-container .ndl-graph-visualization-interaction-island.ndl-top-left {
   top:8px;
   left:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-interaction-island.ndl-top-right {
+.ndl-graph-visualization-container .ndl-graph-visualization-interaction-island.ndl-top-right {
   top:8px;
   right:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-interaction-island.ndl-bottom-left {
+.ndl-graph-visualization-container .ndl-graph-visualization-interaction-island.ndl-bottom-left {
   bottom:8px;
   left:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-interaction-island.ndl-bottom-right {
+.ndl-graph-visualization-container .ndl-graph-visualization-interaction-island.ndl-bottom-right {
   bottom:8px;
   right:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-default-download-group {
+.ndl-graph-visualization-container .ndl-graph-visualization-default-download-group {
   display:flex;
   gap:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-toggle-sidepanel {
+.ndl-graph-visualization-container .ndl-graph-visualization-toggle-sidepanel {
   background-color:rgb(var(--theme-palette-neutral-bg-weak));
 }
-.ndl-graph-viz-container .ndl-graph-viz-toggle-sidepanel .ndl-graph-viz-toggle-icon {
+.ndl-graph-visualization-container .ndl-graph-visualization-toggle-sidepanel .ndl-graph-visualization-toggle-icon {
   color:rgb(var(--theme-palette-neutral-text-weak));
 }
-.ndl-graph-viz-container .ndl-graph-viz-sidepanel-content {
+.ndl-graph-visualization-container .ndl-graph-visualization-sidepanel-content {
   display:grid;
   height:100%;
   gap:8px;
@@ -8383,32 +8410,32 @@ button.ndl-avatar:focus-visible {
     grid-template-columns:1fr auto;
     grid-template-rows:36px 1fr;
 }
-.ndl-graph-viz-container .ndl-graph-viz-sidepanel-title {
+.ndl-graph-visualization-container .ndl-graph-visualization-sidepanel-title {
   margin-left:16px;
   display:flex;
   align-items:center;
     grid-area:title;
 }
-.ndl-graph-viz-container .ndl-graph-viz-overview-panel {
+.ndl-graph-visualization-container .ndl-graph-visualization-overview-panel {
   margin-left:16px;
   margin-right:16px;
   display:flex;
   flex-direction:column;
   gap:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-overview-panel .ndl-overview-section {
+.ndl-graph-visualization-container .ndl-graph-visualization-overview-panel .ndl-overview-section {
   display:flex;
   flex-direction:column;
   gap:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-overview-panel .ndl-overview-header {
+.ndl-graph-visualization-container .ndl-graph-visualization-overview-panel .ndl-overview-header {
   display:flex;
   align-items:center;
   justify-content:space-between;
   font-size:0.875rem;
   line-height:1.25rem;
 }
-.ndl-graph-viz-container .ndl-graph-viz-overview-panel .ndl-overview-items {
+.ndl-graph-visualization-container .ndl-graph-visualization-overview-panel .ndl-overview-items {
   display:flex;
   flex-direction:row;
   flex-wrap:wrap;
@@ -8417,16 +8444,16 @@ button.ndl-avatar:focus-visible {
   row-gap:4px;
   line-height:1.25;
 }
-.ndl-graph-viz-container .ndl-graph-viz-overview-panel .ndl-overview-relationships-section {
+.ndl-graph-visualization-container .ndl-graph-visualization-overview-panel .ndl-overview-relationships-section {
   display:flex;
   flex-direction:column;
   gap:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-overview-panel .ndl-overview-relationships-section .ndl-overview-relationships-title {
+.ndl-graph-visualization-container .ndl-graph-visualization-overview-panel .ndl-overview-relationships-section .ndl-overview-relationships-title {
   font-size:0.875rem;
   line-height:1.25rem;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table {
   display:flex;
   width:100%;
   flex-direction:column;
@@ -8436,16 +8463,16 @@ button.ndl-avatar:focus-visible {
   font-size:0.875rem;
   line-height:1.25rem;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table .ndl-properties-header {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table .ndl-properties-header {
   margin-bottom:4px;
   display:flex;
   flex-direction:row;
   padding-left:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table .ndl-properties-header-key {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table .ndl-properties-header-key {
   flex-basis:33.333333%;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table .ndl-properties-row {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table .ndl-properties-row {
   display:flex;
   border-top-width:1px;
   border-color:rgb(var(--theme-palette-neutral-border-weak));
@@ -8453,10 +8480,10 @@ button.ndl-avatar:focus-visible {
   padding-bottom:4px;
   padding-left:8px;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table .ndl-properties-row:first-child {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table .ndl-properties-row:first-child {
   border-style:none;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table .ndl-properties-key {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table .ndl-properties-key {
   overflow:hidden;
   display:-webkit-box;
   -webkit-box-orient:vertical;
@@ -8464,18 +8491,18 @@ button.ndl-avatar:focus-visible {
   flex-basis:33.333333%;
   font-weight:900;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table .ndl-properties-value {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table .ndl-properties-value {
   flex:1 1 0%;
   white-space:pre-wrap;
 }
-.ndl-graph-viz-container .ndl-graph-viz-properties-table .ndl-properties-clipboard-button {
+.ndl-graph-visualization-container .ndl-graph-visualization-properties-table .ndl-properties-clipboard-button {
   display:flex;
   justify-content:flex-end;
 }
-.ndl-graph-viz-container .ndl-details-title {
+.ndl-graph-visualization-container .ndl-details-title {
   margin-right:auto;
 }
-.ndl-graph-viz-container .ndl-details-tags {
+.ndl-graph-visualization-container .ndl-details-tags {
   margin-left:16px;
   margin-right:16px;
   display:flex;
@@ -8483,20 +8510,20 @@ button.ndl-avatar:focus-visible {
   flex-wrap:wrap;
   gap:8px;
 }
-.ndl-graph-viz-container .ndl-details-divider {
+.ndl-graph-visualization-container .ndl-details-divider {
   margin-top:12px;
   margin-bottom:12px;
   height:1px;
   width:100%;
   background-color:rgb(var(--theme-palette-neutral-border-weak));
 }
-.ndl-graph-viz-container .ndl-grid-area-title{
+.ndl-graph-visualization-container .ndl-grid-area-title{
     grid-area:title;
   }
-.ndl-graph-viz-container .ndl-grid-area-content{
+.ndl-graph-visualization-container .ndl-grid-area-content{
     grid-area:content;
   }
-.ndl-graph-viz-container .ndl-sidepanel-handle {
+.ndl-graph-visualization-container .ndl-sidepanel-handle {
   margin-left:4px;
 }
 .n-absolute {

package/lib/tokens/css/tokens.css

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 10 Jun 2025 12:24:54 GMT
+ * Generated on Thu, 12 Jun 2025 09:57:40 GMT
  */
 
 :root {

package/lib/tokens/js/tokens-raw.js

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Tue, 10 Jun 2025 12:24:54 GMT
+ * Generated on Thu, 12 Jun 2025 09:57:40 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 
 export const tokens = {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Tue, 10 Jun 2025 12:24:53 GMT
+// Generated on Thu, 12 Jun 2025 09:57:40 GMT
 
 $transitions-values-properties-default: all;
 $transitions-values-duration-quick: 100ms;

package/lib/types/tokens/js/storybook-design-token.d.ts

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Tue, 10 Jun 2025 12:24:54 GMT
+* Generated on Thu, 12 Jun 2025 09:57:40 GMT
 */
 export const tokens: {
     transitions: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neo4j-ndl/base",
-  "version": "3.7.5",
+  "version": "3.7.7",
   "description": "Neo4j base package for the design system",
   "author": "Neo4j Inc.",
   "homepage": "https://www.neo4j.design",