@vanduo-oss/framework 1.3.9 → 1.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (124) hide show
  1. package/README.md +89 -42
  2. package/css/components/affix.css +12 -12
  3. package/css/components/alerts.css +70 -70
  4. package/css/components/avatar.css +78 -78
  5. package/css/components/badges.css +67 -67
  6. package/css/components/breadcrumbs.css +32 -32
  7. package/css/components/bubble.css +40 -40
  8. package/css/components/button-group.css +2 -2
  9. package/css/components/buttons.css +157 -157
  10. package/css/components/cards.css +79 -79
  11. package/css/components/chips.css +50 -50
  12. package/css/components/code-snippet.css +132 -132
  13. package/css/components/collapsible.css +67 -67
  14. package/css/components/collections.css +68 -68
  15. package/css/components/datepicker.css +54 -54
  16. package/css/components/doc-search.css +96 -103
  17. package/css/components/doc-tabs.css +11 -11
  18. package/css/components/draggable.css +77 -77
  19. package/css/components/dropdown.css +50 -50
  20. package/css/components/expanding-cards.css +1 -1
  21. package/css/components/fab.css +61 -61
  22. package/css/components/flow.css +55 -55
  23. package/css/components/footer.css +62 -62
  24. package/css/components/forms.css +437 -425
  25. package/css/components/image-box.css +50 -54
  26. package/css/components/modals.css +51 -51
  27. package/css/components/music-player.css +150 -150
  28. package/css/components/navbar.css +80 -80
  29. package/css/components/pagination.css +51 -51
  30. package/css/components/preloader.css +19 -19
  31. package/css/components/progress.css +20 -20
  32. package/css/components/rating.css +19 -19
  33. package/css/components/ripple.css +10 -10
  34. package/css/components/sidenav.css +72 -72
  35. package/css/components/skeleton.css +17 -16
  36. package/css/components/spinner.css +33 -33
  37. package/css/components/spotlight.css +33 -33
  38. package/css/components/stepper.css +39 -39
  39. package/css/components/suggest.css +37 -37
  40. package/css/components/tabs.css +60 -60
  41. package/css/components/theme-customizer.css +154 -154
  42. package/css/components/timeline.css +50 -50
  43. package/css/components/timepicker.css +29 -29
  44. package/css/components/toast.css +53 -53
  45. package/css/components/tooltips.css +78 -78
  46. package/css/components/transfer.css +37 -37
  47. package/css/components/tree.css +28 -28
  48. package/css/components/waypoint.css +12 -12
  49. package/css/core/colors.css +640 -640
  50. package/css/core/grid.css +127 -132
  51. package/css/core/helpers.css +349 -349
  52. package/css/core/tokens.css +133 -67
  53. package/css/core/typography.css +105 -103
  54. package/css/effects/morph.css +21 -21
  55. package/css/effects/parallax.css +6 -6
  56. package/css/utilities/color-utilities.css +273 -273
  57. package/css/utilities/media.css +4 -4
  58. package/css/utilities/shadow.css +75 -75
  59. package/css/utilities/table.css +64 -64
  60. package/css/utilities/transitions.css +53 -41
  61. package/css/vanduo.css +14 -35
  62. package/dist/build-info.json +3 -3
  63. package/dist/vanduo.cjs.js +947 -307
  64. package/dist/vanduo.cjs.js.map +3 -3
  65. package/dist/vanduo.cjs.min.js +7 -7
  66. package/dist/vanduo.cjs.min.js.map +3 -3
  67. package/dist/vanduo.css +9650 -9656
  68. package/dist/vanduo.css.map +1 -1
  69. package/dist/vanduo.esm.js +947 -307
  70. package/dist/vanduo.esm.js.map +3 -3
  71. package/dist/vanduo.esm.min.js +7 -7
  72. package/dist/vanduo.esm.min.js.map +3 -3
  73. package/dist/vanduo.js +947 -307
  74. package/dist/vanduo.js.map +3 -3
  75. package/dist/vanduo.min.css +2 -2
  76. package/dist/vanduo.min.css.map +1 -1
  77. package/dist/vanduo.min.js +7 -7
  78. package/dist/vanduo.min.js.map +3 -3
  79. package/js/components/affix.js +4 -4
  80. package/js/components/bubble.js +3 -3
  81. package/js/components/code-snippet.js +129 -5
  82. package/js/components/collapsible.js +2 -3
  83. package/js/components/datepicker.js +2 -2
  84. package/js/components/doc-search.js +69 -11
  85. package/js/components/draggable.js +4 -4
  86. package/js/components/dropdown.js +2 -3
  87. package/js/components/expanding-cards.js +2 -2
  88. package/js/components/flow.js +2 -2
  89. package/js/components/font-switcher.js +23 -13
  90. package/js/components/glass.js +2 -2
  91. package/js/components/grid.js +19 -8
  92. package/js/components/image-box.js +51 -12
  93. package/js/components/lazy-load.js +81 -9
  94. package/js/components/modals.js +28 -12
  95. package/js/components/morph.js +3 -3
  96. package/js/components/music-player.js +13 -13
  97. package/js/components/navbar.js +3 -3
  98. package/js/components/pagination.js +2 -3
  99. package/js/components/parallax.js +9 -10
  100. package/js/components/preloader.js +15 -6
  101. package/js/components/rating.js +2 -2
  102. package/js/components/ripple.js +2 -2
  103. package/js/components/select.js +2 -3
  104. package/js/components/sidenav.js +43 -14
  105. package/js/components/spotlight.js +2 -2
  106. package/js/components/stepper.js +2 -2
  107. package/js/components/suggest.js +9 -3
  108. package/js/components/tabs.js +2 -2
  109. package/js/components/theme-customizer.js +155 -25
  110. package/js/components/theme-switcher.js +27 -16
  111. package/js/components/timeline.js +41 -12
  112. package/js/components/timepicker.js +2 -2
  113. package/js/components/toast.js +1 -1
  114. package/js/components/tooltips.js +4 -4
  115. package/js/components/transfer.js +2 -2
  116. package/js/components/tree.js +2 -2
  117. package/js/components/validate.js +2 -2
  118. package/js/components/vd-hex.js +10 -6
  119. package/js/components/waypoint.js +2 -2
  120. package/js/utils/helpers.js +7 -4
  121. package/js/utils/lifecycle.js +158 -83
  122. package/js/vanduo.js +203 -34
  123. package/package.json +2 -1
  124. package/css/core/vd-aliases.css +0 -60
