@neo4j-ndl/base 3.6.2 → 3.7.0

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:35 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 Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:36 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 Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:35 GMT
 */
 module.exports = {
     "transitions": {

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:35 GMT
 */
 export const tokens = {
     "transitions": [

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:36 GMT
 */
 export const tokens = {
     "transitions": {

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:35 GMT
 */
 module.exports = {
     "transitions": {

package/lib/neo4j-ds-styles.css

@@ -6045,26 +6045,26 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
   background-color:rgb(var(--theme-palette-primary-bg-status));
   color:rgb(var(--theme-palette-neutral-text-inverse));
 }
-.ndl-breadcrumbs {
+.ndl-breadcrumbs.ndl-breadcrumbs-old {
   display:flex;
   height:32px;
   place-items:center;
   align-items:flex-start;
   gap:10px;
 }
-.ndl-breadcrumbs ol {
+.ndl-breadcrumbs.ndl-breadcrumbs-old ol {
   display:flex;
   flex-wrap:wrap;
   align-items:center;
 }
-.ndl-breadcrumbs li {
+.ndl-breadcrumbs.ndl-breadcrumbs-old li {
   display:flex;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-base-item {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item {
   align-items:center;
   border-radius:6px;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link {
   border-radius:6px;
   padding-left:4px;
   padding-right:4px;
@@ -6072,23 +6072,23 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
   outline:2px solid transparent;
   outline-offset:2px;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link:focus-visible {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link:focus-visible {
   outline-width:2px;
   outline-offset:-2px;
   outline-color:rgb(var(--theme-palette-primary-focus));
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link-active {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link-active {
   color:rgb(var(--theme-palette-neutral-text-default));
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-base-item-link:hover {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-base-item-link:hover {
   color:rgb(var(--theme-palette-neutral-text-default));
   text-decoration-line:underline;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-item {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item {
   display:flex;
   align-items:center;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-item-link {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link {
   cursor:default;
   border-radius:6px;
   padding-left:4px;
@@ -6097,23 +6097,23 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
   outline:2px solid transparent;
   outline-offset:2px;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-item-link:focus-visible {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link:focus-visible {
   outline-width:2px;
   outline-offset:-2px;
   outline-color:rgb(var(--theme-palette-primary-focus));
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-item-link-interactable:hover {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link-interactable:hover {
   cursor:pointer;
   color:rgb(var(--theme-palette-neutral-text-default));
   text-decoration-line:underline;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-item-link-active {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-link-active {
   color:rgb(var(--theme-palette-neutral-text-default));
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-item-menu {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-item-menu {
   display:flex;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-separator:not(:only-child):before {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-separator:not(:only-child):before {
   margin-left:4px;
   margin-right:4px;
   color:rgb(var(--theme-palette-neutral-border-strong));
@@ -6124,35 +6124,35 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
   line-height:1.25rem;
     content:'/';
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu {
   margin-left:1px;
   margin-right:1px;
   display:flex;
   align-items:center;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-hidden{
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-hidden{
     opacity:0;
   }
-.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis--menu-button:hover {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis--menu-button:hover {
   cursor:pointer;
   text-decoration-line:underline;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button {
   border-radius:6px;
   display:flex;
   align-self:center;
   height:22px;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:focus {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button:focus {
   outline:2px solid transparent;
   outline-offset:2px;
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:focus-visible {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button:focus-visible {
   outline-width:2px;
   outline-offset:2px;
   outline-color:rgb(var(--theme-palette-primary-focus));
 }
-.ndl-breadcrumbs .ndl-breadcrumbs-ellipsis-menu-button:hover {
+.ndl-breadcrumbs.ndl-breadcrumbs-old .ndl-breadcrumbs-ellipsis-menu-button:hover {
   text-decoration-line:underline;
 }
 .ndl-breadcrumbs-ellipsis-menu-item {
@@ -6183,6 +6183,140 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
 .ndl-breadcrumbs-group-item {
   display:flex;
 }
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) {
+  display:flex;
+  align-items:center;
+  justify-content:flex-start;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list {
+  display:flex;
+  flex-wrap:wrap;
+  align-items:center;
+  justify-content:flex-start;
+  gap:4px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item {
+  display:flex;
+  align-items:center;
+  gap:4px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item:not(:first-child):before {
+  color:rgb(var(--theme-palette-neutral-border-strong));
+  --tw-content:'/';
+  content:var(--tw-content);
+  font-family:var(--font-font-family-body-label), sans-serif;
+  font-size:var(--font-size-label);
+  font-weight:var(--font-weight-bold);
+  letter-spacing:0;
+  line-height:1.25rem;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item .ndl-breadcrumbs-item-inner {
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:1px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item .ndl-breadcrumbs-item-inner:hover:has(:is(button, a).ndl-breadcrumbs-button:nth-child(2))
+            :is(button, a).ndl-breadcrumbs-button:not(:hover):not(:active) {
+  background-color:rgb(var(--theme-palette-neutral-hover));
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-list .ndl-breadcrumbs-item .ndl-breadcrumbs-item-inner:hover:has(:is(button, a).ndl-breadcrumbs-button:nth-child(2))
+            :is(button, a).ndl-breadcrumbs-button:hover:after {
+  pointer-events:none;
+  position:absolute;
+  inset:0px;
+  background-color:rgb(var(--theme-palette-neutral-hover));
+  --tw-content:'';
+  content:var(--tw-content);
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button {
+  position:relative;
+  display:flex;
+  height:32px;
+  flex-direction:row;
+  align-items:center;
+  gap:8px;
+  overflow:hidden;
+  padding-left:6px;
+  padding-right:6px;
+  font-family:var(--font-font-family-body-medium), sans-serif;
+  font-size:var(--font-size-body-medium);
+  font-weight:var(--font-weight-normal);
+  letter-spacing:0.016rem;
+  line-height:1.25rem;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:nth-child(-n + 1 of .ndl-breadcrumbs-button) {
+  border-top-left-radius:6px;
+  border-bottom-left-radius:6px;
+  padding-right:6px;
+  padding-left:8px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:nth-last-child(-n + 1 of .ndl-breadcrumbs-button) {
+  border-top-right-radius:6px;
+  border-bottom-right-radius:6px;
+  padding-right:8px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a) {
+  outline:2px solid transparent;
+  outline-offset:2px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a):hover {
+  background-color:rgb(var(--theme-palette-neutral-hover));
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a):focus-visible {
+  outline-width:2px;
+  outline-offset:-2px;
+  outline-color:rgb(var(--theme-palette-primary-focus));
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button:is(button, a):active {
+  background-color:rgb(var(--theme-palette-neutral-pressed));
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-button .ndl-icon-svg {
+  width:16px;
+  height:16px;
+  flex-shrink:0;
+  color:rgb(var(--theme-palette-neutral-icon));
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-select {
+  width:32px;
+  height:32px;
+  padding-left:8px;
+  padding-right:8px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-select:first-child {
+  padding-left:8px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link {
+  margin-left:4px;
+  margin-right:4px;
+  border-radius:6px;
+  color:rgb(var(--theme-palette-neutral-text-weaker));
+  font-family:var(--font-font-family-body-medium), sans-serif;
+  font-size:var(--font-size-body-medium);
+  font-weight:var(--font-weight-normal);
+  letter-spacing:0.016rem;
+  line-height:1.25rem;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a) {
+  cursor:pointer;
+  outline:2px solid transparent;
+  outline-offset:2px;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a):hover {
+  color:rgb(var(--theme-palette-neutral-text-default));
+  text-decoration-line:underline;
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a):focus-visible {
+  outline-width:2px;
+  outline-offset:0px;
+  outline-color:rgb(var(--theme-palette-primary-focus));
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link:is(button, a):active {
+  color:rgb(var(--theme-palette-neutral-text-default));
+}
+.ndl-breadcrumbs:not(.ndl-breadcrumbs-old) .ndl-breadcrumbs-link.ndl-breadcrumbs-link-current {
+  color:rgb(var(--theme-palette-neutral-text-default));
+}
 .ndl-avatar {
   position:relative;
   display:flex;
@@ -8258,6 +8392,9 @@ button.ndl-avatar:focus-visible {
 .n-mr-token-3 {
   margin-right:4px;
 }
+.n-mr-token-4 {
+  margin-right:8px;
+}
 .n-mt-10 {
   margin-top:40px;
 }
@@ -8347,6 +8484,9 @@ button.ndl-avatar:focus-visible {
 .n-h-5 {
   height:20px;
 }
+.n-h-6 {
+  height:24px;
+}
 .n-h-7 {
   height:28px;
 }
@@ -8392,6 +8532,9 @@ button.ndl-avatar:focus-visible {
 .n-w-80 {
   width:320px;
 }
+.n-w-\[26px\] {
+  width:26px;
+}
 .n-w-\[300px\] {
   width:300px;
 }
@@ -112627,6 +112770,15 @@ html{
 .hover\:n-text-warning-text\/95:hover {
   color:rgb(var(--theme-palette-warning-text) / 0.95);
 }
+.focus-visible\:n-outline-2:focus-visible {
+  outline-width:2px;
+}
+.focus-visible\:n-outline-offset-\[3px\]:focus-visible {
+  outline-offset:3px;
+}
+.focus-visible\:n-outline-palette-primary-focus:focus-visible {
+  outline-color:rgb(var(--theme-palette-primary-focus));
+}
 .active\:n-bg-danger-bg-status:active {
   background-color:rgb(var(--theme-palette-danger-bg-status));
 }

package/lib/tokens/css/tokens.css

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 28 May 2025 12:00:18 GMT
+ * Generated on Mon, 02 Jun 2025 09:37:35 GMT
  */
 
 :root {

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

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 28 May 2025 12:00:19 GMT
+ * Generated on Mon, 02 Jun 2025 09:37:35 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:36 GMT
 */
 
 export const tokens = {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 28 May 2025 12:00:18 GMT
+// Generated on Mon, 02 Jun 2025 09:37:35 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 Wed, 28 May 2025 12:00:19 GMT
+* Generated on Mon, 02 Jun 2025 09:37:35 GMT
 */
 export const tokens: {
     transitions: {

package/package.json

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