@neo4j-ndl/base 3.5.1 → 3.6.0

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18: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 Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18:35 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 Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18:35 GMT
 */
 module.exports = {
     "transitions": {

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18:35 GMT
 */
 export const tokens = {
     "transitions": [

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

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18:35 GMT
 */
 export const tokens = {
     "transitions": {

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

@@ -22,7 +22,7 @@
 "use strict";
 /**
 * Do not edit directly
-* Generated on Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18:35 GMT
 */
 module.exports = {
     "transitions": {

package/lib/neo4j-ds-styles.css

@@ -2631,13 +2631,10 @@ a.ndl-btn {
 .ndl-menu .ndl-menu-items {
   display:flex;
   flex-direction:column;
+  gap:4px;
   outline:2px solid transparent;
   outline-offset:2px;
 }
-.ndl-menu .ndl-menu-items .ndl-divider.ndl-divider-horizontal {
-  margin-top:8px;
-  margin-bottom:8px;
-}
 .ndl-menu .ndl-menu-items:has(.ndl-menu-item-icon)
     > .ndl-menu-item:not(:has(.ndl-menu-item-icon)) {
   padding-left:32px;
@@ -2675,6 +2672,17 @@ a.ndl-btn {
 .ndl-menu .ndl-menu-item.ndl-disabled .ndl-menu-item-description {
   color:rgb(var(--theme-palette-neutral-text-weakest));
 }
+.ndl-menu .ndl-menu-item-inner {
+  display:flex;
+  width:100%;
+  flex-direction:row;
+  gap:8px;
+}
+.ndl-menu .ndl-menu-item-title-wrapper {
+  display:flex;
+  width:100%;
+  flex-direction:column;
+}
 .ndl-menu .ndl-menu-item-title {
   width:100%;
   font-family:var(--font-font-family-body-medium), sans-serif;
@@ -2691,6 +2699,14 @@ a.ndl-btn {
   letter-spacing:0.016rem;
   line-height:1.25rem;
 }
+.ndl-menu .ndl-menu-item-chevron {
+  align-self:center;
+  color:rgb(var(--theme-palette-neutral-icon));
+}
+.ndl-menu .ndl-menu-item-chevron svg {
+  width:16px;
+  height:16px;
+}
 .ndl-menu .ndl-menu-item-icon {
   display:flex;
   height:20px;
@@ -2698,16 +2714,20 @@ a.ndl-btn {
   flex-shrink:0;
   align-items:center;
   justify-content:center;
-  color:rgb(var(--theme-palette-neutral-text-weak));
+  color:rgb(var(--theme-palette-neutral-icon));
 }
 .ndl-menu .ndl-menu-header {
-  margin-bottom:16px;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  justify-content:space-between;
   padding-left:8px;
   padding-right:8px;
   padding-top:8px;
+  padding-bottom:6px;
 }
 .ndl-menu .ndl-menu-header .ndl-menu-header-title {
-  font-weight:700;
+  width:100%;
   font-family:var(--font-font-family-h6), sans-serif;
   font-size:var(--font-size-h6);
   font-weight:var(--font-weight-bold);
@@ -2715,6 +2735,7 @@ a.ndl-btn {
   line-height:1.5rem;
 }
 .ndl-menu .ndl-menu-header .ndl-menu-header-description {
+  width:100%;
   color:rgb(var(--theme-palette-neutral-text-weaker));
   font-family:var(--font-font-family-body-small), sans-serif;
   font-size:var(--font-size-body-small);
@@ -2722,11 +2743,11 @@ a.ndl-btn {
   letter-spacing:0.016rem;
   line-height:1.25rem;
 }
+.ndl-menu .ndl-menu-header .ndl-menu-header-close-button {
+  align-self:flex-start;
+}
 .ndl-menu .ndl-menu-subheader {
-  margin-bottom:8px;
-  padding-left:8px;
-  padding-right:8px;
-  padding-top:8px;
+  padding:8px;
 }
 .ndl-menu .ndl-menu-subheader .ndl-menu-subheader-title {
   color:rgb(var(--theme-palette-neutral-text-weaker));
@@ -7802,6 +7823,76 @@ button.ndl-avatar:focus-visible {
       r:5%;
     }
   }
+.ndl-color-picker .ndl-color-picker-saturation{
+    aspect-ratio:1 / 1;
+    width:100% !important;
+    height:unset !important;
+  }
+.ndl-color-picker .ndl-color-picker-pointer {
+  position:absolute;
+  height:16px;
+  width:16px;
+  border-radius:9999px;
+  border-width:3px;
+  border-color:rgb(var(--theme-palette-neutral-bg-weak));
+  background-color:transparent;
+  --tw-shadow:var(--theme-shadow-raised);
+  --tw-shadow-colored:var(--theme-shadow-raised);
+  box-shadow:var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
+}
+.ndl-color-picker .ndl-color-picker-pointer.w-color-alpha{
+      transform:translate(-50%, 0);
+    }
+.ndl-color-picker .ndl-color-picker-pointer.w-color-saturation{
+      transform:translate(-50%, -50%);
+    }
+.ndl-color-picker .ndl-color-picker-hue-container {
+  margin-top:24px;
+  margin-bottom:24px;
+  display:flex;
+  flex-direction:row;
+  align-items:center;
+  gap:16px;
+}
+.ndl-color-picker .ndl-color-picker-hue {
+  display:block;
+  flex:1 1 0%;
+}
+.ndl-color-picker .ndl-color-picker-swatch {
+  margin-top:8px;
+  display:flex;
+  flex-direction:row;
+  flex-wrap:wrap;
+  gap:8px;
+}
+.ndl-color-picker .ndl-color-picker-swatch .ndl-color-picker-swatch-color {
+  height:20px;
+  width:20px;
+  border-radius:9999px;
+  outline-width:2px;
+}
+.ndl-color-picker .ndl-color-picker-swatch .ndl-color-picker-swatch-color:focus-visible,
+      .ndl-color-picker .ndl-color-picker-swatch .ndl-color-picker-swatch-color.ndl-color-picker-swatch-color-active {
+  outline-style:solid;
+  outline-offset:1px;
+  outline-color:rgb(var(--theme-palette-primary-focus));
+}
+.ndl-color-picker .ndl-color-picker-hex-input-prefix {
+  color:rgb(var(--theme-palette-neutral-text-weak));
+}
+.ndl-color-picker .ndl-color-picker-inputs {
+  display:flex;
+  flex-direction:row;
+  gap:4px;
+}
+.ndl-color-picker .ndl-color-picker-rgb-inputs {
+  display:flex;
+  flex-direction:row;
+  gap:4px;
+}
+.ndl-color-picker .ndl-color-picker-rgb-inputs .ndl-color-picker-rgb-input {
+  flex:1 1 0%;
+}
 .ndl-side-nav{
   --side-nav-width-collapsed:52px;
   --side-nav-width-expanded:196px;
@@ -8290,6 +8381,9 @@ button.ndl-avatar:focus-visible {
 .n-w-48 {
   width:192px;
 }
+.n-w-60 {
+  width:240px;
+}
 .n-w-72 {
   width:288px;
 }

package/lib/tokens/css/tokens.css

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 May 2025 12:47:10 GMT
+ * Generated on Fri, 16 May 2025 09:18:35 GMT
  */
 
 :root {

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

@@ -21,7 +21,7 @@
 
 /**
  * Do not edit directly
- * Generated on Thu, 15 May 2025 12:47:10 GMT
+ * Generated on Fri, 16 May 2025 09:18:35 GMT
  */
 
 module.exports = {

package/lib/tokens/js/tokens.js

@@ -21,7 +21,7 @@
 
 /**
 * Do not edit directly
-* Generated on Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18:35 GMT
 */
 
 export const tokens = {

package/lib/tokens/scss/tokens.scss

@@ -1,6 +1,6 @@
 
 // Do not edit directly
-// Generated on Thu, 15 May 2025 12:47:10 GMT
+// Generated on Fri, 16 May 2025 09:18: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 Thu, 15 May 2025 12:47:10 GMT
+* Generated on Fri, 16 May 2025 09:18:35 GMT
 */
 export const tokens: {
     transitions: {

package/package.json

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