@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/tabs.css CHANGED
@@ -5,32 +5,32 @@
5
5
 
6
6
  :root {
7
7
  /* Tab Sizing (Fibonacci pairs: x/y ratio ~ phi) */
8
- --tab-padding-x: 1.3125rem; /* 21px - fib */
9
- --tab-padding-y: 0.8125rem; /* 13px - fib */
10
- --tab-padding-x-sm: 0.8125rem; /* 13px - fib */
11
- --tab-padding-y-sm: 0.5rem; /* 8px - fib */
12
- --tab-padding-x-lg: 2.125rem; /* 34px - fib */
13
- --tab-padding-y-lg: 1.3125rem; /* 21px - fib */
14
- --tab-gap: 0;
15
- --tab-border-width: 2px; /* fib(2) */
8
+ --vd-tab-padding-x: 1.3125rem; /* 21px - fib */
9
+ --vd-tab-padding-y: 0.8125rem; /* 13px - fib */
10
+ --vd-tab-padding-x-sm: 0.8125rem; /* 13px - fib */
11
+ --vd-tab-padding-y-sm: 0.5rem; /* 8px - fib */
12
+ --vd-tab-padding-x-lg: 2.125rem; /* 34px - fib */
13
+ --vd-tab-padding-y-lg: 1.3125rem; /* 21px - fib */
14
+ --vd-tab-gap: 0;
15
+ --vd-tab-border-width: 2px; /* fib(2) */
16
16
 
17
17
  /* Tab Colors */
18
- --tab-text: var(--text-secondary);
19
- --tab-text-hover: var(--text-primary);
20
- --tab-text-active: var(--color-primary);
21
- --tab-border: var(--border-color);
22
- --tab-border-active: var(--color-primary);
23
- --tab-bg-hover: var(--bg-secondary);
18
+ --vd-tab-text: var(--vd-text-secondary);
19
+ --vd-tab-text-hover: var(--vd-text-primary);
20
+ --vd-tab-text-active: var(--vd-color-primary);
21
+ --vd-tab-border: var(--vd-border-color);
22
+ --vd-tab-border-active: var(--vd-color-primary);
23
+ --vd-tab-bg-hover: var(--vd-bg-secondary);
24
24
  }
25
25
 
26
26
  /* Dark Theme Overrides */
27
27
  [data-theme="dark"] {
28
- --tab-bg-hover: var(--color-gray-800);
28
+ --vd-tab-bg-hover: var(--vd-color-gray-800);
29
29
  }
30
30
 
31
31
  @media (prefers-color-scheme: dark) {
32
32
  :root:not([data-theme]) {
33
- --tab-bg-hover: var(--color-gray-800);
33
+ --vd-tab-bg-hover: var(--vd-color-gray-800);
34
34
  }
35
35
  }
36
36
 
@@ -45,11 +45,11 @@
45
45
  .vd-tab-list {
46
46
  display: flex;
47
47
  flex-wrap: wrap;
48
- gap: var(--tab-gap);
48
+ gap: var(--vd-tab-gap);
49
49
  padding: 0;
50
50
  margin: 0;
51
51
  list-style: none;
52
- border-bottom: 1px solid var(--tab-border);
52
+ border-bottom: 1px solid var(--vd-tab-border);
53
53
  }
54
54
 
55
55
  /* Tab Item */
@@ -62,41 +62,41 @@
62
62
  display: inline-flex;
63
63
  align-items: center;
64
64
  gap: 0.5rem;
65
- padding: var(--tab-padding-y) var(--tab-padding-x);
66
- font-size: var(--font-size-base);
67
- font-weight: var(--font-weight-medium);
68
- color: var(--tab-text);
65
+ padding: var(--vd-tab-padding-y) var(--vd-tab-padding-x);
66
+ font-size: var(--vd-font-size-base);
67
+ font-weight: var(--vd-font-weight-medium);
68
+ color: var(--vd-tab-text);
69
69
  text-decoration: none;
70
70
  background: transparent;
71
71
  border: none;
72
- border-bottom: var(--tab-border-width) solid transparent;
72
+ border-bottom: var(--vd-tab-border-width) solid transparent;
73
73
  cursor: pointer;
74
74
  transition: color 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
75
75
  white-space: nowrap;
76
76
  }
77
77
 
