@keenmate/pure-admin-core 1.0.0-rc01

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 (167) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +172 -0
  3. package/dist/css/main.css +11542 -0
  4. package/dist/fonts/Delivery/Delivery_W_Bd.woff2 +0 -0
  5. package/dist/fonts/Delivery/Delivery_W_BdIt.woff2 +0 -0
  6. package/dist/fonts/Delivery/Delivery_W_CdBlk.woff2 +0 -0
  7. package/dist/fonts/Delivery/Delivery_W_CdLt.woff2 +0 -0
  8. package/dist/fonts/Delivery/Delivery_W_It.woff2 +0 -0
  9. package/dist/fonts/Delivery/Delivery_W_Lt.woff2 +0 -0
  10. package/dist/fonts/Delivery/Delivery_W_LtIt.woff2 +0 -0
  11. package/dist/fonts/Delivery/Delivery_W_Rg.woff2 +0 -0
  12. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2 +0 -0
  13. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.1 +0 -0
  14. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8UH-qVHQ.woff2.2 +0 -0
  15. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2 +0 -0
  16. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.1 +0 -0
  17. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8VH-qVHQ.woff2.2 +0 -0
  18. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2 +0 -0
  19. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8bH-o.woff2.1 +0 -0
  20. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2 +0 -0
  21. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.1 +0 -0
  22. package/dist/fonts/google/3y976aknfjLm_3lMKjiMgmUUYBs04Y8fH-qVHQ.woff2.2 +0 -0
  23. package/dist/fonts/google/6aez4K2oVqwIvtE2H68T.woff2 +0 -0
  24. package/dist/fonts/google/6aez4K2oVqwIvtU2Hw.woff2 +0 -0
  25. package/dist/fonts/google/6aez4K2oVqwIvtY2H68T.woff2 +0 -0
  26. package/dist/fonts/google/6aez4K2oVqwIvtg2H68T.woff2 +0 -0
  27. package/dist/fonts/google/6aez4K2oVqwIvto2H68T.woff2 +0 -0
  28. package/dist/fonts/google/6aez4K2oVqwIvts2H68T.woff2 +0 -0
  29. package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nejog.woff2 +0 -0
  30. package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nijogp5.woff2 +0 -0
  31. package/dist/fonts/google/7Auup_AqnyWWAxW2Wk3swUz56MS91Eww8SX21nmjogp5.woff2 +0 -0
  32. package/dist/fonts/google/PN_xRfK9oXHga0XdZ8g_vT0.woff2 +0 -0
  33. package/dist/fonts/google/PN_xRfK9oXHga0XdZsg_.woff2 +0 -0
  34. package/dist/fonts/google/PN_xRfK9oXHga0XdaMg_vT0.woff2 +0 -0
  35. package/dist/fonts/google/TK3tWkYFABsmjsphPho.woff2 +0 -0
  36. package/dist/fonts/google/TK3tWkYFABsmjspuPho7vA.woff2 +0 -0
  37. package/dist/fonts/google/TK3tWkYFABsmjspvPho7vA.woff2 +0 -0
  38. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjTYJwQj.woff2 +0 -0
  39. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjXYJwQj.woff2 +0 -0
  40. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6Vj_YJwQj.woff2 +0 -0
  41. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjbYJwQj.woff2 +0 -0
  42. package/dist/fonts/google/dg45_pLmvrkcOkBnKsOzXyGWTBcmg-X6VjvYJw.woff2 +0 -0
  43. package/dist/fonts/google/fonts-tracklist.txt +48 -0
  44. package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbBjM4.woff2 +0 -0
  45. package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbOjM7sfA.woff2 +0 -0
  46. package/dist/fonts/google/vEFO2_JTCgwQ5ejvMV0O96D01E8J0tJXHKbPjM7sfA.woff2 +0 -0
  47. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfLtrftV.woff2 +0 -0
  48. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfXtrftV.woff2 +0 -0
  49. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfbtrQ.woff2 +0 -0
  50. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfjtrftV.woff2 +0 -0
  51. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfntrftV.woff2 +0 -0
  52. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfrtrftV.woff2 +0 -0
  53. package/dist/fonts/google/wEOhEADFm8hSaQTFG18FErVhsC9x-tarUfvtrftV.woff2 +0 -0
  54. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_B-bnBeA.woff2 +0 -0
  55. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_C-bk.woff2 +0 -0
  56. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_G-bnBeA.woff2 +0 -0
  57. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_M-bnBeA.woff2 +0 -0
  58. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_N-bnBeA.woff2 +0 -0
  59. package/dist/fonts/google/xn7_YHE41ni1AdIRqAuZuw1Bx9mbZk79FN_P-bnBeA.woff2 +0 -0
  60. package/package.json +60 -0
  61. package/snippets/alerts.html +281 -0
  62. package/snippets/badges.html +212 -0
  63. package/snippets/buttons.html +287 -0
  64. package/snippets/cards.html +393 -0
  65. package/snippets/checkbox-lists.html +490 -0
  66. package/snippets/code.html +225 -0
  67. package/snippets/command-palette.html +210 -0
  68. package/snippets/comparison.html +428 -0
  69. package/snippets/customization.html +142 -0
  70. package/snippets/forms.html +477 -0
  71. package/snippets/grid.html +338 -0
  72. package/snippets/layout.html +598 -0
  73. package/snippets/lists.html +232 -0
  74. package/snippets/loaders.html +183 -0
  75. package/snippets/manifest.json +388 -0
  76. package/snippets/modal-dialogs.html +411 -0
  77. package/snippets/modals.html +310 -0
  78. package/snippets/popconfirm.html +253 -0
  79. package/snippets/profile.html +264 -0
  80. package/snippets/tables.html +317 -0
  81. package/snippets/tabs.html +930 -0
  82. package/snippets/timeline.html +364 -0
  83. package/snippets/toasts.html +154 -0
  84. package/snippets/tooltips.html +411 -0
  85. package/snippets/typography.html +101 -0
  86. package/snippets/utilities.html +595 -0
  87. package/snippets/virtual-scroll.html +322 -0
  88. package/snippets/web-daterangepicker.html +634 -0
  89. package/snippets/web-multiselect.html +362 -0
  90. package/src/scss/.claude/settings.local.json +11 -0
  91. package/src/scss/_base-css-variables.scss +348 -0
  92. package/src/scss/_core.scss +99 -0
  93. package/src/scss/_fonts.scss +67 -0
  94. package/src/scss/_purecss-grid-responsive.scss +138 -0
  95. package/src/scss/_purecss-grid.scss +58 -0
  96. package/src/scss/_variables.scss +14 -0
  97. package/src/scss/core-components/_alerts.scss +212 -0
  98. package/src/scss/core-components/_badges.scss +16 -0
  99. package/src/scss/core-components/_base.scss +124 -0
  100. package/src/scss/core-components/_buttons.scss +473 -0
  101. package/src/scss/core-components/_cards.scss +285 -0
  102. package/src/scss/core-components/_checkbox-lists.scss +289 -0
  103. package/src/scss/core-components/_code.scss +141 -0
  104. package/src/scss/core-components/_command-palette.scss +518 -0
  105. package/src/scss/core-components/_comparison.scss +172 -0
  106. package/src/scss/core-components/_file-selector.scss +780 -0
  107. package/src/scss/core-components/_forms.scss +16 -0
  108. package/src/scss/core-components/_grid.scss +264 -0
  109. package/src/scss/core-components/_layout.scss +15 -0
  110. package/src/scss/core-components/_lists.scss +211 -0
  111. package/src/scss/core-components/_loaders.scss +277 -0
  112. package/src/scss/core-components/_logic-tree.scss +280 -0
  113. package/src/scss/core-components/_modals.scss +209 -0
  114. package/src/scss/core-components/_notifications.scss +253 -0
  115. package/src/scss/core-components/_pagers.scss +141 -0
  116. package/src/scss/core-components/_popconfirm.scss +170 -0
  117. package/src/scss/core-components/_profile.scss +281 -0
  118. package/src/scss/core-components/_settings-panel.scss +128 -0
  119. package/src/scss/core-components/_statistics.scss +200 -0
  120. package/src/scss/core-components/_tables.scss +555 -0
  121. package/src/scss/core-components/_tabs.scss +438 -0
  122. package/src/scss/core-components/_timeline.scss +589 -0
  123. package/src/scss/core-components/_toasts.scss +281 -0
  124. package/src/scss/core-components/_tooltips.scss +503 -0
  125. package/src/scss/core-components/_utilities.scss +241 -0
  126. package/src/scss/core-components/_web-components-theme.scss +294 -0
  127. package/src/scss/core-components/badges/_badge-base.scss +131 -0
  128. package/src/scss/core-components/badges/_badge-group.scss +25 -0
  129. package/src/scss/core-components/badges/_composite-badge-variants.scss +396 -0
  130. package/src/scss/core-components/badges/_composite-badge.scss +70 -0
  131. package/src/scss/core-components/badges/_index.scss +10 -0
  132. package/src/scss/core-components/badges/_labels.scss +155 -0
  133. package/src/scss/core-components/forms/_checkboxes-radios.scss +205 -0
  134. package/src/scss/core-components/forms/_form-inputs.scss +100 -0
  135. package/src/scss/core-components/forms/_form-layout.scss +66 -0
  136. package/src/scss/core-components/forms/_form-states.scss +89 -0
  137. package/src/scss/core-components/forms/_index.scss +12 -0
  138. package/src/scss/core-components/forms/_input-groups.scss +149 -0
  139. package/src/scss/core-components/forms/_input-wrapper.scss +89 -0
  140. package/src/scss/core-components/forms/_query-editor.scss +313 -0
  141. package/src/scss/core-components/layout/_index.scss +11 -0
  142. package/src/scss/core-components/layout/_layout-container.scss +105 -0
  143. package/src/scss/core-components/layout/_layout-responsive.scss +100 -0
  144. package/src/scss/core-components/layout/_navbar-elements.scss +238 -0
  145. package/src/scss/core-components/layout/_navbar.scss +71 -0
  146. package/src/scss/core-components/layout/_sidebar-states.scss +228 -0
  147. package/src/scss/core-components/layout/_sidebar.scss +177 -0
  148. package/src/scss/main.scss +7 -0
  149. package/src/scss/themes/_dark-base.scss +207 -0
  150. package/src/scss/themes/audi-light.scss +311 -0
  151. package/src/scss/themes/audi.scss +288 -0
  152. package/src/scss/themes/corporate.scss +203 -0
  153. package/src/scss/themes/dark-blue.scss +152 -0
  154. package/src/scss/themes/dark-green.scss +156 -0
  155. package/src/scss/themes/dark-red.scss +160 -0
  156. package/src/scss/themes/dark.scss +145 -0
  157. package/src/scss/themes/express.scss +281 -0
  158. package/src/scss/themes/minimal.scss +121 -0
  159. package/src/scss/utilities.scss +481 -0
  160. package/src/scss/variables/_base.scss +81 -0
  161. package/src/scss/variables/_colors.scss +148 -0
  162. package/src/scss/variables/_components.scss +509 -0
  163. package/src/scss/variables/_index.scss +13 -0
  164. package/src/scss/variables/_layout.scss +65 -0
  165. package/src/scss/variables/_spacing.scss +66 -0
  166. package/src/scss/variables/_system.scss +80 -0
  167. package/src/scss/variables/_typography.scss +37 -0