package/css/core/grid.css CHANGED
@@ -5,106 +5,106 @@
5
5
 
6
6
  :root {
7
7
  /* Container (Fibonacci: 987px) */
8
- --container-max-width: 987px;
9
- --container-max-width-wide: 1597px;
8
+ --vd-container-max-width: 987px;
9
+ --vd-container-max-width-wide: 1597px;
10
10
  /* next Fibonacci */
11
- --container-padding: 0.8125rem;
11
+ --vd-container-padding: 0.8125rem;
12
12
  /* 13px - fib */
13
13
 
14
14
  /* Breakpoints */
15
- --breakpoint-sm: 576px;
16
- --breakpoint-md: 768px;
17
- --breakpoint-lg: 992px;
18
- --breakpoint-xl: 1200px;
19
- --breakpoint-2xl: 1400px;
15
+ --vd-breakpoint-sm: 576px;
16
+ --vd-breakpoint-md: 768px;
17
+ --vd-breakpoint-lg: 992px;
18
+ --vd-breakpoint-xl: 1200px;
19
+ --vd-breakpoint-2xl: 1400px;
20
20
 
21
21
  /* Grid Gutter (Fibonacci: 13px) */
22
- --grid-gutter: 0.8125rem;
22
+ --vd-grid-gutter: 0.8125rem;
23
23
 
24
24
  /* Fibonacci Gap Scale */
25
- --gap-fib-2: 0.125rem;
25
+ --vd-gap-fib-2: 0.125rem;
26
26
  /* 2px */
27
- --gap-fib-3: 0.1875rem;
27
+ --vd-gap-fib-3: 0.1875rem;
28
28
  /* 3px */
29
- --gap-fib-5: 0.3125rem;
29
+ --vd-gap-fib-5: 0.3125rem;
30
30
  /* 5px */
31
- --gap-fib-8: 0.5rem;
31
+ --vd-gap-fib-8: 0.5rem;
32
32
  /* 8px */
33
- --gap-fib-13: 0.8125rem;
33
+ --vd-gap-fib-13: 0.8125rem;
34
34
  /* 13px */
35
- --gap-fib-21: 1.3125rem;
35
+ --vd-gap-fib-21: 1.3125rem;
36
36
  /* 21px */
37
37
 
38
38
  /* Responsive Container Widths (Fibonacci-derived)
39
39
  * Using Fibonacci: 377, 610, 987, 1597
40
40
  * Lucas numbers (related to Fibonacci): 521, 843, 1364 for intermediate sizes */
41
- --container-sm: 521px;
41
+ --vd-container-sm: 521px;
42
42
  /* Lucas - between fib 377 and 610 */
43
- --container-md: 610px;
43
+ --vd-container-md: 610px;
44
44
  /* Fibonacci */
45
- --container-lg: 987px;
46
- /* Fibonacci - matches --container-max-width */
47
- --container-xl: 1364px;
45
+ --vd-container-lg: 987px;
46
+ /* Fibonacci - matches --vd-container-max-width */
47
+ --vd-container-xl: 1364px;
48
48
  /* Lucas - between fib 987 and 1597 */
49
- --container-2xl: 1597px;
50
- /* Fibonacci - matches --container-max-width-wide */
49
+ --vd-container-2xl: 1597px;
50
+ /* Fibonacci - matches --vd-container-max-width-wide */
51
51
  }
