@aquera/nile-elements 2.0.5 → 2.0.7

package/README.md

@@ -91,6 +91,13 @@ To run a local development server that serves the basic demo located in `demo/in
 
 In this section, you can find the updates for each release of `nile-elements`. It's a good practice to maintain detailed release notes to help users and developers understand what changes have been made from one version to another and how these changes might affect their projects.
 
+#### Version 2.0.7 (September 07, 2026)
+- Nile Side Bar Header & Nile Side Bar Footer: Added a `background` property. The default keeps the sidebar surface color, and `background="transparent"` drops it so whatever sits behind the header/footer shows through (UIF-1347)
+
+#### Version 2.0.6 (September 07, 2026)
+- Nile Floating Panel: Fixed the arrow leaving a gap in the panel border — (UIF-1341)
+- Nile Popover: Fixed the panel border cutting across the base of the arrow (UIF-1342)
+
 #### Version 2.0.5 (August 25, 2026)
 - Nile Combobox: Removed the whitespace inside the dropdown (UIF-1331)
 - Nile Combobox: `Select All`, the `Selected/All` toggle and the footer are now fixed panes so they no longer scroll out of view, and grouped data no longer shows a duplicate group label while a header is pinned. (UIF-1332)

package/demo/nxtgen-classes.css

@@ -1,3 +1,6 @@
+/* @nile-version 1.3.2 */
+:root { --nile-version: "1.3.2"; }
+
 /**
  * Do not edit directly
  * Generated by build-nxtgen-utilities.mjs
@@ -3278,84 +3281,84 @@
 .ng-fill-blue-950   { fill: var(--ng-color-blue-950); }
 .ng-stroke-blue-950 { stroke: var(--ng-color-blue-950); }
 
-/* color-bluedark-25: #F5F8FFFF */
+/* color-bluedark-25: #F5F8FEFF */
 .ng-text-bluedark-25   { color: var(--ng-color-bluedark-25); }
 .ng-bg-bluedark-25     { background-color: var(--ng-color-bluedark-25); }
 .ng-border-bluedark-25 { border-color: var(--ng-color-bluedark-25); }
 .ng-fill-bluedark-25   { fill: var(--ng-color-bluedark-25); }
 .ng-stroke-bluedark-25 { stroke: var(--ng-color-bluedark-25); }
 
-/* color-bluedark-50: #EFF4FFFF */
+/* color-bluedark-50: #F0F4FDFF */
 .ng-text-bluedark-50   { color: var(--ng-color-bluedark-50); }
 .ng-bg-bluedark-50     { background-color: var(--ng-color-bluedark-50); }
 .ng-border-bluedark-50 { border-color: var(--ng-color-bluedark-50); }
 .ng-fill-bluedark-50   { fill: var(--ng-color-bluedark-50); }
 .ng-stroke-bluedark-50 { stroke: var(--ng-color-bluedark-50); }
 
-/* color-bluedark-100: #D1E0FFFF */
+/* color-bluedark-100: #D3E1FAFF */
 .ng-text-bluedark-100   { color: var(--ng-color-bluedark-100); }
 .ng-bg-bluedark-100     { background-color: var(--ng-color-bluedark-100); }
 .ng-border-bluedark-100 { border-color: var(--ng-color-bluedark-100); }
 .ng-fill-bluedark-100   { fill: var(--ng-color-bluedark-100); }
 .ng-stroke-bluedark-100 { stroke: var(--ng-color-bluedark-100); }
 
-/* color-bluedark-200: #B2CCFFFF */
+/* color-bluedark-200: #B4CEF7FF */
 .ng-text-bluedark-200   { color: var(--ng-color-bluedark-200); }
 .ng-bg-bluedark-200     { background-color: var(--ng-color-bluedark-200); }
 .ng-border-bluedark-200 { border-color: var(--ng-color-bluedark-200); }
 .ng-fill-bluedark-200   { fill: var(--ng-color-bluedark-200); }
 .ng-stroke-bluedark-200 { stroke: var(--ng-color-bluedark-200); }
 
-/* color-bluedark-300: #84ADFFFF */
+/* color-bluedark-300: #88B0F3FF */
 .ng-text-bluedark-300   { color: var(--ng-color-bluedark-300); }
 .ng-bg-bluedark-300     { background-color: var(--ng-color-bluedark-300); }
 .ng-border-bluedark-300 { border-color: var(--ng-color-bluedark-300); }
 .ng-fill-bluedark-300   { fill: var(--ng-color-bluedark-300); }
 .ng-stroke-bluedark-300 { stroke: var(--ng-color-bluedark-300); }
 
-/* color-bluedark-400: #528BFFFF */
+/* color-bluedark-400: #5690EEFF */
 .ng-text-bluedark-400   { color: var(--ng-color-bluedark-400); }
 .ng-bg-bluedark-400     { background-color: var(--ng-color-bluedark-400); }
 .ng-border-bluedark-400 { border-color: var(--ng-color-bluedark-400); }
 .ng-fill-bluedark-400   { fill: var(--ng-color-bluedark-400); }
 .ng-stroke-bluedark-400 { stroke: var(--ng-color-bluedark-400); }
 
-/* color-bluedark-500: #2970FFFF */
+/* color-bluedark-500: #2D79EBFF */
 .ng-text-bluedark-500   { color: var(--ng-color-bluedark-500); }
 .ng-bg-bluedark-500     { background-color: var(--ng-color-bluedark-500); }
 .ng-border-bluedark-500 { border-color: var(--ng-color-bluedark-500); }
 .ng-fill-bluedark-500   { fill: var(--ng-color-bluedark-500); }
 .ng-stroke-bluedark-500 { stroke: var(--ng-color-bluedark-500); }
 
-/* color-bluedark-600: #155EEFFF */
+/* color-bluedark-600: #1868DBFF */
 .ng-text-bluedark-600   { color: var(--ng-color-bluedark-600); }
 .ng-bg-bluedark-600     { background-color: var(--ng-color-bluedark-600); }
 .ng-border-bluedark-600 { border-color: var(--ng-color-bluedark-600); }
 .ng-fill-bluedark-600   { fill: var(--ng-color-bluedark-600); }
 .ng-stroke-bluedark-600 { stroke: var(--ng-color-bluedark-600); }
 
-/* color-bluedark-700: #004EEBFF */
+/* color-bluedark-700: #005BD4FF */
 .ng-text-bluedark-700   { color: var(--ng-color-bluedark-700); }
 .ng-bg-bluedark-700     { background-color: var(--ng-color-bluedark-700); }
 .ng-border-bluedark-700 { border-color: var(--ng-color-bluedark-700); }
 .ng-fill-bluedark-700   { fill: var(--ng-color-bluedark-700); }
 .ng-stroke-bluedark-700 { stroke: var(--ng-color-bluedark-700); }
 
-/* color-bluedark-800: #0040C1FF */
+/* color-bluedark-800: #004AAEFF */
 .ng-text-bluedark-800   { color: var(--ng-color-bluedark-800); }
 .ng-bg-bluedark-800     { background-color: var(--ng-color-bluedark-800); }
 .ng-border-bluedark-800 { border-color: var(--ng-color-bluedark-800); }
 .ng-fill-bluedark-800   { fill: var(--ng-color-bluedark-800); }
 .ng-stroke-bluedark-800 { stroke: var(--ng-color-bluedark-800); }
 
-/* color-bluedark-900: #00359EFF */
+/* color-bluedark-900: #003D90FF */
 .ng-text-bluedark-900   { color: var(--ng-color-bluedark-900); }
 .ng-bg-bluedark-900     { background-color: var(--ng-color-bluedark-900); }
 .ng-border-bluedark-900 { border-color: var(--ng-color-bluedark-900); }
 .ng-fill-bluedark-900   { fill: var(--ng-color-bluedark-900); }
 .ng-stroke-bluedark-900 { stroke: var(--ng-color-bluedark-900); }
 
-/* color-bluedark-950: #002266FF */
+/* color-bluedark-950: #01275DFF */
 .ng-text-bluedark-950   { color: var(--ng-color-bluedark-950); }
 .ng-bg-bluedark-950     { background-color: var(--ng-color-bluedark-950); }
 .ng-border-bluedark-950 { border-color: var(--ng-color-bluedark-950); }

package/demo/nxtgen-dark.css

@@ -256,18 +256,18 @@
   --ng-color-blue-800: #1849A9FF;
   --ng-color-blue-900: #194185FF;
   --ng-color-blue-950: #102A56FF;
-  --ng-color-bluedark-25: #F5F8FFFF;
-  --ng-color-bluedark-50: #EFF4FFFF;
-  --ng-color-bluedark-100: #D1E0FFFF;
-  --ng-color-bluedark-200: #B2CCFFFF;
-  --ng-color-bluedark-300: #84ADFFFF;
-  --ng-color-bluedark-400: #528BFFFF;
-  --ng-color-bluedark-500: #2970FFFF;
-  --ng-color-bluedark-600: #155EEFFF;
-  --ng-color-bluedark-700: #004EEBFF;
-  --ng-color-bluedark-800: #0040C1FF;
-  --ng-color-bluedark-900: #00359EFF;
-  --ng-color-bluedark-950: #002266FF;
+  --ng-color-bluedark-25: #F5F8FEFF;
+  --ng-color-bluedark-50: #F0F4FDFF;
+  --ng-color-bluedark-100: #D3E1FAFF;
+  --ng-color-bluedark-200: #B4CEF7FF;
+  --ng-color-bluedark-300: #88B0F3FF;
+  --ng-color-bluedark-400: #5690EEFF;
+  --ng-color-bluedark-500: #2D79EBFF;
+  --ng-color-bluedark-600: #1868DBFF;
+  --ng-color-bluedark-700: #005BD4FF;
+  --ng-color-bluedark-800: #004AAEFF;
+  --ng-color-bluedark-900: #003D90FF;
+  --ng-color-bluedark-950: #01275DFF;
   --ng-color-indigo-25: #F5F8FFFF;
   --ng-color-indigo-50: #EEF4FFFF;
   --ng-color-indigo-100: #E0EAFFFF;
@@ -878,7 +878,7 @@
     --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-300);
     --ng-colors-text-quaternary-500: var(--ng-color-graydarkmode-400);
     --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-400);
-    --ng-colors-text-disabled: var(--ng-color-graydarkmode-500);
+    --ng-colors-text-disabled: var(--ng-color-graydarkmode-600);
     --ng-colors-text-placeholder: var(--ng-color-graydarkmode-400);
     --ng-colors-text-placeholder-subtle: var(--ng-color-graydarkmode-600);
     --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-200);
@@ -892,11 +892,11 @@
     --ng-colors-text-success-primary-600: var(--ng-color-success-400);
     --ng-colors-border-primary: var(--ng-color-graydarkmode-600);
     --ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
-    --ng-colors-border-secondary-alt: #FFFFFF14;
-    --ng-colors-border-tertiary: var(--ng-color-graydarkmode-950); 
+    --ng-colors-border-secondary-alt: var(--ng-color-graydarkmode-800);
+    --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800); 
     --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
-    --ng-colors-border-disabled: var(--ng-color-graydarkmode-600);
-    --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-700);
+    --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
+    --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
     --ng-colors-border-brand: var(--ng-color-bluedark-400);
     --ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
     --ng-colors-border-error: var(--ng-color-error-400);
@@ -1108,7 +1108,7 @@
     --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
     --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
     --ng-colors-bg-disabled: var(--ng-color-graydarkmode-950); 
-    --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
+    --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
     --ng-colors-bg-overlay: var(--ng-color-base-black);
     --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
     --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);
@@ -1677,7 +1677,7 @@
   --ng-colors-text-tertiary-on-brand: var(--ng-color-bluedark-300);
   --ng-colors-text-quaternary-500: var(--ng-color-graydarkmode-400);
   --ng-colors-text-quaternary-on-brand: var(--ng-color-bluedark-400);
-  --ng-colors-text-disabled: var(--ng-color-graydarkmode-500);
+  --ng-colors-text-disabled: var(--ng-color-graydarkmode-600);
   --ng-colors-text-placeholder: var(--ng-color-graydarkmode-400);
   --ng-colors-text-placeholder-subtle: var(--ng-color-graydarkmode-600);
   --ng-colors-text-brand-primary-900: var(--ng-color-bluedark-200);
@@ -1691,11 +1691,11 @@
   --ng-colors-text-success-primary-600: var(--ng-color-success-400);
   --ng-colors-border-primary: var(--ng-color-graydarkmode-600);
   --ng-colors-border-secondary: var(--ng-color-graydarkmode-700);
-  --ng-colors-border-secondary-alt: #FFFFFF14;
-  --ng-colors-border-tertiary: var(--ng-color-graydarkmode-950); 
+  --ng-colors-border-secondary-alt: var(--ng-color-graydarkmode-800);
+  --ng-colors-border-tertiary: var(--ng-color-graydarkmode-800); 
   --ng-colors-border-neutral: var(--ng-color-graydarkmode-600);
-  --ng-colors-border-disabled: var(--ng-color-graydarkmode-600);
-  --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-700);
+  --ng-colors-border-disabled: var(--ng-color-graydarkmode-700);
+  --ng-colors-border-disabled-subtle: var(--ng-color-graydarkmode-800);
   --ng-colors-border-brand: var(--ng-color-bluedark-400);
   --ng-colors-border-brand-alt: var(--ng-color-bluedark-500);
   --ng-colors-border-error: var(--ng-color-error-400);
@@ -1907,7 +1907,7 @@
   --ng-colors-bg-quaternary-alt: var(--ng-color-graydarkmode-600);
   --ng-colors-bg-active: var(--ng-color-graydarkmode-900);
   --ng-colors-bg-disabled: var(--ng-color-graydarkmode-950); 
-  --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-900);
+  --ng-colors-bg-disabled-subtle: var(--ng-color-graydarkmode-800);
   --ng-colors-bg-overlay: var(--ng-color-base-black);
   --ng-colors-bg-brand-primary: var(--ng-color-bluedark-950);
   --ng-colors-bg-brand-primary-alt: var(--ng-color-bluedark-950);

package/demo/nxtgen-properties.css

@@ -1,3 +1,6 @@
+/* @nile-version 1.3.2 */
+:root { --nile-version: "1.3.2"; }
+
 /**
  * Do not edit directly
  * Generated by build-nxtgen-properties.mjs
@@ -2446,88 +2449,88 @@
   initial-value: #102A56FF;
 }
 
-/* --ng-color-bluedark-100: #D1E0FFFF */
+/* --ng-color-bluedark-100: #D3E1FAFF */
 @property --ng-color-bluedark-100 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #D1E0FFFF;
+  initial-value: #D3E1FAFF;
 }
 
-/* --ng-color-bluedark-200: #B2CCFFFF */
+/* --ng-color-bluedark-200: #B4CEF7FF */
 @property --ng-color-bluedark-200 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #B2CCFFFF;
+  initial-value: #B4CEF7FF;
 }
 
-/* --ng-color-bluedark-25: #F5F8FFFF */
+/* --ng-color-bluedark-25: #F5F8FEFF */
 @property --ng-color-bluedark-25 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #F5F8FFFF;
+  initial-value: #F5F8FEFF;
 }
 
-/* --ng-color-bluedark-300: #84ADFFFF */
+/* --ng-color-bluedark-300: #88B0F3FF */
 @property --ng-color-bluedark-300 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #84ADFFFF;
+  initial-value: #88B0F3FF;
 }
 
-/* --ng-color-bluedark-400: #528BFFFF */
+/* --ng-color-bluedark-400: #5690EEFF */
 @property --ng-color-bluedark-400 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #528BFFFF;
+  initial-value: #5690EEFF;
 }
 
-/* --ng-color-bluedark-50: #EFF4FFFF */
+/* --ng-color-bluedark-50: #F0F4FDFF */
 @property --ng-color-bluedark-50 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #EFF4FFFF;
+  initial-value: #F0F4FDFF;
 }
 
-/* --ng-color-bluedark-500: #2970FFFF */
+/* --ng-color-bluedark-500: #2D79EBFF */
 @property --ng-color-bluedark-500 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #2970FFFF;
+  initial-value: #2D79EBFF;
 }
 
-/* --ng-color-bluedark-600: #155EEFFF */
+/* --ng-color-bluedark-600: #1868DBFF */
 @property --ng-color-bluedark-600 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #155EEFFF;
+  initial-value: #1868DBFF;
 }
 
-/* --ng-color-bluedark-700: #004EEBFF */
+/* --ng-color-bluedark-700: #005BD4FF */
 @property --ng-color-bluedark-700 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #004EEBFF;
+  initial-value: #005BD4FF;
 }
 
-/* --ng-color-bluedark-800: #0040C1FF */
+/* --ng-color-bluedark-800: #004AAEFF */
 @property --ng-color-bluedark-800 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #0040C1FF;
+  initial-value: #004AAEFF;
 }
 
-/* --ng-color-bluedark-900: #00359EFF */
+/* --ng-color-bluedark-900: #003D90FF */
 @property --ng-color-bluedark-900 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #00359EFF;
+  initial-value: #003D90FF;
 }
 
-/* --ng-color-bluedark-950: #002266FF */
+/* --ng-color-bluedark-950: #01275DFF */
 @property --ng-color-bluedark-950 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #002266FF;
+  initial-value: #01275DFF;
 }
 
 /* --ng-color-bluelight-100: #E0F2FEFF */

package/demo/nxtgen-utilities.css

@@ -1,3 +1,6 @@
+/* @nile-version 1.3.2 */
+:root { --nile-version: "1.3.2"; }
+
 /**
  * Do not edit directly
  * Generated by build-nxtgen-bundle.mjs
@@ -2456,88 +2459,88 @@
   initial-value: #102A56FF;
 }
 
-/* --ng-color-bluedark-100: #D1E0FFFF */
+/* --ng-color-bluedark-100: #D3E1FAFF */
 @property --ng-color-bluedark-100 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #D1E0FFFF;
+  initial-value: #D3E1FAFF;
 }
 
-/* --ng-color-bluedark-200: #B2CCFFFF */
+/* --ng-color-bluedark-200: #B4CEF7FF */
 @property --ng-color-bluedark-200 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #B2CCFFFF;
+  initial-value: #B4CEF7FF;
 }
 
-/* --ng-color-bluedark-25: #F5F8FFFF */
+/* --ng-color-bluedark-25: #F5F8FEFF */
 @property --ng-color-bluedark-25 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #F5F8FFFF;
+  initial-value: #F5F8FEFF;
 }
 
-/* --ng-color-bluedark-300: #84ADFFFF */
+/* --ng-color-bluedark-300: #88B0F3FF */
 @property --ng-color-bluedark-300 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #84ADFFFF;
+  initial-value: #88B0F3FF;
 }
 
-/* --ng-color-bluedark-400: #528BFFFF */
+/* --ng-color-bluedark-400: #5690EEFF */
 @property --ng-color-bluedark-400 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #528BFFFF;
+  initial-value: #5690EEFF;
 }
 
-/* --ng-color-bluedark-50: #EFF4FFFF */
+/* --ng-color-bluedark-50: #F0F4FDFF */
 @property --ng-color-bluedark-50 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #EFF4FFFF;
+  initial-value: #F0F4FDFF;
 }
 
-/* --ng-color-bluedark-500: #2970FFFF */
+/* --ng-color-bluedark-500: #2D79EBFF */
 @property --ng-color-bluedark-500 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #2970FFFF;
+  initial-value: #2D79EBFF;
 }
 
-/* --ng-color-bluedark-600: #155EEFFF */
+/* --ng-color-bluedark-600: #1868DBFF */
 @property --ng-color-bluedark-600 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #155EEFFF;
+  initial-value: #1868DBFF;
 }
 
-/* --ng-color-bluedark-700: #004EEBFF */
+/* --ng-color-bluedark-700: #005BD4FF */
 @property --ng-color-bluedark-700 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #004EEBFF;
+  initial-value: #005BD4FF;
 }
 
-/* --ng-color-bluedark-800: #0040C1FF */
+/* --ng-color-bluedark-800: #004AAEFF */
 @property --ng-color-bluedark-800 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #0040C1FF;
+  initial-value: #004AAEFF;
 }
 
-/* --ng-color-bluedark-900: #00359EFF */
+/* --ng-color-bluedark-900: #003D90FF */
 @property --ng-color-bluedark-900 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #00359EFF;
+  initial-value: #003D90FF;
 }
 
-/* --ng-color-bluedark-950: #002266FF */
+/* --ng-color-bluedark-950: #01275DFF */
 @property --ng-color-bluedark-950 {
   syntax: "<color>";
   inherits: true;
-  initial-value: #002266FF;
+  initial-value: #01275DFF;
 }
 
 /* --ng-color-bluelight-100: #E0F2FEFF */
@@ -8526,84 +8529,84 @@
 .ng-fill-blue-950   { fill: var(--ng-color-blue-950); }
 .ng-stroke-blue-950 { stroke: var(--ng-color-blue-950); }
 
-/* color-bluedark-25: #F5F8FFFF */
+/* color-bluedark-25: #F5F8FEFF */
 .ng-text-bluedark-25   { color: var(--ng-color-bluedark-25); }
 .ng-bg-bluedark-25     { background-color: var(--ng-color-bluedark-25); }
 .ng-border-bluedark-25 { border-color: var(--ng-color-bluedark-25); }
 .ng-fill-bluedark-25   { fill: var(--ng-color-bluedark-25); }
 .ng-stroke-bluedark-25 { stroke: var(--ng-color-bluedark-25); }
 
-/* color-bluedark-50: #EFF4FFFF */
+/* color-bluedark-50: #F0F4FDFF */
 .ng-text-bluedark-50   { color: var(--ng-color-bluedark-50); }
 .ng-bg-bluedark-50     { background-color: var(--ng-color-bluedark-50); }
 .ng-border-bluedark-50 { border-color: var(--ng-color-bluedark-50); }
 .ng-fill-bluedark-50   { fill: var(--ng-color-bluedark-50); }
 .ng-stroke-bluedark-50 { stroke: var(--ng-color-bluedark-50); }
 
-/* color-bluedark-100: #D1E0FFFF */
+/* color-bluedark-100: #D3E1FAFF */
 .ng-text-bluedark-100   { color: var(--ng-color-bluedark-100); }
 .ng-bg-bluedark-100     { background-color: var(--ng-color-bluedark-100); }
 .ng-border-bluedark-100 { border-color: var(--ng-color-bluedark-100); }
 .ng-fill-bluedark-100   { fill: var(--ng-color-bluedark-100); }
 .ng-stroke-bluedark-100 { stroke: var(--ng-color-bluedark-100); }
 
-/* color-bluedark-200: #B2CCFFFF */
+/* color-bluedark-200: #B4CEF7FF */
 .ng-text-bluedark-200   { color: var(--ng-color-bluedark-200); }
 .ng-bg-bluedark-200     { background-color: var(--ng-color-bluedark-200); }
 .ng-border-bluedark-200 { border-color: var(--ng-color-bluedark-200); }
 .ng-fill-bluedark-200   { fill: var(--ng-color-bluedark-200); }
 .ng-stroke-bluedark-200 { stroke: var(--ng-color-bluedark-200); }
 
-/* color-bluedark-300: #84ADFFFF */
+/* color-bluedark-300: #88B0F3FF */
 .ng-text-bluedark-300   { color: var(--ng-color-bluedark-300); }
 .ng-bg-bluedark-300     { background-color: var(--ng-color-bluedark-300); }
 .ng-border-bluedark-300 { border-color: var(--ng-color-bluedark-300); }
 .ng-fill-bluedark-300   { fill: var(--ng-color-bluedark-300); }
 .ng-stroke-bluedark-300 { stroke: var(--ng-color-bluedark-300); }
 
-/* color-bluedark-400: #528BFFFF */
+/* color-bluedark-400: #5690EEFF */
 .ng-text-bluedark-400   { color: var(--ng-color-bluedark-400); }
 .ng-bg-bluedark-400     { background-color: var(--ng-color-bluedark-400); }
 .ng-border-bluedark-400 { border-color: var(--ng-color-bluedark-400); }
 .ng-fill-bluedark-400   { fill: var(--ng-color-bluedark-400); }
 .ng-stroke-bluedark-400 { stroke: var(--ng-color-bluedark-400); }
 
-/* color-bluedark-500: #2970FFFF */
+/* color-bluedark-500: #2D79EBFF */
 .ng-text-bluedark-500   { color: var(--ng-color-bluedark-500); }
 .ng-bg-bluedark-500     { background-color: var(--ng-color-bluedark-500); }
 .ng-border-bluedark-500 { border-color: var(--ng-color-bluedark-500); }
 .ng-fill-bluedark-500   { fill: var(--ng-color-bluedark-500); }
 .ng-stroke-bluedark-500 { stroke: var(--ng-color-bluedark-500); }
 
-/* color-bluedark-600: #155EEFFF */
+/* color-bluedark-600: #1868DBFF */
 .ng-text-bluedark-600   { color: var(--ng-color-bluedark-600); }
 .ng-bg-bluedark-600     { background-color: var(--ng-color-bluedark-600); }
 .ng-border-bluedark-600 { border-color: var(--ng-color-bluedark-600); }
 .ng-fill-bluedark-600   { fill: var(--ng-color-bluedark-600); }
 .ng-stroke-bluedark-600 { stroke: var(--ng-color-bluedark-600); }
 
-/* color-bluedark-700: #004EEBFF */
+/* color-bluedark-700: #005BD4FF */
 .ng-text-bluedark-700   { color: var(--ng-color-bluedark-700); }
 .ng-bg-bluedark-700     { background-color: var(--ng-color-bluedark-700); }
 .ng-border-bluedark-700 { border-color: var(--ng-color-bluedark-700); }
 .ng-fill-bluedark-700   { fill: var(--ng-color-bluedark-700); }
 .ng-stroke-bluedark-700 { stroke: var(--ng-color-bluedark-700); }
 
-/* color-bluedark-800: #0040C1FF */
+/* color-bluedark-800: #004AAEFF */
 .ng-text-bluedark-800   { color: var(--ng-color-bluedark-800); }
 .ng-bg-bluedark-800     { background-color: var(--ng-color-bluedark-800); }
 .ng-border-bluedark-800 { border-color: var(--ng-color-bluedark-800); }
 .ng-fill-bluedark-800   { fill: var(--ng-color-bluedark-800); }
 .ng-stroke-bluedark-800 { stroke: var(--ng-color-bluedark-800); }
 
-/* color-bluedark-900: #00359EFF */
+/* color-bluedark-900: #003D90FF */
 .ng-text-bluedark-900   { color: var(--ng-color-bluedark-900); }
 .ng-bg-bluedark-900     { background-color: var(--ng-color-bluedark-900); }
 .ng-border-bluedark-900 { border-color: var(--ng-color-bluedark-900); }
 .ng-fill-bluedark-900   { fill: var(--ng-color-bluedark-900); }
 .ng-stroke-bluedark-900 { stroke: var(--ng-color-bluedark-900); }
 
-/* color-bluedark-950: #002266FF */
+/* color-bluedark-950: #01275DFF */
 .ng-text-bluedark-950   { color: var(--ng-color-bluedark-950); }
 .ng-bg-bluedark-950     { background-color: var(--ng-color-bluedark-950); }
 .ng-border-bluedark-950 { border-color: var(--ng-color-bluedark-950); }

package/demo/nxtgen.css

@@ -1,3 +1,6 @@
+/* @nile-version 1.3.2 */
+:root { --nile-version: "1.3.2"; }
+
 /* _Primitives - Style */
 
 :root {
@@ -256,18 +259,18 @@
   --ng-color-blue-800: #1849A9FF;
   --ng-color-blue-900: #194185FF;
   --ng-color-blue-950: #102A56FF;
-  --ng-color-bluedark-25: #F5F8FFFF;
-  --ng-color-bluedark-50: #EFF4FFFF;
-  --ng-color-bluedark-100: #D1E0FFFF;
-  --ng-color-bluedark-200: #B2CCFFFF;
-  --ng-color-bluedark-300: #84ADFFFF;
-  --ng-color-bluedark-400: #528BFFFF;
-  --ng-color-bluedark-500: #2970FFFF;
-  --ng-color-bluedark-600: #155EEFFF;
-  --ng-color-bluedark-700: #004EEBFF;
-  --ng-color-bluedark-800: #0040C1FF;
-  --ng-color-bluedark-900: #00359EFF;
-  --ng-color-bluedark-950: #002266FF;
+  --ng-color-bluedark-25: #F5F8FEFF;
+  --ng-color-bluedark-50: #F0F4FDFF;
+  --ng-color-bluedark-100: #D3E1FAFF;
+  --ng-color-bluedark-200: #B4CEF7FF;
+  --ng-color-bluedark-300: #88B0F3FF;
+  --ng-color-bluedark-400: #5690EEFF;
+  --ng-color-bluedark-500: #2D79EBFF;
+  --ng-color-bluedark-600: #1868DBFF;
+  --ng-color-bluedark-700: #005BD4FF;
+  --ng-color-bluedark-800: #004AAEFF;
+  --ng-color-bluedark-900: #003D90FF;
+  --ng-color-bluedark-950: #01275DFF;
   --ng-color-indigo-25: #F5F8FFFF;
   --ng-color-indigo-50: #EEF4FFFF;
   --ng-color-indigo-100: #E0EAFFFF;

package/demo/utilities.css

@@ -1,3 +1,6 @@
+/* @nile-version 1.3.2 */
+:root { --nile-version: "1.3.2"; }
+
 /**
  * Do not edit directly
  * Generated by build-utilities.mjs

package/demo/variables.css

@@ -1,3 +1,6 @@
+/* @nile-version 1.3.2 */
+:root { --nile-version: "1.3.2"; }
+
 /**
  * Do not edit directly
  */