package/snippets/checkbox-lists.html ADDED
@@ -0,0 +1,490 @@
1
+ <!-- ========================================
2
+ Checkbox Lists & Custom Checkbox Component
3
+ Comprehensive examples of checkbox patterns
4
+ ======================================== -->
5
+
6
+ <!-- ========================================
7
+ CUSTOM TRI-STATE CHECKBOX COMPONENT
8
+ Fully styled checkboxes with 3 states
9
+ ======================================== -->
10
+
11
+ <!-- Basic Custom Checkbox (Three States) -->
12
+ <label class="pa-checkbox">
13
+ <input type="checkbox">
14
+ <span class="pa-checkbox__box"></span>
15
+ <span class="pa-checkbox__label">Unchecked</span>
16
+ </label>
17
+
18
+ <label class="pa-checkbox">
19
+ <input type="checkbox" checked>
20
+ <span class="pa-checkbox__box"></span>
21
+ <span class="pa-checkbox__label">Checked</span>
22
+ </label>
23
+
24
+ <label class="pa-checkbox">
25
+ <input type="checkbox" id="indeterminate-demo">
26
+ <span class="pa-checkbox__box"></span>
27
+ <span class="pa-checkbox__label">Indeterminate</span>
28
+ </label>
29
+ <script>document.getElementById('indeterminate-demo').indeterminate = true;</script>
30
+
31
+ <!-- Size Variants -->
32
+ <label class="pa-checkbox pa-checkbox--xs">
33
+ <input type="checkbox" checked>
34
+ <span class="pa-checkbox__box"></span>
35
+ <span class="pa-checkbox__label">Extra Small (xs)</span>
36
+ </label>
37
+
38
+ <label class="pa-checkbox pa-checkbox--sm">
39
+ <input type="checkbox" checked>
40
+ <span class="pa-checkbox__box"></span>
41
+ <span class="pa-checkbox__label">Small (sm)</span>
42
+ </label>
43
+
44
+ <label class="pa-checkbox">
45
+ <input type="checkbox" checked>
46
+ <span class="pa-checkbox__box"></span>
47
+ <span class="pa-checkbox__label">Default</span>
48
+ </label>
49
+
50
+ <label class="pa-checkbox pa-checkbox--lg">
51
+ <input type="checkbox" checked>
52
+ <span class="pa-checkbox__box"></span>
53
+ <span class="pa-checkbox__label">Large (lg)</span>
54
+ </label>
55
+
56
+ <label class="pa-checkbox pa-checkbox--xl">
57
+ <input type="checkbox" checked>
58
+ <span class="pa-checkbox__box"></span>
59
+ <span class="pa-checkbox__label">Extra Large (xl)</span>
60
+ </label>
61
+
62
+ <!-- X Mark Modifier (shows X instead of checkmark) -->
63
+ <label class="pa-checkbox pa-checkbox--x pa-checkbox--xs">
64
+ <input type="checkbox" checked>
65
+ <span class="pa-checkbox__box"></span>
66
+ <span class="pa-checkbox__label">Extra Small with X</span>
67
+ </label>
68
+
69
+ <label class="pa-checkbox pa-checkbox--x">
70
+ <input type="checkbox" checked>
71
+ <span class="pa-checkbox__box"></span>
72
+ <span class="pa-checkbox__label">Default with X</span>
73
+ </label>
74
+
75
+ <label class="pa-checkbox pa-checkbox--x pa-checkbox--xl">
76
+ <input type="checkbox" checked>
77
+ <span class="pa-checkbox__box"></span>
78
+ <span class="pa-checkbox__label">Extra Large with X</span>
79
+ </label>
80
+
81
+ <!-- Disabled State -->
82
+ <label class="pa-checkbox pa-checkbox--disabled">
83
+ <input type="checkbox" disabled>
84
+ <span class="pa-checkbox__box"></span>
85
+ <span class="pa-checkbox__label">Disabled unchecked</span>
86
+ </label>
87
+
88
+ <label class="pa-checkbox pa-checkbox--disabled">
89
+ <input type="checkbox" checked disabled>
90
+ <span class="pa-checkbox__box"></span>
91
+ <span class="pa-checkbox__label">Disabled checked</span>
92
+ </label>
93
+
94
+ <!-- Custom Checkbox in Checkbox Lists -->
95
+ <ul class="pa-checkbox-list">
96
+ <li class="pa-checkbox-list__item">
97
+ <label class="pa-checkbox-list__label">
98
+ <span class="pa-checkbox"><input type="checkbox"><span class="pa-checkbox__box"></span></span>
99
+ <span class="pa-checkbox-list__text">Option with custom checkbox</span>
100
+ </label>
101
+ </li>
102
+ </ul>
103
+
104
+ <!-- ========================================
105
+ CHECKBOX LISTS
106
+ List-based checkbox patterns
107
+ ======================================== -->
108
+
109
+ <!-- Basic Checkbox List -->
110
+ <ul class="pa-checkbox-list">
111
+ <li class="pa-checkbox-list__item">
112
+ <label class="pa-checkbox-list__label">
113
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="check1">
114
+ <span class="pa-checkbox-list__text">Option 1</span>
115
+ </label>
116
+ </li>
117
+ <li class="pa-checkbox-list__item">
118
+ <label class="pa-checkbox-list__label">
119
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="check2" checked>
120
+ <span class="pa-checkbox-list__text">Option 2 (Selected)</span>
121
+ </label>
122
+ </li>
123
+ <li class="pa-checkbox-list__item">
124
+ <label class="pa-checkbox-list__label">
125
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="check3">
126
+ <span class="pa-checkbox-list__text">Option 3</span>
127
+ </label>
128
+ </li>
129
+ <li class="pa-checkbox-list__item pa-checkbox-list__item--disabled">
130
+ <label class="pa-checkbox-list__label">
131
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="check4" disabled>
132
+ <span class="pa-checkbox-list__text">Option 4 (Disabled)</span>
133
+ </label>
134
+ </li>
135
+ </ul>
136
+
137
+ <!-- Item States (Clickable, Disabled, Locked) -->
138
+ <ul class="pa-checkbox-list pa-checkbox-list--bordered">
139
+ <li class="pa-checkbox-list__item">
140
+ <label class="pa-checkbox-list__label">
141
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="state1">
142
+ <span class="pa-checkbox-list__text">Normal clickable option</span>
143
+ </label>
144
+ </li>
145
+ <li class="pa-checkbox-list__item pa-checkbox-list__item--disabled">
146
+ <label class="pa-checkbox-list__label">
147
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="state2" disabled>
148
+ <span class="pa-checkbox-list__text">Disabled - feature not available</span>
149
+ </label>
150
+ </li>
151
+ <li class="pa-checkbox-list__item pa-checkbox-list__item--locked">
152
+ <label class="pa-checkbox-list__label">
153
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="state3" disabled>
154
+ <span class="pa-checkbox-list__text">Requires admin permission</span>
155
+ </label>
156
+ </li>
157
+ </ul>
158
+
159
+ <!-- Checkbox List with Descriptions -->
160
+ <ul class="pa-checkbox-list">
161
+ <li class="pa-checkbox-list__item">
162
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="feature1">
163
+ <label class="pa-checkbox-list__label" for="feature1">
164
+ Email Notifications
165
+ <span class="pa-checkbox-list__description">Receive updates via email</span>
166
+ </label>
167
+ </li>
168
+ <li class="pa-checkbox-list__item">
169
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="feature2" checked>
170
+ <label class="pa-checkbox-list__label" for="feature2">
171
+ SMS Alerts
172
+ <span class="pa-checkbox-list__description">Get urgent alerts via SMS</span>
173
+ </label>
174
+ </li>
175
+ <li class="pa-checkbox-list__item">
176
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="feature3">
177
+ <label class="pa-checkbox-list__label" for="feature3">
178
+ Push Notifications
179
+ <span class="pa-checkbox-list__description">Browser push notifications</span>
180
+ </label>
181
+ </li>
182
+ </ul>
183
+
184
+ <!-- Checkbox List with Actions -->
185
+ <ul class="pa-checkbox-list">
186
+ <li class="pa-checkbox-list__item">
187
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="task1">
188
+ <label class="pa-checkbox-list__label" for="task1">Complete project proposal</label>
189
+ <div class="pa-checkbox-list__actions">
190
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary">✏️</button>
191
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger">🗑️</button>
192
+ </div>
193
+ </li>
194
+ <li class="pa-checkbox-list__item">
195
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="task2" checked>
196
+ <label class="pa-checkbox-list__label" for="task2">Review design mockups</label>
197
+ <div class="pa-checkbox-list__actions">
198
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary">✏️</button>
199
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger">🗑️</button>
200
+ </div>
201
+ </li>
202
+ </ul>
203
+
204
+ <!-- Compact Variant -->
205
+ <ul class="pa-checkbox-list pa-checkbox-list--compact">
206
+ <li class="pa-checkbox-list__item">
207
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="compact1">
208
+ <label class="pa-checkbox-list__label" for="compact1">Compact Option 1</label>
209
+ </li>
210
+ <li class="pa-checkbox-list__item">
211
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="compact2">
212
+ <label class="pa-checkbox-list__label" for="compact2">Compact Option 2</label>
213
+ </li>
214
+ <li class="pa-checkbox-list__item">
215
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="compact3">
216
+ <label class="pa-checkbox-list__label" for="compact3">Compact Option 3</label>
217
+ </li>
218
+ </ul>
219
+
220
+ <!-- Bordered Variant -->
221
+ <ul class="pa-checkbox-list pa-checkbox-list--bordered">
222
+ <li class="pa-checkbox-list__item">
223
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="bordered1">
224
+ <label class="pa-checkbox-list__label" for="bordered1">Bordered Option 1</label>
225
+ </li>
226
+ <li class="pa-checkbox-list__item">
227
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="bordered2">
228
+ <label class="pa-checkbox-list__label" for="bordered2">Bordered Option 2</label>
229
+ </li>
230
+ <li class="pa-checkbox-list__item">
231
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="bordered3">
232
+ <label class="pa-checkbox-list__label" for="bordered3">Bordered Option 3</label>
233
+ </li>
234
+ </ul>
235
+
236
+ <!-- Striped Variant -->
237
+ <ul class="pa-checkbox-list pa-checkbox-list--striped">
238
+ <li class="pa-checkbox-list__item">
239
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="striped1">
240
+ <label class="pa-checkbox-list__label" for="striped1">Striped Option 1</label>
241
+ </li>
242
+ <li class="pa-checkbox-list__item">
243
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="striped2">
244
+ <label class="pa-checkbox-list__label" for="striped2">Striped Option 2</label>
245
+ </li>
246
+ <li class="pa-checkbox-list__item">
247
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="striped3">
248
+ <label class="pa-checkbox-list__label" for="striped3">Striped Option 3</label>
249
+ </li>
250
+ <li class="pa-checkbox-list__item">
251
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="striped4">
252
+ <label class="pa-checkbox-list__label" for="striped4">Striped Option 4</label>
253
+ </li>
254
+ </ul>
255
+
256
+ <!-- Inline Layout -->
257
+ <ul class="pa-checkbox-list pa-checkbox-list--inline">
258
+ <li class="pa-checkbox-list__item">
259
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="inline1">
260
+ <label class="pa-checkbox-list__label" for="inline1">Option A</label>
261
+ </li>
262
+ <li class="pa-checkbox-list__item">
263
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="inline2">
264
+ <label class="pa-checkbox-list__label" for="inline2">Option B</label>
265
+ </li>
266
+ <li class="pa-checkbox-list__item">
267
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="inline3">
268
+ <label class="pa-checkbox-list__label" for="inline3">Option C</label>
269
+ </li>
270
+ <li class="pa-checkbox-list__item">
271
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="inline4">
272
+ <label class="pa-checkbox-list__label" for="inline4">Option D</label>
273
+ </li>
274
+ </ul>
275
+
276
+ <!-- Grid Layout -->
277
+ <ul class="pa-checkbox-list pa-checkbox-list--grid">
278
+ <li class="pa-checkbox-list__item">
279
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="grid1">
280
+ <label class="pa-checkbox-list__label" for="grid1">Grid Item 1</label>
281
+ </li>
282
+ <li class="pa-checkbox-list__item">
283
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="grid2">
284
+ <label class="pa-checkbox-list__label" for="grid2">Grid Item 2</label>
285
+ </li>
286
+ <li class="pa-checkbox-list__item">
287
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="grid3">
288
+ <label class="pa-checkbox-list__label" for="grid3">Grid Item 3</label>
289
+ </li>
290
+ <li class="pa-checkbox-list__item">
291
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="grid4">
292
+ <label class="pa-checkbox-list__label" for="grid4">Grid Item 4</label>
293
+ </li>
294
+ </ul>
295
+
296
+ <!-- Two-Column Layout -->
297
+ <ul class="pa-checkbox-list pa-checkbox-list--2col">
298
+ <li class="pa-checkbox-list__item">
299
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col2-1">
300
+ <label class="pa-checkbox-list__label" for="col2-1">Column 1 - Item 1</label>
301
+ </li>
302
+ <li class="pa-checkbox-list__item">
303
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col2-2">
304
+ <label class="pa-checkbox-list__label" for="col2-2">Column 2 - Item 1</label>
305
+ </li>
306
+ <li class="pa-checkbox-list__item">
307
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col2-3">
308
+ <label class="pa-checkbox-list__label" for="col2-3">Column 1 - Item 2</label>
309
+ </li>
310
+ <li class="pa-checkbox-list__item">
311
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col2-4">
312
+ <label class="pa-checkbox-list__label" for="col2-4">Column 2 - Item 2</label>
313
+ </li>
314
+ </ul>
315
+
316
+ <!-- Three-Column Layout -->
317
+ <ul class="pa-checkbox-list pa-checkbox-list--3col">
318
+ <li class="pa-checkbox-list__item">
319
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col3-1">
320
+ <label class="pa-checkbox-list__label" for="col3-1">Col 1 - Item 1</label>
321
+ </li>
322
+ <li class="pa-checkbox-list__item">
323
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col3-2">
324
+ <label class="pa-checkbox-list__label" for="col3-2">Col 2 - Item 1</label>
325
+ </li>
326
+ <li class="pa-checkbox-list__item">
327
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col3-3">
328
+ <label class="pa-checkbox-list__label" for="col3-3">Col 3 - Item 1</label>
329
+ </li>
330
+ <li class="pa-checkbox-list__item">
331
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col3-4">
332
+ <label class="pa-checkbox-list__label" for="col3-4">Col 1 - Item 2</label>
333
+ </li>
334
+ <li class="pa-checkbox-list__item">
335
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col3-5">
336
+ <label class="pa-checkbox-list__label" for="col3-5">Col 2 - Item 2</label>
337
+ </li>
338
+ <li class="pa-checkbox-list__item">
339
+ <input type="checkbox" class="pa-checkbox-list__checkbox" id="col3-6">
340
+ <label class="pa-checkbox-list__label" for="col3-6">Col 3 - Item 2</label>
341
+ </li>
342
+ </ul>
343
+
344
+ <!-- Table with Checkboxes -->
345
+ <table class="pa-table pa-table--striped">
346
+ <thead>
347
+ <tr>
348
+ <th class="pa-table__checkbox-col">
349
+ <input type="checkbox" id="select-all">
350
+ </th>
351
+ <th>Name</th>
352
+ <th>Email</th>
353
+ <th>Status</th>
354
+ <th class="col-auto">Actions</th>
355
+ </tr>
356
+ </thead>
357
+ <tbody>
358
+ <tr>
359
+ <td class="pa-table__checkbox-col">
360
+ <input type="checkbox" class="row-checkbox">
361
+ </td>
362
+ <td>John Doe</td>
363
+ <td>john@example.com</td>
364
+ <td><span class="pa-badge pa-badge--success">Active</span></td>
365
+ <td class="col-auto">
366
+ <div class="pa-btn-group">
367
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--primary">👁️</button>
368
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary">✏️</button>
369
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger">🗑️</button>
370
+ </div>
371
+ </td>
372
+ </tr>
373
+ <tr class="pa-table__row--selected">
374
+ <td class="pa-table__checkbox-col">
375
+ <input type="checkbox" class="row-checkbox" checked>
376
+ </td>
377
+ <td>Jane Smith</td>
378
+ <td>jane@example.com</td>
379
+ <td><span class="pa-badge pa-badge--success">Active</span></td>
380
+ <td class="col-auto">
381
+ <div class="pa-btn-group">
382
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--primary">👁️</button>
383
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary">✏️</button>
384
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger">🗑️</button>
385
+ </div>
386
+ </td>
387
+ </tr>
388
+ <tr>
389
+ <td class="pa-table__checkbox-col">
390
+ <input type="checkbox" class="row-checkbox">
391
+ </td>
392
+ <td>Bob Johnson</td>
393
+ <td>bob@example.com</td>
394
+ <td><span class="pa-badge pa-badge--warning">Pending</span></td>
395
+ <td class="col-auto">
396
+ <div class="pa-btn-group">
397
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--primary">👁️</button>
398
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary">✏️</button>
399
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger">🗑️</button>
400
+ </div>
401
+ </td>
402
+ </tr>
403
+ <tr class="pa-table__row--selected">
404
+ <td class="pa-table__checkbox-col">
405
+ <input type="checkbox" class="row-checkbox" checked>
406
+ </td>
407
+ <td>Alice Williams</td>
408
+ <td>alice@example.com</td>
409
+ <td><span class="pa-badge pa-badge--success">Active</span></td>
410
+ <td class="col-auto">
411
+ <div class="pa-btn-group">
412
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--primary">👁️</button>
413
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary">✏️</button>
414
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger">🗑️</button>
415
+ </div>
416
+ </td>
417
+ </tr>
418
+ <tr>
419
+ <td class="pa-table__checkbox-col">
420
+ <input type="checkbox" class="row-checkbox">
421
+ </td>
422
+ <td>Charlie Brown</td>
423
+ <td>charlie@example.com</td>
424
+ <td><span class="pa-badge pa-badge--danger">Inactive</span></td>
425
+ <td class="col-auto">
426
+ <div class="pa-btn-group">
427
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--primary">👁️</button>
428
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--secondary">✏️</button>
429
+ <button class="pa-btn pa-btn--xs pa-btn--icon-only pa-btn--danger">🗑️</button>
430
+ </div>
431
+ </td>
432
+ </tr>
433
+ </tbody>
434
+ </table>
435
+
436
+ <!-- ========================================
437
+ Available Classes Reference
438
+ ======================================== -->
439
+
440
+ <!-- Custom Checkbox Component:
441
+ .pa-checkbox - Wrapper label for custom checkbox
442
+ .pa-checkbox__box - Visual checkbox replacement (hidden native input)
443
+ .pa-checkbox__label - Label text
444
+
445
+ Checkbox Size Modifiers:
446
+ .pa-checkbox--xs - Extra small checkbox
447
+ .pa-checkbox--sm - Small checkbox
448
+ (default) - Default size
449
+ .pa-checkbox--lg - Large checkbox
450
+ .pa-checkbox--xl - Extra large checkbox
451
+
452
+ Checkbox State Modifiers:
453
+ .pa-checkbox--x - Shows X mark instead of checkmark when checked
454
+ .pa-checkbox--disabled - Disabled styling (add disabled attribute to input)
455
+
456
+ Indeterminate State:
457
+ Set via JavaScript: checkbox.indeterminate = true
458
+ CSS :indeterminate pseudo-class handles styling (shows dash)
459
+ -->
460
+
461
+ <!-- Checkbox List Base Classes:
462
+ .pa-checkbox-list - Base checkbox list container
463
+ .pa-checkbox-list__item - Individual list item
464
+ .pa-checkbox-list__checkbox - Checkbox input (native style)
465
+ .pa-checkbox-list__label - Label text
466
+ .pa-checkbox-list__text - Text wrapper (use with custom checkbox)
467
+ .pa-checkbox-list__description - Optional description/metadata
468
+ .pa-checkbox-list__actions - Optional action buttons container
469
+ -->
470
+
471
+ <!-- List Modifiers:
472
+ .pa-checkbox-list--compact - Less padding
473
+ .pa-checkbox-list--bordered - Border around entire list
474
+ .pa-checkbox-list--striped - Alternating row colors
475
+ .pa-checkbox-list--inline - Horizontal wrapping layout
476
+ .pa-checkbox-list--grid - Grid layout (auto-fill)
477
+ .pa-checkbox-list--2col - Two-column layout
478
+ .pa-checkbox-list--3col - Three-column layout
479
+ -->
480
+
481
+ <!-- Item State Modifiers:
482
+ .pa-checkbox-list__item--selected - Selected state styling
483
+ .pa-checkbox-list__item--disabled - Disabled state styling (feature unavailable - 50% opacity, muted color)
484
+ .pa-checkbox-list__item--locked - Locked state styling (requires permission - 70% opacity, warning color, lock icon)
485
+ -->
486
+
487
+ <!-- Table Classes:
488
+ .pa-table__checkbox-col - Checkbox column (width: 1%, centered)
489
+ .pa-table__row--selected - Selected row styling
490
+ -->