52
52
 
53
53
  /* Container */
54
54
  .vd-container {
55
55
  width: 100%;
56
- max-width: var(--container-max-width);
56
+ max-width: var(--vd-container-max-width);
57
57
  margin-left: auto;
58
58
  margin-right: auto;
59
- padding-left: var(--container-padding);
60
- padding-right: var(--container-padding);
59
+ padding-left: var(--vd-container-padding);
60
+ padding-right: var(--vd-container-padding);
61
61
  }
62
62
 
63
63
  .vd-container-fluid {
64
64
  width: 100%;
65
- padding-left: var(--container-padding);
66
- padding-right: var(--container-padding);
65
+ padding-left: var(--vd-container-padding);
66
+ padding-right: var(--vd-container-padding);
67
67
  }
68
68
 
69
69
  /* Container XL - Intermediate size (1364px Lucas number) */
70
70
  .vd-container-xl {
71
71
  width: 100%;
72
- max-width: var(--container-xl);
72
+ max-width: var(--vd-container-xl);
73
73
  margin-left: auto;
74
74
  margin-right: auto;
75
- padding-left: var(--container-padding);
76
- padding-right: var(--container-padding);
75
+ padding-left: var(--vd-container-padding);
76
+ padding-right: var(--vd-container-padding);
77
77
  }
78
78
 
79
79
  /* Container Wide - Full Fibonacci wide (1597px) */
80
80
  .vd-container-wide {
81
81
  width: 100%;
82
- max-width: var(--container-2xl);
82
+ max-width: var(--vd-container-max-width-wide);
83
83
  margin-left: auto;
84
84
  margin-right: auto;
85
- padding-left: var(--container-padding);
86
- padding-right: var(--container-padding);
85
+ padding-left: var(--vd-container-padding);
86
+ padding-right: var(--vd-container-padding);
87
87
  }
88
88
 
89
89
  /* Container Responsive - Grows with viewport at XL+ breakpoints */
90
90
  .vd-container-responsive {
91
91
  width: 100%;
92
- max-width: var(--container-max-width);
92
+ max-width: var(--vd-container-max-width);
93
93
  margin-left: auto;
94
94
  margin-right: auto;
95
- padding-left: var(--container-padding);
96
- padding-right: var(--container-padding);
95
+ padding-left: var(--vd-container-padding);
96
+ padding-right: var(--vd-container-padding);
97
97
  }
98
98
 
