@keenmate/pure-admin-core 2.3.6 → 2.5.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 (47) hide show
  1. package/README.md +23 -29
  2. package/dist/css/main.css +68 -148
  3. package/package.json +1 -5
  4. package/snippets/AUDIT.md +94 -0
  5. package/snippets/alerts.html +264 -89
  6. package/snippets/badges.html +193 -61
  7. package/snippets/buttons.html +178 -0
  8. package/snippets/callouts.html +210 -129
  9. package/snippets/cards.html +383 -200
  10. package/snippets/checkbox-lists.html +199 -65
  11. package/snippets/code.html +55 -11
  12. package/snippets/command-palette.html +401 -111
  13. package/snippets/comparison.html +144 -93
  14. package/snippets/customization.html +311 -104
  15. package/snippets/data-display.html +584 -0
  16. package/snippets/detail-panel.html +470 -138
  17. package/snippets/filter-card.html +246 -0
  18. package/snippets/forms.html +408 -308
  19. package/snippets/grid.html +253 -141
  20. package/snippets/layout.html +379 -480
  21. package/snippets/lists.html +144 -47
  22. package/snippets/loaders.html +64 -39
  23. package/snippets/manifest.json +330 -280
  24. package/snippets/modal-dialogs.html +137 -64
  25. package/snippets/modals.html +221 -151
  26. package/snippets/notifications.html +285 -0
  27. package/snippets/popconfirm.html +213 -19
  28. package/snippets/profile.html +290 -330
  29. package/snippets/statistics.html +247 -0
  30. package/snippets/tables.html +359 -150
  31. package/snippets/tabs.html +129 -45
  32. package/snippets/timeline.html +123 -56
  33. package/snippets/toasts.html +179 -31
  34. package/snippets/tooltips.html +199 -81
  35. package/snippets/typography.html +183 -58
  36. package/snippets/utilities.html +511 -415
  37. package/snippets/virtual-scroll.html +201 -75
  38. package/snippets/web-daterangepicker.html +369 -189
  39. package/snippets/web-multiselect.html +360 -124
  40. package/src/scss/core-components/_alerts.scss +51 -12
  41. package/src/scss/core-components/_pagers.scss +1 -1
  42. package/src/scss/core-components/_popconfirm.scss +35 -13
  43. package/src/scss/core-components/_profile.scss +18 -8
  44. package/src/scss/core-components/_statistics.scss +12 -12
  45. package/src/scss/core-components/_tables.scss +2 -134
  46. package/src/scss/variables/_components.scss +17 -2
  47. package/scripts/download-themes.js +0 -351
package/snippets/utilities.html CHANGED
@@ -1,466 +1,470 @@
1
1
  <!-- ================================
2
2
  UTILITY CLASSES SNIPPETS
3
3
  Pure Admin Visual Framework
4
+
5
+ The framework ships two SCSS files of utilities:
6
+ - src/scss/utilities.scss (global spacing/sizing/display)
7
+ - src/scss/core-components/_utilities.scss (components-adjacent helpers)
8
+
9
+ Values below are sourced from both.
4
10
  ================================ -->
5
11
 
12
+
6
13
  <!-- ================================
7
- FONT SIZE UTILITIES
8
- Apply to <html> element for proportional scaling of entire UI
14
+ FONT SIZE (on <html>)
15
+ Applying these to the <html> element rescales every rem-based
16
+ style in the framework. Four fixed sizes plus a responsive family.
9
17
  ================================ -->
10
18
 
11
- <!-- JavaScript Usage -->
19
+ <!-- Fixed html font-size classes (rescale the whole UI proportionally) -->
20
+ <!--
21
+ html.font-size-small → 9px (all rem values × 0.9)
22
+ html.font-size-default → 10px (default — same as html base)
23
+ html.font-size-large → 11px (all rem values × 1.1)
24
+ html.font-size-xlarge → 12px (all rem values × 1.2)
25
+
26
+ Body text scales from 16px (default) to 14.4 / 17.6 / 19.2px.
27
+ -->
12
28
  <script>
13
- // Apply font size to <html> element for proportional UI scaling
29
+ // Toggle the UI size
30
+ document.documentElement.classList.remove('font-size-small', 'font-size-default', 'font-size-large', 'font-size-xlarge');
14
31
  document.documentElement.classList.add('font-size-large');
15
-
16
- // Store in localStorage
17
32
  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
33
  </script>
22
34
 
23
- <!-- Available Font Sizes -->
35
+ <!-- Responsive font-size classes -->
24
36
  <!--
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
- -->
37
+ Authoring pattern: set one base class (desktop) and optionally a
38
+ mobile class. At/below $mobile-breakpoint (768px), the mobile class
39
+ takes over.
36
40
 
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
+ html.pa-font-base-{9|10|11|12} desktop base (9..12 px)
42
+ html.pa-font-mobile-{9|10|11|12} mobile base (media query wraps these)
43
+ html.pa-font-responsive shorthand: 10px desktop, 12px mobile
41
44
 
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!
45
+ Example: <html class="pa-font-base-10 pa-font-mobile-12">
49
46
  -->
