@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/components/footer.css CHANGED
@@ -5,60 +5,60 @@
5
5
 
6
6
  :root {
7
7
  /* Footer Colors */
8
- --footer-bg: var(--bg-secondary);
9
- --footer-bg-dark: var(--bg-dark);
10
- --footer-text-color: var(--text-primary);
11
- --footer-text-color-dark: var(--text-inverse);
12
- --footer-link-color: var(--text-secondary);
13
- --footer-link-hover-color: var(--color-primary);
14
- --footer-border-color: var(--border-color);
15
- --footer-heading-color: var(--text-primary);
8
+ --vd-footer-bg: var(--vd-bg-secondary);
9
+ --vd-footer-bg-dark: var(--vd-bg-dark);
10
+ --vd-footer-text-color: var(--vd-text-primary);
11
+ --vd-footer-text-color-dark: var(--vd-text-inverse);
12
+ --vd-footer-link-color: var(--vd-text-secondary);
13
+ --vd-footer-link-hover-color: var(--vd-color-primary);
14
+ --vd-footer-border-color: var(--vd-border-color);
15
+ --vd-footer-heading-color: var(--vd-text-primary);
16
16
 
17
17
  /* Footer Spacing (Fibonacci) */
18
- --footer-padding-y: 3.4375rem; /* 55px - fib */
19
- --footer-padding-x: 1.3125rem; /* 21px - fib */
20
- --footer-padding-y-sm: 2.125rem; /* 34px - fib */
21
- --footer-padding-y-lg: 5.5625rem; /* 89px - fib */
22
- --footer-section-spacing: 2.125rem; /* 34px - fib */
18
+ --vd-footer-padding-y: 3.4375rem; /* 55px - fib */
19
+ --vd-footer-padding-x: 1.3125rem; /* 21px - fib */
20
+ --vd-footer-padding-y-sm: 2.125rem; /* 34px - fib */
21
+ --vd-footer-padding-y-lg: 5.5625rem; /* 89px - fib */
22
+ --vd-footer-section-spacing: 2.125rem; /* 34px - fib */
23
23
  }
24
24
 
25
25
  /* Dark Theme Overrides */
26
26
  [data-theme="dark"] {
27
- --footer-bg: var(--bg-secondary);
28
- --footer-text-color: var(--text-primary);
29
- --footer-link-color: var(--text-secondary);
30
- --footer-heading-color: var(--text-primary);
27
+ --vd-footer-bg: var(--vd-bg-secondary);
28
+ --vd-footer-text-color: var(--vd-text-primary);
29
+ --vd-footer-link-color: var(--vd-text-secondary);
30
+ --vd-footer-heading-color: var(--vd-text-primary);
31
31
  }
32
32
 
33
33
  @media (prefers-color-scheme: dark) {
34
34
  :root:not([data-theme]) {
35
- --footer-bg: var(--bg-secondary);
36
- --footer-text-color: var(--text-primary);
37
- --footer-link-color: var(--text-secondary);
38
- --footer-heading-color: var(--text-primary);
35
+ --vd-footer-bg: var(--vd-bg-secondary);
36
+ --vd-footer-text-color: var(--vd-text-primary);
37
+ --vd-footer-link-color: var(--vd-text-secondary);
38
+ --vd-footer-heading-color: var(--vd-text-primary);
39
39
  }
40
40
  }
41
41
 
42
42
  /* Base Footer */
43
43
  .vd-footer {
44
- padding: var(--footer-padding-y) var(--footer-padding-x);
45
- background-color: var(--footer-bg);
46
- color: var(--footer-text-color);
47
- border-top: 1px solid var(--footer-border-color);
44
+ padding: var(--vd-footer-padding-y) var(--vd-footer-padding-x);
45
+ background-color: var(--vd-footer-bg);
46
+ color: var(--vd-footer-text-color);
47
+ border-top: 1px solid var(--vd-footer-border-color);
48
48
  }
49
49
 
50
50
  /* Footer Container */