99
99
  @media (min-width: 1200px) {
100
100
  .vd-container-responsive {
101
- max-width: var(--container-xl);
101
+ max-width: var(--vd-container-xl);
102
102
  }
103
103
  }
104
104
 
105
105
  @media (min-width: 1400px) {
106
106
  .vd-container-responsive {
107
- max-width: var(--container-2xl);
107
+ max-width: var(--vd-container-2xl);
108
108
  }
109
109
  }
110
110
 
@@ -112,15 +112,15 @@
112
112
  .vd-row {
113
113
  display: flex;
114
114
  flex-wrap: wrap;
115
- margin-left: calc(var(--grid-gutter) * -0.5);
116
- margin-right: calc(var(--grid-gutter) * -0.5);
115
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
116
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
117
117
  }
118
118
 
119
119
  /* Columns */
120
120
  [class*="col-"] {
121
121
  flex: 1 0 0%;
122
- padding-left: calc(var(--grid-gutter) * 0.5);
123
- padding-right: calc(var(--grid-gutter) * 0.5);
122
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
123
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
124
124
  }
125
125
 
126
126
  /* Column Sizes - Mobile First (12-column system) */
@@ -1219,34 +1219,29 @@
1219
1219
  * Fibonacci column ratios: 2:3:5, 3:5:8, 5:8
1220
1220
  * =================================================== */
1221
1221
 
1222
- /* Wide container variant (Fibonacci: 1597px) */
1223
- .vd-container-wide {
1224
- max-width: var(--container-max-width-wide);
1225
- }
1226
-
1227
1222
  /* Fibonacci-number container widths */
1228
1223
  .vd-container-fib-610 {
1229
1224
  max-width: 610px;
1230
1225
  margin-left: auto;
1231
1226
  margin-right: auto;
1232
- padding-left: var(--container-padding);
1233
- padding-right: var(--container-padding);
1227
+ padding-left: var(--vd-container-padding);
1228
+ padding-right: var(--vd-container-padding);
1234
1229
  }
1235
1230
 
1236
1231
  .vd-container-fib-987 {
1237
1232
  max-width: 987px;
1238
1233
  margin-left: auto;
1239
1234
  margin-right: auto;
1240
- padding-left: var(--container-padding);
1241
- padding-right: var(--container-padding);
1235
+ padding-left: var(--vd-container-padding);
1236
+ padding-right: var(--vd-container-padding);
1242
1237
  }
1243
1238
 
1244
1239
  .vd-container-fib-1597 {
1245
1240
  max-width: 1597px;
1246
1241
  margin-left: auto;
1247
1242
  margin-right: auto;
1248
- padding-left: var(--container-padding);
1249
- padding-right: var(--container-padding);
1243
+ padding-left: var(--vd-container-padding);
1244
+ padding-right: var(--vd-container-padding);
1250
1245
  }
1251
1246
 