78
78
  .vd-tab-link:hover {
79
- color: var(--tab-text-hover);
80
- background-color: var(--tab-bg-hover);
79
+ color: var(--vd-tab-text-hover);
80
+ background-color: var(--vd-tab-bg-hover);
81
81
  }
82
82
 
83
83
  .vd-tab-link:focus-visible {
84
- outline: 2px solid var(--color-primary);
84
+ outline: 2px solid var(--vd-color-primary);
85
85
  outline-offset: -2px;
86
86
  }
87
87
 
88
88
  /* Active Tab */
89
89
  .vd-tab-link.is-active,
90
90
  .vd-tab-item.is-active .vd-tab-link {
91
- color: var(--tab-text-active);
92
- border-bottom-color: var(--tab-border-active);
91
+ color: var(--vd-tab-text-active);
92
+ border-bottom-color: var(--vd-tab-border-active);
93
93
  }
94
94
 
95
95
  /* Disabled Tab */
96
96
  .vd-tab-link.disabled,
97
97
  .vd-tab-link:disabled,
98
98
  .vd-tab-item.disabled .vd-tab-link {
99
- color: var(--text-muted);
99
+ color: var(--vd-text-muted);
100
100
  cursor: not-allowed;
101
101
  pointer-events: none;
102
102
  }
@@ -127,31 +127,31 @@
127
127
 
128
128
  /* Tab Variants - Boxed */
129
129
  .vd-tabs-boxed .vd-tab-list {
130
- background-color: var(--bg-secondary);
130
+ background-color: var(--vd-bg-secondary);
131
131
  padding: 0.25rem;
132
- border-radius: var(--btn-border-radius);
132
+ border-radius: var(--vd-btn-border-radius);
133
133
  border-bottom: none;
134
134
  gap: 0.25rem;
135
135
  }
136
136
 
137
137
  .vd-tabs-boxed .vd-tab-link {
138
- border-radius: var(--btn-border-radius);
138
+ border-radius: var(--vd-btn-border-radius);
139
139
  border-bottom: none;
140
140
  }
141
141
 
142
142
  .vd-tabs-boxed .vd-tab-link:hover {
143
- background-color: var(--color-gray-200);
143
+ background-color: var(--vd-color-gray-200);
144
144
  }
145
145
 
146
146
  .vd-tabs-boxed .vd-tab-link.is-active,
147
147
  .vd-tabs-boxed .vd-tab-item.is-active .vd-tab-link {
148
- background-color: var(--bg-primary);
149
- color: var(--text-primary);
150
- box-shadow: var(--shadow-sm);
148
+ background-color: var(--vd-bg-primary);
149
+ color: var(--vd-text-primary);
150
+ box-shadow: var(--vd-shadow-sm);
151
151
  }
152
152
 
153
153
  [data-theme="dark"] .vd-tabs-boxed .vd-tab-link:hover {
154
- background-color: var(--color-gray-700);
154
+ background-color: var(--vd-color-gray-700);
155
155
  }
156
156
 
157
157
  /* Tab Variants - Pills */
@@ -161,20 +161,20 @@
161
161
  }
162
162
 
163
163
  .vd-tabs-pills .vd-tab-link {
164
- border-radius: var(--btn-border-radius);
164
+ border-radius: var(--vd-btn-border-radius);
165
165
  border-bottom: none;
166
166
  }
167
167
 
168
168
  .vd-tabs-pills .vd-tab-link.is-active,
169
169
  .vd-tabs-pills .vd-tab-item.is-active .vd-tab-link {
170
- background-color: var(--color-primary);
171
- color: var(--color-white);
170
+ background-color: var(--vd-color-primary);
171
+ color: var(--vd-color-white);
172
172
  }
173
173
 
174
174
  /* Tab Variants - Bordered */
175
175
  .vd-tabs-bordered .vd-tab-list {
176
- border: 1px solid var(--tab-border);
177
- border-radius: var(--btn-border-radius) var(--btn-border-radius) 0 0;
176
+ border: 1px solid var(--vd-tab-border);
177
+ border-radius: var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0 0;
178
178
  border-bottom: none;
179
179
  }
180
180
 
@@ -186,22 +186,22 @@
186
186
 
187
187
  .vd-tabs-bordered .vd-tab-link.is-active,
