@kubex/zinc 1.0.25 → 1.0.98

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 (198) hide show
  1. package/.claude/project.md +556 -0
  2. package/.github/workflows/js_build_and_deploy.yaml +9 -10
  3. package/dist/custom-elements.json +13431 -8728
  4. package/dist/vscode.html-custom-data.json +571 -37
  5. package/dist/web-types.json +1439 -181
  6. package/dist/zn.d.ts +1642 -661
  7. package/dist/zn.min.css +1 -1
  8. package/dist/zn.min.js +1406 -891
  9. package/docs/_utilities/code-previews.cjs +10 -1
  10. package/docs/assets/scripts/docs.js +42 -18
  11. package/docs/data/data-table.json +229 -66
  12. package/docs/data/empty.json +6 -0
  13. package/docs/data/products-table.json +41 -193
  14. package/docs/pages/components/action-bar.md +121 -6
  15. package/docs/pages/components/alert.md +118 -15
  16. package/docs/pages/components/animated-button.md +299 -0
  17. package/docs/pages/components/audio-select.md +534 -0
  18. package/docs/pages/components/bulk-actions.md +79 -5
  19. package/docs/pages/components/button-group.md +235 -27
  20. package/docs/pages/components/button.md +139 -1
  21. package/docs/pages/components/chart.md +365 -9
  22. package/docs/pages/components/checkbox.md +387 -58
  23. package/docs/pages/components/chip.md +253 -33
  24. package/docs/pages/components/collapsible.md +393 -46
  25. package/docs/pages/components/cols.md +152 -30
  26. package/docs/pages/components/confirm.md +182 -16
  27. package/docs/pages/components/copy-button.md +169 -6
  28. package/docs/pages/components/data-select.md +194 -15
  29. package/docs/pages/components/data-table-filter.md +96 -5
  30. package/docs/pages/components/data-table-search.md +451 -0
  31. package/docs/pages/components/data-table-sort.md +66 -5
  32. package/docs/pages/components/data-table.md +727 -66
  33. package/docs/pages/components/datepicker.md +402 -7
  34. package/docs/pages/components/defined-label.md +120 -5
  35. package/docs/pages/components/dialog.md +339 -59
  36. package/docs/pages/components/dropdown.md +366 -11
  37. package/docs/pages/components/editor.md +604 -7
  38. package/docs/pages/components/empty-state.md +315 -16
  39. package/docs/pages/components/expanding-action.md +212 -28
  40. package/docs/pages/components/file.md +421 -12
  41. package/docs/pages/components/filter-container.md +158 -5
  42. package/docs/pages/components/filter-wrapper.md +167 -6
  43. package/docs/pages/components/form-group.md +383 -6
  44. package/docs/pages/components/hover-container.md +237 -6
  45. package/docs/pages/components/icon-picker.md +121 -0
  46. package/docs/pages/components/icon.md +454 -48
  47. package/docs/pages/components/inline-edit.md +787 -19
  48. package/docs/pages/components/input-group.md +207 -13
  49. package/docs/pages/components/input.md +194 -0
  50. package/docs/pages/components/key-container.md +115 -0
  51. package/docs/pages/components/key.md +101 -0
  52. package/docs/pages/components/menu.md +512 -6
  53. package/docs/pages/components/note.md +239 -36
  54. package/docs/pages/components/opt-group.md +107 -0
  55. package/docs/pages/components/pagination.md +332 -6
  56. package/docs/pages/components/pane.md +222 -6
  57. package/docs/pages/components/panel.md +213 -26
  58. package/docs/pages/components/popup.md +1354 -6
  59. package/docs/pages/components/priority-list.md +233 -0
  60. package/docs/pages/components/progress-bar.md +387 -6
  61. package/docs/pages/components/radio-group.md +242 -5
  62. package/docs/pages/components/radio.md +474 -6
  63. package/docs/pages/components/rating.md +331 -7
  64. package/docs/pages/components/reveal.md +524 -6
  65. package/docs/pages/components/scroll-container.md +552 -6
  66. package/docs/pages/components/select.md +762 -160
  67. package/docs/pages/components/skeleton.md +473 -30
  68. package/docs/pages/components/slideout.md +261 -5
  69. package/docs/pages/components/sp.md +99 -41
  70. package/docs/pages/components/split-button.md +347 -9
  71. package/docs/pages/components/split-pane.md +445 -6
  72. package/docs/pages/components/stat.md +549 -9
  73. package/docs/pages/components/status-indicator.md +230 -1
  74. package/docs/pages/components/stepper.md +563 -6
  75. package/docs/pages/components/tabs.md +439 -13
  76. package/docs/pages/components/textarea.md +415 -17
  77. package/docs/pages/components/tile.md +385 -26
  78. package/docs/pages/components/toggle.md +424 -6
  79. package/docs/pages/components/tooltip.md +367 -0
  80. package/docs/pages/components/translation-group.md +210 -0
  81. package/docs/pages/components/translations.md +319 -19
  82. package/docs/pages/components/vertical-stepper.md +401 -8
  83. package/docs/pages/components/well.md +300 -3
  84. package/docs/pages/getting-started/form-controls.md +162 -0
  85. package/docs/pages/index.md +116 -15
  86. package/package.json +5 -6
  87. package/scss/_global-spacing.scss +4 -0
  88. package/scss/_root.scss +2 -2
  89. package/scss/boot.scss +19 -0
  90. package/scss/shared/layout.scss +5 -0
  91. package/scss/themes/_light.scss +3 -3
  92. package/src/components/alert/alert.scss +1 -0
  93. package/src/components/animated-button/README.md +306 -0
  94. package/src/components/animated-button/animated-button.component.ts +229 -0
  95. package/src/components/animated-button/animated-button.scss +228 -0
  96. package/src/components/animated-button/animated-button.test.ts +143 -0
  97. package/src/components/animated-button/index.ts +12 -0
  98. package/src/components/button/button.component.ts +5 -0
  99. package/src/components/button-group/button-group.component.ts +25 -13
  100. package/src/components/button-group/button-group.scss +6 -0
  101. package/src/components/checkbox/checkbox.component.ts +4 -0
  102. package/src/components/checkbox/checkbox.scss +7 -4
  103. package/src/components/checkbox-group/checkbox-group.scss +7 -0
  104. package/src/components/chip/chip.component.ts +7 -2
  105. package/src/components/chip/chip.scss +16 -2
  106. package/src/components/collapsible/collapsible.component.ts +27 -20
  107. package/src/components/cols/cols.component.ts +14 -2
  108. package/src/components/cols/cols.scss +6 -12
  109. package/src/components/confirm/confirm.component.ts +7 -0
  110. package/src/components/copy-button/copy-button.component.ts +12 -11
  111. package/src/components/data-select/data-select.component.ts +215 -44
  112. package/src/components/data-select/data-select.scss +66 -6
  113. package/src/components/data-select/providers/currency-data-provider.ts +20 -6
  114. package/src/components/data-select/providers/provider.ts +1 -0
  115. package/src/components/data-select/providers/us-state-data-provider.ts +68 -0
  116. package/src/components/data-table/data-table.component.ts +81 -22
  117. package/src/components/data-table-search/data-table-search.component.ts +184 -0
  118. package/src/components/data-table-search/data-table-search.scss +17 -0
  119. package/src/components/data-table-search/data-table-search.test.ts +11 -0
  120. package/src/components/data-table-search/index.ts +12 -0
  121. package/src/components/datepicker/datepicker.component.ts +347 -13
  122. package/src/components/dialog/dialog.component.ts +1 -1
  123. package/src/components/empty-state/empty-state.scss +6 -1
  124. package/src/components/header/header.scss +3 -3
  125. package/src/components/icon/icon.component.ts +23 -1
  126. package/src/components/icon/icon.scss +23 -0
  127. package/src/components/icon-picker/brand-icons.ts +24 -0
  128. package/src/components/icon-picker/icon-picker.component.ts +407 -0
  129. package/src/components/icon-picker/icon-picker.scss +205 -0
  130. package/src/components/icon-picker/index.ts +12 -0
  131. package/src/components/icon-picker/line-icons.ts +612 -0
  132. package/src/components/icon-picker/material-icons.ts +14543 -0
  133. package/src/components/inline-edit/inline-edit.component.ts +190 -46
  134. package/src/components/inline-edit/inline-edit.scss +29 -0
  135. package/src/components/inline-edit/inline-edit.test.ts +314 -1
  136. package/src/components/input/input.component.ts +324 -5
  137. package/src/components/input/input.scss +87 -0
  138. package/src/components/input-group/input-group.component.ts +28 -7
  139. package/src/components/input-group/input-group.scss +48 -10
  140. package/src/components/item/item.component.ts +11 -2
  141. package/src/components/item/item.scss +7 -0
  142. package/src/components/key/index.ts +12 -0
  143. package/src/components/key/key.component.ts +47 -0
  144. package/src/components/key/key.scss +38 -0
  145. package/src/components/key-container/index.ts +12 -0
  146. package/src/components/key-container/key-container.component.ts +142 -0
  147. package/src/components/key-container/key-container.scss +33 -0
  148. package/src/components/menu-item/menu-item.component.ts +20 -0
  149. package/src/components/menu-item/menu-item.scss +69 -2
  150. package/src/components/navbar/navbar.component.ts +103 -11
  151. package/src/components/navbar/navbar.scss +6 -1
  152. package/src/components/opt-group/index.ts +12 -0
  153. package/src/components/opt-group/opt-group.component.ts +74 -0
  154. package/src/components/opt-group/opt-group.scss +37 -0
  155. package/src/components/opt-group/opt-group.test.ts +27 -0
  156. package/src/components/option/option.component.ts +1 -16
  157. package/src/components/option/option.scss +4 -0
  158. package/src/components/panel/panel.component.ts +10 -8
  159. package/src/components/panel/panel.scss +20 -0
  160. package/src/components/priority-list/index.ts +12 -0
  161. package/src/components/priority-list/priority-list.component.ts +611 -0
  162. package/src/components/priority-list/priority-list.scss +185 -0
  163. package/src/components/priority-list/priority-list.test.ts +139 -0
  164. package/src/components/progress-bar/progress-bar.component.ts +22 -16
  165. package/src/components/radio/radio.scss +10 -3
  166. package/src/components/select/select.component.ts +812 -72
  167. package/src/components/select/select.scss +108 -2
  168. package/src/components/select/select.test.ts +147 -2
  169. package/src/components/settings-container/settings-container.component.ts +44 -19
  170. package/src/components/settings-container/settings-container.scss +1 -1
  171. package/src/components/skeleton/skeleton.component.ts +6 -1
  172. package/src/components/slideout/slideout.scss +8 -3
  173. package/src/components/sp/sp.component.ts +3 -1
  174. package/src/components/sp/sp.scss +19 -0
  175. package/src/components/stepper/stepper.component.ts +16 -10
  176. package/src/components/textarea/textarea.scss +0 -4
  177. package/src/components/tile/tile.component.ts +12 -3
  178. package/src/components/tile/tile.scss +1 -1
  179. package/src/components/timer/timer.component.ts +15 -2
  180. package/src/components/toggle/toggle.component.ts +29 -26
  181. package/src/components/toggle/toggle.scss +13 -1
  182. package/src/components/translation-group/index.ts +12 -0
  183. package/src/components/translation-group/translation-group.component.ts +207 -0
  184. package/src/components/translation-group/translation-group.scss +8 -0
  185. package/src/components/translations/translations.component.ts +90 -44
  186. package/src/components/translations/translations.scss +4 -0
  187. package/src/components/vertical-stepper/vertical-stepper.component.ts +14 -9
  188. package/src/events/events.ts +12 -7
  189. package/src/events/zn-language-change.ts +7 -0
  190. package/src/events/zn-purchase.ts +11 -0
  191. package/src/events/zn-redirect.ts +7 -0
  192. package/src/events/zn-reorder.ts +7 -0
  193. package/src/events/zn-search-change.ts +11 -0
  194. package/src/events/zn-submit.ts +1 -1
  195. package/src/form-control.scss +4 -0
  196. package/src/internal/form-navigation.ts +510 -0
  197. package/src/internal/form.ts +6 -0
  198. package/src/zinc.ts +91 -83
