snice 1.14.3 → 2.1.0

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 (185) hide show
  1. package/bin/templates/base/tsconfig.json +5 -4
  2. package/components/accordion/demo.html +403 -0
  3. package/components/accordion/snice-accordion-item.css +85 -0
  4. package/components/accordion/snice-accordion-item.ts +226 -0
  5. package/components/accordion/snice-accordion.css +31 -0
  6. package/components/accordion/snice-accordion.ts +182 -0
  7. package/components/accordion/snice-accordion.types.ts +32 -0
  8. package/components/alert/demo.html +445 -0
  9. package/components/alert/snice-alert.css +195 -0
  10. package/components/alert/snice-alert.ts +141 -0
  11. package/components/alert/snice-alert.types.ts +12 -0
  12. package/components/avatar/demo.html +598 -0
  13. package/components/avatar/snice-avatar.css +131 -0
  14. package/components/avatar/snice-avatar.ts +136 -0
  15. package/components/avatar/snice-avatar.types.ts +13 -0
  16. package/components/badge/demo.html +523 -0
  17. package/components/badge/snice-badge.css +161 -0
  18. package/components/badge/snice-badge.ts +117 -0
  19. package/components/badge/snice-badge.types.ts +16 -0
  20. package/components/breadcrumbs/demo.html +404 -0
  21. package/components/breadcrumbs/snice-breadcrumbs.css +133 -0
  22. package/components/breadcrumbs/snice-breadcrumbs.ts +191 -0
  23. package/components/breadcrumbs/snice-breadcrumbs.types.ts +26 -0
  24. package/components/breadcrumbs/snice-crumb.ts +26 -0
  25. package/components/button/demo.html +42 -0
  26. package/components/button/snice-button.css +230 -0
  27. package/components/button/snice-button.ts +169 -0
  28. package/components/button/snice-button.types.ts +25 -0
  29. package/components/card/demo.html +525 -0
  30. package/components/card/snice-card.css +140 -0
  31. package/components/card/snice-card.ts +102 -0
  32. package/components/card/snice-card.types.ts +10 -0
  33. package/components/checkbox/demo.html +253 -0
  34. package/components/checkbox/snice-checkbox.css +164 -0
  35. package/components/checkbox/snice-checkbox.ts +223 -0
  36. package/components/checkbox/snice-checkbox.types.ts +22 -0
  37. package/components/chip/demo.html +383 -0
  38. package/components/chip/snice-chip.css +195 -0
  39. package/components/chip/snice-chip.ts +139 -0
  40. package/components/chip/snice-chip.types.ts +15 -0
  41. package/components/date-picker/README.md +233 -0
  42. package/components/date-picker/demo.html +191 -0
  43. package/components/date-picker/snice-date-picker.css +330 -0
  44. package/components/date-picker/snice-date-picker.ts +777 -0
  45. package/components/date-picker/snice-date-picker.types.ts +83 -0
  46. package/components/divider/demo.html +233 -0
  47. package/components/divider/snice-divider.css +155 -0
  48. package/components/divider/snice-divider.ts +69 -0
  49. package/components/divider/snice-divider.types.ts +15 -0
  50. package/components/drawer/demo.html +328 -0
  51. package/components/drawer/snice-drawer.css +476 -0
  52. package/components/drawer/snice-drawer.ts +287 -0
  53. package/components/drawer/snice-drawer.types.ts +17 -0
  54. package/components/global.d.ts +14 -0
  55. package/components/input/demo.html +303 -0
  56. package/components/input/snice-input.css +257 -0
  57. package/components/input/snice-input.ts +442 -0
  58. package/components/input/snice-input.types.ts +59 -0
  59. package/components/input/test.html +77 -0
  60. package/components/layout/README.md +260 -0
  61. package/components/layout/demo.html +538 -0
  62. package/components/layout/snice-layout-blog.css +129 -0
  63. package/components/layout/snice-layout-blog.ts +48 -0
  64. package/components/layout/snice-layout-card.css +104 -0
  65. package/components/layout/snice-layout-card.ts +35 -0
  66. package/components/layout/snice-layout-centered.css +51 -0
  67. package/components/layout/snice-layout-centered.ts +22 -0
  68. package/components/layout/snice-layout-dashboard.css +98 -0
  69. package/components/layout/snice-layout-dashboard.ts +45 -0
  70. package/components/layout/snice-layout-fullscreen.css +72 -0
  71. package/components/layout/snice-layout-fullscreen.ts +34 -0
  72. package/components/layout/snice-layout-landing.css +92 -0
  73. package/components/layout/snice-layout-landing.ts +47 -0
  74. package/components/layout/snice-layout-minimal.css +16 -0
  75. package/components/layout/snice-layout-minimal.ts +19 -0
  76. package/components/layout/snice-layout-sidebar.css +117 -0
  77. package/components/layout/snice-layout-sidebar.ts +48 -0
  78. package/components/layout/snice-layout-split.css +103 -0
  79. package/components/layout/snice-layout-split.ts +29 -0
  80. package/components/layout/snice-layout.css +72 -0
  81. package/components/layout/snice-layout.ts +35 -0
  82. package/components/layout/snice-layout.types.ts +5 -0
  83. package/components/login/demo-auth-controller.ts +185 -0
  84. package/components/login/demo.html +470 -0
  85. package/components/login/snice-login.css +204 -0
  86. package/components/login/snice-login.ts +337 -0
  87. package/components/login/snice-login.types.ts +34 -0
  88. package/components/modal/demo.html +291 -0
  89. package/components/modal/snice-modal.css +203 -0
  90. package/components/modal/snice-modal.ts +233 -0
  91. package/components/modal/snice-modal.types.ts +21 -0
  92. package/components/pagination/demo.html +395 -0
  93. package/components/pagination/snice-pagination.ts +333 -0
  94. package/components/pagination/snice-pagination.types.ts +21 -0
  95. package/components/progress/demo.html +510 -0
  96. package/components/progress/snice-progress.css +267 -0
  97. package/components/progress/snice-progress.ts +247 -0
  98. package/components/progress/snice-progress.types.ts +19 -0
  99. package/components/radio/demo.html +287 -0
  100. package/components/radio/snice-radio.css +171 -0
  101. package/components/radio/snice-radio.ts +218 -0
  102. package/components/radio/snice-radio.types.ts +21 -0
  103. package/components/select/demo.html +511 -0
  104. package/components/select/snice-option.ts +52 -0
  105. package/components/select/snice-option.types.ts +14 -0
  106. package/components/select/snice-select.css +392 -0
  107. package/components/select/snice-select.ts +796 -0
  108. package/components/select/snice-select.types.ts +55 -0
  109. package/components/skeleton/demo.html +514 -0
  110. package/components/skeleton/snice-skeleton.css +109 -0
  111. package/components/skeleton/snice-skeleton.ts +126 -0
  112. package/components/skeleton/snice-skeleton.types.ts +11 -0
  113. package/components/switch/demo.html +284 -0
  114. package/components/switch/snice-switch.css +221 -0
  115. package/components/switch/snice-switch.ts +229 -0
  116. package/components/switch/snice-switch.types.ts +23 -0
  117. package/components/symbols.ts +23 -0
  118. package/components/table/demo-table-controller.ts +100 -0
  119. package/components/table/demo.html +480 -0
  120. package/components/table/snice-cell-boolean.ts +112 -0
  121. package/components/table/snice-cell-date.ts +210 -0
  122. package/components/table/snice-cell-duration.ts +91 -0
  123. package/components/table/snice-cell-filesize.ts +90 -0
  124. package/components/table/snice-cell-number.ts +165 -0
  125. package/components/table/snice-cell-progress.ts +83 -0
  126. package/components/table/snice-cell-rating.ts +82 -0
  127. package/components/table/snice-cell-sparkline.ts +253 -0
  128. package/components/table/snice-cell-text.ts +125 -0
  129. package/components/table/snice-cell.css +296 -0
  130. package/components/table/snice-cell.ts +473 -0
  131. package/components/table/snice-column.ts +353 -0
  132. package/components/table/snice-header.css +243 -0
  133. package/components/table/snice-header.ts +261 -0
  134. package/components/table/snice-progress.ts +66 -0
  135. package/components/table/snice-rating.ts +45 -0
  136. package/components/table/snice-row.css +255 -0
  137. package/components/table/snice-row.ts +331 -0
  138. package/components/table/snice-table.css +241 -0
  139. package/components/table/snice-table.ts +737 -0
  140. package/components/table/snice-table.types.ts +158 -0
  141. package/components/tabs/demo.html +487 -0
  142. package/components/tabs/snice-tab-panel.css +264 -0
  143. package/components/tabs/snice-tab-panel.ts +47 -0
  144. package/components/tabs/snice-tab.css +96 -0
  145. package/components/tabs/snice-tab.ts +65 -0
  146. package/components/tabs/snice-tabs.css +189 -0
  147. package/components/tabs/snice-tabs.ts +332 -0
  148. package/components/tabs/snice-tabs.types.ts +28 -0
  149. package/components/theme/theme.css +234 -0
  150. package/components/toast/demo.html +329 -0
  151. package/components/toast/snice-toast-container.ts +256 -0
  152. package/components/toast/snice-toast.css +213 -0
  153. package/components/toast/snice-toast.ts +276 -0
  154. package/components/toast/snice-toast.types.ts +35 -0
  155. package/components/tooltip/demo.html +350 -0
  156. package/components/tooltip/snice-tooltip-portal.css +79 -0
  157. package/components/tooltip/snice-tooltip.css +117 -0
  158. package/components/tooltip/snice-tooltip.ts +612 -0
  159. package/components/tooltip/snice-tooltip.types.ts +32 -0
  160. package/components/transitions.ts +94 -0
  161. package/components/tsconfig.json +18 -0
  162. package/dist/index.cjs +441 -329
  163. package/dist/index.cjs.map +1 -1
  164. package/dist/index.cjs.min.map +1 -1
  165. package/dist/index.esm.js +441 -329
  166. package/dist/index.esm.js.map +1 -1
  167. package/dist/index.esm.min.js +3 -3
  168. package/dist/index.esm.min.js.map +1 -1
  169. package/dist/index.iife.js +441 -329
  170. package/dist/index.iife.js.map +1 -1
  171. package/dist/index.iife.min.js +3 -3
  172. package/dist/index.iife.min.js.map +1 -1
  173. package/dist/symbols.esm.js +1 -1
  174. package/dist/transitions.esm.js +1 -1
  175. package/dist/types/controller.d.ts +1 -1
  176. package/dist/types/element.d.ts +10 -10
  177. package/dist/types/events.d.ts +2 -2
  178. package/dist/types/index.d.ts +1 -1
  179. package/dist/types/observe.d.ts +1 -1
  180. package/dist/types/request-response.d.ts +2 -3
  181. package/dist/types/router.d.ts +1 -1
  182. package/package.json +9 -3
  183. package/dist/index.cjs.min +0 -15
  184. package/dist/symbols.cjs +0 -103
  185. package/dist/transitions.cjs +0 -219