188
188
  .vd-tabs-bordered .vd-tab-item.is-active .vd-tab-link {
189
- border-color: var(--tab-border);
190
- background-color: var(--bg-primary);
191
- border-bottom-color: var(--bg-primary);
192
- border-radius: var(--btn-border-radius) var(--btn-border-radius) 0 0;
189
+ border-color: var(--vd-tab-border);
190
+ background-color: var(--vd-bg-primary);
191
+ border-bottom-color: var(--vd-bg-primary);
192
+ border-radius: var(--vd-btn-border-radius) var(--vd-btn-border-radius) 0 0;
193
193
  }
194
194
 
195
195
  .vd-tabs-bordered .vd-tab-content {
196
- border: 1px solid var(--tab-border);
196
+ border: 1px solid var(--vd-tab-border);
197
197
  border-top: none;
198
- border-radius: 0 0 var(--btn-border-radius) var(--btn-border-radius);
198
+ border-radius: 0 0 var(--vd-btn-border-radius) var(--vd-btn-border-radius);
199
199
  padding: 1rem;
200
200
  }
201
201
 
202
202
  /* Tab Variants - Underline Only */
203
203
  .vd-tabs-underline .vd-tab-list {
204
- border-bottom: 2px solid var(--tab-border);
204
+ border-bottom: 2px solid var(--vd-tab-border);
205
205
  }
206
206
 
207
207
  .vd-tabs-underline .vd-tab-link {
@@ -210,13 +210,13 @@
210
210
 
211
211
  /* Tab Sizes */
212
212
  .vd-tabs-sm .vd-tab-link {
213
- padding: var(--tab-padding-y-sm) var(--tab-padding-x-sm);
214
- font-size: var(--font-size-sm);
213
+ padding: var(--vd-tab-padding-y-sm) var(--vd-tab-padding-x-sm);
214
+ font-size: var(--vd-font-size-sm);
215
215
  }
216
216
 
217
217
  .vd-tabs-lg .vd-tab-link {
218
- padding: var(--tab-padding-y-lg) var(--tab-padding-x-lg);
219
- font-size: var(--font-size-lg);
218
+ padding: var(--vd-tab-padding-y-lg) var(--vd-tab-padding-x-lg);
219
+ font-size: var(--vd-font-size-lg);
220
220
  }
221
221
 
222
222
  /* Full Width Tabs */
@@ -251,7 +251,7 @@
251
251
  .vd-tabs-vertical .vd-tab-list {
252
252
  flex-direction: column;
253
253
  border-bottom: none;
254
- border-right: 1px solid var(--tab-border);
254
+ border-right: 1px solid var(--vd-tab-border);
255
255
  width: auto;
256
256
  flex-shrink: 0;
257
257
  }
@@ -265,14 +265,14 @@
265
265
  box-sizing: border-box;
266
266
  width: 100%;
267
267
  border-bottom: none;
268
- border-right: var(--tab-border-width) solid transparent;
268
+ border-right: var(--vd-tab-border-width) solid transparent;
269
269
  justify-content: flex-start;
270
270
  }
271
271
 
272
272
  .vd-tabs-vertical .vd-tab-link.is-active,
273
273
  .vd-tabs-vertical .vd-tab-item.is-active .vd-tab-link {
274
274
  border-bottom-color: transparent;
275
- border-right-color: var(--tab-border-active);
275
+ border-right-color: var(--vd-tab-border-active);
276
276
  }
277
277
 
278
278
  .vd-tabs-vertical .vd-tab-content {
@@ -297,15 +297,15 @@
297
297
  height: 1.25rem;
298
298
  padding: 0 0.375rem;
299
299
  font-size: 0.75rem;
300
- font-weight: var(--font-weight-semibold);
300
+ font-weight: var(--vd-font-weight-semibold);
301
301
  line-height: 1;
302
- background-color: var(--color-gray-200);
302
+ background-color: var(--vd-color-gray-200);
303
303
  border-radius: 9999px;
304
304
  }
305
305
 
306
306
  .vd-tab-link.is-active .vd-tab-badge {
307
- background-color: var(--color-primary-alpha-20);
308
- color: var(--color-primary);
307
+ background-color: var(--vd-color-primary-alpha-20);
308
+ color: var(--vd-color-primary);
309
309
  }
310
310
 
311
311
  /* Scrollable Tabs (for many tabs) */