1252
1247
  /* ===================================================
@@ -1262,77 +1257,77 @@
1262
1257
  width: 100%;
1263
1258
  margin-left: auto;
1264
1259
  margin-right: auto;
1265
- padding-left: var(--container-padding);
1266
- padding-right: var(--container-padding);
1260
+ padding-left: var(--vd-container-padding);
1261
+ padding-right: var(--vd-container-padding);
1267
1262
  }
1268
1263
 
1269
1264
  @media (min-width: 576px) {
1270
1265
  .vd-container-sm {
1271
- max-width: var(--container-sm);
1266
+ max-width: var(--vd-container-sm);
1272
1267
  }
1273
1268
  }
1274
1269
 
1275
1270
  @media (min-width: 768px) {
1276
1271
  .vd-container-sm {
1277
- max-width: var(--container-md);
1272
+ max-width: var(--vd-container-md);
1278
1273
  }
1279
1274
 
1280
1275
  .vd-container-md {
1281
- max-width: var(--container-md);
1276
+ max-width: var(--vd-container-md);
1282
1277
  }
1283
1278
  }
1284
1279
 
1285
1280
  @media (min-width: 992px) {
1286
1281
  .vd-container-sm {
1287
- max-width: var(--container-lg);
1282
+ max-width: var(--vd-container-lg);
1288
1283
  }
1289
1284
 
1290
1285
  .vd-container-md {
1291
- max-width: var(--container-lg);
1286
+ max-width: var(--vd-container-lg);
1292
1287
  }
1293
1288
 
1294
1289
  .vd-container-lg {
1295
- max-width: var(--container-lg);
1290
+ max-width: var(--vd-container-lg);
1296
1291
  }
1297
1292
  }
1298
1293
 
1299
1294
  @media (min-width: 1200px) {
1300
1295
  .vd-container-sm {
1301
- max-width: var(--container-xl);
1296
+ max-width: var(--vd-container-xl);
1302
1297
  }
1303
1298
 
1304
1299
  .vd-container-md {
1305
- max-width: var(--container-xl);
1300
+ max-width: var(--vd-container-xl);
1306
1301
  }
1307
1302
 
1308
1303
  .vd-container-lg {
1309
- max-width: var(--container-xl);
1304
+ max-width: var(--vd-container-xl);
1310
1305
  }
1311
1306
 
1312
1307
  .vd-container-xl {
1313
- max-width: var(--container-xl);
1308
+ max-width: var(--vd-container-xl);
1314
1309
  }
1315
1310
  }
1316
1311
 
1317
1312
  @media (min-width: 1400px) {
1318
1313
  .vd-container-sm {
1319
- max-width: var(--container-2xl);
1314
+ max-width: var(--vd-container-2xl);
1320
1315
  }
1321
1316
 
1322
1317
  .vd-container-md {
1323
- max-width: var(--container-2xl);
1318
+ max-width: var(--vd-container-2xl);
1324
1319
  }
1325
1320
 
1326
1321
  .vd-container-lg {
1327
- max-width: var(--container-2xl);
1322
+ max-width: var(--vd-container-2xl);
1328
1323
  }
1329
1324
 
1330
1325
  .vd-container-xl {
1331
- max-width: var(--container-2xl);
1326
+ max-width: var(--vd-container-2xl);
1332
1327
  }
1333
1328
 
1334
1329
  .vd-container-2xl {
1335
- max-width: var(--container-2xl);
1330
+ max-width: var(--vd-container-2xl);
1336
1331
  }
1337
1332
  }
1338
1333
 
@@ -1340,78 +1335,78 @@
1340
1335
  .vd-row-golden {
1341
1336
  display: flex;
1342
1337
  flex-wrap: wrap;
1343
- margin-left: calc(var(--grid-gutter) * -0.5);
1344
- margin-right: calc(var(--grid-gutter) * -0.5);
1338
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1339
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1345
1340
  }
1346
1341
 
1347
1342
  .vd-row-golden>.vd-col-golden-minor {
1348
1343
  flex: 0 0 auto;
1349
1344
  width: 38.196601%;
1350
- padding-left: calc(var(--grid-gutter) * 0.5);
1351
- padding-right: calc(var(--grid-gutter) * 0.5);
1345
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1346
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1352
1347
  }
1353
1348
 
1354
1349
  .vd-row-golden>.vd-col-golden-major {
1355
1350
  flex: 0 0 auto;
1356
1351
  width: 61.803399%;
1357
- padding-left: calc(var(--grid-gutter) * 0.5);
1358
- padding-right: calc(var(--grid-gutter) * 0.5);
1352
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1353
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1359
1354
  }
1360
1355
 
1361
1356
  /* Fibonacci Two-Column: 5:8 proportions */
1362
1357
  .vd-row-fib-2 {
1363
1358
  display: flex;
1364
1359
  flex-wrap: wrap;
1365
- margin-left: calc(var(--grid-gutter) * -0.5);
1366
- margin-right: calc(var(--grid-gutter) * -0.5);
1360
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1361
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1367
1362
  }
1368
1363
 
1369
1364
  .vd-row-fib-2>.vd-col-fib-5 {
1370
1365
  flex: 0 0 auto;
1371
1366
  width: 38.461538%;
1372
1367
  /* 5/13 */
1373
- padding-left: calc(var(--grid-gutter) * 0.5);
1374
- padding-right: calc(var(--grid-gutter) * 0.5);
1368
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1369
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1375
1370
  }
1376
1371
 