package/components/drawer/demo.html ADDED
@@ -0,0 +1,328 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>Snice Drawer Demo</title>
7
+ <script type="module" src="./snice-drawer.ts"></script>
8
+ <style>
9
+ body {
10
+ font-family: system-ui, -apple-system, sans-serif;
11
+ padding: 40px;
12
+ margin: 0;
13
+ background: #f3f4f6;
14
+ }
15
+
16
+ main {
17
+ max-width: 1200px;
18
+ margin: 0 auto;
19
+ background: white;
20
+ padding: 40px;
21
+ border-radius: 12px;
22
+ box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
23
+ transition: margin 0.3s cubic-bezier(0.4, 0, 0.2, 1);
24
+ }
25
+
26
+ h1 {
27
+ margin-top: 0;
28
+ color: #111827;
29
+ }
30
+
31
+ .demo-section {
32
+ margin-bottom: 48px;
33
+ }
34
+
35
+ .demo-section h2 {
36
+ color: #374151;
37
+ margin-bottom: 16px;
38
+ }
39
+
40
+ .button-group {
41
+ display: flex;
42
+ gap: 12px;
43
+ flex-wrap: wrap;
44
+ margin-bottom: 24px;
45
+ }
46
+
47
+ button {
48
+ padding: 10px 20px;
49
+ border: none;
50
+ border-radius: 8px;
51
+ background: #3b82f6;
52
+ color: white;
53
+ font-size: 14px;
54
+ font-weight: 500;
55
+ cursor: pointer;
56
+ transition: all 0.2s;
57
+ }
58
+
59
+ button:hover {
60
+ background: #2563eb;
61
+ transform: translateY(-1px);
62
+ box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3);
63
+ }
64
+
65
+ button:active {
66
+ transform: translateY(0);
67
+ }
68
+
69
+ button.secondary {
70
+ background: #6b7280;
71
+ }
72
+
73
+ button.secondary:hover {
74
+ background: #4b5563;
75
+ }
76
+
77
+ .drawer-content {
78
+ padding: 20px;
79
+ }
80
+
81
+ .form-group {
82
+ margin-bottom: 20px;
83
+ }
84
+
85
+ label {
86
+ display: block;
87
+ margin-bottom: 8px;
88
+ font-weight: 500;
89
+ color: #374151;
90
+ }
91
+
92
+ input, textarea, select {
93
+ width: 100%;
94
+ padding: 10px;
95
+ border: 1px solid #d1d5db;
96
+ border-radius: 6px;
97
+ font-size: 14px;
98
+ transition: border-color 0.2s;
99
+ }
100
+
101
+ input:focus, textarea:focus, select:focus {
102
+ outline: none;
103
+ border-color: #3b82f6;
104
+ box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
105
+ }
106
+
107
+ .footer-buttons {
108
+ display: flex;
109
+ gap: 12px;
110
+ justify-content: flex-end;
111
+ }
112
+ </style>
113
+ </head>
114
+ <body>
115
+ <main>
116
+ <h1>Snice Drawer Component Demo</h1>
117
+
118
+ <!-- Position Demo -->
119
+ <div class="demo-section">
120
+ <h2>Drawer Positions</h2>
121
+ <div class="button-group">
122
+ <button onclick="document.getElementById('drawer-left').show()">Open Left Drawer</button>
123
+ <button onclick="document.getElementById('drawer-right').show()">Open Right Drawer</button>
124
+ <button onclick="document.getElementById('drawer-top').show()">Open Top Drawer</button>
125
+ <button onclick="document.getElementById('drawer-bottom').show()">Open Bottom Drawer</button>
126
+ </div>
127
+ </div>
128
+
129
+ <!-- Size Demo -->
130
+ <div class="demo-section">
131
+ <h2>Drawer Sizes</h2>
132
+ <div class="button-group">
133
+ <button onclick="document.getElementById('drawer-small').show()">Small (240px)</button>
134
+ <button onclick="document.getElementById('drawer-medium').show()">Medium (320px)</button>
135
+ <button onclick="document.getElementById('drawer-large').show()">Large (480px)</button>
136
+ <button onclick="document.getElementById('drawer-xl').show()">XL (640px)</button>
137
+ <button onclick="document.getElementById('drawer-xxl').show()">XXL (800px)</button>
138
+ <button onclick="document.getElementById('drawer-xxxl').show()">XXXL (960px)</button>
139
+ <button onclick="document.getElementById('drawer-full').show()">Full (100%)</button>
140
+ </div>
141
+ </div>
142
+
143
+ <!-- Feature Demo -->
144
+ <div class="demo-section">
145
+ <h2>Drawer Features</h2>
146
+ <div class="button-group">
147
+ <button onclick="document.getElementById('drawer-no-backdrop').show()">No Backdrop</button>
148
+ <button onclick="document.getElementById('drawer-no-dismiss').show()">No Dismiss</button>
149
+ <button onclick="document.getElementById('drawer-persistent').show()">Persistent</button>
150
+ <button onclick="document.getElementById('drawer-push').show()">Push Content</button>
151
+ </div>
152
+ </div>
153
+
154
+ <!-- Form Example -->
155
+ <div class="demo-section">
156
+ <h2>Form Example</h2>
157
+ <button onclick="document.getElementById('drawer-form').show()">Open Form Drawer</button>
158
+ </div>
159
+ </main>
160
+
161
+ <!-- Left Drawer -->
162
+ <snice-drawer id="drawer-left" position="left">
163
+ <span slot="title">Left Drawer</span>
164
+ <div class="drawer-content">
165
+ <p>This is a left-positioned drawer. It slides in from the left side of the screen.</p>
166
+ <p>You can close it by:</p>
167
+ <ul>
168
+ <li>Clicking the X button</li>
169
+ <li>Clicking the backdrop</li>
170
+ <li>Pressing Escape key</li>
171
+ </ul>
172
+ </div>
173
+ </snice-drawer>
174
+
175
+ <!-- Right Drawer -->
176
+ <snice-drawer id="drawer-right" position="right">
177
+ <span slot="title">Right Drawer</span>
178
+ <div class="drawer-content">
179
+ <p>This drawer slides in from the right side.</p>
180
+ </div>
181
+ </snice-drawer>
182
+
183
+ <!-- Top Drawer -->
184
+ <snice-drawer id="drawer-top" position="top">
185
+ <span slot="title">Top Drawer</span>
186
+ <div class="drawer-content">
187
+ <p>This drawer slides down from the top.</p>
188
+ </div>
189
+ </snice-drawer>
190
+
191
+ <!-- Bottom Drawer -->
192
+ <snice-drawer id="drawer-bottom" position="bottom">
193
+ <span slot="title">Bottom Drawer</span>
194
+ <div class="drawer-content">
195
+ <p>This drawer slides up from the bottom.</p>
196
+ </div>
197
+ </snice-drawer>
198
+
199
+ <!-- Size Variants -->
200
+ <snice-drawer id="drawer-small" size="small">
201
+ <span slot="title">Small Drawer</span>
202
+ <div class="drawer-content">
203
+ <p>This is a small-sized drawer (240px wide).</p>
204
+ </div>
205
+ </snice-drawer>
206
+
207
+ <snice-drawer id="drawer-medium" size="medium">
208
+ <span slot="title">Medium Drawer</span>
209
+ <div class="drawer-content">
210
+ <p>This is a medium-sized drawer (320px wide).</p>
211
+ </div>
212
+ </snice-drawer>
213
+
214
+ <snice-drawer id="drawer-large" size="large">
215
+ <span slot="title">Large Drawer</span>
216
+ <div class="drawer-content">
217
+ <p>This is a large-sized drawer (480px wide).</p>
218
+ </div>
219
+ </snice-drawer>
220
+
221
+ <snice-drawer id="drawer-xl" size="xl">
222
+ <span slot="title">XL Drawer</span>
223
+ <div class="drawer-content">
224
+ <p>This is an extra-large drawer (640px wide).</p>
225
+ </div>
226
+ </snice-drawer>
227
+
228
+ <snice-drawer id="drawer-xxl" size="xxl">
229
+ <span slot="title">XXL Drawer</span>
230
+ <div class="drawer-content">
231
+ <p>This is a double extra-large drawer (800px wide).</p>
232
+ </div>
233
+ </snice-drawer>
234
+
235
+ <snice-drawer id="drawer-xxxl" size="xxxl">
236
+ <span slot="title">XXXL Drawer</span>
237
+ <div class="drawer-content">
238
+ <p>This is a triple extra-large drawer (960px wide).</p>
239
+ </div>
240
+ </snice-drawer>
241
+
242
+ <snice-drawer id="drawer-full" size="full">
243
+ <span slot="title">Full Width Drawer</span>
244
+ <div class="drawer-content">
245
+ <p>This drawer takes the full width/height of the viewport.</p>
246
+ </div>
247
+ </snice-drawer>
248
+
249
+ <!-- Feature Variants -->
250
+ <snice-drawer id="drawer-no-backdrop" no-backdrop>
251
+ <span slot="title">No Backdrop</span>
252
+ <div class="drawer-content">
253
+ <p>This drawer has no backdrop overlay.</p>
254
+ </div>
255
+ </snice-drawer>
256
+
257
+ <snice-drawer id="drawer-no-dismiss" no-backdrop-dismiss no-escape-dismiss>
258
+ <span slot="title">No Auto Dismiss</span>
259
+ <div class="drawer-content">
260
+ <p>This drawer cannot be dismissed by clicking outside or pressing Escape.</p>
261
+ <p>You must click the X button to close it.</p>
262
+ </div>
263
+ </snice-drawer>
264
+
265
+ <snice-drawer id="drawer-persistent" persistent>
266
+ <span slot="title">Persistent Drawer</span>
267
+ <div class="drawer-content">
268
+ <p>This drawer is persistent - it has no close button and cannot be dismissed.</p>
269
+ <button onclick="document.getElementById('drawer-persistent').hide()">Close Programmatically</button>
270
+ </div>
271
+ </snice-drawer>
272
+
273
+ <snice-drawer id="drawer-push" push-content>
274
+ <span slot="title">Push Content</span>
275
+ <div class="drawer-content">
276
+ <p>This drawer pushes the main content instead of overlaying it.</p>
277
+ <p>Notice how the main content shifts when this drawer opens.</p>
278
+ </div>
279
+ </snice-drawer>
280
+
281
+ <!-- Form Example -->
282
+ <snice-drawer id="drawer-form" size="large">
283
+ <span slot="title">User Settings</span>
284
+
285
+ <form class="drawer-content">
286
+ <div class="form-group">
287
+ <label for="name">Name</label>
288
+ <input type="text" id="name" placeholder="Enter your name">
289
+ </div>
290
+
291
+ <div class="form-group">
292
+ <label for="email">Email</label>
293
+ <input type="email" id="email" placeholder="Enter your email">
294
+ </div>
295
+
296
+ <div class="form-group">
297
+ <label for="role">Role</label>
298
+ <select id="role">
299
+ <option>Administrator</option>
300
+ <option>Editor</option>
301
+ <option>Viewer</option>
302
+ </select>
303
+ </div>
304
+
305
+ <div class="form-group">
306
+ <label for="bio">Bio</label>
307
+ <textarea id="bio" rows="4" placeholder="Tell us about yourself"></textarea>
308
+ </div>
309
+ </form>
310
+
311
+ <div slot="footer" class="footer-buttons">
312
+ <button class="secondary" onclick="document.getElementById('drawer-form').hide()">Cancel</button>
313
+ <button onclick="alert('Form submitted!'); document.getElementById('drawer-form').hide()">Save Changes</button>
314
+ </div>
315
+ </snice-drawer>
316
+
317
+ <script>
318
+ // Listen for drawer events
319
+ document.addEventListener('drawer-open', (e) => {
320
+ console.log('Drawer opened:', e.detail);
321
+ });
322
+
323
+ document.addEventListener('drawer-close', (e) => {
324
+ console.log('Drawer closed:', e.detail);
325
+ });
326
+ </script>
327
+ </body>
328
+ </html>