50
47
 
51
48
 
52
49
  <!-- ================================
53
- FONT FAMILY UTILITIES
50
+ FONT FAMILY
51
+ Font family overrides for switching away from the theme default.
52
+ font-family-system / -sans come from _fonts.scss (see typography.html).
54
53
  ================================ -->
55
54
 
56
- <!-- Serif Font -->
57
- <div class="font-family-serif">
58
- This text uses a serif font family.
59
- </div>
55
+ <div class="font-family-serif">Serif text stack</div>
56
+ <div class="font-family-mono">Monospace text stack (same as &lt;code&gt;)</div>
60
57
 
61
- <!-- Monospace Font -->
62
- <div class="font-family-mono">
63
- This text uses a monospace font family (for code).
64
- </div>
65
58
 
66
- <!-- Note: System font (default) and Sans font inherit from theme -->
59
+ <!-- ================================
60
+ TEXT SIZE
61
+ Direct font-size classes — each reads off a $font-size-* variable
62
+ and resolves against the 10px rem base, so classes are consistent
63
+ with the .pa-text scale.
64
+ ================================ -->
65
+
66
+ <span class="text-2xs">10px</span>
67
+ <span class="text-xs">12px</span>
68
+ <span class="text-sm">14px (default body text)</span>
69
+ <span class="text-md">15px</span>
70
+ <span class="text-base">16px</span>
71
+ <span class="text-lg">18px</span>
72
+ <span class="text-xl">20px</span>
73
+ <span class="text-2xl">24px</span>
74
+ <span class="text-3xl">28px</span>
75
+ <span class="text-4xl">32px</span>
67
76
 
68
77
 
69
78
  <!-- ================================
70
- COMPACT MODE
71
- Apply to <body> element
79
+ TEXT COLOUR
80
+ Semantic colour utilities (use with !important — win over
81
+ component-scoped rules). For sizing + colour together, use
82
+ .pa-text--primary / --secondary (see typography.html).
72
83
  ================================ -->
73
84
 
74
- <script>
75
- // Enable compact mode
76
- document.body.classList.add('compact-mode');
85
+ <span class="text-primary">Accent / primary</span>
86
+ <span class="text-success">Success (green)</span>
87
+ <span class="text-danger">Danger (red)</span>
88
+ <span class="text-warning">Warning (yellow/orange)</span>
89
+ <span class="text-info">Info (cyan/blue)</span>
77
90
 
78
- // Store in localStorage
79
- localStorage.setItem('compact-mode', 'true');
80
- </script>
91
+ <!-- Theme palette slots -->
92
+ <span class="text-color-1">Slot 1</span>
93
+ <span class="text-color-2">Slot 2</span>
94
+ <!-- Pattern: text-color-{1..9} -->
81
95
 
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
- -->
96
+
97
+ <!-- ================================
98
+ TEXT ALIGNMENT / WRAP
99
+ ================================ -->
100
+
101
+ <div class="text-start">Start-aligned (left in LTR, right in RTL — logical)</div>
102
+ <div class="text-center">Center-aligned</div>
103
+ <div class="text-end">End-aligned (right in LTR, left in RTL — logical)</div>
104
+ <div class="text-nowrap">Won't wrap, even in narrow containers.</div>
105
+ <div class="text-truncate" style="width: 200px;">A long line that will be clipped with an ellipsis…</div>
90
106
 
91
107
 
92
108
  <!-- ================================
93
- SPACING UTILITIES (Margin & Padding)
94
- Bootstrap/Tailwind-style spacing
109
+ SPACING — MARGIN & PADDING
110
+ Two scales:
111
+ Numeric (0-20) $spacers: 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20
112
+ Semantic $semantic-spacers: xs, sm, md, base, lg, xl, 2xl, 3xl
113
+ Each gives m/mt/mr/mb/ml/mx/my and p/pt/pr/pb/pl/px/py variants.
114
+
115
+ For RTL-aware spacing, prefer the logical versions:
116
+ ms-{name} margin-inline-start (left in LTR, right in RTL)
117
+ me-{name} margin-inline-end (right in LTR, left in RTL)
118
+ ps-{name} padding-inline-start
119
+ pe-{name} padding-inline-end
95
120
  ================================ -->
96
121
 
97
- <!-- Margin Utilities -->
122
+ <!-- Numeric scale (0.25rem step from 1→6, then 2x jumps to 20) -->
98
123
  <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>
