@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/utilities.html ADDED
@@ -0,0 +1,595 @@
1
+ <!-- ================================
2
+ UTILITY CLASSES SNIPPETS
3
+ Pure Admin Visual Framework
4
+ ================================ -->
5
+
6
+ <!-- ================================
7
+ FONT SIZE UTILITIES
8
+ Apply to <html> element for proportional scaling of entire UI
9
+ ================================ -->
10
+
11
+ <!-- JavaScript Usage -->
12
+ <script>
13
+ // Apply font size to <html> element for proportional UI scaling
14
+ document.documentElement.classList.add('font-size-large');
15
+
16
+ // Store in localStorage
17
+ localStorage.setItem('font-size', 'large');
18
+
19
+ // Remove all font size classes
20
+ document.documentElement.classList.remove('font-size-small', 'font-size-default', 'font-size-large', 'font-size-xlarge');
21
+ </script>
22
+
23
+ <!-- Available Font Sizes -->
24
+ <!--
25
+ html.font-size-2xs → 10px (0.625rem)
26
+ html.font-size-xs → 12px (0.75rem)
27
+ html.font-size-small → 14px (0.875rem)
28
+ html.font-size-medium → 15px (0.9375rem)
29
+ html.font-size-default → 16px (1rem) - default browser size
30
+ html.font-size-large → 18px (1.125rem)
31
+ html.font-size-xlarge → 20px (1.25rem)
32
+ html.font-size-2xl → 24px (1.5rem)
33
+ html.font-size-3xl → 32px (2rem)
34
+ html.font-size-4xl → 40px (2.5rem)
35
+ -->
36
+
37
+ <!-- How It Works -->
38
+ <!--
39
+ All components use rem units, which are relative to the root font-size.
40
+ When you change the <html> font-size, ALL components scale proportionally:
41
+
42
+ Example:
43
+ - Button with font-size: 0.875rem
44
+ - At default (16px): 14px
45
+ - At large (18px): 15.75px
46
+ - At xlarge (20px): 17.5px
47
+
48
+ This scales buttons, inputs, cards, spacing - the entire UI!
49
+ -->
50
+
51
+
52
+ <!-- ================================
53
+ FONT FAMILY UTILITIES
54
+ ================================ -->
55
+
56
+ <!-- Serif Font -->
57
+ <div class="font-family-serif">
58
+ This text uses a serif font family.
59
+ </div>
60
+
61
+ <!-- Monospace Font -->
62
+ <div class="font-family-mono">
63
+ This text uses a monospace font family (for code).
64
+ </div>
65
+
66
+ <!-- Note: System font (default) and Sans font inherit from theme -->
67
+
68
+
69
+ <!-- ================================
70
+ COMPACT MODE
71
+ Apply to <body> element
72
+ ================================ -->
73
+
74
+ <script>
75
+ // Enable compact mode
76
+ document.body.classList.add('compact-mode');
77
+
78
+ // Store in localStorage
79
+ localStorage.setItem('compact-mode', 'true');
80
+ </script>
81
+
82
+ <!-- What Compact Mode Does -->
83
+ <!--
84
+ - Reduces card body padding
85
+ - Reduces table cell padding
86
+ - Reduces sidebar link padding
87
+ - Reduces form group margins
88
+ - Creates a denser, more data-focused UI
89
+ -->
90
+
91
+
92
+ <!-- ================================
93
+ SPACING UTILITIES (Margin & Padding)
94
+ Bootstrap/Tailwind-style spacing
95
+ ================================ -->
96
+
97
+ <!-- Margin Utilities -->
98
+ <div class="m-0">No margin</div>
99
+ <div class="m-1">Margin 0.25rem (4px)</div>
100
+ <div class="m-2">Margin 0.5rem (8px)</div>
101
+ <div class="m-3">Margin 0.75rem (12px)</div>
102
+ <div class="m-4">Margin 1rem (16px)</div>
103
+ <div class="m-5">Margin 1.25rem (20px)</div>
104
+ <div class="m-6">Margin 1.5rem (24px)</div>
105
+ <div class="m-8">Margin 2rem (32px)</div>
106
+ <div class="m-10">Margin 2.5rem (40px)</div>
107
+ <div class="m-12">Margin 3rem (48px)</div>
108
+ <div class="m-16">Margin 4rem (64px)</div>
109
+ <div class="m-20">Margin 5rem (80px)</div>
110
+
111
+ <!-- Directional Margins -->
112
+ <div class="mt-4">Margin top 1rem</div>
113
+ <div class="mr-4">Margin right 1rem</div>
114
+ <div class="mb-4">Margin bottom 1rem</div>
115
+ <div class="ml-4">Margin left 1rem</div>
116
+ <div class="mx-4">Margin left & right 1rem</div>
117
+ <div class="my-4">Margin top & bottom 1rem</div>
118
+
119
+ <!-- Auto Margin (Centering) -->
120
+ <div class="mx-auto" style="width: 500px;">Centered block</div>
121
+ <div class="ml-auto">Pushed to right</div>
122
+ <div class="mr-auto">Pushed to left</div>
123
+
124
+ <!-- Padding Utilities -->
125
+ <div class="p-0">No padding</div>
126
+ <div class="p-1">Padding 0.25rem (4px)</div>
127
+ <div class="p-2">Padding 0.5rem (8px)</div>
128
+ <div class="p-3">Padding 0.75rem (12px)</div>
129
+ <div class="p-4">Padding 1rem (16px)</div>
130
+ <div class="p-5">Padding 1.25rem (20px)</div>
131
+ <div class="p-6">Padding 1.5rem (24px)</div>
132
+ <div class="p-8">Padding 2rem (32px)</div>
133
+
134
+ <!-- Directional Padding -->
135
+ <div class="pt-4">Padding top 1rem</div>
136
+ <div class="pr-4">Padding right 1rem</div>
137
+ <div class="pb-4">Padding bottom 1rem</div>
138
+ <div class="pl-4">Padding left 1rem</div>
139
+ <div class="px-4">Padding left & right 1rem</div>
140
+ <div class="py-4">Padding top & bottom 1rem</div>
141
+
142
+
143
+ <!-- ================================
144
+ DISPLAY UTILITIES
145
+ ================================ -->
146
+
147
+ <div class="d-none">Hidden (display: none)</div>
148
+ <div class="d-inline">Inline</div>
149
+ <div class="d-inline-block">Inline block</div>
150
+ <div class="d-block">Block</div>
151
+ <div class="d-flex">Flex container</div>
152
+ <div class="d-inline-flex">Inline flex container</div>
153
+
154
+
155
+ <!-- ================================
156
+ FLEXBOX UTILITIES
157
+ ================================ -->
158
+
159
+ <!-- Flex Direction -->
160
+ <div class="d-flex flex-row">Flex row (horizontal)</div>
161
+ <div class="d-flex flex-column">Flex column (vertical)</div>
162
+
163
+ <!-- Flex Wrap -->
164
+ <div class="d-flex flex-wrap">Flex with wrapping</div>
165
+ <div class="d-flex flex-nowrap">Flex no wrap</div>
166
+
167
+ <!-- Justify Content -->
168
+ <div class="d-flex justify-content-start">Start</div>
169
+ <div class="d-flex justify-content-end">End</div>
170
+ <div class="d-flex justify-content-center">Center</div>
171
+ <div class="d-flex justify-content-between">Space between</div>
172
+ <div class="d-flex justify-content-around">Space around</div>
173
+
174
+ <!-- Align Items -->
175
+ <div class="d-flex align-items-start">Align start</div>
176
+ <div class="d-flex align-items-end">Align end</div>
177
+ <div class="d-flex align-items-center">Align center</div>
178
+ <div class="d-flex align-items-baseline">Align baseline</div>
179
+ <div class="d-flex align-items-stretch">Align stretch</div>
180
+
181
+ <!-- Flex Grow/Shrink -->
182
+ <div class="d-flex">
183
+ <div class="flex-fill">Fill available space</div>
184
+ <div class="flex-grow-1">Grow</div>
185
+ <div class="flex-grow-0">Don't grow</div>
186
+ <div class="flex-shrink-1">Shrink</div>
187
+ <div class="flex-shrink-0">Don't shrink</div>
188
+ </div>
189
+
190
+
191
+ <!-- ================================
192
+ TEXT UTILITIES
193
+ ================================ -->
194
+
195
+ <div class="text-left">Left aligned text</div>
196
+ <div class="text-center">Center aligned text</div>
197
+ <div class="text-right">Right aligned text</div>
198
+ <div class="text-nowrap">Text that doesn't wrap</div>
199
+ <div class="text-truncate" style="width: 200px;">This long text will be truncated with ellipsis...</div>
200
+
201
+
202
+ <!-- ================================
203
+ WIDTH & HEIGHT UTILITIES
204
+ ================================ -->
205
+
206
+ <!-- Width (Percentage-based) -->
207
+ <div class="w-25">Width 25%</div>
208
+ <div class="w-50">Width 50%</div>
209
+ <div class="w-75">Width 75%</div>
210
+ <div class="w-100">Width 100%</div>
211
+ <div class="w-auto">Width auto</div>
212
+
213
+ <!-- Height (Percentage-based) -->
214
+ <div class="h-25">Height 25%</div>
215
+ <div class="h-50">Height 50%</div>
216
+ <div class="h-75">Height 75%</div>
217
+ <div class="h-100">Height 100%</div>
218
+ <div class="h-auto">Height auto</div>
219
+
220
+
221
+ <!-- ================================
222
+ MIN-HEIGHT UTILITIES (rem-based)
223
+ Content can grow taller than minimum
224
+ ================================ -->
225
+
226
+ <div class="min-h-2x">Min-height 2rem (32px)</div>
227
+ <div class="min-h-3x">Min-height 3rem (48px)</div>
228
+ <div class="min-h-5x">Min-height 5rem (80px)</div>
229
+ <div class="min-h-8x">Min-height 8rem (128px)</div>
230
+ <div class="min-h-10x">Min-height 10rem (160px)</div>
231
+ <div class="min-h-12x">Min-height 12rem (192px)</div>
232
+ <div class="min-h-15x">Min-height 15rem (240px)</div>
233
+ <div class="min-h-20x">Min-height 20rem (320px)</div>
234
+ <div class="min-h-25x">Min-height 25rem (400px)</div>
235
+ <div class="min-h-30x">Min-height 30rem (480px)</div>
236
+
237
+ <!-- Example: Minimum height for popconfirm trigger area -->
238
+ <div class="min-h-12x">
239
+ <div class="pa-btn-group">
240
+ <button class="pa-btn pa-btn--primary">Button 1</button>
241
+ <button class="pa-btn pa-btn--secondary">Button 2</button>
242
+ </div>
243
+ </div>
244
+
245
+
246
+ <!-- ================================
247
+ FIXED HEIGHT UTILITIES (rem-based)
248
+ Use with overflow utilities for scrollable containers
249
+ ================================ -->
250
+
251
+ <div class="h-2x">Height 2rem (32px)</div>
252
+ <div class="h-3x">Height 3rem (48px)</div>
253
+ <div class="h-5x">Height 5rem (80px)</div>
254
+ <div class="h-8x">Height 8rem (128px)</div>
255
+ <div class="h-10x">Height 10rem (160px)</div>
256
+ <div class="h-12x">Height 12rem (192px)</div>
257
+ <div class="h-15x">Height 15rem (240px)</div>
258
+ <div class="h-20x">Height 20rem (320px)</div>
259
+ <div class="h-25x">Height 25rem (400px)</div>
260
+ <div class="h-30x">Height 30rem (480px)</div>
261
+ <div class="h-40x">Height 40rem (640px)</div>
262
+ <div class="h-50x">Height 50rem (800px)</div>
263
+
264
+ <!-- Example: Fixed-height scrollable card body -->
265
+ <div class="pa-card">
266
+ <div class="pa-card__header">
267
+ <h3>Activity Feed</h3>
268
+ </div>
269
+ <div class="pa-card__body h-20x overflow-y-auto">
270
+ <p>Item 1</p>
271
+ <p>Item 2</p>
272
+ <p>Item 3</p>
273
+ <!-- ... many items that will scroll ... -->
274
+ </div>
275
+ </div>
276
+
277
+
278
+ <!-- ================================
279
+ MAX-HEIGHT UTILITIES (rem-based)
280
+ Content limited to max height, then scrolls
281
+ ================================ -->
282
+
283
+ <div class="max-h-5x">Max-height 5rem (80px)</div>
284
+ <div class="max-h-8x">Max-height 8rem (128px)</div>
285
+ <div class="max-h-10x">Max-height 10rem (160px)</div>
286
+ <div class="max-h-12x">Max-height 12rem (192px)</div>
287
+ <div class="max-h-15x">Max-height 15rem (240px)</div>
288
+ <div class="max-h-20x">Max-height 20rem (320px)</div>
289
+ <div class="max-h-25x">Max-height 25rem (400px)</div>
290
+ <div class="max-h-30x">Max-height 30rem (480px)</div>
291
+ <div class="max-h-40x">Max-height 40rem (640px)</div>
292
+ <div class="max-h-50x">Max-height 50rem (800px)</div>
293
+
294
+ <!-- Example: Card that grows up to max-height, then scrolls -->
295
+ <div class="pa-card">
296
+ <div class="pa-card__header">
297
+ <h3>Recent Items</h3>
298
+ </div>
299
+ <div class="pa-card__body max-h-15x overflow-y-auto">
300
+ <p>Item 1</p>
301
+ <p>Item 2</p>
302
+ <!-- Content grows until 15rem, then scrolls -->
303
+ </div>
304
+ </div>
305
+
306
+
307
+ <!-- ================================
308
+ OVERFLOW UTILITIES
309
+ Control scrolling behavior
310
+ ================================ -->
311
+
312
+ <div class="overflow-auto">Show scrollbar when content overflows (both directions)</div>
313
+ <div class="overflow-y-auto">Show vertical scrollbar when content overflows</div>
314
+ <div class="overflow-x-auto">Show horizontal scrollbar when content overflows</div>
315
+ <div class="overflow-hidden">Hide overflowing content (no scrollbar)</div>
316
+ <div class="overflow-visible">Show overflowing content outside container</div>
317
+
318
+ <!-- Example: Horizontal scrolling table -->
319
+ <div class="overflow-x-auto">
320
+ <table class="pa-table">
321
+ <thead>
322
+ <tr>
323
+ <th>Column 1</th>
324
+ <th>Column 2</th>
325
+ <!-- ... many columns ... -->
326
+ </tr>
327
+ </thead>
328
+ <tbody>
329
+ <!-- table content -->
330
+ </tbody>
331
+ </table>
332
+ </div>
333
+
334
+
335
+ <!-- ================================
336
+ HEIGHT + OVERFLOW EXAMPLES
337
+ Common use cases
338
+ ================================ -->
339
+
340
+ <!-- Example 1: Fixed-height scrollable sidebar -->
341
+ <div class="pa-card">
342
+ <div class="pa-card__header">
343
+ <h3>Navigation</h3>
344
+ </div>
345
+ <div class="pa-card__body h-30x overflow-y-auto p-0">
346
+ <ul class="pa-list">
347
+ <li class="pa-list__item">Item 1</li>
348
+ <li class="pa-list__item">Item 2</li>
349
+ <!-- ... many items ... -->
350
+ </ul>
351
+ </div>
352
+ </div>
353
+
354
+ <!-- Example 2: Chat message container (grows to max, then scrolls) -->
355
+ <div class="pa-card">
356
+ <div class="pa-card__header">
357
+ <h3>Messages</h3>
358
+ </div>
359
+ <div class="pa-card__body max-h-25x overflow-y-auto">
360
+ <div class="mb-2">Message 1</div>
361
+ <div class="mb-2">Message 2</div>
362
+ <!-- Messages grow until 25rem, then scroll -->
363
+ </div>
364
+ <div class="pa-card__footer">
365
+ <input type="text" class="pa-input" placeholder="Type a message...">
366
+ </div>
367
+ </div>
368
+
369
+ <!-- Example 3: Code block with horizontal scroll -->
370
+ <div class="pa-card">
371
+ <div class="pa-card__header">
372
+ <h3>Code Example</h3>
373
+ </div>
374
+ <div class="pa-card__body p-0">
375
+ <pre class="max-h-20x overflow-auto p-4 m-0"><code>const example = "very long line of code that extends beyond the container width and needs horizontal scrolling";</code></pre>
376
+ </div>
377
+ </div>
378
+
379
+ <!-- Example 4: Data table with fixed height and vertical scroll -->
380
+ <div class="pa-card">
381
+ <div class="pa-card__header">
382
+ <h3>User List</h3>
383
+ </div>
384
+ <div class="pa-card__body pa-card__body--no-padding h-25x overflow-y-auto">
385
+ <table class="pa-table pa-table--striped">
386
+ <thead>
387
+ <tr>
388
+ <th>Name</th>
389
+ <th>Email</th>
390
+ <th>Status</th>
391
+ </tr>
392
+ </thead>
393
+ <tbody>
394
+ <tr><td>John Doe</td><td>john@example.com</td><td>Active</td></tr>
395
+ <tr><td>Jane Smith</td><td>jane@example.com</td><td>Active</td></tr>
396
+ <!-- ... many rows that will scroll ... -->
397
+ </tbody>
398
+ </table>
399
+ </div>
400
+ </div>
401
+
402
+
403
+ <!-- ================================
404
+ POSITION UTILITIES
405
+ ================================ -->
406
+
407
+ <div class="position-static">Static</div>
408
+ <div class="position-relative">Relative</div>
409
+ <div class="position-absolute">Absolute</div>
410
+ <div class="position-fixed">Fixed</div>
411
+ <div class="position-sticky">Sticky</div>
412
+
413
+
414
+ <!-- ================================
415
+ BORDER UTILITIES
416
+ ================================ -->
417
+
418
+ <!-- Border -->
419
+ <div class="border">Border on all sides</div>
420
+ <div class="border-top">Border top</div>
421
+ <div class="border-right">Border right</div>
422
+ <div class="border-bottom">Border bottom</div>
423
+ <div class="border-left">Border left</div>
424
+
425
+ <!-- Remove Border -->
426
+ <div class="border-0">No border</div>
427
+ <div class="border-top-0">No border top</div>
428
+ <div class="border-right-0">No border right</div>
429
+ <div class="border-bottom-0">No border bottom</div>
430
+ <div class="border-left-0">No border left</div>
431
+
432
+
433
+ <!-- ================================
434
+ ROUNDED UTILITIES
435
+ ================================ -->
436
+
437
+ <div class="rounded">Rounded corners</div>
438
+ <div class="rounded-lg">Large rounded corners</div>
439
+ <div class="rounded-circle">Circle (50% radius)</div>
440
+ <div class="rounded-0">No rounded corners</div>
441
+
442
+ <!-- Directional Rounded -->
443
+ <div class="rounded-top">Rounded top corners</div>
444
+ <div class="rounded-bottom">Rounded bottom corners</div>
445
+ <div class="rounded-left">Rounded left corners</div>
446
+ <div class="rounded-right">Rounded right corners</div>
447
+
448
+
449
+ <!-- ================================
450
+ SHADOW UTILITIES
451
+ ================================ -->
452
+
453
+ <div class="shadow-none">No shadow</div>
454
+ <div class="shadow-sm">Small shadow</div>
455
+ <div class="shadow">Default shadow</div>
456
+ <div class="shadow-lg">Large shadow</div>
457
+
458
+
459
+ <!-- ================================
460
+ USAGE EXAMPLES
461
+ ================================ -->
462
+
463
+ <!-- Example: Card with Utilities -->
464
+ <div class="pa-card mb-4">
465
+ <div class="pa-card__header">
466
+ <h3 class="m-0">Card with Utilities</h3>
467
+ </div>
468
+ <div class="pa-card__body">
469
+ <div class="d-flex align-items-center justify-content-between mb-3">
470
+ <span>Item 1</span>
471
+ <button class="pa-btn pa-btn--primary pa-btn--sm">Action</button>
472
+ </div>
473
+ <div class="d-flex align-items-center justify-content-between">
474
+ <span>Item 2</span>
475
+ <button class="pa-btn pa-btn--primary pa-btn--sm">Action</button>
476
+ </div>
477
+ </div>
478
+ <div class="pa-card__footer">
479
+ <div class="d-flex justify-content-end">
480
+ <button class="pa-btn pa-btn--secondary mr-2">Cancel</button>
481
+ <button class="pa-btn pa-btn--primary">Save</button>
482
+ </div>
483
+ </div>
484
+ </div>
485
+
486
+ <!-- Example: Centered Content -->
487
+ <div class="text-center py-8">
488
+ <h2 class="mb-3">Welcome</h2>
489
+ <p class="mb-4">Get started by creating your first project.</p>
490
+ <button class="pa-btn pa-btn--primary pa-btn--lg">Get Started</button>
491
+ </div>
492
+
493
+ <!-- Example: Horizontal Form with Utilities -->
494
+ <form class="mb-4">
495
+ <div class="d-flex align-items-center mb-3">
496
+ <label class="mr-3" style="width: 100px;">Username</label>
497
+ <input type="text" class="pa-input flex-fill" placeholder="Enter username">
498
+ </div>
499
+ <div class="d-flex align-items-center mb-3">
500
+ <label class="mr-3" style="width: 100px;">Email</label>
501
+ <input type="email" class="pa-input flex-fill" placeholder="Enter email">
502
+ </div>
503
+ <div class="d-flex justify-content-end">
504
+ <button type="submit" class="pa-btn pa-btn--primary">Submit</button>
505
+ </div>
506
+ </form>
507
+
508
+ <!-- Example: Spacing Between Cards -->
509
+ <div class="pure-g">
510
+ <div class="pure-u-1 pure-u-md-1-2 px-2 mb-4">
511
+ <div class="pa-card">
512
+ <div class="pa-card__body">Card 1</div>
513
+ </div>
514
+ </div>
515
+ <div class="pure-u-1 pure-u-md-1-2 px-2 mb-4">
516
+ <div class="pa-card">
517
+ <div class="pa-card__body">Card 2</div>
518
+ </div>
519
+ </div>
520
+ </div>
521
+
522
+
523
+ <!-- ================================
524
+ UTILITY CLASSES REFERENCE
525
+ ================================ -->
526
+
527
+ <!--
528
+ FONT SIZE (apply to <html>):
529
+ - font-size-2xs, font-size-xs, font-size-small
530
+ - font-size-medium, font-size-default
531
+ - font-size-large, font-size-xlarge
532
+ - font-size-2xl, font-size-3xl, font-size-4xl
533
+
534
+ FONT FAMILY:
535
+ - font-family-serif
536
+ - font-family-mono
537
+
538
+ COMPACT MODE (apply to <body>):
539
+ - compact-mode
540
+
541
+ SPACING (0-20):
542
+ Margin: m-, mt-, mr-, mb-, ml-, mx-, my-
543
+ Padding: p-, pt-, pr-, pb-, pl-, px-, py-
544
+ Auto: m-auto, mt-auto, mr-auto, mb-auto, ml-auto, mx-auto, my-auto
545
+
546
+ DISPLAY:
547
+ - d-none, d-inline, d-inline-block, d-block
548
+ - d-flex, d-inline-flex
549
+
550
+ FLEXBOX:
551
+ Direction: flex-row, flex-column
552
+ Wrap: flex-wrap, flex-nowrap
553
+ Justify: justify-content-start/end/center/between/around
554
+ Align: align-items-start/end/center/baseline/stretch
555
+ Grow/Shrink: flex-fill, flex-grow-0/1, flex-shrink-0/1
556
+
557
+ TEXT:
558
+ - text-left, text-center, text-right
559
+ - text-nowrap, text-truncate
560
+
561
+ WIDTH/HEIGHT (percentage-based):
562
+ - w-25, w-50, w-75, w-100, w-auto
563
+ - h-25, h-50, h-75, h-100, h-auto
564
+
565
+ MIN-HEIGHT (rem-based):
566
+ - min-h-2x, min-h-3x, min-h-5x, min-h-8x, min-h-10x
567
+ - min-h-12x, min-h-15x, min-h-20x, min-h-25x, min-h-30x
568
+
569
+ FIXED HEIGHT (rem-based):
570
+ - h-2x, h-3x, h-5x, h-8x, h-10x, h-12x, h-15x
571
+ - h-20x, h-25x, h-30x, h-40x, h-50x
572
+
573
+ MAX-HEIGHT (rem-based):
574
+ - max-h-5x, max-h-8x, max-h-10x, max-h-12x, max-h-15x
575
+ - max-h-20x, max-h-25x, max-h-30x, max-h-40x, max-h-50x
576
+
577
+ OVERFLOW:
578
+ - overflow-auto, overflow-y-auto, overflow-x-auto
579
+ - overflow-hidden, overflow-visible
580
+
581
+ POSITION:
582
+ - position-static, position-relative
583
+ - position-absolute, position-fixed, position-sticky
584
+
585
+ BORDER:
586
+ - border, border-top, border-right, border-bottom, border-left
587
+ - border-0, border-top-0, border-right-0, border-bottom-0, border-left-0
588
+
589
+ ROUNDED:
590
+ - rounded, rounded-lg, rounded-circle, rounded-0
591
+ - rounded-top, rounded-bottom, rounded-left, rounded-right
592
+
593
+ SHADOW:
594
+ - shadow-none, shadow-sm, shadow, shadow-lg
595
+ -->