@neo4j-ndl/base 3.0.16 → 3.0.18

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Wed, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:06 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, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:07 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, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:06 GMT
 */
 module.exports = {
     "transitions": {

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:06 GMT
 */
 export const tokens = {
     "transitions": [

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:07 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, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:06 GMT
 */
 module.exports = {
     "transitions": {

package/lib/neo4j-ds-styles.css

@@ -1452,12 +1452,11 @@ a.ndl-btn {
   padding-right:8px;
   padding-top:2px;
   padding-bottom:2px;
-  font-weight:700;
   text-transform:capitalize;
-  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;
+  font-family:var(--font-font-family-subheading-small), sans-serif;
+  font-size:var(--font-size-subheading-small);
+  font-weight:var(--font-weight-semibold);
+  letter-spacing:0.016rem;
   line-height:1.25rem;
 
   line-height:normal;
@@ -1665,10 +1664,20 @@ a.ndl-btn {
 .ndl-banner.ndl-inline .ndl-banner-content, .ndl-banner.ndl-global .ndl-banner-content {
   display:flex;
   flex:1 1 0%;
-  flex-direction:column;
-  gap:8px;
+  flex-direction:row;
+  flex-wrap:wrap;
+  justify-content:space-between;
+  gap:16px;
   overflow:auto;
 }
+.ndl-banner.ndl-inline.ndl-with-title .ndl-banner-content, .ndl-banner.ndl-global.ndl-with-title .ndl-banner-content {
+  flex-direction:column;
+}
+.ndl-banner.ndl-inline .ndl-banner-title-description, .ndl-banner.ndl-global .ndl-banner-title-description {
+  display:flex;
+  flex-direction:column;
+  gap:4px;
+}
 .ndl-banner.ndl-inline.ndl-warning, .ndl-banner.ndl-global.ndl-warning {
   background-color:rgb(var(--theme-palette-warning-bg-weak));
   border-style:solid;
@@ -1709,19 +1718,12 @@ a.ndl-btn {
 .ndl-banner.ndl-inline.ndl-danger .ndl-banner-actions a, .ndl-banner.ndl-global.ndl-danger .ndl-banner-actions a {
   cursor:pointer;
   color:rgb(var(--theme-palette-neutral-text-default));
-  text-decoration-line:underline;
   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-banner.ndl-inline .ndl-banner-actions, .ndl-banner.ndl-global .ndl-banner-actions {
-  margin-top:16px;
-  display:flex;
-  -moz-column-gap:16px;
-       column-gap:16px;
-}
 .ndl-banner.ndl-inline .ndl-banner-icon.ndl-close-icon, .ndl-banner.ndl-global .ndl-banner-icon.ndl-close-icon {
   color:rgb(var(--theme-palette-neutral-text-weak));
 }
@@ -1772,6 +1774,14 @@ a.ndl-btn {
   margin-left:auto;
   color:rgb(var(--theme-palette-neutral-text-inverse));
 }
+.ndl-banner.ndl-full-width .ndl-banner-icon.ndl-close-icon:hover {
+  background-color:rgb(149 154 161 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.1;
+}
+.ndl-theme-dark .ndl-banner.ndl-full-width .ndl-banner-icon.ndl-close-icon:hover {
+  background-color:rgb(111 117 126 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.1;
+}
 .ndl-banner.ndl-full-width .ndl-banner-icon.ndl-close-icon::before {
   position:absolute;
   left:-12px;
@@ -1790,9 +1800,27 @@ a.ndl-btn {
   letter-spacing:0.016rem;
   line-height:1.25rem;
 }
-.ndl-banner.ndl-full-width .ndl-banner-actions a {
+.ndl-banner.ndl-full-width .ndl-banner-actions .ndl-btn {
+  border-color:rgb(var(--theme-palette-neutral-text-inverse));
+  background-color:transparent;
   color:rgb(var(--theme-palette-neutral-text-inverse));
 }
+.ndl-banner.ndl-full-width .ndl-banner-actions .ndl-btn:not(:disabled):hover {
+  background-color:rgb(149 154 161 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.1;
+}
+.ndl-banner.ndl-full-width .ndl-banner-actions .ndl-btn:not(:disabled):active {
+  background-color:rgb(149 154 161 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.2;
+}
+.ndl-theme-dark .ndl-banner.ndl-full-width .ndl-banner-actions .ndl-btn:not(:disabled):hover {
+  background-color:rgb(111 117 126 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.1;
+}
+.ndl-theme-dark .ndl-banner.ndl-full-width .ndl-banner-actions .ndl-btn:not(:disabled):active {
+  background-color:rgb(111 117 126 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.2;
+}
 .ndl-banner .ndl-banner-title {
   display:flex;
   justify-content:space-between;
@@ -1810,13 +1838,32 @@ a.ndl-btn {
 .ndl-banner .ndl-banner-icon.ndl-close-icon {
   cursor:pointer;
 }
-.ndl-banner .ndl-banner-actions a {
-  cursor:pointer;
-  text-decoration-line:underline;
+.ndl-banner .ndl-banner-actions {
+  display:flex;
+  flex-wrap:wrap;
+  -moz-column-gap:12px;
+       column-gap:12px;
+  row-gap:12px;
 }
-.ndl-banner .ndl-banner-actions button {
+.ndl-banner .ndl-banner-actions .ndl-btn {
   cursor:pointer;
-  text-decoration-line:underline;
+  border-color:rgb(var(--theme-palette-neutral-text-default));
+  background-color:transparent;
+  color:rgb(var(--theme-palette-neutral-text-default));
+}
+.ndl-banner .ndl-banner-actions .ndl-btn:disabled {
+  border-color:rgb(var(--theme-palette-neutral-border-strong));
+  background-color:transparent;
+  color:rgb(var(--theme-palette-neutral-text-weakest));
+}
+.ndl-banner .ndl-banner-actions .ndl-btn:disabled:hover {
+  cursor:not-allowed;
+}
+.ndl-banner .ndl-banner-actions .ndl-btn:not(:disabled):hover {
+  background-color:rgb(var(--theme-palette-neutral-hover));
+}
+.ndl-banner .ndl-banner-actions .ndl-btn:not(:disabled):active {
+  background-color:rgb(var(--theme-palette-neutral-pressed));
 }
 .ndl-form-item.ndl-type-checkbox{
     line-height:0;
@@ -2949,9 +2996,9 @@ a.ndl-btn {
   --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);
 }
-.ndl-dialog .ndl-dialog-type-icon{
-    width:88px;
-  }
+.ndl-dialog .ndl-dialog-type-icon {
+  width:88px;
+}
 .ndl-dialog .ndl-dialog-type-icon.ndl-info {
   color:rgb(var(--theme-palette-primary-icon));
 }
@@ -2970,6 +3017,9 @@ a.ndl-btn {
 .ndl-dialog.ndl-with-icon .ndl-dialog-header {
   margin-bottom:24px;
 }
+.ndl-dialog.ndl-with-icon .ndl-dialog-image {
+  display:none;
+}
 .ndl-dialog .ndl-dialog-close {
   position:absolute;
   right:32px;
@@ -2979,7 +3029,7 @@ a.ndl-btn {
   margin-top:24px;
 }
 .ndl-dialog-header {
-  margin-bottom:8px;
+  margin-bottom:4px;
 }
 .ndl-dialog.ndl-with-close-button .ndl-dialog-header {
   margin-right:48px;
@@ -2991,11 +3041,20 @@ a.ndl-btn {
   color:rgb(var(--theme-palette-neutral-text-weak));
 }
 .ndl-dialog-actions {
-  margin-top:48px;
+  margin-top:32px;
   display:flex;
   justify-content:flex-end;
   gap:16px;
 }
+.ndl-dialog-image{
+  width:calc(100% + 2 * var(--space-8) - 2 * var(--space-6));
+  margin-left:calc(-1 * var(--space-8) + var(--space-6));
+  margin-top:16px;
+  margin-bottom:16px;
+  max-width:none;
+  border-radius:16px;
+  background-color:rgb(var(--theme-palette-neutral-bg-default));
+}
 .ndl-drawer {
   position:relative;
   display:none;
@@ -4881,6 +4940,47 @@ a.ndl-btn {
 a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .cm-button {
   text-decoration-line:none;
 }
+.ndl-banner.ndl-full-width .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button,.ndl-banner.ndl-full-width .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button {
+  border-color:rgb(var(--theme-palette-neutral-text-inverse));
+  background-color:transparent;
+  color:rgb(var(--theme-palette-neutral-text-inverse));
+}
+.ndl-banner.ndl-full-width .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):hover,.ndl-banner.ndl-full-width .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):hover {
+  background-color:rgb(149 154 161 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.1;
+}
+.ndl-banner.ndl-full-width .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):active,.ndl-banner.ndl-full-width .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):active {
+  background-color:rgb(149 154 161 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.2;
+}
+.ndl-theme-dark .ndl-banner.ndl-full-width .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):hover,.ndl-theme-dark .ndl-banner.ndl-full-width .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):hover {
+  background-color:rgb(111 117 126 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.1;
+}
+.ndl-theme-dark .ndl-banner.ndl-full-width .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):active,.ndl-theme-dark .ndl-banner.ndl-full-width .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):active {
+  background-color:rgb(111 117 126 / var(--tw-bg-opacity));
+  --tw-bg-opacity:0.2;
+}
+.ndl-banner .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button,.ndl-banner .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button {
+  cursor:pointer;
+  border-color:rgb(var(--theme-palette-neutral-text-default));
+  background-color:transparent;
+  color:rgb(var(--theme-palette-neutral-text-default));
+}
+.ndl-banner .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:disabled,.ndl-banner .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:disabled {
+  border-color:rgb(var(--theme-palette-neutral-border-strong));
+  background-color:transparent;
+  color:rgb(var(--theme-palette-neutral-text-weakest));
+}
+.ndl-banner .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:disabled:hover,.ndl-banner .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:disabled:hover {
+  cursor:not-allowed;
+}
+.ndl-banner .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):hover,.ndl-banner .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):hover {
+  background-color:rgb(var(--theme-palette-neutral-hover));
+}
+.ndl-banner .ndl-banner-actions .ndl-cypher-editor .cm-editor .cm-button:not(:disabled):active,.ndl-banner .ndl-banner-actions  .ndl-codemirror-editor .cm-editor .cm-button:not(:disabled):active {
+  background-color:rgb(var(--theme-palette-neutral-pressed));
+}
 .ndl-cypher-editor .cm-completionLabel, .ndl-codemirror-editor .cm-completionLabel{
     font-family:'Fira Code';
     font-weight:700;
@@ -5026,45 +5126,52 @@ a.ndl-cypher-editor .cm-editor .cm-button,a .ndl-codemirror-editor .cm-editor .c
 .ndl-cypher-editor .cm-tooltip-autocomplete li[aria-selected='true'] > div, .ndl-codemirror-editor .cm-tooltip-autocomplete li[aria-selected='true'] > div{
         opacity:100%;
       }
-.ndl-text-link{
+.ndl-text-link {
+  position:relative;
+  display:inline-flex;
+  flex-direction:row;
+  align-items:baseline;
+  gap:4px;
   color:rgb(var(--theme-palette-primary-text));
   text-decoration-line:underline;
   text-underline-offset:3px;
-  display:inline-flex;
-  align-items:baseline;
-  flex-direction:row;
-  position:relative;
-  -moz-column-gap:2px;
-       column-gap:2px;
 }
-.ndl-text-link > div{
-    flex-shrink:0;
-  }
-.ndl-text-link .ndl-external-link-icon{
-    width:12px;
-    height:12px;
-  }
-.ndl-text-link:hover{
-    color:rgb(var(--theme-palette-primary-hover-strong));
-  }
-.ndl-text-link:active{
-    color:rgb(var(--theme-palette-primary-pressed-strong));
-  }
+.ndl-text-link > div {
+  flex-shrink:0;
+}
+.ndl-text-link .ndl-external-link-icon {
+  height:12px;
+  width:12px;
+}
+.ndl-text-link:hover {
+  color:rgb(var(--theme-palette-primary-hover-strong));
+  text-decoration-line:underline;
+}
+.ndl-text-link:active {
+  color:rgb(var(--theme-palette-primary-pressed-strong));
+  text-decoration-line:underline;
+}
 .ndl-text-link:focus-visible{
     outline:none;
   }
 .ndl-text-link:focus-visible::after {
+  position:absolute;
+  left:-1px;
+  top:3px;
+  box-sizing:border-box;
+  height:calc(100% - 6px);
+  width:calc(100% + 1px);
+  border-radius:4px;
+  border-style:solid;
+  border-color:rgb(var(--theme-palette-primary-focus));
+  color:rgb(var(--theme-palette-primary-pressed-strong));
+  outline-width:2px;
+  outline-offset:0px;
     content:'';
-    position:absolute;
-    width:calc(100% + 1px);
-    left:-1px;
-    top:3px;
-    height:calc(100% - 6px);
-    outline:2px solid rgb(var(--theme-palette-primary-focus));
-    color:rgb(var(--theme-palette-primary-pressed-strong));
-    box-sizing:border-box;
-    border-radius:4px;
-    outline-offset:0px;
+}
+.ndl-external-link,
+.ndl-internal-icon {
+  text-decoration-line:none;
 }
 .ndl-text-area .ndl-text-area-wrapper {
   position:relative;
@@ -6468,7 +6575,7 @@ button.ndl-avatar:focus-visible {
 .ndl-callout .ndl-callout-content {
   display:flex;
   flex-direction:column;
-  gap:8px;
+  gap:4px;
 }
 .ndl-callout .ndl-callout-rectangle {
   position:absolute;
@@ -6761,7 +6868,7 @@ button.ndl-avatar:focus-visible {
   display:flex;
   flex-direction:row;
   align-items:center;
-  gap:16px;
+  gap:12px;
 }
 .ndl-tooltip-content.ndl-tooltip-content-rich .ndl-tooltip-actions .ndl-tooltip-action {
   font-size:0.875rem;
@@ -6772,6 +6879,7 @@ button.ndl-avatar:focus-visible {
 }
 .ndl-tooltip-content.ndl-tooltip-content-rich .ndl-tooltip-actions .ndl-tooltip-action-close {
   margin-left:auto;
+  display:none;
 }
 .ndl-chart-legend {
   position:relative;

package/lib/tokens/css/tokens.css

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 27 Nov 2024 16:18:12 GMT
+ * Generated on Thu, 12 Dec 2024 07:55:06 GMT
  */
 
 :root {

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

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Wed, 27 Nov 2024 16:18:12 GMT
+ * Generated on Thu, 12 Dec 2024 07:55:06 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Wed, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:07 GMT
 */
 
 export const tokens = {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Wed, 27 Nov 2024 16:18:12 GMT
+// Generated on Thu, 12 Dec 2024 07:55:06 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, 27 Nov 2024 16:18:12 GMT
+* Generated on Thu, 12 Dec 2024 07:55:06 GMT
 */
 export const tokens: {
     transitions: {

package/package.json

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