124
+ <div class="m-1">4px margin</div>
125
+ <div class="m-4">16px margin</div>
126
+ <div class="m-8">32px margin</div>
127
+ <div class="m-20">80px margin (largest)</div>
128
+
129
+ <!-- Directional + axis -->
130
+ <div class="mt-4">margin-top 16px</div>
131
+ <div class="mb-4">margin-bottom 16px</div>
132
+ <div class="mx-4">margin-left/right 16px</div>
133
+ <div class="my-4">margin-top/bottom 16px</div>
134
+
135
+ <!-- Auto margins for centering + pushing -->
136
+ <div class="mx-auto" style="width: 20rem;">Horizontally centred block</div>
137
+ <div class="ms-auto">Pushed to the reading-end side (right in LTR)</div>
138
+
139
+ <!-- Padding follows the same shape -->
140
+ <div class="p-4">16px padding on all sides</div>
141
+ <div class="px-8 py-4">32px horizontal, 16px vertical</div>
142
+
143
+ <!-- Logical spacing (RTL-aware — recommended for new code) -->
144
+ <div class="ms-base">margin-inline-start: $spacing-base</div>
145
+ <div class="me-md">margin-inline-end: $spacing-md</div>
146
+ <div class="ps-lg">padding-inline-start: $spacing-lg</div>
147
+ <div class="pe-sm">padding-inline-end: $spacing-sm</div>
148
+ <div class="ms-auto">margin-inline-start: auto (pushes to end)</div>
149
+
150
+ <!-- Semantic spacing (same shape, semantic names) -->
151
+ <div class="m-xs">Semantic xs</div>
152
+ <div class="m-sm">Semantic sm</div>
153
+ <div class="m-md">Semantic md</div>
154
+ <div class="m-base">Semantic base</div>
155
+ <div class="m-lg">Semantic lg</div>
156
+ <div class="m-xl">Semantic xl</div>
141
157
 
142
158
 
143
159
  <!-- ================================
144
- DISPLAY UTILITIES
160
+ GAP (for flex / grid children)
161
+ Semantic names and numeric values (in 10px rem units).
162
+ ================================ -->
163
+
164
+ <div class="d-flex gap-sm">Flex with semantic small gap</div>
165
+ <div class="d-flex gap-base">Flex with base gap</div>
166
+ <div class="d-flex gap-lg">Flex with large gap</div>
167
+
168
+ <!-- Numeric 0.1rem-step gaps (1px per unit) -->
169
+ <div class="d-flex gap-4">4px gap</div>
170
+ <div class="d-flex gap-8">8px gap</div>
171
+ <div class="d-flex gap-20">20px gap</div>
172
+ <!-- Available numeric: 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20 -->
173
+
174
+ <!-- Row / column separate -->
175
+ <div class="d-flex flex-wrap row-gap-md column-gap-lg">Different vertical / horizontal gap</div>
176
+
177
+
178
+ <!-- ================================
179
+ DISPLAY
145
180
  ================================ -->
146
181
 
147
182
  <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>
183
+ <div class="d-inline">inline</div>
184
+ <div class="d-inline-block">inline-block</div>
185
+ <div class="d-block">block</div>
186
+ <div class="d-flex">flex</div>
187
+ <div class="d-inline-flex">inline-flex</div>
153
188
 
154
189
 
155
190
  <!-- ================================
156
- FLEXBOX UTILITIES
191
+ FLEXBOX
157
192
  ================================ -->
158
193
 
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 -->
194
+ <!-- Direction -->
195
+ <div class="d-flex flex-row">flex-direction: row</div>
196
+ <div class="d-flex flex-column">flex-direction: column</div>
197
+
198
+ <!-- Wrap -->
199
+ <div class="d-flex flex-wrap">Allow wrapping</div>
200
+ <div class="d-flex flex-nowrap">No wrap (may overflow)</div>
201
+
202
+ <!-- Justify content -->
203
+ <div class="d-flex justify-content-start">start</div>
204
+ <div class="d-flex justify-content-center">center</div>
205
+ <div class="d-flex justify-content-end">end</div>
206
+ <div class="d-flex justify-content-between">space-between</div>
207
+ <div class="d-flex justify-content-around">space-around</div>
208
+
209
+ <!-- Align items -->
210
+ <div class="d-flex align-items-start">start</div>
211
+ <div class="d-flex align-items-center">center</div>
212
+ <div class="d-flex align-items-end">end</div>
213
+ <div class="d-flex align-items-baseline">baseline</div>
214
+ <div class="d-flex align-items-stretch">stretch</div>
215
+
216
+ <!-- Align-self (on a flex child) -->
182
217
  <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>