1377
1372
  .vd-row-fib-2>.vd-col-fib-8 {
1378
1373
  flex: 0 0 auto;
1379
1374
  width: 61.538462%;
1380
1375
  /* 8/13 */
1381
- padding-left: calc(var(--grid-gutter) * 0.5);
1382
- padding-right: calc(var(--grid-gutter) * 0.5);
1376
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1377
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1383
1378
  }
1384
1379
 
1385
1380
  /* Fibonacci Three-Column: 2:3:5 proportions */
1386
1381
  .vd-row-fib-3 {
1387
1382
  display: flex;
1388
1383
  flex-wrap: wrap;
1389
- margin-left: calc(var(--grid-gutter) * -0.5);
1390
- margin-right: calc(var(--grid-gutter) * -0.5);
1384
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1385
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1391
1386
  }
1392
1387
 
1393
1388
  .vd-row-fib-3>.vd-col-fib-2 {
1394
1389
  flex: 0 0 auto;
1395
1390
  width: 20%;
1396
1391
  /* 2/10 */
1397
- padding-left: calc(var(--grid-gutter) * 0.5);
1398
- padding-right: calc(var(--grid-gutter) * 0.5);
1392
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1393
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1399
1394
  }
1400
1395
 
1401
1396
  .vd-row-fib-3>.vd-col-fib-3 {
1402
1397
  flex: 0 0 auto;
1403
1398
  width: 30%;
1404
1399
  /* 3/10 */
1405
- padding-left: calc(var(--grid-gutter) * 0.5);
1406
- padding-right: calc(var(--grid-gutter) * 0.5);
1400
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1401
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1407
1402
  }
1408
1403
 
1409
1404
  .vd-row-fib-3>.vd-col-fib-5 {
1410
1405
  flex: 0 0 auto;
1411
1406
  width: 50%;
1412
1407
  /* 5/10 */
1413
- padding-left: calc(var(--grid-gutter) * 0.5);
1414
- padding-right: calc(var(--grid-gutter) * 0.5);
1408
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1409
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1415
1410
  }
1416
1411
 
1417
1412
  /* CSS Grid Golden Ratio layouts */
@@ -1419,93 +1414,93 @@
1419
1414
  .grid-golden {
1420
1415
  display: grid;
1421
1416
  grid-template-columns: 1fr 1.618fr;
1422
- gap: var(--grid-gutter);
1417
+ gap: var(--vd-grid-gutter);
1423
1418
  }
1424
1419
 
1425
1420
  .vd-grid-golden-reverse,
1426
1421
  .grid-golden-reverse {
1427
1422
  display: grid;
1428
1423
  grid-template-columns: 1.618fr 1fr;
1429
- gap: var(--grid-gutter);
1424
+ gap: var(--vd-grid-gutter);
1430
1425
  }
1431
1426
 
1432
1427
  .vd-grid-fib-3,
1433
1428
  .grid-fib-3 {
1434
1429
  display: grid;
1435
1430
  grid-template-columns: 2fr 3fr 5fr;
1436
- gap: var(--grid-gutter);
1431
+ gap: var(--vd-grid-gutter);
1437
1432
  }
1438
1433
 
1439
1434
  /* Fibonacci Four-Column: 1:2:3:5 proportions */
1440
1435
  .vd-row-fib-4 {
1441
1436
  display: flex;
1442
1437
  flex-wrap: wrap;
1443
- margin-left: calc(var(--grid-gutter) * -0.5);
1444
- margin-right: calc(var(--grid-gutter) * -0.5);
1438
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1439
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1445
1440
  }
1446
1441
 
1447
1442
  .vd-row-fib-4>.vd-col-fib-1 {
1448
1443
  flex: 0 0 auto;
1449
1444
  width: 9.090909%;
1450
1445
  /* 1/11 */
1451
- padding-left: calc(var(--grid-gutter) * 0.5);
1452
- padding-right: calc(var(--grid-gutter) * 0.5);
1446
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1447
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1453
1448
  }
1454
1449
 