package/docs/pages/components/status-indicator.md CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  meta:
3
3
  title: Status Indicator
4
- description:
4
+ description: Status indicators are small circular elements used to display the state or status of an item, feature, or service.
5
5
  layout: component
6
6
  ---
7
7
 
@@ -11,3 +11,232 @@ layout: component
11
11
  <zn-status-indicator type="warning"></zn-status-indicator>
12
12
  <zn-status-indicator type="error"></zn-status-indicator>
13
13
  ```
14
+
15
+ ## Examples
16
+
17
+ ### Basic Status Indicator
18
+
19
+ A basic status indicator displays as a small circular dot with the default info color.
20
+
21
+ ```html:preview
22
+ <zn-status-indicator></zn-status-indicator>
23
+ ```
24
+
25
+ ### Types
26
+
27
+ Use the `type` attribute to set the semantic meaning and color of the status indicator. Available types are: `info` (default), `success`, `warning`, and `error`.
28
+
29
+ ```html:preview
30
+ <zn-status-indicator type="info"></zn-status-indicator>
31
+ <zn-status-indicator type="success"></zn-status-indicator>
32
+ <zn-status-indicator type="warning"></zn-status-indicator>
33
+ <zn-status-indicator type="error"></zn-status-indicator>
34
+ ```
35
+
36
+ ### With Labels
37
+
38
+ Status indicators are commonly used alongside text labels to provide context.
39
+
40
+ ```html:preview
41
+ <div style="display: flex; gap: 8px; align-items: center;">
42
+ <zn-status-indicator type="success"></zn-status-indicator>
43
+ <span>Online</span>
44
+ </div>
45
+ <br />
46
+ <div style="display: flex; gap: 8px; align-items: center;">
47
+ <zn-status-indicator type="warning"></zn-status-indicator>
48
+ <span>Away</span>
49
+ </div>
50
+ <br />
51
+ <div style="display: flex; gap: 8px; align-items: center;">
52
+ <zn-status-indicator type="error"></zn-status-indicator>
53
+ <span>Offline</span>
54
+ </div>
55
+ <br />
56
+ <div style="display: flex; gap: 8px; align-items: center;">
57
+ <zn-status-indicator type="info"></zn-status-indicator>
58
+ <span>Idle</span>
59
+ </div>
60
+ ```
61
+
62
+ ### Service Status
63
+
64
+ Status indicators are useful for displaying the health of services or systems.
65
+
66
+ ```html:preview
67
+ <div style="display: flex; flex-direction: column; gap: 12px;">
68
+ <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border: 1px solid var(--zn-color-border); border-radius: 4px;">
69
+ <span>API Service</span>
70
+ <div style="display: flex; gap: 8px; align-items: center;">
71
+ <zn-status-indicator type="success"></zn-status-indicator>
72
+ <span>Operational</span>
73
+ </div>
74
+ </div>
75
+ <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border: 1px solid var(--zn-color-border); border-radius: 4px;">
76
+ <span>Database</span>
77
+ <div style="display: flex; gap: 8px; align-items: center;">
78
+ <zn-status-indicator type="warning"></zn-status-indicator>
79
+ <span>Degraded</span>
80
+ </div>
81
+ </div>
82
+ <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border: 1px solid var(--zn-color-border); border-radius: 4px;">
83
+ <span>Cache Server</span>
84
+ <div style="display: flex; gap: 8px; align-items: center;">
85
+ <zn-status-indicator type="error"></zn-status-indicator>
86
+ <span>Down</span>
87
+ </div>
88
+ </div>
89
+ <div style="display: flex; justify-content: space-between; align-items: center; padding: 8px; border: 1px solid var(--zn-color-border); border-radius: 4px;">
90
+ <span>CDN</span>
91
+ <div style="display: flex; gap: 8px; align-items: center;">
92
+ <zn-status-indicator type="success"></zn-status-indicator>
93
+ <span>Operational</span>
94
+ </div>
95
+ </div>
96
+ </div>
97
+ ```
98
+
99
+ ### User Presence
100
+
101
+ Display user availability status with status indicators.
102
+
103
+ ```html:preview
104
+ <div style="display: flex; flex-direction: column; gap: 12px;">
105
+ <div style="display: flex; gap: 12px; align-items: center;">
106
+ <div style="position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--zn-color-secondary); display: flex; align-items: center; justify-content: center;">
107
+ <zn-icon name="person" size="24"></zn-icon>
108
+ <div style="position: absolute; bottom: 0; right: 0;">
109
+ <zn-status-indicator type="success"></zn-status-indicator>
110
+ </div>
111
+ </div>
112
+ <span>John Doe - Available</span>
113
+ </div>
114
+ <div style="display: flex; gap: 12px; align-items: center;">
115
+ <div style="position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--zn-color-secondary); display: flex; align-items: center; justify-content: center;">
116
+ <zn-icon name="person" size="24"></zn-icon>
117
+ <div style="position: absolute; bottom: 0; right: 0;">
118
+ <zn-status-indicator type="warning"></zn-status-indicator>
119
+ </div>
120
+ </div>
121
+ <span>Jane Smith - Away</span>
122
+ </div>
123
+ <div style="display: flex; gap: 12px; align-items: center;">
124
+ <div style="position: relative; width: 40px; height: 40px; border-radius: 50%; background: var(--zn-color-secondary); display: flex; align-items: center; justify-content: center;">
125
+ <zn-icon name="person" size="24"></zn-icon>
126
+ <div style="position: absolute; bottom: 0; right: 0;">
127
+ <zn-status-indicator type="error"></zn-status-indicator>
128
+ </div>
129
+ </div>
130
+ <span>Bob Johnson - Offline</span>
131
+ </div>
132
+ </div>
133
+ ```
134
+
135
+ ### List Items
136
+
137
+ Status indicators work well in lists to show item states.
138
+
139
+ ```html:preview
140
+ <div style="display: flex; flex-direction: column; gap: 4px;">
141
+ <div style="display: flex; gap: 8px; align-items: center; padding: 8px;">
142
+ <zn-status-indicator type="success"></zn-status-indicator>
143
+ <span>Payment processed successfully</span>
144
+ </div>
145
+ <div style="display: flex; gap: 8px; align-items: center; padding: 8px;">
146
+ <zn-status-indicator type="warning"></zn-status-indicator>
147
+ <span>Order pending confirmation</span>
148
+ </div>
149
+ <div style="display: flex; gap: 8px; align-items: center; padding: 8px;">
150
+ <zn-status-indicator type="error"></zn-status-indicator>
151
+ <span>Failed to verify email address</span>
152
+ </div>
153
+ <div style="display: flex; gap: 8px; align-items: center; padding: 8px;">
154
+ <zn-status-indicator type="info"></zn-status-indicator>
155
+ <span>New notification received</span>
156
+ </div>
157
+ </div>
158
+ ```
159
+
160
+ ### Custom Colors
161
+
162
+ Use the `--indicator-color` CSS variable to customize the indicator color for specific use cases.
163
+
164
+ ```html:preview
165
+ <zn-status-indicator style="--indicator-color: 128, 90, 213;"></zn-status-indicator>
166
+ <zn-status-indicator style="--indicator-color: 236, 72, 153;"></zn-status-indicator>
167
+ <zn-status-indicator style="--indicator-color: 16, 185, 129;"></zn-status-indicator>
168
+ <zn-status-indicator style="--indicator-color: 245, 158, 11;"></zn-status-indicator>
169
+ ```
170
+
171
+ Note: The `--indicator-color` variable expects RGB values without the `rgb()` wrapper, as it uses `rgba()` internally for opacity control.
172
+
173
+ ### Legend
174
+
175
+ Status indicators can be used in legends to explain color-coded information.
176
+
177
+ ```html:preview
178
+ <div style="display: flex; gap: 16px; flex-wrap: wrap;">
179
+ <div style="display: flex; gap: 6px; align-items: center;">
180
+ <zn-status-indicator type="success"></zn-status-indicator>
181
+ <span style="font-size: 14px;">Completed</span>
182
+ </div>
183
+ <div style="display: flex; gap: 6px; align-items: center;">
184
+ <zn-status-indicator type="warning"></zn-status-indicator>
185
+ <span style="font-size: 14px;">In Progress</span>
186
+ </div>
187
+ <div style="display: flex; gap: 6px; align-items: center;">
188
+ <zn-status-indicator type="error"></zn-status-indicator>
189
+ <span style="font-size: 14px;">Failed</span>
190
+ </div>
191
+ <div style="display: flex; gap: 6px; align-items: center;">
192
+ <zn-status-indicator type="info"></zn-status-indicator>
193
+ <span style="font-size: 14px;">Pending</span>
194
+ </div>
195
+ </div>
196
+ ```
197
+
198
+ ### Table Integration
199
+
200
+ Status indicators are commonly used in tables to show row or cell status.
201
+
202
+ ```html:preview
203
+ <table style="width: 100%; border-collapse: collapse;">
204
+ <thead>
205
+ <tr style="border-bottom: 1px solid var(--zn-color-border);">
206
+ <th style="text-align: left; padding: 12px;">Status</th>
207
+ <th style="text-align: left; padding: 12px;">Task</th>
208
+ <th style="text-align: left; padding: 12px;">Assignee</th>
209
+ </tr>
210
+ </thead>
211
+ <tbody>
212
+ <tr style="border-bottom: 1px solid var(--zn-color-border);">
213
+ <td style="padding: 12px;">
214
+ <zn-status-indicator type="success"></zn-status-indicator>
215
+ </td>
216
+ <td style="padding: 12px;">Deploy to production</td>
217
+ <td style="padding: 12px;">John Doe</td>
218
+ </tr>
219
+ <tr style="border-bottom: 1px solid var(--zn-color-border);">
220
+ <td style="padding: 12px;">
221
+ <zn-status-indicator type="warning"></zn-status-indicator>
222
+ </td>
223
+ <td style="padding: 12px;">Code review pending</td>
224
+ <td style="padding: 12px;">Jane Smith</td>
225
+ </tr>
226
+ <tr style="border-bottom: 1px solid var(--zn-color-border);">
227
+ <td style="padding: 12px;">
228
+ <zn-status-indicator type="error"></zn-status-indicator>
229
+ </td>
230
+ <td style="padding: 12px;">Tests failing</td>
231
+ <td style="padding: 12px;">Bob Johnson</td>
232
+ </tr>
233
+ <tr>
234
+ <td style="padding: 12px;">
235
+ <zn-status-indicator type="info"></zn-status-indicator>
236
+ </td>
237
+ <td style="padding: 12px;">Update documentation</td>
238
+ <td style="padding: 12px;">Alice Williams</td>
239
+ </tr>
240
+ </tbody>
241
+ </table>
242
+ ```