218
+ <div>Default</div>
219
+ <div class="self-start">align-self: flex-start</div>
220
+ <div class="self-center">align-self: center</div>
221
+ <div class="self-end">align-self: flex-end</div>
222
+ <div class="self-stretch">align-self: stretch</div>
223
+ <div class="self-baseline">align-self: baseline</div>
224
+ </div>
225
+
226
+ <!-- Grow / shrink (two style families exist — see reference) -->
227
+ <div class="d-flex">
228
+ <div class="flex-fill">flex: 1 1 auto (fill available space)</div>
229
+ <div class="flex-grow-1">flex-grow: 1</div>
230
+ <div class="flex-shrink-0">flex-shrink: 0 (don't shrink)</div>
231
+ </div>
232
+
233
+ <!-- Enhanced flex shortcuts (core-components/_utilities.scss) -->
234
+ <div class="d-flex">
235
+ <div class="flex-1">flex: 1 1 0% (equal share, ignores content)</div>
236
+ <div class="flex-auto">flex: 1 1 auto (grow + shrink, respects content)</div>
237
+ <div class="flex-none">flex: none</div>
238
+ <div class="flex-initial">flex: 0 1 auto (default)</div>
188
239
  </div>
189
240
 
190
241
 
191
242
  <!-- ================================
192
- TEXT UTILITIES
243
+ WIDTH & HEIGHT
244
+ Three complementary scales:
245
+ Percentage w-*, h-*, minw-*, maxw-*, minh-*, maxh-*
246
+ Fractions w-1-2, w-1-3, w-2-3, w-1-4, w-3-4 (+ min/max variants)
247
+ Rem-based wr-*, minwr-*, maxwr-*, hr-*, minhr-*, maxhr-*
248
+ Use the 'r' suffix for rem to distinguish from %.
193
249
  ================================ -->
194
250
 
195
- <div class="text-start">Start aligned text</div>
196
- <div class="text-center">Center aligned text</div>
197
- <div class="text-end">End 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>
251
+ <!-- Percentage width (5% steps from 5 to 100, plus auto) -->
252
+ <div class="w-25">25%</div>
253
+ <div class="w-50">50%</div>
254
+ <div class="w-75">75%</div>
255
+ <div class="w-100">100%</div>
256
+ <div class="w-auto">auto</div>
257
+
258
+ <!-- Width fractions (match grid naming) -->
259
+ <div class="w-1-2">1/2</div>
260
+ <div class="w-1-3">1/3</div>
261
+ <div class="w-2-3">2/3</div>
262
+ <div class="w-1-4">1/4</div>
263
+ <div class="w-3-4">3/4</div>
264
+
265
+ <!-- Fixed width (width + min-width locked together — content can't shrink it) -->
266
+ <div class="w-50-fixed">Locked 50% — doesn't collapse</div>
267
+ <div class="w-1-3-fixed">Locked 1/3</div>
268
+
269
+ <!-- Percentage height -->
270
+ <div class="h-25">25%</div>
271
+ <div class="h-50">50%</div>
272
+ <div class="h-100">100%</div>
273
+
274
+ <!-- Full/screen height helpers (from core-components/_utilities.scss) -->
275
+ <div class="h-full">height: 100% (same as h-100)</div>
276
+ <div class="h-screen">height: 100vh</div>
277
+ <div class="min-h-full">min-height: 100%</div>
278
+ <div class="min-h-screen">min-height: 100vh</div>
279
+ <div class="max-h-full">max-height: 100%</div>
280
+ <div class="max-h-screen">max-height: 100vh</div>
281
+
282
+ <!-- Percentage min/max width (5% steps from 5 to 100) -->
283
+ <div class="minw-50">min-width 50%</div>
284
+ <div class="maxw-75">max-width 75%</div>
285
+ <!-- Fractions: minw-1-3, minw-2-3, maxw-1-2, maxw-1-3, maxw-2-3, maxw-1-4, maxw-3-4 -->
286
+
287
+ <!-- Percentage min/max height (5% steps from 5 to 100) -->
288
+ <div class="minh-25">min-height 25%</div>
289
+ <div class="maxh-75">max-height 75%</div>
290
+ <!-- Fractions: minh-1-2, minh-1-3, minh-2-3, minh-1-4, minh-3-4, maxh-* (same set) -->
291
+
292
+ <!-- Rem-based width (wr-N = Nrem) — 1..10, 15, 20, 25, 30, 35, 40, 45, 50 -->
293
+ <div class="wr-8">8rem wide</div>
294
+ <div class="wr-20">20rem wide</div>
295
+
296
+ <!-- Rem-based min/max width — same number set -->
297
+ <div class="minwr-8">min-width 8rem</div>
298
+ <div class="maxwr-15">max-width 15rem</div>
299
+
300
+ <!-- Rem-based height -->
301
+ <div class="hr-5">5rem tall</div>
302
+ <div class="hr-30">30rem tall</div>
303
+
304
+ <!-- Rem-based min/max height -->
305
+ <div class="minhr-10">min-height 10rem</div>
306
+ <div class="maxhr-20">max-height 20rem</div>
307
+ <!-- minhr- extends to 100 (for dashboards); maxhr- stops at 50 -->
200
308
 
201
309
 
202
310
  <!-- ================================
203
- WIDTH & HEIGHT UTILITIES
311
+ LEGACY "x-size" UTILITIES (core-components/_utilities.scss)
312
+ Named in "x" multiples of rem — useful for scrollable regions and
313
+ pairing with overflow utilities. Kept alongside the newer wr-/hr-
314
+ families; use whichever reads better.
204
315
  ================================ -->
205
316
 
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>
317
+ <!-- min-h-*x — min-height in rem multiples -->
318
+ <div class="min-h-2x">min-height 2rem</div>
319
+ <div class="min-h-12x">min-height 12rem</div>
320
+ <div class="min-h-30x">min-height 30rem</div>
212
321
 
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>
322
+ <!-- h-*x — fixed height in rem multiples -->
323
+ <div class="h-20x">height 20rem (fixed, pairs with overflow-y-auto)</div>
324
+
325
+ <!-- max-h-*x — max-height in rem multiples -->
326
+ <div class="max-h-25x">max-height 25rem (grows until, then scrolls)</div>
219
327
 
220
328
 
221
329
  <!-- ================================
222
- MIN-HEIGHT UTILITIES (rem-based)
223
- Content can grow taller than minimum
330
+ OVERFLOW
331
+ auto adds scrollbar when needed. overlay is a Chromium-only
332
+ improvement (scrollbar floats over content); falls back to auto
333
+ elsewhere.
224
334
  ================================ -->
225
335
 
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>
336
+ <div class="overflow-auto">auto both axes</div>
337
+ <div class="overflow-x-auto">horizontal scroll only</div>
338
+ <div class="overflow-y-auto">vertical scroll only</div>
339
+ <div class="overflow-hidden">clipped</div>
340
+ <div class="overflow-visible">shown outside container</div>
341
+
342
+ <div class="overflow-overlay">Chromium: floating scrollbar</div>
343
+ <div class="overflow-y-overlay">Chromium: floating y-scrollbar</div>
344
+
345
+ <!-- Body scroll lock — applied to <body> via JS when opening an overlay -->
346
+ <body class="pa-scroll-lock">Locks scroll while keeping scrollbar gutter</body>
244
347
 
245
348
 
246
349
  <!-- ================================
247
- FIXED HEIGHT UTILITIES (rem-based)
248
- Use with overflow utilities for scrollable containers
350
+ CURSOR
249
351
  ================================ -->
250
352
 
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>
353
+ <div class="cursor-pointer">pointer</div>
354
+ <div class="cursor-help">help</div>
355
+ <div class="cursor-wait">wait</div>
356
+ <div class="cursor-not-allowed">not-allowed</div>
357
+ <div class="cursor-text">text</div>
358
+ <div class="cursor-move">move</div>
359
+ <div class="cursor-default">default</div>
360
+ <div class="cursor-grab">grab</div>
361
+ <div class="cursor-grabbing">grabbing</div>
362
+ <div class="cursor-zoom-in">zoom-in</div>
363
+ <div class="cursor-zoom-out">zoom-out</div>
276
364
 
277
365
 
278
366
  <!-- ================================
279
- MAX-HEIGHT UTILITIES (rem-based)
280
- Content limited to max height, then scrolls
367
+ POSITION
281
368
  ================================ -->
282
369
 
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>
370
+ <div class="position-static">static</div>
371
+ <div class="position-relative">relative</div>
372
+ <div class="position-absolute">absolute</div>
373
+ <div class="position-fixed">fixed</div>
374
+ <div class="position-sticky">sticky</div>
305
375
 
306
376
 
307
377
  <!-- ================================
308
- OVERFLOW UTILITIES
309
- Control scrolling behavior
378
+ BORDER
310
379
  ================================ -->
311
380
 
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>
381
+ <div class="border">border on all sides (1px, theme-border-colour)</div>
382
+ <div class="border-top">top only</div>
383
+ <div class="border-bottom">bottom only</div>
384
+ <div class="border-right">right only</div>
385
+ <div class="border-left">left only</div>
386
+
387
+ <div class="border-0">no border</div>
388
+ <div class="border-top-0">no top border</div>
389
+
390
+ <!-- Border style -->
391
+ <div class="border border-solid">solid (default)</div>
392
+ <div class="border border-dashed">dashed</div>
393
+ <div class="border border-dotted">dotted</div>
394
+ <div class="border border-none">none</div>
333
395
 
334
396
 
335
397
  <!-- ================================
336
- HEIGHT + OVERFLOW EXAMPLES
337
- Common use cases
398
+ ROUNDED
338
399
  ================================ -->
339
400
 
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>
401
+ <div class="rounded">default radius</div>
402
+ <div class="rounded-lg">large radius</div>
403
+ <div class="rounded-circle">50% (circle / pill)</div>
404
+ <div class="rounded-0">no radius</div>
405
+ <div class="rounded-top">top corners</div>
406
+ <div class="rounded-bottom">bottom corners</div>
407
+ <div class="rounded-left">left corners</div>
408
+ <div class="rounded-right">right corners</div>
353
409
 
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
410
 
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>
411
+ <!-- ================================
412
+ SHADOW
413
+ ================================ -->
378
414
 
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>
415
+ <div class="shadow-none">none</div>
416
+ <div class="shadow-sm">subtle</div>
417
+ <div class="shadow">default</div>
418
+ <div class="shadow-lg">pronounced</div>
401
419
 
402
420
 
403
421
  <!-- ================================
404
- POSITION UTILITIES
422
+ THEME COLOUR SLOT UTILITIES
423
+ Apply any of the nine theme palette colours to bg / text / border.
405
424
  ================================ -->
406
425
 
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>
426
+ <div class="pa-bg-color-1">Background slot 1</div>
427
+ <div class="pa-text-color-3">Text slot 3</div>
428
+ <div class="pa-border-color-5" style="border: 2px solid;">Border slot 5</div>
429
+ <!-- Pattern: pa-bg-color-{1..9}, pa-text-color-{1..9}, pa-border-color-{1..9} -->
412
430
 
413
431
 
414
432
  <!-- ================================
415
- BORDER UTILITIES
433
+ LINK STYLING
416
434
  ================================ -->
417
435
 
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>
436
+ <a href="#" class="pa-link">Accent-coloured link (underline on hover)</a>
431
437
 
432
438
 
433
439
  <!-- ================================
434
- ROUNDED UTILITIES
440
+ CONTAINER QUERY HELPER
441
+ Used to establish a containment context for the grid's responsive
442
+ column classes (pa-col-sm-*, -md-*, etc.) outside the default
443
+ .pa-layout__main ancestor. See grid.html for the full story.
435
444
  ================================ -->
436
445
 
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>
446
+ <div class="pa-cq">
447
+ <!-- any grid / container-query children now have a context -->
448
+ </div>
447
449
 
448
450
 
449
451
  <!-- ================================
450
- SHADOW UTILITIES
452
+ COMPACT MODE
453
+ Applied on <body>. Tightens card body padding, table cell padding,
454
+ sidebar link padding, form-group spacing.
451
455
  ================================ -->
452
456
 
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
+ <script>
458
+ document.body.classList.add('compact-mode');
459
+ localStorage.setItem('compact-mode', 'true');
460
+ </script>
457
461
 
458
462
 
459
463
  <!-- ================================
460
464
  USAGE EXAMPLES
461
465
  ================================ -->
462
466
 
463
- <!-- Example: Card with Utilities -->
467
+ <!-- Card with mixed utilities -->
464
468
  <div class="pa-card mb-4">
465
469
  <div class="pa-card__header">
466
470
  <h3 class="m-0">Card with Utilities</h3>
@@ -476,120 +480,212 @@ localStorage.setItem('compact-mode', 'true');
476
480
  </div>
477
481
  </div>
478
482
  <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>
483
+ <div class="d-flex justify-content-end gap-sm">
484
+ <button class="pa-btn pa-btn--secondary">Cancel</button>
481
485
  <button class="pa-btn pa-btn--primary">Save</button>
482
486
  </div>
483
487
  </div>
484
488
  </div>
485
489
 
486
- <!-- Example: Centered Content -->
490
+ <!-- Centred hero -->
487
491
  <div class="text-center py-8">
488
492
  <h2 class="mb-3">Welcome</h2>
489
493
  <p class="mb-4">Get started by creating your first project.</p>
490
494
  <button class="pa-btn pa-btn--primary pa-btn--lg">Get Started</button>
491
495
  </div>
492
496
 
493
- <!-- Example: Horizontal Form with Utilities -->
497
+ <!-- Horizontal form row (logical spacing) -->
494
498
  <form class="mb-4">
495
499
  <div class="d-flex align-items-center mb-3">
496
- <label class="mr-3" style="width: 100px;">Username</label>
500
+ <label class="me-3 wr-10">Username</label>
497
501
  <input type="text" class="pa-input flex-fill" placeholder="Enter username">
498
502
  </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
503
  <div class="d-flex justify-content-end">
504
504
  <button type="submit" class="pa-btn pa-btn--primary">Submit</button>
505
505
  </div>
506
506
  </form>
507
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">
508
+ <!-- Two-card row using the native grid (NOT legacy pure-g) -->
509
+ <div class="pa-row">
510
+ <div class="pa-col-100 pa-col-md-1-2 mb-4">
511
511
  <div class="pa-card">
512
512
  <div class="pa-card__body">Card 1</div>
513
513
  </div>
514
514
  </div>
515
- <div class="pure-u-1 pure-u-md-1-2 px-2 mb-4">
515
+ <div class="pa-col-100 pa-col-md-1-2 mb-4">
516
516
  <div class="pa-card">
517
517
  <div class="pa-card__body">Card 2</div>
518
518
  </div>
519
519
  </div>
520
520
  </div>
521
521
 
522
+ <!-- Fixed-height scrollable card body -->
523
+ <div class="pa-card">
524
+ <div class="pa-card__header">
525
+ <h3>Activity Feed</h3>
526
+ </div>
527
+ <div class="pa-card__body h-20x overflow-y-auto">
528
+ <p>Item 1</p>
529
+ <p>Item 2</p>
530
+ <!-- … many items that scroll … -->
531
+ </div>
532
+ </div>
533
+
522
534
 
523
535
  <!-- ================================
524
- UTILITY CLASSES REFERENCE
536
+ COMPONENT REFERENCE
525
537
  ================================ -->
526
538
 
527
539
  <!--
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
540
+ HTML FONT-SIZE (apply to <html> — rescales everything rem-based):
541
+ - font-size-small 9px
542
+ - font-size-default 10px (default; same as html base)
543
+ - font-size-large 11px
544
+ - font-size-xlarge 12px
545
+ - pa-font-base-{9|10|11|12} desktop base
546
+ - pa-font-mobile-{9|10|11|12} mobile base (takes over at/below 768px)
547
+ - pa-font-responsive shorthand: 10px desktop, 12px mobile
548
+ (No font-size-2xs/xs/medium/2xl/3xl/4xl — those are NOT defined.)
549
+
550
+ FONT FAMILY (from _fonts.scss):
551
+ - font-family-system / -sans / -serif / -mono
552
+ (-system and -sans also available; see typography.html.)
553
+
554
+ TEXT SIZE (text-*):
555
+ - text-2xs 10 · text-xs 12 · text-sm 14 · text-md 15 · text-base 16
556
+ text-lg 18 · text-xl 20 · text-2xl 24 · text-3xl 28 · text-4xl 32 (px)
557
+
558
+ TEXT COLOUR (!important, colour-only):
559
+ - text-primary / -success / -danger / -warning / -info
560
+ - text-color-{1..9} theme palette slots
561
+ - text-muted alias for --pa-text-color-2
562
+
563
+ TEXT ALIGNMENT / WRAP:
564
+ - text-start / -center / -end (logical — RTL-aware)
565
+ - text-nowrap
566
+ - text-truncate (ellipsis; wraps overflow: hidden + text-overflow + white-space)
567
+
568
+ SPACING — numeric scale 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20
569
+ (rem values: 0, .25, .5, .75, 1, 1.25, 1.5, 2, 2.5, 3, 4, 5):
570
+ - m-{n} · mt-{n} · mr-{n} · mb-{n} · ml-{n} · mx-{n} · my-{n}
571
+ - p-{n} · pt-{n} · pr-{n} · pb-{n} · pl-{n} · px-{n} · py-{n}
572
+ - m-auto / mt-auto / mr-auto / mb-auto / ml-auto / mx-auto / my-auto
573
+
574
+ SPACING — semantic scale (xs, sm, md, base, lg, xl, 2xl, 3xl):
575
+ - m-{name} · mt-{name} · ... / p-{name} · pt-{name} · ...
576
+
577
+ SPACING — logical (RTL-aware; preferred for new code):
578
+ - ms-{name} margin-inline-start ms-auto (push to end)
579
+ - me-{name} margin-inline-end me-auto (push to start)
580
+ - ps-{name} padding-inline-start
581
+ - pe-{name} padding-inline-end
582
+
583
+ GAP (on flex / grid containers):
584
+ - gap-{name} semantic: xs, sm, md, base, lg, xl, 2xl, 3xl
585
+ - row-gap-{name} / column-gap-{name} same names, axis-specific
586
+ - gap-{n} numeric 1, 2, 3, 4, 5, 6, 8, 10, 12, 15, 20 (in 0.1rem units)
545
587
 
546
588
  DISPLAY:
547
- - d-none, d-inline, d-inline-block, d-block
548
- - d-flex, d-inline-flex
589
+ - d-none · d-inline · d-inline-block · d-block · d-flex · d-inline-flex
549
590
 
550
591
  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-start, text-center, text-end
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
592
+ - flex-row / flex-column
593
+ - flex-wrap / flex-nowrap
594
+ - justify-content-start/-end/-center/-between/-around
595
+ - align-items-start/-end/-center/-baseline/-stretch
596
+ - flex-fill flex: 1 1 auto
597
+ - flex-grow-0 / -1
598
+ - flex-shrink-0 / -1
599
+ - flex-1 flex: 1 1 0%
600
+ - flex-auto flex: 1 1 auto
601
+ - flex-initial flex: 0 1 auto (default)
602
+ - flex-none flex: none
603
+ - flex-grow / flex-shrink shorthand forms
604
+ - self-start/-center/-end/-stretch/-baseline
605
+
606
+ WIDTH — percentage (w-{n}, 5% increments 5 → 100):
607
+ - w-5, w-10, ..., w-95, w-100, w-auto
608
+
609
+ WIDTH — fractions:
610
+ - w-1-2 (50%), w-1-3, w-2-3, w-1-4, w-3-4
611
+
612
+ WIDTH — fixed (width + min-width locked):
613
+ - w-{n}-fixed 25, 50, 75, 100
614
+ - w-1-2-fixed / w-1-3-fixed / w-2-3-fixed / w-1-4-fixed / w-3-4-fixed
615
+
616
+ HEIGHT — percentage:
617
+ - h-25 · h-50 · h-75 · h-100 · h-auto
618
+ - h-1-2 · h-1-3 · h-2-3 · h-1-4 · h-3-4
619
+
620
+ HEIGHT — full/screen helpers:
621
+ - h-full height: 100%
622
+ - h-screen height: 100vh
623
+ - min-h-full min-height: 100%
624
+ - min-h-screen min-height: 100vh
625
+ - max-h-full max-height: 100%
626
+ - max-h-screen max-height: 100vh
627
+
628
+ MIN/MAX — percentage (minw-{n}, maxw-{n}, minh-{n}, maxh-{n}; 5% steps):
629
+ - minw-5 ... minw-100 + minw-1-3, minw-2-3
630
+ - maxw-5 ... maxw-100 + maxw-1-2, maxw-1-3, maxw-2-3, maxw-1-4, maxw-3-4
631
+ - minh-5 ... minh-100 + minh-1-2, minh-1-3, minh-2-3, minh-1-4, minh-3-4
632
+ - maxh-5 ... maxh-100 + maxh-1-2, maxh-1-3, maxh-2-3, maxh-1-4, maxh-3-4
633
+
634
+ WIDTH/HEIGHT — rem-based ("r" suffix marks rem):
635
+ - wr-{n}, minwr-{n}, maxwr-{n} values 1..10, 15, 20, 25, 30, 35, 40, 45, 50
636
+ - hr-{n}, minhr-{n}, maxhr-{n} same set
637
+ - minhr-{n} extends to 60, 70, 80, 90, 100 for dashboards
638
+
639
+ HEIGHT — legacy "x-size" aliases (rem multiples — same values):
640
+ - min-h-{2|3|5|8|10|12|15|20|25|30}x
641
+ - h-{2|3|5|8|10|12|15|20|25|30|40|50}x
642
+ - max-h-{5|8|10|12|15|20|25|30|40|50}x
576
643
 
577
644
  OVERFLOW:
578
- - overflow-auto, overflow-y-auto, overflow-x-auto
579
- - overflow-hidden, overflow-visible
645
+ - overflow-auto / -y-auto / -x-auto
646
+ - overflow-hidden / -visible
647
+ - overflow-overlay / -y-overlay / -x-overlay (Chromium; falls back to auto)
648
+ - pa-scroll-lock (body: prevent scroll + keep gutter)
580
649
 
581
650
  POSITION:
582
- - position-static, position-relative
583
- - position-absolute, position-fixed, position-sticky
651
+ - position-static / -relative / -absolute / -fixed / -sticky
584
652
 
585
653
  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
654
+ - border / border-top / -right / -bottom / -left 1px solid theme border
655
+ - border-0 / border-top-0 / -right-0 / -bottom-0 / -left-0
656
+ - border-solid / -dashed / -dotted / -none border-style only
588
657
 
589
658
  ROUNDED:
590
- - rounded, rounded-lg, rounded-circle, rounded-0
591
- - rounded-top, rounded-bottom, rounded-left, rounded-right
659
+ - rounded / rounded-lg / rounded-circle / rounded-0
660
+ - rounded-top / -bottom / -left / -right paired-corner radius
592
661
 
593
662
  SHADOW:
594
- - shadow-none, shadow-sm, shadow, shadow-lg
663
+ - shadow-none / shadow-sm / shadow / shadow-lg
664
+
665
+ CURSOR:
666
+ - cursor-pointer / -help / -wait / -not-allowed / -text / -move / -default
667
+ - cursor-grab / -grabbing / -zoom-in / -zoom-out
668
+
669
+ THEME COLOUR SLOTS:
670
+ - pa-bg-color-{1..9}
671
+ - pa-text-color-{1..9}
672
+ - pa-border-color-{1..9}
673
+
674
+ LINKS:
675
+ - pa-link accent colour, underline on hover
676
+
677
+ BODY MODES:
678
+ - compact-mode tighten card/table/sidebar/form spacing
679
+ - pa-scroll-lock prevent body scroll (for overlays)
680
+
681
+ CONTAINER QUERIES:
682
+ - pa-cq container-type: inline-size; enables
683
+ responsive column classes (pa-col-sm-*,
684
+ etc.) outside of .pa-layout__main.
685
+
686
+ LOGICAL vs PHYSICAL:
687
+ The framework ships both. Logical classes (ms-*, me-*, ps-*, pe-*,
688
+ text-start/end, pa-col--start/end) flip automatically under [dir="rtl"].
689
+ Physical classes (ml-*, mr-*, pl-*, pr-*, text-left/right — where they
690
+ exist) do NOT flip. Prefer logical for new code.
595
691
  -->