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/badge/demo.html ADDED
@@ -0,0 +1,523 @@
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 Badge Demo</title>
7
+ <link rel="stylesheet" href="../theme/theme.css">
8
+ <style>
9
+ body {
10
+ font-family: system-ui, -apple-system, sans-serif;
11
+ padding: 40px;
12
+ line-height: 1.6;
13
+ background: #f5f5f5;
14
+ }
15
+
16
+ .container {
17
+ max-width: 900px;
18
+ margin: 0 auto;
19
+ background: white;
20
+ padding: 40px;
21
+ border-radius: 8px;
22
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
23
+ }
24
+
25
+ h1 {
26
+ color: #333;
27
+ border-bottom: 2px solid #e0e0e0;
28
+ padding-bottom: 10px;
29
+ }
30
+
31
+ h2 {
32
+ color: #555;
33
+ margin-top: 30px;
34
+ }
35
+
36
+ .demo-section {
37
+ margin: 30px 0;
38
+ padding: 20px;
39
+ background: #fafafa;
40
+ border-radius: 4px;
41
+ }
42
+
43
+ .demo-label {
44
+ display: block;
45
+ margin-bottom: 8px;
46
+ font-weight: 500;
47
+ color: #666;
48
+ font-size: 14px;
49
+ }
50
+
51
+ .demo-item {
52
+ margin: 20px 0;
53
+ display: flex;
54
+ align-items: center;
55
+ gap: 30px;
56
+ }
57
+
58
+ .badge-target {
59
+ display: inline-flex;
60
+ align-items: center;
61
+ justify-content: center;
62
+ width: 50px;
63
+ height: 50px;
64
+ background: #3b82f6;
65
+ color: white;
66
+ border-radius: 8px;
67
+ font-size: 24px;
68
+ }
69
+
70
+ .badge-avatar {
71
+ width: 50px;
72
+ height: 50px;
73
+ border-radius: 50%;
74
+ background: #6366f1;
75
+ color: white;
76
+ display: flex;
77
+ align-items: center;
78
+ justify-content: center;
79
+ font-weight: 600;
80
+ }
81
+
82
+ .badge-button {
83
+ padding: 10px 20px;
84
+ background: #3b82f6;
85
+ color: white;
86
+ border: none;
87
+ border-radius: 6px;
88
+ font-size: 14px;
89
+ cursor: pointer;
90
+ transition: background 0.2s;
91
+ }
92
+
93
+ .badge-button:hover {
94
+ background: #2563eb;
95
+ }
96
+
97
+ .grid {
98
+ display: grid;
99
+ grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
100
+ gap: 30px;
101
+ margin: 20px 0;
102
+ }
103
+
104
+ .inline-demo {
105
+ display: flex;
106
+ align-items: center;
107
+ gap: 20px;
108
+ flex-wrap: wrap;
109
+ }
110
+
111
+ .controls {
112
+ display: flex;
113
+ gap: 10px;
114
+ margin: 20px 0;
115
+ flex-wrap: wrap;
116
+ }
117
+
118
+ button {
119
+ padding: 8px 16px;
120
+ background: #f3f4f6;
121
+ border: 1px solid #d1d5db;
122
+ border-radius: 4px;
123
+ cursor: pointer;
124
+ font-size: 14px;
125
+ transition: background 0.2s;
126
+ }
127
+
128
+ button:hover {
129
+ background: #e5e7eb;
130
+ }
131
+
132
+ input[type="number"] {
133
+ width: 80px;
134
+ padding: 8px;
135
+ border: 1px solid #d1d5db;
136
+ border-radius: 4px;
137
+ font-size: 14px;
138
+ }
139
+
140
+ code {
141
+ background: #f0f0f0;
142
+ padding: 2px 6px;
143
+ border-radius: 3px;
144
+ font-size: 0.9em;
145
+ }
146
+
147
+ .notification-icon {
148
+ width: 30px;
149
+ height: 30px;
150
+ }
151
+ </style>
152
+ </head>
153
+ <body>
154
+ <div class="container">
155
+ <h1>Snice Badge Component Demo</h1>
156
+
157
+ <div class="demo-section">
158
+ <h2>Basic Badges with Count</h2>
159
+
160
+ <div class="grid">
161
+ <div>
162
+ <span class="demo-label">Default</span>
163
+ <snice-badge count="5">
164
+ <div class="badge-target">📧</div>
165
+ </snice-badge>
166
+ </div>
167
+
168
+ <div>
169
+ <span class="demo-label">Primary</span>
170
+ <snice-badge count="12" variant="primary">
171
+ <div class="badge-target">🔔</div>
172
+ </snice-badge>
173
+ </div>
174
+
175
+ <div>
176
+ <span class="demo-label">Success</span>
177
+ <snice-badge count="3" variant="success">
178
+ <div class="badge-target">✓</div>
179
+ </snice-badge>
180
+ </div>
181
+
182
+ <div>
183
+ <span class="demo-label">Warning</span>
184
+ <snice-badge count="7" variant="warning">
185
+ <div class="badge-target">⚠</div>
186
+ </snice-badge>
187
+ </div>
188
+
189
+ <div>
190
+ <span class="demo-label">Error</span>
191
+ <snice-badge count="1" variant="error">
192
+ <div class="badge-target">!</div>
193
+ </snice-badge>
194
+ </div>
195
+
196
+ <div>
197
+ <span class="demo-label">Info</span>
198
+ <snice-badge count="99" variant="info">
199
+ <div class="badge-target">ℹ</div>
200
+ </snice-badge>
201
+ </div>
202
+ </div>
203
+ </div>
204
+
205
+ <div class="demo-section">
206
+ <h2>Badge Positions</h2>
207
+
208
+ <div class="grid">
209
+ <div>
210
+ <span class="demo-label">Top Right (Default)</span>
211
+ <snice-badge count="5" position="top-right" variant="error">
212
+ <div class="badge-avatar">JD</div>
213
+ </snice-badge>
214
+ </div>
215
+
216
+ <div>
217
+ <span class="demo-label">Top Left</span>
218
+ <snice-badge count="3" position="top-left" variant="success">
219
+ <div class="badge-avatar">AB</div>
220
+ </snice-badge>
221
+ </div>
222
+
223
+ <div>
224
+ <span class="demo-label">Bottom Right</span>
225
+ <snice-badge count="7" position="bottom-right" variant="warning">
226
+ <div class="badge-avatar">XY</div>
227
+ </snice-badge>
228
+ </div>
229
+
230
+ <div>
231
+ <span class="demo-label">Bottom Left</span>
232
+ <snice-badge count="2" position="bottom-left" variant="info">
233
+ <div class="badge-avatar">PQ</div>
234
+ </snice-badge>
235
+ </div>
236
+ </div>
237
+ </div>
238
+
239
+ <div class="demo-section">
240
+ <h2>Badge Sizes</h2>
241
+
242
+ <div class="inline-demo">
243
+ <div>
244
+ <span class="demo-label">Small</span>
245
+ <snice-badge count="5" size="small" variant="primary">
246
+ <div class="badge-target">📧</div>
247
+ </snice-badge>
248
+ </div>
249
+
250
+ <div>
251
+ <span class="demo-label">Medium (Default)</span>
252
+ <snice-badge count="10" size="medium" variant="primary">
253
+ <div class="badge-target">📧</div>
254
+ </snice-badge>
255
+ </div>
256
+
257
+ <div>
258
+ <span class="demo-label">Large</span>
259
+ <snice-badge count="15" size="large" variant="primary">
260
+ <div class="badge-target">📧</div>
261
+ </snice-badge>
262
+ </div>
263
+ </div>
264
+ </div>
265
+
266
+ <div class="demo-section">
267
+ <h2>Dot Badge</h2>
268
+
269
+ <div class="inline-demo">
270
+ <div>
271
+ <span class="demo-label">Simple Dot</span>
272
+ <snice-badge dot variant="error">
273
+ <div class="badge-target">🔔</div>
274
+ </snice-badge>
275
+ </div>
276
+
277
+ <div>
278
+ <span class="demo-label">Pulsing Dot</span>
279
+ <snice-badge dot pulse variant="success">
280
+ <div class="badge-target">💬</div>
281
+ </snice-badge>
282
+ </div>
283
+
284
+ <div>
285
+ <span class="demo-label">Different Sizes</span>
286
+ <snice-badge dot size="small" variant="warning">
287
+ <div class="badge-avatar">S</div>
288
+ </snice-badge>
289
+ <snice-badge dot size="medium" variant="warning">
290
+ <div class="badge-avatar">M</div>
291
+ </snice-badge>
292
+ <snice-badge dot size="large" variant="warning">
293
+ <div class="badge-avatar">L</div>
294
+ </snice-badge>
295
+ </div>
296
+ </div>
297
+ </div>
298
+
299
+ <div class="demo-section">
300
+ <h2>Max Count</h2>
301
+
302
+ <div class="inline-demo">
303
+ <div>
304
+ <span class="demo-label">Under Max (50)</span>
305
+ <snice-badge count="50" max="99" variant="primary">
306
+ <div class="badge-target">📧</div>
307
+ </snice-badge>
308
+ </div>
309
+
310
+ <div>
311
+ <span class="demo-label">At Max (99)</span>
312
+ <snice-badge count="99" max="99" variant="primary">
313
+ <div class="badge-target">📧</div>
314
+ </snice-badge>
315
+ </div>
316
+
317
+ <div>
318
+ <span class="demo-label">Over Max (100+)</span>
319
+ <snice-badge count="150" max="99" variant="primary">
320
+ <div class="badge-target">📧</div>
321
+ </snice-badge>
322
+ </div>
323
+
324
+ <div>
325
+ <span class="demo-label">Custom Max (999+)</span>
326
+ <snice-badge count="1234" max="999" variant="error">
327
+ <div class="badge-target">🔔</div>
328
+ </snice-badge>
329
+ </div>
330
+ </div>
331
+ </div>
332
+
333
+ <div class="demo-section">
334
+ <h2>Custom Content</h2>
335
+
336
+ <div class="inline-demo">
337
+ <div>
338
+ <span class="demo-label">Text Badge</span>
339
+ <snice-badge content="NEW" variant="success">
340
+ <button class="badge-button">Features</button>
341
+ </snice-badge>
342
+ </div>
343
+
344
+ <div>
345
+ <span class="demo-label">Short Text</span>
346
+ <snice-badge content="HOT" variant="error">
347
+ <button class="badge-button">Deals</button>
348
+ </snice-badge>
349
+ </div>
350
+
351
+ <div>
352
+ <span class="demo-label">Status</span>
353
+ <snice-badge content="PRO" variant="info">
354
+ <div class="badge-avatar">US</div>
355
+ </snice-badge>
356
+ </div>
357
+ </div>
358
+ </div>
359
+
360
+ <div class="demo-section">
361
+ <h2>Inline Badges</h2>
362
+
363
+ <div>
364
+ <p>
365
+ Notifications
366
+ <snice-badge count="5" inline variant="primary"></snice-badge>
367
+ </p>
368
+ <p>
369
+ Messages
370
+ <snice-badge count="12" inline variant="success"></snice-badge>
371
+ </p>
372
+ <p>
373
+ Alerts
374
+ <snice-badge count="3" inline variant="error"></snice-badge>
375
+ </p>
376
+ <p>
377
+ Updates Available
378
+ <snice-badge content="NEW" inline variant="info"></snice-badge>
379
+ </p>
380
+ </div>
381
+ </div>
382
+
383
+ <div class="demo-section">
384
+ <h2>Badge with Offset</h2>
385
+
386
+ <div class="inline-demo">
387
+ <div>
388
+ <span class="demo-label">No Offset</span>
389
+ <snice-badge count="5" offset="0" variant="primary">
390
+ <div class="badge-target">📧</div>
391
+ </snice-badge>
392
+ </div>
393
+
394
+ <div>
395
+ <span class="demo-label">Small Offset (4px)</span>
396
+ <snice-badge count="5" offset="4" variant="primary">
397
+ <div class="badge-target">📧</div>
398
+ </snice-badge>
399
+ </div>
400
+
401
+ <div>
402
+ <span class="demo-label">Large Offset (8px)</span>
403
+ <snice-badge count="5" offset="8" variant="primary">
404
+ <div class="badge-target">📧</div>
405
+ </snice-badge>
406
+ </div>
407
+ </div>
408
+ </div>
409
+
410
+ <div class="demo-section">
411
+ <h2>Interactive Demo</h2>
412
+
413
+ <div class="demo-item">
414
+ <snice-badge id="interactive-badge" count="0" variant="primary">
415
+ <div class="badge-target">🔔</div>
416
+ </snice-badge>
417
+
418
+ <div class="controls">
419
+ <button onclick="incrementCount()">+1</button>
420
+ <button onclick="decrementCount()">-1</button>
421
+ <button onclick="resetCount()">Reset</button>
422
+ <button onclick="toggleDot()">Toggle Dot</button>
423
+ <button onclick="togglePulse()">Toggle Pulse</button>
424
+ <input type="number" id="count-input" value="0" onchange="setCount(this.value)">
425
+ </div>
426
+ </div>
427
+
428
+ <div class="demo-item">
429
+ <div class="controls">
430
+ <button onclick="changeVariant('default')">Default</button>
431
+ <button onclick="changeVariant('primary')">Primary</button>
432
+ <button onclick="changeVariant('success')">Success</button>
433
+ <button onclick="changeVariant('warning')">Warning</button>
434
+ <button onclick="changeVariant('error')">Error</button>
435
+ <button onclick="changeVariant('info')">Info</button>
436
+ </div>
437
+ </div>
438
+ </div>
439
+
440
+ <div class="demo-section">
441
+ <h2>Real-world Examples</h2>
442
+
443
+ <div class="inline-demo">
444
+ <div>
445
+ <span class="demo-label">Shopping Cart</span>
446
+ <snice-badge count="3" variant="primary">
447
+ <svg class="notification-icon" viewBox="0 0 24 24" fill="currentColor">
448
+ <path d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/>
449
+ </svg>
450
+ </snice-badge>
451
+ </div>
452
+
453
+ <div>
454
+ <span class="demo-label">User Status</span>
455
+ <snice-badge dot pulse variant="success" position="bottom-right">
456
+ <div class="badge-avatar">JD</div>
457
+ </snice-badge>
458
+ </div>
459
+
460
+ <div>
461
+ <span class="demo-label">App Updates</span>
462
+ <snice-badge content="UPDATE" variant="warning">
463
+ <svg class="notification-icon" viewBox="0 0 24 24" fill="#6b7280">
464
+ <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/>
465
+ </svg>
466
+ </snice-badge>
467
+ </div>
468
+ </div>
469
+ </div>
470
+ </div>
471
+
472
+ <script type="module">
473
+ import './snice-badge.ts';
474
+
475
+ let count = 0;
476
+
477
+ window.incrementCount = function() {
478
+ const badge = document.getElementById('interactive-badge');
479
+ const input = document.getElementById('count-input');
480
+ count++;
481
+ badge.count = count;
482
+ input.value = count;
483
+ };
484
+
485
+ window.decrementCount = function() {
486
+ const badge = document.getElementById('interactive-badge');
487
+ const input = document.getElementById('count-input');
488
+ count = Math.max(0, count - 1);
489
+ badge.count = count;
490
+ input.value = count;
491
+ };
492
+
493
+ window.resetCount = function() {
494
+ const badge = document.getElementById('interactive-badge');
495
+ const input = document.getElementById('count-input');
496
+ count = 0;
497
+ badge.count = count;
498
+ input.value = count;
499
+ };
500
+
501
+ window.setCount = function(value) {
502
+ const badge = document.getElementById('interactive-badge');
503
+ count = parseInt(value) || 0;
504
+ badge.count = count;
505
+ };
506
+
507
+ window.toggleDot = function() {
508
+ const badge = document.getElementById('interactive-badge');
509
+ badge.dot = !badge.dot;
510
+ };
511
+
512
+ window.togglePulse = function() {
513
+ const badge = document.getElementById('interactive-badge');
514
+ badge.pulse = !badge.pulse;
515
+ };
516
+
517
+ window.changeVariant = function(variant) {
518
+ const badge = document.getElementById('interactive-badge');
519
+ badge.variant = variant;
520
+ };
521
+ </script>
522
+ </body>
523
+ </html>
package/components/badge/snice-badge.css ADDED
@@ -0,0 +1,161 @@
1
+ :host {
2
+ display: inline-block;
3
+ --badge-offset: 0px;
4
+ }
5
+
6
+ .badge-wrapper {
7
+ position: relative;
8
+ display: inline-block;
9
+ width: fit-content;
10
+ height: fit-content;
11
+ }
12
+
13
+ .badge {
14
+ position: absolute;
15
+ display: inline-flex;
16
+ align-items: center;
17
+ justify-content: center;
18
+ min-width: 1.25rem; /* 20px */
19
+ height: 1.25rem; /* 20px */
20
+ padding: 0 0.375rem; /* 0 6px */
21
+ border-radius: 10px;
22
+ font-size: 0.75rem; /* 12px */
23
+ font-weight: 600;
24
+ line-height: 1;
25
+ white-space: nowrap;
26
+ z-index: 1;
27
+ transition: opacity 0.2s ease;
28
+ box-shadow: var(--snice-shadow-sm);
29
+ border: 2px solid rgba(255, 255, 255, 0.9);
30
+ box-sizing: border-box;
31
+ text-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 1px 1px rgba(0, 0, 0, 0.3);
32
+ }
33
+
34
+ .badge--dot {
35
+ min-width: 0.5rem; /* 8px */
36
+ height: 0.5rem; /* 8px */
37
+ padding: 0;
38
+ border-radius: 50%;
39
+ border: none;
40
+ }
41
+
42
+ /* Sizes */
43
+ :host([size="small"]) .badge {
44
+ min-width: 1rem; /* 16px */
45
+ height: 1rem; /* 16px */
46
+ padding: 0 0.25rem; /* 0 4px */
47
+ font-size: 0.625rem; /* 10px */
48
+ }
49
+
50
+ :host([size="small"]) .badge--dot {
51
+ min-width: 0.375rem; /* 6px */
52
+ height: 0.375rem; /* 6px */
53
+ }
54
+
55
+ :host([size="large"]) .badge {
56
+ min-width: 1.5rem; /* 24px */
57
+ height: 1.5rem; /* 24px */
58
+ padding: 0 0.5rem; /* 0 8px */
59
+ font-size: 0.875rem; /* 14px */
60
+ }
61
+
62
+ :host([size="large"]) .badge--dot {
63
+ min-width: 0.625rem; /* 10px */
64
+ height: 0.625rem; /* 10px */
65
+ }
66
+
67
+ /* Pulse animation */
68
+ .badge--pulse {
69
+ animation: pulse 2s infinite;
70
+ }
71
+
72
+ .badge--pulse.badge--dot::before {
73
+ content: '';
74
+ position: absolute;
75
+ inset: 0;
76
+ border-radius: 50%;
77
+ background: inherit;
78
+ animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
79
+ }
80
+
81
+ @keyframes pulse {
82
+ 0%, 100% {
83
+ opacity: 1;
84
+ }
85
+ 50% {
86
+ opacity: 0.8;
87
+ }
88
+ }
89
+
90
+ @keyframes ping {
91
+ 75%, 100% {
92
+ transform: scale(2);
93
+ opacity: 0;
94
+ }
95
+ }
96
+
97
+ /* Positions */
98
+ :host([position="top-right"]) .badge,
99
+ :host(:not([position])) .badge {
100
+ top: var(--badge-offset);
101
+ right: var(--badge-offset);
102
+ transform: translate(50%, -50%);
103
+ }
104
+
105
+ :host([position="top-left"]) .badge {
106
+ top: var(--badge-offset);
107
+ left: var(--badge-offset);
108
+ transform: translate(-50%, -50%);
109
+ }
110
+
111
+ :host([position="bottom-right"]) .badge {
112
+ bottom: var(--badge-offset);
113
+ right: var(--badge-offset);
114
+ transform: translate(50%, 50%);
115
+ }
116
+
117
+ :host([position="bottom-left"]) .badge {
118
+ bottom: var(--badge-offset);
119
+ left: var(--badge-offset);
120
+ transform: translate(-50%, 50%);
121
+ }
122
+
123
+ /* Inline mode */
124
+ :host([inline]) .badge {
125
+ position: static;
126
+ transform: none;
127
+ margin-left: 0.5rem; /* 8px */
128
+ vertical-align: middle;
129
+ }
130
+
131
+ /* Variants - using standard colors with emphasized borders */
132
+ :host([variant="default"]) .badge,
133
+ :host(:not([variant])) .badge {
134
+ background: rgb(var(--snice-color-gray-600));
135
+ color: white;
136
+ }
137
+
138
+ :host([variant="primary"]) .badge {
139
+ background: rgb(var(--snice-color-blue-600));
140
+ color: white;
141
+ }
142
+
143
+ :host([variant="success"]) .badge {
144
+ background: rgb(var(--snice-color-green-600));
145
+ color: white;
146
+ }
147
+
148
+ :host([variant="warning"]) .badge {
149
+ background: rgb(var(--snice-color-yellow-600));
150
+ color: white;
151
+ }
152
+
153
+ :host([variant="error"]) .badge {
154
+ background: rgb(var(--snice-color-red-600));
155
+ color: white;
156
+ }
157
+
158
+ :host([variant="info"]) .badge {
159
+ background: rgb(var(--snice-color-blue-600));
160
+ color: white;
161
+ }