51
51
  .vd-footer-container {
52
- max-width: var(--container-max-width);
52
+ max-width: var(--vd-container-max-width);
53
53
  margin-left: auto;
54
54
  margin-right: auto;
55
- padding-left: var(--container-padding);
56
- padding-right: var(--container-padding);
55
+ padding-left: var(--vd-container-padding);
56
+ padding-right: var(--vd-container-padding);
57
57
  }
58
58
 
59
59
  /* Footer Sections */
60
60
  .vd-footer-section {
61
- margin-bottom: var(--footer-section-spacing);
61
+ margin-bottom: var(--vd-footer-section-spacing);
62
62
  }
63
63
 
64
64
  .vd-footer-section:last-child {
@@ -67,9 +67,9 @@
67
67
 
68
68
  /* Footer Headings */
69
69
  .vd-footer-heading {
70
- font-size: var(--font-size-lg);
71
- font-weight: var(--font-weight-semibold);
72
- color: var(--footer-heading-color);
70
+ font-size: var(--vd-font-size-lg);
71
+ font-weight: var(--vd-font-weight-semibold);
72
+ color: var(--vd-footer-heading-color);
73
73
  margin-bottom: 1rem;
74
74
  margin-top: 0;
75
75
  }
@@ -77,19 +77,19 @@
77
77
  /* Footer Links */
78
78
  .vd-footer-link {
79
79
  display: inline-block;
80
- color: var(--footer-link-color);
80
+ color: var(--vd-footer-link-color);
81
81
  text-decoration: none;
82
82
  transition: color 0.2s ease;
83
83
  margin-bottom: 0.5rem;
84
84
  }
85
85
 
86
86
  .vd-footer-link:hover {
87
- color: var(--footer-link-hover-color);
87
+ color: var(--vd-footer-link-hover-color);
88
88
  text-decoration: underline;
89
89
  }
90
90
 
91
91
  .vd-footer-link:focus {
92
- outline: 2px solid var(--color-primary);
92
+ outline: 2px solid var(--vd-color-primary);
93
93
  outline-offset: 2px;
94
94
  border-radius: 0.25rem;
95
95
  }
@@ -113,10 +113,10 @@
113
113
  .vd-footer-copyright {
114
114
  padding-top: 2rem;
115
115
  margin-top: 2rem;
116
- border-top: 1px solid var(--footer-border-color);
116
+ border-top: 1px solid var(--vd-footer-border-color);
117
117
  text-align: center;
118
- font-size: var(--font-size-sm);
119
- color: var(--text-muted);
118
+ font-size: var(--vd-font-size-sm);
119
+ color: var(--vd-text-muted);
120
120
  }
121
121
 
122
122
  .vd-footer-copyright-left {
@@ -132,7 +132,7 @@
132
132
  .vd-footer-3col,
133
133
  .vd-footer-4col {
134
134
  display: grid;
135
- gap: var(--footer-section-spacing);
135
+ gap: var(--vd-footer-section-spacing);
136
136
  }
137
137
 
138
138
  .vd-footer-2col {
@@ -163,13 +163,13 @@
163
163
 
164
164
  /* Footer Variants - Dark */
165
165
  .vd-footer-dark {
166
- background-color: var(--footer-bg-dark);
167
- color: var(--footer-text-color-dark);
166
+ background-color: var(--vd-footer-bg-dark);
167
+ color: var(--vd-footer-text-color-dark);
168
168
  border-top-color: rgba(255, 255, 255, 0.1);
169
169
  }
170
170
 
171
171
  .vd-footer-dark .vd-footer-heading {
172
- color: var(--footer-text-color-dark);
172
+ color: var(--vd-footer-text-color-dark);
173
173
  }
174
174
 
175
175
  .vd-footer-dark .vd-footer-link {
@@ -177,7 +177,7 @@
177
177
  }
178
178
 
179
179
  .vd-footer-dark .vd-footer-link:hover {
180
- color: var(--color-primary-light);
180
+ color: var(--vd-color-primary-light);
181
181
  }
182
182
 
183
183
  .vd-footer-dark .vd-footer-copyright {
@@ -187,16 +187,16 @@
187
187
 
188
188
  /* Footer Sizes */
189
189
  .vd-footer-sm {
190
- padding: var(--footer-padding-y-sm) var(--footer-padding-x);
190
+ padding: var(--vd-footer-padding-y-sm) var(--vd-footer-padding-x);
191
191
  }
192
192
 
193
193
  .vd-footer-lg {
194
- padding: var(--footer-padding-y-lg) var(--footer-padding-x);
194
+ padding: var(--vd-footer-padding-y-lg) var(--vd-footer-padding-x);
195
195
  }
196
196
 
197
197
  /* Footer with Container */
198
198
  .vd-footer .container {
199
- max-width: var(--container-max-width);
199
+ max-width: var(--vd-container-max-width);
200
200
  }
201
201
 
202
202
  /* Footer Brand/Logo Area */
@@ -210,15 +210,15 @@
210
210
  }
211
211
 
212
212
  .vd-footer-brand-text {
213
- font-size: var(--font-size-xl);
214
- font-weight: var(--font-weight-bold);
215
- color: var(--footer-heading-color);
213
+ font-size: var(--vd-font-size-xl);
214
+ font-weight: var(--vd-font-weight-bold);
215
+ color: var(--vd-footer-heading-color);
216
216
  text-decoration: none;
217
217
  }
218
218
 
219
219
  .vd-footer-brand-text:hover {
220
220
  text-decoration: none;
221
- color: var(--footer-link-hover-color);
221
+ color: var(--vd-footer-link-hover-color);
222
222
  }
223
223
 
224
224
  /* Footer Social Links */
@@ -236,14 +236,14 @@
236
236
  height: 2.5rem;
237
237
  border-radius: 50%;
238
238
  background-color: rgba(0, 0, 0, 0.05);
239
- color: var(--footer-link-color);
239
+ color: var(--vd-footer-link-color);
240
240
  text-decoration: none;
241
241
  transition: all 0.2s ease;
242
242
  }
243
243
 
244
244
  .vd-footer-social-link:hover {
245
- background-color: var(--color-primary);
246
- color: var(--color-white);
245
+ background-color: var(--vd-color-primary);
246
+ color: var(--vd-color-white);
247
247
  transform: translateY(-2px);
248
248
  }
249
249
 
@@ -253,8 +253,8 @@
253
253
  }
254
254
 
255
255
  .vd-footer-dark .vd-footer-social-link:hover {
256
- background-color: var(--color-primary);
257
- color: var(--color-white);
256
+ background-color: var(--vd-color-primary);
257
+ color: var(--vd-color-white);
258
258
  }
259
259
 
260
260
  /* Responsive Footer */
@@ -279,13 +279,13 @@
279
279
  gap: 0.75rem;
280
280
  padding: 1.5rem 0;
281
281
  margin-top: 1.5rem;
282
- border-top: 1px solid var(--footer-border-color);
282
+ border-top: 1px solid var(--vd-footer-border-color);
283
283
  }