1455
1450
  .vd-row-fib-4>.vd-col-fib-2 {
1456
1451
  flex: 0 0 auto;
1457
1452
  width: 18.181818%;
1458
1453
  /* 2/11 */
1459
- padding-left: calc(var(--grid-gutter) * 0.5);
1460
- padding-right: calc(var(--grid-gutter) * 0.5);
1454
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1455
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1461
1456
  }
1462
1457
 
1463
1458
  .vd-row-fib-4>.vd-col-fib-3 {
1464
1459
  flex: 0 0 auto;
1465
1460
  width: 27.272727%;
1466
1461
  /* 3/11 */
1467
- padding-left: calc(var(--grid-gutter) * 0.5);
1468
- padding-right: calc(var(--grid-gutter) * 0.5);
1462
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1463
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1469
1464
  }
1470
1465
 
1471
1466
  .vd-row-fib-4>.vd-col-fib-5 {
1472
1467
  flex: 0 0 auto;
1473
1468
  width: 45.454545%;
1474
1469
  /* 5/11 */
1475
- padding-left: calc(var(--grid-gutter) * 0.5);
1476
- padding-right: calc(var(--grid-gutter) * 0.5);
1470
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1471
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1477
1472
  }
1478
1473
 
1479
1474
  /* Fibonacci Three-Column: 3:5:8 proportions */
1480
1475
  .vd-row-fib-3-alt {
1481
1476
  display: flex;
1482
1477
  flex-wrap: wrap;
1483
- margin-left: calc(var(--grid-gutter) * -0.5);
1484
- margin-right: calc(var(--grid-gutter) * -0.5);
1478
+ margin-left: calc(var(--vd-grid-gutter) * -0.5);
1479
+ margin-right: calc(var(--vd-grid-gutter) * -0.5);
1485
1480
  }
1486
1481
 
1487
1482
  .vd-row-fib-3-alt>.vd-col-fib-3 {
1488
1483
  flex: 0 0 auto;
1489
1484
  width: 18.75%;
1490
1485
  /* 3/16 */
1491
- padding-left: calc(var(--grid-gutter) * 0.5);
1492
- padding-right: calc(var(--grid-gutter) * 0.5);
1486
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1487
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1493
1488
  }
1494
1489
 
1495
1490
  .vd-row-fib-3-alt>.vd-col-fib-5 {
1496
1491
  flex: 0 0 auto;
1497
1492
  width: 31.25%;
1498
1493
  /* 5/16 */
1499
- padding-left: calc(var(--grid-gutter) * 0.5);
1500
- padding-right: calc(var(--grid-gutter) * 0.5);
1494
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1495
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1501
1496
  }
1502
1497
 
1503
1498
  .vd-row-fib-3-alt>.vd-col-fib-8 {
1504
1499
  flex: 0 0 auto;
1505
1500
  width: 50%;
1506
1501
  /* 8/16 */
1507
- padding-left: calc(var(--grid-gutter) * 0.5);
1508
- padding-right: calc(var(--grid-gutter) * 0.5);
1502
+ padding-left: calc(var(--vd-grid-gutter) * 0.5);
1503
+ padding-right: calc(var(--vd-grid-gutter) * 0.5);
1509
1504
  }
1510
1505
 
1511
1506
  /* CSS Grid Fibonacci variants */
@@ -1513,14 +1508,14 @@
1513
1508
  .grid-fib-4 {
1514
1509
  display: grid;
1515
1510
  grid-template-columns: 1fr 2fr 3fr 5fr;
1516
- gap: var(--grid-gutter);
1511
+ gap: var(--vd-grid-gutter);
1517
1512
  }
1518
1513
 
1519
1514
  .vd-grid-fib-3-alt,
1520
1515
  .grid-fib-3-alt {
1521
1516
  display: grid;
1522
1517
  grid-template-columns: 3fr 5fr 8fr;
1523
- gap: var(--grid-gutter);
1518
+ gap: var(--vd-grid-gutter);
1524
1519
  }
1525
1520
 
1526
1521
  /* ===================================================
@@ -1529,75 +1524,75 @@
1529
1524
  * =================================================== */
1530
1525
 
1531
1526
  .vd-gap-fib-2 {
1532
- gap: var(--gap-fib-2);
1527
+ gap: var(--vd-gap-fib-2);
1533
1528
  }