284
284
 
285
285
  .vd-footer-made-with-text {
286
- font-size: var(--font-size-sm);
287
- color: var(--text-muted);
288
- font-weight: var(--font-weight-medium);
286
+ font-size: var(--vd-font-size-sm);
287
+ color: var(--vd-text-muted);
288
+ font-weight: var(--vd-font-weight-medium);
289
289
  letter-spacing: 0.02em;
290
290
  }
291
291
 
@@ -307,7 +307,7 @@
307
307
  }
308
308
 
309
309
  .vd-footer-kilo-link:focus {
310
- outline: 2px solid var(--color-primary);
310
+ outline: 2px solid var(--vd-color-primary);
311
311
  outline-offset: 2px;
312
312
  }
313
313
 
@@ -322,7 +322,7 @@
322
322
  .vd-footer-separator {
323
323
  width: 1px;
324
324
  height: 1.5rem;
325
- background-color: var(--footer-border-color);
325
+ background-color: var(--vd-footer-border-color);
326
326
  margin: 0 0.5rem;
327
327
  }
328
328
 
@@ -341,7 +341,7 @@
341
341
  }
342
342
 
343
343
  .vd-footer-bmac-link:focus {
344
- outline: 2px solid var(--color-primary);
344
+ outline: 2px solid var(--vd-color-primary);
345
345
  outline-offset: 2px;
346
346
  border-radius: 0.25rem;
347
347
  }