1534
1529
 
1535
1530
  .vd-gap-fib-3 {
1536
- gap: var(--gap-fib-3);
1531
+ gap: var(--vd-gap-fib-3);
1537
1532
  }
1538
1533
 
1539
1534
  .vd-gap-fib-5 {
1540
- gap: var(--gap-fib-5);
1535
+ gap: var(--vd-gap-fib-5);
1541
1536
  }
1542
1537
 
1543
1538
  .vd-gap-fib-8 {
1544
- gap: var(--gap-fib-8);
1539
+ gap: var(--vd-gap-fib-8);
1545
1540
  }
1546
1541
 
1547
1542
  .vd-gap-fib-13 {
1548
- gap: var(--gap-fib-13);
1543
+ gap: var(--vd-gap-fib-13);
1549
1544
  }
1550
1545
 
1551
1546
  .vd-gap-fib-21 {
1552
- gap: var(--gap-fib-21);
1547
+ gap: var(--vd-gap-fib-21);
1553
1548
  }
1554
1549
 
1555
1550
  .vd-row-gap-fib-2 {
1556
- row-gap: var(--gap-fib-2);
1551
+ row-gap: var(--vd-gap-fib-2);
1557
1552
  }
1558
1553
 
1559
1554
  .vd-row-gap-fib-3 {
1560
- row-gap: var(--gap-fib-3);
1555
+ row-gap: var(--vd-gap-fib-3);
1561
1556
  }
1562
1557
 
1563
1558
  .vd-row-gap-fib-5 {
1564
- row-gap: var(--gap-fib-5);
1559
+ row-gap: var(--vd-gap-fib-5);
1565
1560
  }
1566
1561
 
1567
1562
  .vd-row-gap-fib-8 {
1568
- row-gap: var(--gap-fib-8);
1563
+ row-gap: var(--vd-gap-fib-8);
1569
1564
  }
1570
1565
 
1571
1566
  .vd-row-gap-fib-13 {
1572
- row-gap: var(--gap-fib-13);
1567
+ row-gap: var(--vd-gap-fib-13);
1573
1568
  }
1574
1569
 
1575
1570
  .vd-row-gap-fib-21 {
1576
- row-gap: var(--gap-fib-21);
1571
+ row-gap: var(--vd-gap-fib-21);
1577
1572
  }
1578
1573
 
1579
1574
  .vd-col-gap-fib-2 {
1580
- column-gap: var(--gap-fib-2);
1575
+ column-gap: var(--vd-gap-fib-2);
1581
1576
  }
1582
1577
 
1583
1578
  .vd-col-gap-fib-3 {
1584
- column-gap: var(--gap-fib-3);
1579
+ column-gap: var(--vd-gap-fib-3);
1585
1580
  }
1586
1581
 
1587
1582
  .vd-col-gap-fib-5 {
1588
- column-gap: var(--gap-fib-5);
1583
+ column-gap: var(--vd-gap-fib-5);
1589
1584
  }
1590
1585
 
1591
1586
  .vd-col-gap-fib-8 {
1592
- column-gap: var(--gap-fib-8);
1587
+ column-gap: var(--vd-gap-fib-8);
1593
1588
  }
1594
1589
 
1595
1590
  .vd-col-gap-fib-13 {
1596
- column-gap: var(--gap-fib-13);
1591
+ column-gap: var(--vd-gap-fib-13);
1597
1592
  }
1598
1593
 
1599
1594
  .vd-col-gap-fib-21 {
1600
- column-gap: var(--gap-fib-21);
1595
+ column-gap: var(--vd-gap-fib-21);
1601
1596
  }
1602
1597
 
1603
1598
  /* ===================================================
@@ -1616,7 +1611,7 @@
1616
1611
  .vd-grid-fibonacci>.vd-row,
1617
1612
  .grid-fibonacci>.vd-row {
1618
1613
  display: grid;
1619
- gap: var(--grid-gutter);
1614
+ gap: var(--vd-grid-gutter);
1620
1615
  margin-left: 0;
1621
1616
  margin-right: 0;
1622
1617
  }