@fwkui/x-css 1.0.2 → 1.0.3
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.
- package/README-EN.md +1159 -0
- package/README.md +42 -1
- package/index.js +1 -1
- package/package.json +1 -1
package/README-EN.md
ADDED
|
@@ -0,0 +1,1159 @@
|
|
|
1
|
+
# x-css User Guide
|
|
2
|
+
|
|
3
|
+
`x-css` is a compact and efficient CSS-JavaScript library for building reactive user interfaces. The library provides utilities to manage state and to automatically and efficiently manipulate the DOM.
|
|
4
|
+
|
|
5
|
+
## Installation
|
|
6
|
+
|
|
7
|
+
To use `x-css`, import it into your project:
|
|
8
|
+
|
|
9
|
+
```packages/fkui/css-dist/README-EN.md#L1-20
|
|
10
|
+
<script type="module">
|
|
11
|
+
import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
|
|
12
|
+
$.cssObserve(document);
|
|
13
|
+
</script>
|
|
14
|
+
```
|
|
15
|
+
|
|
16
|
+
# Using xCSS
|
|
17
|
+
|
|
18
|
+
xCSS is a CSS-in-JS system that lets you write concise, powerful CSS via special class names. After learning it you will be able to:
|
|
19
|
+
|
|
20
|
+
- Read and write class names following the syntax and understand how they compile into CSS
|
|
21
|
+
- Control media queries, `@layer`, `!important`, pseudo selectors, and combine multiple properties in a single class
|
|
22
|
+
|
|
23
|
+
> Note: A full list of property and value abbreviations is below in this document.
|
|
24
|
+
|
|
25
|
+
## Design Tokens (CSS Variables)
|
|
26
|
+
|
|
27
|
+
- Purpose: Reduce the length and complexity of inline values in classes, ensure consistent branding, and make it easier to maintain changes to colors, spacing, shadows, gradients, etc.
|
|
28
|
+
- How to declare:
|
|
29
|
+
- Put variables in a style tag at the top of the document or in a CSS file imported before using xCSS.
|
|
30
|
+
- Use CSS variable names starting with `--`, e.g. `--bg-gradient-login`, `--panel`, `--shadow-card`, `--color-primary`, `--space-md`, …
|
|
31
|
+
- How to use in xCSS:
|
|
32
|
+
- Use directly inside braces: `bg{var(--bg-gradient-login)}` or `bxsh{var(--shadow-card)}` or `p{var(--space-md)}`
|
|
33
|
+
- Use available aliases if configured: `bgc--panel` or `c--primary` (if alias maps exist)
|
|
34
|
+
- You can use fallbacks with `var(--name, fallbackValue)` for older browser compatibility.
|
|
35
|
+
- Note: CSS variables must be loaded before rendering classes that depend on them.
|
|
36
|
+
|
|
37
|
+
- Example token declarations (put at the document head or an early-imported stylesheet):
|
|
38
|
+
```packages/fkui/css-dist/README-EN.md#L21-40
|
|
39
|
+
<style>
|
|
40
|
+
:root {
|
|
41
|
+
--bg-gradient-login: linear-gradient(#6a11cb, #2575fc);
|
|
42
|
+
--panel: #ffffff;
|
|
43
|
+
--shadow-card: 0 10px 20px rgba(0,0,0,.15);
|
|
44
|
+
--radius-card: 12px;
|
|
45
|
+
--color-primary: #0070f3;
|
|
46
|
+
--space-md: 16px;
|
|
47
|
+
}
|
|
48
|
+
</style>
|
|
49
|
+
```
|
|
50
|
+
|
|
51
|
+
- Example: using tokens on a login page:
|
|
52
|
+
```packages/fkui/css-dist/README-EN.md#L41-70
|
|
53
|
+
<body class="bg{var(--bg-gradient-login)} h100vh w100% dF jcC aiC">
|
|
54
|
+
<main class="w360px md:w420px lg:w480px bgcWhite p28px bxsh{var(--shadow-card)} bdra12px">
|
|
55
|
+
...
|
|
56
|
+
<button class="w100% p12px cWhite bdN bdra8px bxsh{var(--shadow-card)}" style="--color-primary: #0070f3;">
|
|
57
|
+
Sign in
|
|
58
|
+
</button>
|
|
59
|
+
</main>
|
|
60
|
+
</body>
|
|
61
|
+
```
|
|
62
|
+
|
|
63
|
+
- Migration & alias hints:
|
|
64
|
+
- If you have aliases like `bgc--panel` or `c--primary`, define tokens and use them consistently.
|
|
65
|
+
- Example: `:root { --panel: #fff; }` and use either `bgc--panel` or `bgc{var(--panel)}` depending on your build setup.
|
|
66
|
+
|
|
67
|
+
See examples and the Design Tokens section below for integration patterns.
|
|
68
|
+
|
|
69
|
+
## General Syntax
|
|
70
|
+
|
|
71
|
+
```
|
|
72
|
+
[MQ:][layer]<property><value>[@selector]
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
Important note: `<property><value>` is REQUIRED — a class must contain both property and value.
|
|
76
|
+
|
|
77
|
+
Examples of valid syntax:
|
|
78
|
+
|
|
79
|
+
- `cRed` — color red (layer 0)
|
|
80
|
+
- `5cRed` — color red at layer 5
|
|
81
|
+
- `md:cRed` — color red on medium screens
|
|
82
|
+
- `md:5cRed` — color red at layer 5 on medium screens
|
|
83
|
+
|
|
84
|
+
### Components
|
|
85
|
+
|
|
86
|
+
#### 1. Media Query (MQ) — Optional
|
|
87
|
+
|
|
88
|
+
- `xs:` — small screens (max-width: 575px)
|
|
89
|
+
- `sm:` — small screens (min-width: 576px)
|
|
90
|
+
- `md:` — medium screens (min-width: 768px)
|
|
91
|
+
- `lg:` — large screens (min-width: 992px)
|
|
92
|
+
- `xl:` — extra large screens (min-width: 1200px)
|
|
93
|
+
- `2xl:` — very large screens (min-width: 1400px)
|
|
94
|
+
- `sma:` — up to small screens (max-width: 768px)
|
|
95
|
+
- `mda:` — up to medium screens (max-width: 992px)
|
|
96
|
+
- `lga:` — up to large screens (max-width: 1200px)
|
|
97
|
+
- `xla:` — up to extra large screens (max-width: 1400px)
|
|
98
|
+
|
|
99
|
+
#### 2. Layer — Optional
|
|
100
|
+
|
|
101
|
+
- `1` to `19` — CSS layer priority (higher number = higher priority)
|
|
102
|
+
- Default: `0` (layer 0)
|
|
103
|
+
- Purpose: group rules by layer (base, component, utilities, overrides…)
|
|
104
|
+
|
|
105
|
+
#### 3. Property — REQUIRED
|
|
106
|
+
|
|
107
|
+
- Lowercase; can be full name or abbreviation
|
|
108
|
+
- No `-` except special cases starting with `-w` for hyphenated properties
|
|
109
|
+
- Examples: `w` (width), `h` (height), `c` (color), `bg` (background)
|
|
110
|
+
|
|
111
|
+
#### 4. Value — REQUIRED
|
|
112
|
+
|
|
113
|
+
- Numbers: `10`, `-4.5`, `0.5`, optionally with units: `10px`, `1.5rem`, `100%`
|
|
114
|
+
- Named values start with uppercase: `Red`, `Center`, `Block`, `Fixed`, `None`
|
|
115
|
+
- Literal values inside braces: `c{rgb(255,0,0)}`, `bg{linear-gradient(...)}`
|
|
116
|
+
- CSS variables: start with `--`: `c--primary` → `color: var(--primary)`
|
|
117
|
+
- Important: prefix `!` before value to mark `!important`: `w!10px` → `width: 10px !important`
|
|
118
|
+
- Functions: use TitleCase + parentheses and `;` instead of spaces:
|
|
119
|
+
- `wCalc(100%;-;20px)` → `width: calc(100% - 20px)`
|
|
120
|
+
- `tTranslate(50%;,;-50%)` → `transform: translate(50% , -50%)`
|
|
121
|
+
|
|
122
|
+
#### 5. Selector — Optional
|
|
123
|
+
|
|
124
|
+
- Starts with `@`
|
|
125
|
+
- Use `;` in place of spaces
|
|
126
|
+
- Can include pseudo classes/elements, child selectors, or combinations
|
|
127
|
+
- Examples: `@:hover`, `@:focus`, `@:active`, `@>a`, `@.btn;:hover`
|
|
128
|
+
|
|
129
|
+
## Examples
|
|
130
|
+
|
|
131
|
+
### Basic
|
|
132
|
+
|
|
133
|
+
```packages/fkui/css-dist/README-EN.md#L71-90
|
|
134
|
+
<!-- Red color -->
|
|
135
|
+
<div class="cRed">Text in red</div>
|
|
136
|
+
|
|
137
|
+
<!-- Width 100px -->
|
|
138
|
+
<div class="w100px">Width 100px</div>
|
|
139
|
+
|
|
140
|
+
<!-- Padding 20px -->
|
|
141
|
+
<div class="p20px">Padding 20px</div>
|
|
142
|
+
|
|
143
|
+
<!-- Opacity 50% -->
|
|
144
|
+
<div class="opc50%">50% opacity</div>
|
|
145
|
+
|
|
146
|
+
<!-- Font size 14px -->
|
|
147
|
+
<div class="fns14px">Font size 14px</div>
|
|
148
|
+
```
|
|
149
|
+
|
|
150
|
+
### With Media Query
|
|
151
|
+
|
|
152
|
+
```packages/fkui/css-dist/README-EN.md#L91-110
|
|
153
|
+
<!-- Red on large screens -->
|
|
154
|
+
<div class="lg:cRed">Red on desktop</div>
|
|
155
|
+
|
|
156
|
+
<!-- Hidden on extra small screens -->
|
|
157
|
+
<div class="xs:vHidden">Hidden on mobile</div>
|
|
158
|
+
|
|
159
|
+
<!-- Responsive width -->
|
|
160
|
+
<div class="w100% md:w50% lg:w33%">Responsive width</div>
|
|
161
|
+
```
|
|
162
|
+
|
|
163
|
+
### With Layer
|
|
164
|
+
|
|
165
|
+
```packages/fkui/css-dist/README-EN.md#L111-130
|
|
166
|
+
<!-- High-priority layer -->
|
|
167
|
+
<div class="5cRed">High-priority red</div>
|
|
168
|
+
|
|
169
|
+
<!-- Low-priority layer -->
|
|
170
|
+
<div class="1cBlue">Low-priority blue</div>
|
|
171
|
+
|
|
172
|
+
<!-- Combine layer and media query -->
|
|
173
|
+
<div class="md:7cGreen">Green at layer 7 on desktop</div>
|
|
174
|
+
```
|
|
175
|
+
|
|
176
|
+
### With Selector
|
|
177
|
+
|
|
178
|
+
```packages/fkui/css-dist/README-EN.md#L131-150
|
|
179
|
+
<!-- Hover effect -->
|
|
180
|
+
<div class="cRed@:hover">Red on hover</div>
|
|
181
|
+
|
|
182
|
+
<!-- Focus effect -->
|
|
183
|
+
<input class="bdw2px@:focus" placeholder="Border on focus" />
|
|
184
|
+
|
|
185
|
+
<!-- Child selector -->
|
|
186
|
+
<div class="cBlue@>a">Blue color for child anchor</div>
|
|
187
|
+
|
|
188
|
+
<!-- Complex selector -->
|
|
189
|
+
<div class="cRed@.btn;:hover">Red when hovering a .btn</div>
|
|
190
|
+
```
|
|
191
|
+
|
|
192
|
+
### With Special Values
|
|
193
|
+
|
|
194
|
+
```packages/fkui/css-dist/README-EN.md#L151-170
|
|
195
|
+
<!-- !important -->
|
|
196
|
+
<div class="c!red">Red !important</div>
|
|
197
|
+
|
|
198
|
+
<!-- CSS Variable -->
|
|
199
|
+
<div class="c--primary">Color from CSS variable</div>
|
|
200
|
+
|
|
201
|
+
<!-- Custom literal value -->
|
|
202
|
+
<div class="w{calc(100%;-;20px)}">Computed width</div>
|
|
203
|
+
|
|
204
|
+
<!-- CSS function -->
|
|
205
|
+
<div class="wClamp(280px;640px;100%)">Width with clamp</div>
|
|
206
|
+
|
|
207
|
+
<!-- Complex box-shadow -->
|
|
208
|
+
<div class="bxsh{0;2px;8px;rgba(0,0,0,.1)}">Complex shadow</div>
|
|
209
|
+
```
|
|
210
|
+
|
|
211
|
+
### Combine multiple properties with `&`
|
|
212
|
+
|
|
213
|
+
```packages/fkui/css-dist/README-EN.md#L171-190
|
|
214
|
+
<!-- Multiple properties at once -->
|
|
215
|
+
<div class="cRed&fw700&taC">Red, font-weight 700, centered</div>
|
|
216
|
+
|
|
217
|
+
<!-- Flexbox layout -->
|
|
218
|
+
<div class="dF&aiC&jcSp">Flexbox center + space-between</div>
|
|
219
|
+
|
|
220
|
+
<!-- Padding and margin -->
|
|
221
|
+
<div class="p8px&m0">Padding 8px and margin 0</div>
|
|
222
|
+
|
|
223
|
+
<!-- Combine with selector -->
|
|
224
|
+
<div class="cRed&fw700@:hover">Red and fw700 on hover</div>
|
|
225
|
+
```
|
|
226
|
+
|
|
227
|
+
## Priority & Collision Rules
|
|
228
|
+
|
|
229
|
+
1. `@layer`: rules from larger-numbered layers override smaller ones (when same origin/specificity)
|
|
230
|
+
2. Selector specificity: more specific selector wins
|
|
231
|
+
3. Order of appearance: later rules in the same layer and specificity win
|
|
232
|
+
4. `!important` beats normal rules in the same cascade scope
|
|
233
|
+
|
|
234
|
+
Example: `5cBlue` vs `9cRed` → `9cRed` wins. But `5cBlue!` (written as `c!Blue` or `c!{blue}`) can still win if within the same layer/scope depending on cascade.
|
|
235
|
+
|
|
236
|
+
## Important Rules
|
|
237
|
+
|
|
238
|
+
### ✅ Valid
|
|
239
|
+
|
|
240
|
+
- `cRed` — color red (property: `c`, value: `Red`)
|
|
241
|
+
- `w10px` — width 10px (property: `w`, value: `10px`)
|
|
242
|
+
- `md:cRed` — red on medium screens (MQ: `md`, property: `c`, value: `Red`)
|
|
243
|
+
- `2w100px` — width 100px at layer 2 (layer: `2`, property: `w`, value: `100px`)
|
|
244
|
+
- `cRed@:hover` — red on hover
|
|
245
|
+
- `w!100px` — width 100px `!important`
|
|
246
|
+
- `c{red}` — custom literal value for color
|
|
247
|
+
- `cRed&w700` — combine multiple properties
|
|
248
|
+
- `wCalc(100%;-;20px)` — function-style value with `;`
|
|
249
|
+
|
|
250
|
+
### ❌ Invalid
|
|
251
|
+
|
|
252
|
+
- `Cred` — uppercase `C` used for property (properties must be lowercase)
|
|
253
|
+
- `C{red}` — property must be lowercase
|
|
254
|
+
- `cRed}` — missing opening brace
|
|
255
|
+
- `c-red` — hyphen not allowed in property
|
|
256
|
+
- `W-10px` — uppercase property and hyphen
|
|
257
|
+
- `w-!10px` — hyphen misuse; use `w!10px`
|
|
258
|
+
- `cRed @:hover` — spaces in class name not allowed
|
|
259
|
+
- `c` — missing value
|
|
260
|
+
- `Red` — missing property
|
|
261
|
+
|
|
262
|
+
## Common Mistakes & How to Avoid Them
|
|
263
|
+
|
|
264
|
+
- Using uppercase on property names → incorrect. Properties must be lowercase or `--var`.
|
|
265
|
+
- Missing property or value → both are required.
|
|
266
|
+
- Confusing `-` and `!`: `w-!10px` is wrong; use `w!10px`.
|
|
267
|
+
- Forgetting `;` inside values that contain spaces: `ff{Courier New}` should be `ff{Courier;New}`.
|
|
268
|
+
- Selectors that contain spaces must use `;` and will be converted during output.
|
|
269
|
+
- If you don't provide an abbreviation table, the compiler cannot map `ta` to `text-align`, for example.
|
|
270
|
+
|
|
271
|
+
## Notes
|
|
272
|
+
|
|
273
|
+
1. Property and Value are required — each class must include both.
|
|
274
|
+
2. Class names should be lowercase for properties; values may contain uppercase letters.
|
|
275
|
+
3. Avoid spaces in class names — use `;` instead.
|
|
276
|
+
4. CSS.supports validation — classes should produce supported CSS.
|
|
277
|
+
5. Layer priority — higher layer number wins.
|
|
278
|
+
6. Media queries apply only within their specified ranges.
|
|
279
|
+
7. Use `;` to represent whitespace in values. Example: `ff{Courier;New;monospace}` → `font-family: Courier New, monospace`
|
|
280
|
+
|
|
281
|
+
## Practical Tips (from real-world experience)
|
|
282
|
+
|
|
283
|
+
### 🎯 Class naming principles
|
|
284
|
+
|
|
285
|
+
#### ✅ Recommended
|
|
286
|
+
|
|
287
|
+
- Keep class names short and readable: `cRed`, `w100px`, `p16px`
|
|
288
|
+
- Use conventional abbreviations: `dF` instead of `displayFlex` (d: display, F: Flex)
|
|
289
|
+
|
|
290
|
+
#### ❌ Avoid
|
|
291
|
+
|
|
292
|
+
- Extremely long names: `wCalc(100%;-;20px;-;30px;-;10px)` — prefer CSS variables
|
|
293
|
+
- Complex inline values: `bxsh{0;4px;8px;12px;rgba(0,0,0,0.1);inset}` — prefer variables
|
|
294
|
+
- Repeating properties for colors: `cRed`, `cBlue`, `cGreen` — use a color palette
|
|
295
|
+
|
|
296
|
+
### 🎨 Managing complex values
|
|
297
|
+
|
|
298
|
+
#### Use CSS Variables for long values:
|
|
299
|
+
|
|
300
|
+
```packages/fkui/css-dist/README-EN.md#L191-210
|
|
301
|
+
:root {
|
|
302
|
+
--shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
|
|
303
|
+
--shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
|
|
304
|
+
--border-radius: 8px;
|
|
305
|
+
--spacing-sm: 8px;
|
|
306
|
+
--spacing-md: 16px;
|
|
307
|
+
--spacing-lg: 24px;
|
|
308
|
+
}
|
|
309
|
+
```
|
|
310
|
+
|
|
311
|
+
```packages/fkui/css-dist/README-EN.md#L211-230
|
|
312
|
+
<!-- Instead of writing a long value -->
|
|
313
|
+
<div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
|
|
314
|
+
<!-- Use variables -->
|
|
315
|
+
<div class="bxsh--shadow-card bdra--border-radius p--spacing-md"></div>
|
|
316
|
+
</div>
|
|
317
|
+
```
|
|
318
|
+
|
|
319
|
+
#### Create component classes for common patterns:
|
|
320
|
+
|
|
321
|
+
```packages/fkui/css-dist/README-EN.md#L231-250
|
|
322
|
+
<!-- Instead of repeating many utilities -->
|
|
323
|
+
<div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
|
|
324
|
+
<!-- Define a component class -->
|
|
325
|
+
<div class="card"></div>
|
|
326
|
+
</div>
|
|
327
|
+
```
|
|
328
|
+
|
|
329
|
+
### 📱 Responsive Design Best Practices
|
|
330
|
+
|
|
331
|
+
#### Mobile-first approach
|
|
332
|
+
|
|
333
|
+
```packages/fkui/css-dist/README-EN.md#L251-270
|
|
334
|
+
<!-- Base styles for mobile -->
|
|
335
|
+
<div class="w100% p8px">
|
|
336
|
+
<!-- Overrides for desktop -->
|
|
337
|
+
<div class="md:w50% md:p16px lg:w33% lg:p24px"></div>
|
|
338
|
+
</div>
|
|
339
|
+
```
|
|
340
|
+
|
|
341
|
+
#### Group breakpoints logically
|
|
342
|
+
|
|
343
|
+
```packages/fkui/css-dist/README-EN.md#L271-290
|
|
344
|
+
<!-- Main layout -->
|
|
345
|
+
<div class="dB md:dF">
|
|
346
|
+
<!-- Responsive spacing -->
|
|
347
|
+
<div class="p8px md:p16px lg:p24px">
|
|
348
|
+
<!-- Responsive typography -->
|
|
349
|
+
<div class="fns14px md:fns16px lg:fns18px"></div>
|
|
350
|
+
</div>
|
|
351
|
+
</div>
|
|
352
|
+
```
|
|
353
|
+
|
|
354
|
+
### 🎭 Layer Management
|
|
355
|
+
|
|
356
|
+
#### Organize layers by hierarchy
|
|
357
|
+
|
|
358
|
+
```packages/fkui/css-dist/README-EN.md#L291-310
|
|
359
|
+
<!-- Base styles (0) -->
|
|
360
|
+
<div class="cBlack fns16px">
|
|
361
|
+
<!-- Component styles (1-5) -->
|
|
362
|
+
<div class="2btnPrimary">
|
|
363
|
+
<!-- Utility styles (6-10) -->
|
|
364
|
+
<div class="8m16px">
|
|
365
|
+
<!-- Override styles (11-19) -->
|
|
366
|
+
<div class="15cRed"></div>
|
|
367
|
+
</div>
|
|
368
|
+
</div>
|
|
369
|
+
</div>
|
|
370
|
+
```
|
|
371
|
+
|
|
372
|
+
### 🔧 Performance Tips
|
|
373
|
+
|
|
374
|
+
#### Avoid over-engineering
|
|
375
|
+
|
|
376
|
+
```packages/fkui/css-dist/README-EN.md#L311-330
|
|
377
|
+
<!-- Simple and effective -->
|
|
378
|
+
<div class="dF&aiC&p16px">
|
|
379
|
+
<!-- Instead of over-complicating -->
|
|
380
|
+
<div class="dF&aiC&jcC&p16px&m0&b0&bgcT"></div>
|
|
381
|
+
</div>
|
|
382
|
+
```
|
|
383
|
+
|
|
384
|
+
#### Use shorthand when possible
|
|
385
|
+
|
|
386
|
+
```packages/fkui/css-dist/README-EN.md#L331-350
|
|
387
|
+
<!-- Margin shorthand -->
|
|
388
|
+
<div class="m16px">
|
|
389
|
+
<!-- margin: 16px -->
|
|
390
|
+
<div class="mt8px&mb8px">
|
|
391
|
+
<!-- margin-top: 8px; margin-bottom: 8px -->
|
|
392
|
+
<div class="p16px">
|
|
393
|
+
<!-- padding: 16px -->
|
|
394
|
+
<div class="px16px&py8px"><!-- padding: 8px 16px --></div>
|
|
395
|
+
</div>
|
|
396
|
+
</div>
|
|
397
|
+
</div>
|
|
398
|
+
```
|
|
399
|
+
|
|
400
|
+
### 🎨 Design System Integration
|
|
401
|
+
|
|
402
|
+
#### Create design tokens:
|
|
403
|
+
|
|
404
|
+
```packages/fkui/css-dist/README-EN.md#L351-380
|
|
405
|
+
:root {
|
|
406
|
+
/* Colors */
|
|
407
|
+
--color-primary: #0070f3;
|
|
408
|
+
--color-secondary: #7928ca;
|
|
409
|
+
--color-success: #0070f3;
|
|
410
|
+
--color-warning: #f5a623;
|
|
411
|
+
--color-error: #e00;
|
|
412
|
+
|
|
413
|
+
/* Spacing scale */
|
|
414
|
+
--space-1: 4px;
|
|
415
|
+
--space-2: 8px;
|
|
416
|
+
--space-3: 12px;
|
|
417
|
+
--space-4: 16px;
|
|
418
|
+
--space-5: 20px;
|
|
419
|
+
--space-6: 24px;
|
|
420
|
+
|
|
421
|
+
/* Typography scale */
|
|
422
|
+
--text-xs: 12px;
|
|
423
|
+
--text-sm: 14px;
|
|
424
|
+
--text-base: 16px;
|
|
425
|
+
--text-lg: 18px;
|
|
426
|
+
--text-xl: 20px;
|
|
427
|
+
}
|
|
428
|
+
```
|
|
429
|
+
|
|
430
|
+
#### Use semantic naming
|
|
431
|
+
|
|
432
|
+
```packages/fkui/css-dist/README-EN.md#L381-400
|
|
433
|
+
<!-- Instead of a specific color class -->
|
|
434
|
+
<div class="cBlue">
|
|
435
|
+
<!-- Prefer semantic names -->
|
|
436
|
+
<div class="cPrimary">
|
|
437
|
+
<div class="cSuccess">
|
|
438
|
+
<div class="cError"></div>
|
|
439
|
+
</div>
|
|
440
|
+
</div>
|
|
441
|
+
</div>
|
|
442
|
+
```
|
|
443
|
+
|
|
444
|
+
### 🚀 Maintenance Tips
|
|
445
|
+
|
|
446
|
+
#### Document for your team
|
|
447
|
+
|
|
448
|
+
```packages/fkui/css-dist/README-EN.md#L401-420
|
|
449
|
+
<!-- Component: Button Primary -->
|
|
450
|
+
<!-- Usage: <button class="btnPrimary">Click me</button> -->
|
|
451
|
+
<!-- Variants: btnSecondary, btnDanger, btnGhost -->
|
|
452
|
+
<button class="btnPrimary">Click me</button>
|
|
453
|
+
```
|
|
454
|
+
|
|
455
|
+
#### Consistent naming convention
|
|
456
|
+
|
|
457
|
+
```packages/fkui/css-dist/README-EN.md#L421-440
|
|
458
|
+
<!-- Layout -->
|
|
459
|
+
<div class="container">
|
|
460
|
+
<div class="row">
|
|
461
|
+
<div class="col">
|
|
462
|
+
<!-- Components -->
|
|
463
|
+
<div class="card">
|
|
464
|
+
<div class="btn">
|
|
465
|
+
<div class="input">
|
|
466
|
+
<!-- Utilities -->
|
|
467
|
+
<div class="textCenter">
|
|
468
|
+
<div class="mAuto">
|
|
469
|
+
<div class="dNone"></div>
|
|
470
|
+
</div>
|
|
471
|
+
</div>
|
|
472
|
+
</div>
|
|
473
|
+
</div>
|
|
474
|
+
</div>
|
|
475
|
+
</div>
|
|
476
|
+
</div>
|
|
477
|
+
</div>
|
|
478
|
+
```
|
|
479
|
+
|
|
480
|
+
### 💡 Pro Tips
|
|
481
|
+
|
|
482
|
+
1. Always test on mobile first — mobile-first approach.
|
|
483
|
+
2. Use browser dev tools to inspect compiled CSS output.
|
|
484
|
+
3. Create a style guide documenting common patterns.
|
|
485
|
+
4. Perform code reviews to ensure consistency across the team.
|
|
486
|
+
5. Monitor performance and CSS bundle size.
|
|
487
|
+
6. Put accessibility first.
|
|
488
|
+
|
|
489
|
+
## Composite Example
|
|
490
|
+
|
|
491
|
+
**HTML**
|
|
492
|
+
|
|
493
|
+
```packages/fkui/css-dist/README-EN.md#L441-470
|
|
494
|
+
<div
|
|
495
|
+
class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover"
|
|
496
|
+
>
|
|
497
|
+
<a class="cBlue wClamp(120px;240px;100%)">Link</a>
|
|
498
|
+
<button class="w!120px h40px bdra8px cWhite bgc#0070f3">Button</button>
|
|
499
|
+
</div>
|
|
500
|
+
```
|
|
501
|
+
|
|
502
|
+
**Generated CSS (conceptual)**
|
|
503
|
+
|
|
504
|
+
```packages/fkui/css-dist/README-EN.md#L471-510
|
|
505
|
+
@media (min-width: 768px) {
|
|
506
|
+
@layer l7 {
|
|
507
|
+
.md\:7\.dF\&aiC\&jcSp\:where(*) {
|
|
508
|
+
display: flex;
|
|
509
|
+
align-items: center;
|
|
510
|
+
justify-content: space-between;
|
|
511
|
+
padding: 16px;
|
|
512
|
+
background-color: var(--panel);
|
|
513
|
+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
|
|
514
|
+
}
|
|
515
|
+
.md\:7\.c\-\-fg\@\>a\;\:hover > a:hover {
|
|
516
|
+
color: var(--fg);
|
|
517
|
+
}
|
|
518
|
+
.md\:7\.wClamp\(120px\;240px\;100\%\) {
|
|
519
|
+
width: clamp(120px, 240px, 100%);
|
|
520
|
+
}
|
|
521
|
+
}
|
|
522
|
+
}
|
|
523
|
+
.cBlue {
|
|
524
|
+
color: blue;
|
|
525
|
+
}
|
|
526
|
+
.w\!120px {
|
|
527
|
+
width: 120px !important;
|
|
528
|
+
}
|
|
529
|
+
.h40px {
|
|
530
|
+
height: 40px;
|
|
531
|
+
}
|
|
532
|
+
.bdra8px {
|
|
533
|
+
border-radius: 8px;
|
|
534
|
+
}
|
|
535
|
+
.cWhite {
|
|
536
|
+
color: #fff;
|
|
537
|
+
}
|
|
538
|
+
.bgc\#0070f3 {
|
|
539
|
+
background-color: #0070f3;
|
|
540
|
+
}
|
|
541
|
+
```
|
|
542
|
+
|
|
543
|
+
## Quick Reference
|
|
544
|
+
|
|
545
|
+
### Media Query
|
|
546
|
+
|
|
547
|
+
| Abbrev | Screen size |
|
|
548
|
+
| ------ | ----------- |
|
|
549
|
+
| `xs:` | ≤ 575px |
|
|
550
|
+
| `sm:` | ≥ 576px |
|
|
551
|
+
| `md:` | ≥ 768px |
|
|
552
|
+
| `lg:` | ≥ 992px |
|
|
553
|
+
| `xl:` | ≥ 1200px |
|
|
554
|
+
| `2xl:` | ≥ 1400px |
|
|
555
|
+
|
|
556
|
+
### Layer
|
|
557
|
+
|
|
558
|
+
| Abbrev | Description |
|
|
559
|
+
| ------ | ------------------------------------------- |
|
|
560
|
+
| `0` | Default layer (low priority) |
|
|
561
|
+
| `1-19` | Custom layers (higher number = higher priority) |
|
|
562
|
+
|
|
563
|
+
### Special values
|
|
564
|
+
|
|
565
|
+
| Symbol | Meaning |
|
|
566
|
+
| ------ | ----------------- |
|
|
567
|
+
| `!` | !important |
|
|
568
|
+
| `--` | CSS Variable |
|
|
569
|
+
| `{}` | Literal/custom value |
|
|
570
|
+
| `;` | Replacement for spaces inside class names |
|
|
571
|
+
|
|
572
|
+
## FAQ
|
|
573
|
+
|
|
574
|
+
**Q:** Why must keyword values start with an uppercase letter?
|
|
575
|
+
|
|
576
|
+
**A:** To distinguish properties (lowercase) from named values (capitalized). This avoids confusion between `red` as a value and a potential property.
|
|
577
|
+
|
|
578
|
+
**Q:** What should I use for spaces inside values?
|
|
579
|
+
|
|
580
|
+
**A:** Use `;` inside values and selectors to avoid breaking the class name.
|
|
581
|
+
|
|
582
|
+
**Q:** I want to add a new breakpoint — how?
|
|
583
|
+
|
|
584
|
+
**A:** Add a new prefix (e.g. `xxl:`) and map it to `@media (min-width: ...)` in your compiler configuration.
|
|
585
|
+
|
|
586
|
+
**Q:** Do I need to escape classes when writing them in HTML?
|
|
587
|
+
|
|
588
|
+
**A:** No. Write them as-is; the compiler will escape characters when generating CSS output.
|
|
589
|
+
|
|
590
|
+
---
|
|
591
|
+
|
|
592
|
+
# Full reference: all xCSS properties and abbreviations
|
|
593
|
+
|
|
594
|
+
## Data structure
|
|
595
|
+
|
|
596
|
+
- Abbrev: short token used in class names
|
|
597
|
+
- CSS Property: full CSS property name
|
|
598
|
+
- Value abbreviations: mapping of short tokens to CSS values (if any)
|
|
599
|
+
|
|
600
|
+
---
|
|
601
|
+
|
|
602
|
+
## 1. Layout & Display
|
|
603
|
+
|
|
604
|
+
### Display
|
|
605
|
+
|
|
606
|
+
| Abbrev | Property | Value abbreviations |
|
|
607
|
+
| ------ | --------- | ------------------- |
|
|
608
|
+
| `d` | `display` | `b:block`, `ib:inline-block`, `i:inline`, `f:flex`, `if:inline-flex`, `t:table`, `it:inline-table`, `tcp:table-caption`, `tcell:table-cell`, `tcol:table-column`, `tcolg:table-column-group`, `tfg:table-footer-group`, `thg:table-header-group`, `trg:table-row-group`, `tr:table-row`, `fr:flow-root`, `g:grid`, `ig:inline-grid`, `c:contents`, `li:list-item` |
|
|
609
|
+
|
|
610
|
+
### Position
|
|
611
|
+
|
|
612
|
+
| Abbrev | Property | Values |
|
|
613
|
+
| ------ | ---------- | --------------------------- |
|
|
614
|
+
| `pos` | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
|
|
615
|
+
|
|
616
|
+
### Sizing
|
|
617
|
+
|
|
618
|
+
| Abbrev | Property | Notes/values |
|
|
619
|
+
| ------ | --------------- | ------------------------------------------- |
|
|
620
|
+
| `w` | `width` | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
|
|
621
|
+
| `h` | `height` | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
622
|
+
| `mw` | `max-width` | - |
|
|
623
|
+
| `mxw` | `max-width` | - |
|
|
624
|
+
| `mh` | `max-height` | - |
|
|
625
|
+
| `miw` | `min-width` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
626
|
+
| `mih` | `min-height` | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
|
|
627
|
+
| `blks` | `block-size` | - |
|
|
628
|
+
| `ins` | `inline-size` | - |
|
|
629
|
+
| `mbs` | `max-block-size`| - |
|
|
630
|
+
| `mis` | `max-inline-size`| - |
|
|
631
|
+
| `mibs` | `min-block-size`| - |
|
|
632
|
+
| `misz` | `min-inline-size`| - |
|
|
633
|
+
|
|
634
|
+
### Positioning
|
|
635
|
+
|
|
636
|
+
| Abbrev | Property | Notes |
|
|
637
|
+
| ------ | ------------------------- | ----- |
|
|
638
|
+
| `t` | `top` | - |
|
|
639
|
+
| `r` | `right` | - |
|
|
640
|
+
| `b` | `bottom` | - |
|
|
641
|
+
| `l` | `left` | - |
|
|
642
|
+
| `i` | `inset` | - |
|
|
643
|
+
| `iblk` | `inset-block` | - |
|
|
644
|
+
| `ibe` | `inset-block-end` | - |
|
|
645
|
+
| `ibsta`| `inset-block-start` | - |
|
|
646
|
+
| `ii` | `inset-inline` | - |
|
|
647
|
+
| `iie` | `inset-inline-end` | - |
|
|
648
|
+
| `iis` | `inset-inline-start` | - |
|
|
649
|
+
|
|
650
|
+
---
|
|
651
|
+
|
|
652
|
+
## 2. Spacing
|
|
653
|
+
|
|
654
|
+
### Margin
|
|
655
|
+
|
|
656
|
+
| Abbrev | Property | Notes |
|
|
657
|
+
| ------ | ------------------- | ----- |
|
|
658
|
+
| `m` | `margin` | - |
|
|
659
|
+
| `mt` | `margin-top` | - |
|
|
660
|
+
| `mr` | `margin-right` | - |
|
|
661
|
+
| `mb` | `margin-bottom` | - |
|
|
662
|
+
| `ml` | `margin-left` | - |
|
|
663
|
+
| `mblk` | `margin-block` | - |
|
|
664
|
+
| `mbe` | `margin-block-end` | - |
|
|
665
|
+
| `mbsta`| `margin-block-start`| - |
|
|
666
|
+
| `min` | `margin-inline` | - |
|
|
667
|
+
| `mie` | `margin-inline-end` | - |
|
|
668
|
+
| `mista`| `margin-inline-start`| - |
|
|
669
|
+
|
|
670
|
+
### Padding
|
|
671
|
+
|
|
672
|
+
| Abbrev | Property | Notes/values |
|
|
673
|
+
| ------ | ---------------------- | ------------ |
|
|
674
|
+
| `p` | `padding` | - |
|
|
675
|
+
| `pt` | `padding-top` | - |
|
|
676
|
+
| `pr` | `padding-right` | - |
|
|
677
|
+
| `pb` | `padding-bottom` | - |
|
|
678
|
+
| `pl` | `padding-left` | - |
|
|
679
|
+
| `pblk` | `padding-block` | - |
|
|
680
|
+
| `pbe` | `padding-block-end` | - |
|
|
681
|
+
| `pbs` | `padding-block-start` | - |
|
|
682
|
+
| `pi` | `padding-inline` | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
|
|
683
|
+
| `pie` | `padding-inline-end` | - |
|
|
684
|
+
| `pis` | `padding-inline-start` | - |
|
|
685
|
+
|
|
686
|
+
---
|
|
687
|
+
|
|
688
|
+
## 3. Colors & Background
|
|
689
|
+
|
|
690
|
+
### Color
|
|
691
|
+
|
|
692
|
+
| Abbrev | Property | Values |
|
|
693
|
+
| ------ | -------- | ----------------------------- |
|
|
694
|
+
| `c` | `color` | `i:inherit`, `t:transparent` |
|
|
695
|
+
|
|
696
|
+
### Background
|
|
697
|
+
|
|
698
|
+
| Abbrev | Property | Notes/values |
|
|
699
|
+
| ------ | ------------------------ | ------------ |
|
|
700
|
+
| `bg` | `background` | - |
|
|
701
|
+
| `bgc` | `background-color` | `t:transparent`, `c:currentcolor` |
|
|
702
|
+
| `bgi` | `background-image` | - |
|
|
703
|
+
| `bgp` | `background-position` | `t:top`, `b:bottom`, `l:left`, `r:right`, `c:center`, `lt:left top`, `ct:center top`, `rt:right top`, `lc:left center`, `cc:center center`, `rc:right center`, `lb:left bottom`, `cb:center bottom`, `rb:right bottom` |
|
|
704
|
+
| `bgpx` | `background-position-x` | `l:left`, `r:right`, `c:center` |
|
|
705
|
+
| `bgpy` | `background-position-y` | `t:top`, `b:bottom`, `c:center` |
|
|
706
|
+
| `bgr` | `background-repeat` | `r:repeat`, `x:repeat-x`, `y:repeat-y`, `s:space`, `rn:round`, `n:no-repeat`, `rs:repeat space`, `rr:repeat repeat`, `nr:no-repeat round` |
|
|
707
|
+
| `bgs` | `background-size` | `c:contain` |
|
|
708
|
+
| `bga` | `background-attachment` | `s:scroll`, `f:fixed`, `l:local`|
|
|
709
|
+
| `bgbm` | `background-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
|
|
710
|
+
| `bgcl` | `background-clip` | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
|
|
711
|
+
| `bgo` | `background-origin` | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
|
|
712
|
+
|
|
713
|
+
---
|
|
714
|
+
|
|
715
|
+
## 4. Border
|
|
716
|
+
|
|
717
|
+
### Border General
|
|
718
|
+
|
|
719
|
+
| Abbrev | Property | Values |
|
|
720
|
+
| ------ | -------------- | ------ |
|
|
721
|
+
| `bd` | `border` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
|
|
722
|
+
| `bds` | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
|
|
723
|
+
| `bdc` | `border-color` | - |
|
|
724
|
+
| `bdw` | `border-width` | `t:thin`, `m:medium`, `th:thick` |
|
|
725
|
+
|
|
726
|
+
### Border Sides
|
|
727
|
+
|
|
728
|
+
| Abbrev | Property | Notes |
|
|
729
|
+
| ------ | ---------------- | ----- |
|
|
730
|
+
| `bdt` | `border-top` | - |
|
|
731
|
+
| `bdr` | `border-right` | - |
|
|
732
|
+
| `bdb` | `border-bottom` | - |
|
|
733
|
+
| `bdl` | `border-left` | - |
|
|
734
|
+
|
|
735
|
+
### Border Radius
|
|
736
|
+
|
|
737
|
+
| Abbrev | Property | Notes |
|
|
738
|
+
| ------ | ---------------------------- | ----- |
|
|
739
|
+
| `bda` | `border-radius` | - |
|
|
740
|
+
| `bdra` | `border-radius` | - |
|
|
741
|
+
| `bdtlr`| `border-top-left-radius` | - |
|
|
742
|
+
| `bdtrr`| `border-top-right-radius` | - |
|
|
743
|
+
| `bdblr`| `border-bottom-left-radius` | - |
|
|
744
|
+
| `bdbrr`| `border-bottom-right-radius` | - |
|
|
745
|
+
| `bdeer`| `border-end-end-radius` | - |
|
|
746
|
+
| `bdesr`| `border-end-start-radius` | - |
|
|
747
|
+
| `bdser`| `border-start-end-radius` | - |
|
|
748
|
+
| `bdssr`| `border-start-start-radius` | - |
|
|
749
|
+
|
|
750
|
+
### Border Block/Inline
|
|
751
|
+
|
|
752
|
+
| Abbrev | Property | Values |
|
|
753
|
+
| ------ | ------------------------ | ------ |
|
|
754
|
+
| `bdblk`| `border-block` | - |
|
|
755
|
+
| `bdblc`| `border-block-color` | - |
|
|
756
|
+
| `bdble`| `border-block-end` | - |
|
|
757
|
+
| `bdbls`| `border-block-start` | - |
|
|
758
|
+
| `bdblst`| `border-block-style` | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
|
|
759
|
+
| `bdblwi`| `border-block-width` | - |
|
|
760
|
+
| `bdi` | `border-inline` | - |
|
|
761
|
+
| `bdic` | `border-inline-color` | - |
|
|
762
|
+
| `bdie` | `border-inline-end` | - |
|
|
763
|
+
| `bdista`| `border-inline-start` | - |
|
|
764
|
+
| `bdistl`| `border-inline-style` | - |
|
|
765
|
+
| `bdinw`| `border-inline-width` | - |
|
|
766
|
+
|
|
767
|
+
---
|
|
768
|
+
|
|
769
|
+
## 5. Typography
|
|
770
|
+
|
|
771
|
+
### Font
|
|
772
|
+
|
|
773
|
+
(Abbreviations for font- related properties — many are supported; see mapping tables in the original file for the complete list.)
|
|
774
|
+
|
|
775
|
+
| Abbrev | Property | Notes/values |
|
|
776
|
+
| ------ | --------------------------- | ------------ |
|
|
777
|
+
| `fn` | `font` | - |
|
|
778
|
+
| `ff` | `font-family` | `a:ui-sans-serif, system-ui, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'`, `s:ui-serif, Georgia, Cambria, 'Times New Roman', Times, serif`, `m:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace` |
|
|
779
|
+
| `fns` | `font-size` | - |
|
|
780
|
+
| `fw` | `font-weight` | - |
|
|
781
|
+
| `fnsty`| `font-style` | - |
|
|
782
|
+
| ... | (other font-variant & feature properties are included) | - |
|
|
783
|
+
|
|
784
|
+
### Text
|
|
785
|
+
|
|
786
|
+
| Abbrev | Property | Values/notes |
|
|
787
|
+
| ------ | --------------------- | ------------ |
|
|
788
|
+
| `ta` | `text-align` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
|
|
789
|
+
| `tal` | `text-align-last` | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
|
|
790
|
+
| `td` | `text-decoration` | `u:underline` |
|
|
791
|
+
| `tdc` | `text-decoration-color` | - |
|
|
792
|
+
| `tdl` | `text-decoration-line`| `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
|
|
793
|
+
| `tds` | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
|
|
794
|
+
| `tdt` | `text-decoration-thickness` | `ff:from-font` |
|
|
795
|
+
| `tep` | `text-emphasis-position` | `or:over right`, `ol:over left`, `ur:under right`, `ul:under left`, `lo:left over`, `ru:right under`, `lu:left under` |
|
|
796
|
+
| `ttr` | `text-transform` | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
|
|
797
|
+
| `tw` | `text-wrap` | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
|
|
798
|
+
| ... | (other text properties included) | - |
|
|
799
|
+
|
|
800
|
+
### Line & Spacing
|
|
801
|
+
|
|
802
|
+
| Abbrev | Property | Notes |
|
|
803
|
+
| ------ | --------------------- | ----- |
|
|
804
|
+
| `lh` | `line-height` | - |
|
|
805
|
+
| `lts` | `letter-spacing` | `n:normal` |
|
|
806
|
+
| `wrs` | `word-spacing` | - |
|
|
807
|
+
| `lbrk` | `line-break` | - |
|
|
808
|
+
| `wrb` | `word-break` | - |
|
|
809
|
+
| `wrtm` | `writing-mode` | - |
|
|
810
|
+
|
|
811
|
+
---
|
|
812
|
+
|
|
813
|
+
## 6. Flexbox
|
|
814
|
+
|
|
815
|
+
| Abbrev | Property | Values/notes |
|
|
816
|
+
| ------ | ------------------- | ------------ |
|
|
817
|
+
| `fx` | `flex` | `i:0 1 auto`, `a:1 1 auto` |
|
|
818
|
+
| `fxb` | `flex-basis` | - |
|
|
819
|
+
| `fxd` | `flex-direction` | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
|
|
820
|
+
| `fxw` | `flex-wrap` | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
|
|
821
|
+
| `jc` | `justify-content` | `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, `sc:safe center`, `uc:unsafe center` |
|
|
822
|
+
| `ai` | `align-items` | `n:normal`, `c:center`, `s:start`, `e:end`, `fs:flex-start`, `fe:flex-end`, `ss:self-start`, `se:self-end`, `b:baseline`, `fb:first baseline`, `lb:last baseline` |
|
|
823
|
+
| `as` | `align-self` | similar values as `ai` |
|
|
824
|
+
| `ac` | `align-content` | `s:start`, `e:end`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, etc. |
|
|
825
|
+
|
|
826
|
+
---
|
|
827
|
+
|
|
828
|
+
## 7. Grid
|
|
829
|
+
|
|
830
|
+
(Full grid abbreviations and value mappings are supported — see original mapping for exhaustive list.)
|
|
831
|
+
|
|
832
|
+
| Abbrev | Property | Notes |
|
|
833
|
+
| ------ | ------------------------ | ----- |
|
|
834
|
+
| `g` | `grid` | - |
|
|
835
|
+
| `ga` | `grid-area` | - |
|
|
836
|
+
| `gc` | `grid-column` | `f:1 / -1` |
|
|
837
|
+
| `gtc` | `grid-template-columns` | `s:subgrid` |
|
|
838
|
+
| `gap` | `gap` | - |
|
|
839
|
+
| `ji` | `justify-items` | many mapping values (center, stretch, start, end, etc.) |
|
|
840
|
+
| ... | (other grid properties) | - |
|
|
841
|
+
|
|
842
|
+
---
|
|
843
|
+
|
|
844
|
+
## 8. Effects & Filters
|
|
845
|
+
|
|
846
|
+
### Opacity & Visibility
|
|
847
|
+
|
|
848
|
+
| Abbrev | Property | Notes |
|
|
849
|
+
| ------ | ---------- | ----- |
|
|
850
|
+
| `opc` | `opacity` | - |
|
|
851
|
+
| `v` | `visibility` | `c:collapse` |
|
|
852
|
+
|
|
853
|
+
### Filter & Backdrop
|
|
854
|
+
|
|
855
|
+
| Abbrev | Property | Notes |
|
|
856
|
+
| ------ | ---------------- | ----- |
|
|
857
|
+
| `flt` | `filter` | - |
|
|
858
|
+
| `bkdf` | `backdrop-filter`| - |
|
|
859
|
+
|
|
860
|
+
### Blend Modes
|
|
861
|
+
|
|
862
|
+
| Abbrev | Property | Values |
|
|
863
|
+
| ------ | ----------------- | ------ |
|
|
864
|
+
| `mbd` | `mix-blend-mode` | `n:normal`, `m:multiply`, `s:screen`, `o:overlay`, `d:darken`, `l:lighten`, `cd:color-dodge`, `i:color-burn`, `hl:hard-light`, `sl:soft-light`, `di:difference`, `e:exclusion`, `h:hue`, `sa:saturation`, `c:color`, `lu:luminosity` |
|
|
865
|
+
|
|
866
|
+
### Box Shadow
|
|
867
|
+
|
|
868
|
+
| Abbrev | Property | Notes |
|
|
869
|
+
| ------ | ------------ | ----- |
|
|
870
|
+
| `bxsh` | `box-shadow` | - |
|
|
871
|
+
| `bxshd`| `box-shadow` | - |
|
|
872
|
+
|
|
873
|
+
---
|
|
874
|
+
|
|
875
|
+
## 9. Transforms & Animations
|
|
876
|
+
|
|
877
|
+
### Transform
|
|
878
|
+
|
|
879
|
+
| Abbrev | Property | Notes |
|
|
880
|
+
| ------ | ------------------ | ----- |
|
|
881
|
+
| `tra` | `transform` | - |
|
|
882
|
+
| `tras` | `transform-style` | - |
|
|
883
|
+
| `rot` | `rotate` | - |
|
|
884
|
+
| `s` | `scale` | - |
|
|
885
|
+
| `trl` | `translate` | - |
|
|
886
|
+
|
|
887
|
+
### Transition
|
|
888
|
+
|
|
889
|
+
| Abbrev | Property | Notes |
|
|
890
|
+
| ------- | -------------------------- | ----- |
|
|
891
|
+
| `tran` | `transition` | - |
|
|
892
|
+
| `trand` | `transition-delay` | - |
|
|
893
|
+
| `trandur`| `transition-duration` | - |
|
|
894
|
+
| `trantf`| `transition-timing-function`| - |
|
|
895
|
+
|
|
896
|
+
### Animation
|
|
897
|
+
|
|
898
|
+
| Abbrev | Property | Notes |
|
|
899
|
+
| ------ | -------------------------- | ----- |
|
|
900
|
+
| `ani` | `animation` | - |
|
|
901
|
+
| `anide`| `animation-delay` | - |
|
|
902
|
+
| `anidu`| `animation-duration` | - |
|
|
903
|
+
| `anips`| `animation-play-state` | `p:paused`, `r:running` |
|
|
904
|
+
| `anitf`| `animation-timing-function`| `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
|
|
905
|
+
|
|
906
|
+
---
|
|
907
|
+
|
|
908
|
+
## 10. Overflow & Scrolling
|
|
909
|
+
|
|
910
|
+
### Overflow
|
|
911
|
+
|
|
912
|
+
| Abbrev | Property | Values |
|
|
913
|
+
| ------ | ---------------- | ------ |
|
|
914
|
+
| `ofl` | `overflow` | - |
|
|
915
|
+
| `oflx` | `overflow-x` | `c:clip`, `s:scroll` |
|
|
916
|
+
| `ofly` | `overflow-y` | `c:clip`, `s:scroll` |
|
|
917
|
+
|
|
918
|
+
### Scroll
|
|
919
|
+
|
|
920
|
+
| Abbrev | Property | Notes |
|
|
921
|
+
| ------ | --------------------- | ----- |
|
|
922
|
+
| `scrb` | `scroll-behavior` | - |
|
|
923
|
+
| `scrm` | `scroll-margin` | - |
|
|
924
|
+
| `scrsa`| `scroll-snap-align` | - |
|
|
925
|
+
| `sbc` | `scrollbar-color` | - |
|
|
926
|
+
| `sbg` | `scrollbar-gutter` | - |
|
|
927
|
+
|
|
928
|
+
### Overscroll
|
|
929
|
+
|
|
930
|
+
| Abbrev | Property | Values |
|
|
931
|
+
| ------ | ----------------------------- | ------ |
|
|
932
|
+
| `osrbh`| `overscroll-behavior` | `c:contain` |
|
|
933
|
+
| `osrbb`| `overscroll-behavior-block` | `c:contain` |
|
|
934
|
+
| `osrbi`| `overscroll-behavior-inline` | `c:contain` |
|
|
935
|
+
|
|
936
|
+
---
|
|
937
|
+
|
|
938
|
+
## 11. Lists & Tables
|
|
939
|
+
|
|
940
|
+
### Lists
|
|
941
|
+
|
|
942
|
+
| Abbrev | Property | Values |
|
|
943
|
+
| ------ | ------------------ | ------ |
|
|
944
|
+
| `ls` | `list-style` | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, ... |
|
|
945
|
+
|
|
946
|
+
### Tables
|
|
947
|
+
|
|
948
|
+
| Abbrev | Property | Values |
|
|
949
|
+
| ------ | ------------------ | ------ |
|
|
950
|
+
| `tbl` | `table-layout` | - |
|
|
951
|
+
| `bdcl` | `border-collapse` | `s:separate`, `c:collapse` |
|
|
952
|
+
| `bdsp` | `border-spacing` | - |
|
|
953
|
+
|
|
954
|
+
### Columns
|
|
955
|
+
|
|
956
|
+
| Abbrev | Property | Notes |
|
|
957
|
+
| ------ | ------------------ | ----- |
|
|
958
|
+
| `col` | `columns` | - |
|
|
959
|
+
| `colc` | `column-count` | - |
|
|
960
|
+
| `colg` | `column-gap` | - |
|
|
961
|
+
|
|
962
|
+
---
|
|
963
|
+
|
|
964
|
+
## 12. Advanced Properties
|
|
965
|
+
|
|
966
|
+
### Containment
|
|
967
|
+
|
|
968
|
+
| Abbrev | Property | Notes |
|
|
969
|
+
| ------ | -------------------------------- | ----- |
|
|
970
|
+
| `cnt` | `contain` | - |
|
|
971
|
+
| `cntibs`| `contain-intrinsic-block-size` | - |
|
|
972
|
+
| `cntih`| `contain-intrinsic-height` | - |
|
|
973
|
+
|
|
974
|
+
### Container Queries
|
|
975
|
+
|
|
976
|
+
| Abbrev | Property | Notes |
|
|
977
|
+
| ------ | --------------- | ----- |
|
|
978
|
+
| `ctr` | `container` | - |
|
|
979
|
+
| `ctrn` | `container-name`| - |
|
|
980
|
+
| `ctrt` | `container-type`| - |
|
|
981
|
+
|
|
982
|
+
### Content & Counters
|
|
983
|
+
|
|
984
|
+
| Abbrev | Property | Notes |
|
|
985
|
+
| ------ | --------------------- | ----- |
|
|
986
|
+
| `ctt` | `content` | - |
|
|
987
|
+
| `cntri`| `counter-increment` | - |
|
|
988
|
+
| `cntrr`| `counter-reset` | - |
|
|
989
|
+
|
|
990
|
+
### Page Breaks
|
|
991
|
+
|
|
992
|
+
| Abbrev | Property | Notes |
|
|
993
|
+
| ------ | ------------------------- | ----- |
|
|
994
|
+
| `pg` | `page` | - |
|
|
995
|
+
| `pgba` | `page-break-after` | - |
|
|
996
|
+
| `pgbb` | `page-break-before` | - |
|
|
997
|
+
| `brka` | `break-after` | - |
|
|
998
|
+
|
|
999
|
+
### Other Advanced
|
|
1000
|
+
|
|
1001
|
+
| Abbrev | Property | Values/notes |
|
|
1002
|
+
| ------ | ------------------ | ------------ |
|
|
1003
|
+
| `a` | `all` | - |
|
|
1004
|
+
| `is` | `isolation` | `i:isolate` |
|
|
1005
|
+
| `z` | `z-index` | - |
|
|
1006
|
+
| `ord` | `order` | - |
|
|
1007
|
+
| `fl` | `float` | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
|
|
1008
|
+
| `rsz` | `resize` | `b:both`, `h:horizontal`, `v:vertical` |
|
|
1009
|
+
| `us` | `user-select` | `t:text`, `all:all`, `c:contain` |
|
|
1010
|
+
| `cr` | `cursor` | many cursor value mappings (pointer, default, move, not-allowed, grab, etc.) |
|
|
1011
|
+
| `toa` | `touch-action` | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
|
|
1012
|
+
| `zo` | `zoom` | - |
|
|
1013
|
+
|
|
1014
|
+
---
|
|
1015
|
+
|
|
1016
|
+
## 13. WebKit Specific
|
|
1017
|
+
|
|
1018
|
+
| Abbrev | Property | Notes |
|
|
1019
|
+
| ------ | --------------------------- | ----- |
|
|
1020
|
+
| `wlc` | `-webkit-line-clamp` | - |
|
|
1021
|
+
| `wtfc` | `-webkit-text-fill-color` | - |
|
|
1022
|
+
| `wts` | `-webkit-text-stroke` | - |
|
|
1023
|
+
| `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
|
|
1024
|
+
|
|
1025
|
+
---
|
|
1026
|
+
|
|
1027
|
+
## 14. Special Values
|
|
1028
|
+
|
|
1029
|
+
### Common Values
|
|
1030
|
+
|
|
1031
|
+
- `n` = `none`
|
|
1032
|
+
- `nm` = `normal`
|
|
1033
|
+
- `a` = `auto`
|
|
1034
|
+
- `i` = `inherit`
|
|
1035
|
+
- `in` = `initial`
|
|
1036
|
+
- `is` = `inline-start`
|
|
1037
|
+
- `ie` = `inline-end`
|
|
1038
|
+
- `tr` = `transparent`
|
|
1039
|
+
- `c` = `center`
|
|
1040
|
+
- `cl` = `collapse`
|
|
1041
|
+
- `l` = `left`
|
|
1042
|
+
- `r` = `right`
|
|
1043
|
+
- `h` = `hidden`
|
|
1044
|
+
- `v` = `visible`
|
|
1045
|
+
- `s` = `start`
|
|
1046
|
+
- `e` = `end`
|
|
1047
|
+
- `t` = `top`
|
|
1048
|
+
- `b` = `bottom`
|
|
1049
|
+
- `bs` = `block-start`
|
|
1050
|
+
- `be` = `block-end`
|
|
1051
|
+
|
|
1052
|
+
### Size Values
|
|
1053
|
+
|
|
1054
|
+
- `t` = `thin`
|
|
1055
|
+
- `m` = `medium`
|
|
1056
|
+
- `th` = `thick`
|
|
1057
|
+
|
|
1058
|
+
### Style Values
|
|
1059
|
+
|
|
1060
|
+
- `s` = `solid`
|
|
1061
|
+
- `d` = `dotted`
|
|
1062
|
+
- `ds` = `dashed`
|
|
1063
|
+
- `db` = `double`
|
|
1064
|
+
- `g` = `groove`
|
|
1065
|
+
- `r` = `ridge`
|
|
1066
|
+
- `i` = `inset`
|
|
1067
|
+
- `o` = `outset`
|
|
1068
|
+
|
|
1069
|
+
---
|
|
1070
|
+
|
|
1071
|
+
This reference covers the 409 CSS properties and their supported abbreviations in xCSS. To use them, combine property abbreviations with value abbreviations using the syntax:
|
|
1072
|
+
|
|
1073
|
+
```
|
|
1074
|
+
[MQ:][layer]<property><value>[@selector]
|
|
1075
|
+
```
|
|
1076
|
+
|
|
1077
|
+
(remember: `<property><value>` is required)
|
|
1078
|
+
|
|
1079
|
+
### Full example (HTML + usage)
|
|
1080
|
+
|
|
1081
|
+
```packages/fkui/css-dist/README-EN.md#L511-999
|
|
1082
|
+
<!DOCTYPE html>
|
|
1083
|
+
<html lang="en">
|
|
1084
|
+
<head>
|
|
1085
|
+
<meta charset="utf-8">
|
|
1086
|
+
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
1087
|
+
<title>Login</title>
|
|
1088
|
+
<meta name="description" content="Basic HTML5 sample">
|
|
1089
|
+
<style>
|
|
1090
|
+
:root {
|
|
1091
|
+
--primary-color: #007bff;
|
|
1092
|
+
--secondary-color: #6c757d;
|
|
1093
|
+
--success-color: #28a745;
|
|
1094
|
+
--info-color: #17a2b8;
|
|
1095
|
+
--warning-color: #ffc107;
|
|
1096
|
+
--danger-color: #dc3545;
|
|
1097
|
+
--light-text: #6c757d;
|
|
1098
|
+
--dark-text: #343a40;
|
|
1099
|
+
--body-bg: #f8f9fa;
|
|
1100
|
+
--div-color: #dee2e6;
|
|
1101
|
+
--bd3:1px 1px 1px 1px #dee2e6;
|
|
1102
|
+
--w:#fff;
|
|
1103
|
+
}
|
|
1104
|
+
</style>
|
|
1105
|
+
</head>
|
|
1106
|
+
<body>
|
|
1107
|
+
<div class="dF jcC aiC h100vh bgc--body-bg px10px">
|
|
1108
|
+
<div class="bgc--w p40px bda8px bxshd--bd3 w400px">
|
|
1109
|
+
<h1 class="taC c--dark-text mb30px">Login</h1>
|
|
1110
|
+
<div class="dF fxdC my8px">
|
|
1111
|
+
<input class="p8px" type="text" placeholder="Username">
|
|
1112
|
+
</div>
|
|
1113
|
+
<div class="dF fxdC my8px">
|
|
1114
|
+
<input class="p8px" type="password" placeholder="Password">
|
|
1115
|
+
<a href="#" class="c--primary-color taR mt8px">
|
|
1116
|
+
Forgot password?
|
|
1117
|
+
</a>
|
|
1118
|
+
</div>
|
|
1119
|
+
<div class="taC mt30px">
|
|
1120
|
+
<button class="bdN bgc--primary-color cWhite p12px w100% bdra4px">
|
|
1121
|
+
Login
|
|
1122
|
+
</button>
|
|
1123
|
+
</div>
|
|
1124
|
+
<div class="dF aiC my20px">
|
|
1125
|
+
<div class="fx1 h1px bgc--div"></div>
|
|
1126
|
+
<span class="px10px c--light-text">Or continue with</span>
|
|
1127
|
+
<div class="fx1 h1px bgc--div"></div>
|
|
1128
|
+
</div>
|
|
1129
|
+
<div class="dF jcC">
|
|
1130
|
+
<button class="bdN bgc--info-color c--w p12px mx8px dF aiC bdra4px">
|
|
1131
|
+
<span class="ml8px">Facebook</span>
|
|
1132
|
+
</button>
|
|
1133
|
+
<button class="bdN bgc--success-color c--w p12px mx8px dF aiC bdra4px">
|
|
1134
|
+
|
|
1135
|
+
<span class="ml8px">X-Twitter</span>
|
|
1136
|
+
</button>
|
|
1137
|
+
</div>
|
|
1138
|
+
<div class="dF aiC my20px">
|
|
1139
|
+
<div class="fx1 h1px bgc--div"></div>
|
|
1140
|
+
</div>
|
|
1141
|
+
<div class="taC">
|
|
1142
|
+
<a href="#" class="p12px">
|
|
1143
|
+
Create new account
|
|
1144
|
+
</a>
|
|
1145
|
+
</div>
|
|
1146
|
+
</div>
|
|
1147
|
+
</div>
|
|
1148
|
+
|
|
1149
|
+
<script type="module">
|
|
1150
|
+
import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
|
|
1151
|
+
$.cssObserve(document);
|
|
1152
|
+
</script>
|
|
1153
|
+
</body>
|
|
1154
|
+
</html>
|
|
1155
|
+
```
|
|
1156
|
+
|
|
1157
|
+
```packages/fkui/css-dist/README-EN.md#L1000-1005
|
|
1158
|
+
(End of translated README)
|
|
1159
|
+
```
|
package/README.md
CHANGED
|
@@ -20,7 +20,48 @@ xCSS là một hệ thống CSS-in-JS cho phép bạn viết CSS ngắn gọn v
|
|
|
20
20
|
- Đọc/viết class theo công thức và hiểu nó biến thành CSS như thế nào
|
|
21
21
|
- Kiểm soát **media query**, **@layer**, **!important**, **selector** giả (pseudo) và tổ hợp nhiều thuộc tính trong **một class**
|
|
22
22
|
|
|
23
|
-
> **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **
|
|
23
|
+
> **Lưu ý**: Danh sách viết tắt thuộc tính và giá trị sẽ có ở **phía dưới**.
|
|
24
|
+
## Thiết kế mới: Design Tokens (CSS Variables)
|
|
25
|
+
|
|
26
|
+
- Mục đích: Giảm độ dài và phức tạp của giá trị CSS trong các class, đảm bảo nhất quán branding và dễ bảo trì khi màu sắc, spacing, shadow, gradient… thay đổi.
|
|
27
|
+
- Cách khai báo:
|
|
28
|
+
- Đặt các biến trong thẻ style ở đầu tài liệu hoặc trong một file CSS được import trước khi dùng xCSS.
|
|
29
|
+
- Dùng cú pháp CSS biến bắt đầu bằng --, ví dụ: --bg-gradient-login, --panel, --shadow-card, --color-primary, --spacing-md, …
|
|
30
|
+
- Cách dùng trong xCSS:
|
|
31
|
+
- Dùng trực tiếp qua braces: bg{var(--bg-gradient-login)} hoặc bxsh{var(--shadow-card)} hoặc p{var(--spacing-md)}.
|
|
32
|
+
- Dùng alias có sẵn để biến đổi nhanh: bgc--panel hoặc c--primary (nếu có alias tương ứng với token).
|
|
33
|
+
- Có thể có fallback bằng var(--name, fallbackValue) để tương thích với trình duyệt cũ.
|
|
34
|
+
- Lưu ý: CSS biến phải được load trước khi render các class dùng biến đó.
|
|
35
|
+
|
|
36
|
+
- Ví dụ khai báo tokens (thêm vào đầu tài liệu hoặc một file style được import sớm):
|
|
37
|
+
```html
|
|
38
|
+
<style>
|
|
39
|
+
:root {
|
|
40
|
+
--bg-gradient-login: linear-gradient(#6a11cb, #2575fc);
|
|
41
|
+
--panel: #ffffff;
|
|
42
|
+
--shadow-card: 0 10px 20px rgba(0,0,0,.15);
|
|
43
|
+
--radius-card: 12px;
|
|
44
|
+
--color-primary: #0070f3;
|
|
45
|
+
--space-md: 16px;
|
|
46
|
+
}
|
|
47
|
+
</style>
|
|
48
|
+
```
|
|
49
|
+
- Ví dụ dùng token trong trang login:
|
|
50
|
+
```html
|
|
51
|
+
<body class="bg{var(--bg-gradient-login)} h100vh w100% dF jcC aiC">
|
|
52
|
+
<main class="w360px md:w420px lg:w480px bgcWhite p28px bxsh{var(--shadow-card)} bdra12px">
|
|
53
|
+
...
|
|
54
|
+
<button class="w100% p12px cWhite bdN bdra8px bxsh{var(--shadow-card)}" style="--color-primary: #0070f3;">
|
|
55
|
+
Đăng nhập
|
|
56
|
+
</button>
|
|
57
|
+
</main>
|
|
58
|
+
</body>
|
|
59
|
+
```
|
|
60
|
+
- Gợi ý migrates và alias:
|
|
61
|
+
- Nếu có alias như bgc--panel hoặc c--primary, bạn có thể định nghĩa token tương ứng và sử dụng đồng thời.
|
|
62
|
+
- Ví dụ: :root { --panel: #fff; } và dùng bgc--panel hoặc bgc{var(--panel)} tùy cách build.
|
|
63
|
+
|
|
64
|
+
- Xem thêm trong phần ví dụ và trang Design Tokens dưới đây để tham khảo cách tích hợp.
|
|
24
65
|
|
|
25
66
|
## Cú pháp tổng quát
|
|
26
67
|
|
package/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
var v="AFsAIgB3AGwAYwBcAHQALQB3AGUAYgBrAGkBBgBsAGkAbgBlAC0AYwBsAGEAbQBwACIALAEBAHQAZgEEAQYBCAEKAQwALQB0AGUAeAEGAGYAaQBsAGwBEgBvAGwAbwByARgBGgBzAQUBBwEJAQsBBgEjASUALQBzAHQAcgBvAGsAZQEwAHcAdABzAR0BNAEgATcBJAEGATsBPQE/ASsBLQEvARkBQgBzAHcBMwEfATYBIgFJAToBPAE+AREAdwBpAGQAdABoAQUAbQA6AG0AZQBkAGkAdQBtAHwAdAA6AWEAaQBjAGsBMABhAGMBHQF0AGMAZQBuAQYAYwEsAS4BBQB1ADoAdQBuAHMAZQB0AXMBdgEOAGcAbgErAXoBeQB0AQUAcwA6ATsAYQByAHQAfABlADoBeQBkAHwAZgGRAGYAbAEkAVoBlAGWAGYBmAGfAaEBmgB8AG4AOgBuAS4AbQBhAGwAfABiADoAYgBhAYQBDgEQAZwBswEnAHIBOwAgAbUBtwEPAGUAfABsAbMBFAG+AcAAZQG4AcMAcwBwAZIAcAF0AREAYgGFAQgBeQB8AHMAYQHPAdEALQGUAG8BggGbAYQB2gF4AC0AZQB2AXkAbAB5AdcBbQFLAYUAYwBoAdcAYwGSAGEBpQAgAXgBjQByAHwAdQHxAYIB2AH0AfYBIwFQACIAYQBpAQUBsABpAYoALQEMAGUAbQEyAHQBqwGtAHIBrwGxAfEB/wBlAfgBkQGTAZUBlwGZAG4BmwGdADoBpwB4AaICGgGlAiABoAIiAakAcwIYAcoAZgIjAZYB4QG3Ai0BqQGzAckBywG6AiAAaQG9AHQBvwG2AcoBwgHEAcYBtgI7AjUCPwFEAfIB/gGOAhYB+QH7AYMB8wBlAfUCSQIBAbYCBQGJAYsCMQEFAg8BrgGwAHwCFAJRAdcBkgB0AaMCGwIpAisAbAItAhkCLwGYAjEB5AIdAZwBngInAi4BnAGmAnACMwG0Aj0CNgBmAbsCOQHIAncCPwHFADoBxwJDAn0BuQE7AmAAcgHtAe8CRgH9Ak8CFQH4AfoBgQJNAkgB9wFzAlQAbAFzAG4CBAJhApgBrwB0AGkAbwBuApcBcAIFApsAYQKdAp8BKwEWAG8AcwEMAp4AbgEFAHIAOgKHAHABFAF4AHwB2QBhAGQBmwF0ADoBdwFqAHUBFAEjAHwAcgHZArICtABlACwAIAK4AroCuwLKAsgCvQBtAr8CpQHDAsMCuwLFAdECzgK5As4BdQK+AsABQAEZAGECmABkAGUCowBpApwCrQAtAuIBFAB5AqEBaALkAuYCpwFoAocAYwKmAq4BPAKxAeUCFgGEArYCvABsAgAAbgLSArYCsAGwAv4C0gAtAocB5gG9AcMAbgKwAhACEgLIAwcC+QHDAZQBqwMDAhYC/wEjAw8C+AMJAsgDDQGwAuwAdQLuAqUC5wBkAHUCwwL0AqEAZgBtAyEC9AAtAScBKQAtAG0AbwLiAQUAZgIgAS4AdwGUAGQAcwGyAnYBcQM4AHIDOgGqAbMBrQEQAsgBtQM+AzkDOwJ5AasAYgBvAWECyABmAzcDSQMcAp8C3gICApgCogKaAuUDIgKnAgoDJgLnAXwBggGGAt8CmAL1AuADWwMsAv8BZgGQAZIBDgLiAqEAcAINA2cC7wGLArMAYQB5AaIBIwEFAc4B0AB1AYQBmwKwAHIBggNlAGcCoQEbAysC5wKdAG0BDwBnAy0BggLzAq0BBQBlAGkBmQI9AgkAbgGXAG8DlQGEAC0B3gGWA5MDmgBlA5YBDwOdAHUBlgBsAoABwgGUAdcCGAEjAHACcQIwA64CbABkAXMAcAIFAHAAcAOiAsMAbgF4AWMBswFmAG4CvwBpATsALQBiA6YAdAKfAWwDNQE4ARsAaQHKAZsCNAPHA8kCFABoAGUBcQNNAHgBcwByAgUBzQPWAQYDXwBvA2wAMQAgAC8AIAAxAHwAdgA6ADEANgPkACAAOQEwAQoAZABmAQUDRwBrAGQBPQOvAy4CAAPwAGsAZgB2A/QBdAP9AdsAdgPDAGkAYgEoAQwC6wEZAGIAZwQAAXEAZwE9Ad8D8ABnAGEEDgBrBBAB3gIdAdwAdAJhAe4DwAGPAUMBkgBjAT0BKQGcAjgAeAFnAcQCgABvAGMDHgQLAGcAYgMqAHQD9QQYAd8DxQGgBBoDMQMzAg4BrAJaAbEBZALQAv0AaQKzAekCGAQjAGUB1gOaAG8DCALqAHwAZAA6AGQBlAE/A5gDqAGJAGgBIwOYAGMETwF8AU8C6AMyAGcBwwOUBFwBLgPFAyUDmABoA6gAaAM5AC0EVgIvA6gAcwBvAGYBDQIHBFcETgOUAWgAZgGlAocDvAHDAZgBJAETA34CrQB8AGgAOgBoAHUBzAHZAdgAdAMlA1wEWQA6BGMB+ABsAYAEkgOLAa0CqwB0BAoAIgQMARMEFgQ1BBoBEwRDA/QCNAEuAuIAcgPFAG8AeAB8AHABswHQArkDjASnBKkAYwGzAXwBjQF6BLABbAFuAUkEEwEdBDQEEQSfAX0D2wQcAW4DuwHNAZQBjgJcBI8DJQR7AHQEkAQTApkEvQQZAGQCCQGvBGAEEwPhBDMEAQSeBNIBLgIHAQ8EogG0BKQCFgS3BKsAOgStAWgAbgONA9gCXASzAp8EWAEGA9gEEwO2BNgEDwS+BNIAcAKqAqwCnwEFAW0DyABwAzwDTQQcAG8BawRVAGUEcgLCArEEdAGWAl0B9wHEAW0BoARyACAE/QJcAW0CjQURAG8E/gGVBQgAZwRXBRYE/gEDAoAFBQI7Ao0CXAULAgACUAUMAHIB8QByBQkFJwIAAkAFIAUQBQADyAFrBLIEjwJRAb8DTgUzAsIBswUrBRsCQwU5BQIE8QB4BJ0E9QAtBPcElwLnBUMAdAUEBQYDgQUJBMgCjQTxAHkFRATRBUYE+AMsBVMEwgUSBKMFAQU0BTYCkwQvBMEE0AQ2ArIDogQgA4EAZQO5AqUAfAB4AvcFagEGBKkAeQVuBWYALQRFAeIC0wGrBPUBqgQ9AwYFaQVmAsIBkQAgBWUCpQAgBMUCtQByBWgFbwWCBX4FawMLBXwFgwI7BPUEEwINBWMEGgKrAHoC4wTMBI8E7QIDAqAECwBsAGsFlAEtAXEBOgBpBZgD8ABkA/QE4QTBBE8AZAU5BCkDOgRQAbYD1QGbAGQBswWuAHUAYgGgAHwAZwA6BBgESwLTBQgAZARgAHwDlAEPAYQBlgRKA6YFyAWoBboAawWqA0AE4gW6BCwBcgQLBbYBAwXQBKUENwXUAU4BLgXNAaAF2QXSBaMAawOzBd8D1gXhBKYF0wWkAZoF3QIBAGIF1wBlBZQFqwXbBesFlgSYBeAAdAWtBa8FtQGRBFEAcwW0BE4FtwHeBboBwwW9Bb8B5gUHBSsFwwRhADoFxwGFAHwFygFDAYUF5gFUBDMF8wXqBeQF7AFeAWAAaAXfBfIF0QXpBeMCLgYeBLwGFwYiAmgF7QYeBh8F2gYYAi4BWgB5BfgF+gQcBbAF/QWzBbAGAgW5BbsGBgE9BcAGCQFfBcQFxgGDBg8GEQXMBdYFugFTBegF9AXkBigGGwFhBh4EIANNBiAGSgYvBjEEUAX7BE4GNQX/BjcGVgY5BgUFvgY8BggFTgYLBcUGDQZCBckAOgOeBkUEmgXXAV4GSQYtBk0GHQZGBm4FQABtBc0GJQZSBTIFAgYpBkYAbAViBhcGdARsBSEDBgK4AWkAcwXNBYgGcwVdAwYFCQaDAWgDfgXNATsGiQUzBlQFmQYyASMF/AWyBloFtQY4BgQFvAZfAG8GPQZiBkAGZQXIBhAGaAXLBhMGRgYVBlEGLAaABnAE+wFuAGgBDwB8BEABZwFpAWsBYQaxAXAF1QZrBJwGFgZSBFwBFANxBZkCKwHQAyYBwwIUASwGwgGEBagGdwXaBM0F1gRIBn4GUgXsBewCwwaOBoYG0QBzBtMF2gXsBigG1waFBagC5QQNBr8F2gNbBNUF1gKeBkkG5wERBmkGqQZrAjkG6wTUAREFkAGQAesBPAKIBgkFjAGWAHIFeQTRAl8FhgNWBe8DwwbyAGEEYAE6AQ4BeAbiBtsGzgTiBuwBOgHeBSkHAgFoBqsF8wcPBnAG4gbrAG4BywbiBw0EpgEPAcsGewbwBZkGrAcOBxsBwgXlBukF5wblByYHIQXsBtAHIwYrBy0HKAbeBfcHEwPOBxUGUgcgBzQEGgcYBukBkwcaByECaAcLBx4DlwdCAmEBlQciBwMCKgdBBygGKAE7BjAHNwZIBywHHwcnARAGLgc+BvABOwBsB00HVwdQAaAG4gBuBzkG5gdWAV0BXwZOBdYHXAdUBoEEcgWoBdgHawUPAXsEwAduBzIEpgdxBpQHbgdjBOIHdwavBVoGsgOYBrUGjga4BIQBbwFxBagEFQdrBuAGjwXWAsMGSQeKBtkGawbcBOIFPQRXBagFKQeOBowHMAXvAb0HmAU+BpQBBQFgBlYGMwaYBf4GAAIYASwBXwYBBlwGnQY7BqAGYQXCBkABqwYOBckDpganBhIDYweRB3oEpgeUAR4HZwFiB34GsweBBrcBbAeEBrIHhgXWAc0GSQWGA4wFqAGEB5IEpgYoBtYGhAeLBmsCKgfPBi4G3wfTB5AF7wd1B58F+QFtBa4HowZYBpkHpgGSB6gGmwerBjoGnwahB7AEYQeyBmYGEAe1Bu4HuAXvBlAF8wT9BagEzAZJBP0HSgFgBn0H+wUXB2wD3wfaB/kGiAdrB/wHvAaNBuEF1gFDCAADrwdfBpUH4AZXBbEHpQQpB6cDbgeqBbgHrAfrB68GCgexBqQGQwfyBqgH9AFgB7oBIggBB30E/Ad/BrQBZQa2AWoHxAa6B8cGawgmCCkGugeACC0HgggwB4UGvABiBaoFXQaHBaoCIgLiAXwD4AGLAGIChwBhBc8FmgETA1UHAAcJBwIAeAX/BakGFgIiBf8CuABvAHcD8AhRB78D2AE6BGoFrghZBAsIUQB6CEEFpQB6B8wECwByAGsHiAhHA6IF5AHzA/sIaQBrCD0EMwhIBeQB0wNRAocD8AhqBM8IdgOXAqsDbwEZBC0DcQEFCIMDLAiAA1YEIwf6BMwExgdyAU8BMAETBMEBEwO6CJAAbAO4CIUBDgOvAdAHaAAiAR0EkAEFBkED1QUrAZYE/ATEBsYBjgiQBKEEzATAA5cCAAT3AsACrQiQAUQHvwSQAToB7gILCIkBLAieASwBagGLA2EBegiQASwD8wirBJQBiwMuApYIggEsBuQEXAi9AC0EFAEXCMkH/wjECM0DggdgCNEHlwjTAG0BiwjVAREHMARcB5wI2QjbAr8BEQgQCMEGfQYVCMwI2gMGCOMBBwe+COYCDQjpAlYB0AWeCJ0BLAjoCLwI6gdZBFwIhQj4AYMIkAF6CPwBegWdCP8CnQBiCPAFnAOkAQ8BPAXHAXAGUwWXCIkBegBpCLQJCAGLCQoFKwGDCQ0D1QUJCQQAaQcECKsJAgkJAXoJFwKrAGMHRgdOBaYJEAKdCQcJIAkVCSIJDAklCQ8IqQj3CSwIrQkjCQ0I+gE8CQECYQHCAgEC8wb9CToFnQTiA2oIiQE8BCAEtAk7ARAEpgSYA7kIkAQcCToIqAiCCS4I/ANiByYERwQfCQQIBgi/AgAFfQZqAGMJIgkHCVQH0AbvBCMIhQMlBHAEwQN8AG8JCgJKBa0FBQBhAr8FCgFkCUcBWQPAAHUEgwSFAcoE/gBwBb0AcAE9BBAF8QM7AHcAOgM4AQwFUAHKAbEE/AFJA+gBbQMIAp0ELQEqA8wCtgOoAgYBtgJcAc4BfABwAekDMQFlBj0CHQV8A/cFFwGqAdkBrQEGAbABLQEIAZsEEAZfAGEAYgW8AbMEEAmsBAcE6AK2AZEJpgi2BCQCEwEsArAEXAlcCSgCwgOBCFgJvQWYAaoDDAnCBH0CsAb0BfEJvgbbAZIJxgB8AHcCsAB3Cc4JSQGsCckJDwHXAhYBkgnWCcsJ0AGSCdIChwnXAGUJ3QniCdMJzAGDCdMF8QmCARABUwnTAHcB4QdiA5wJ4Am+CGcAOgB6BqAAbQOXAHwJ9gn1CfcDpQe4AvEHoAI5A94IsQEZCFMBaAHNAuoD9AG0BeMFxQGzBzsHVwYYBmQKDwHDAzUCIQXFAzUKEwMtAicEuAJhBp0BDAZlByEKHQW7BMwBzgoiCN0AYQBwAvQBbAF4ASkBbgmsAaABEgmHCisBLAouBgQBTgi9CjMAbAW9CiYKNwjqBDUE/gEbCjsKLwERA1EDTgTiCj8HxApCCjYD1QK4CkcEEQpAAHIKSgowAT0J0gpIAvYKPApUAZwCsAGfCcEGPAGWBjsHqQIHCiAHKAQQB6kGyQS1AUMBxAOUAQ4DxAIKBnUBGQILAHABHQpxBJgKMQEpB5ABnwQgA/oCFgEwAGYFSgIhCKAAOgAwA+YCyQOmAG8C+wPjA+MJbwPICn0AeAh0AiEDxQG2A8MKjQhTCpAC8QoDBPoC9gpZBYgCsQpdAxoC+gbJCMUCXAm7CP0FfQMIBswBGQp+CMMKkApcCGEAIgp+BuQKkAQYCq4KfgINCpAF/wkXBrwKfgYVCpAJ0AooAQUJggq+BP4J3QrCCqYDEQV7Aa0Kwgp9B2oKXAKlCKABkQoZAmgFxQGYChkBqQVOBT4EKgdxCn0C9QNRCMAKqQqrBO0DLQEVASgFWQHZAHUAaQE6AuAAcwE6AhYAaQBmAsgAcwB5ATsCCwAtCucK8ArqCuwFKwrvACAAJwBBA7gBoAAgAEMEwAAgAEUDMQBqAGkAJwLIACcAUwBlAGcAbwJPAFUASQsECwYLCAsKCwwLDgsQCxIAUwB5AG0DTQBsCwkK/ABOA04AbwsBCwMLBQBvCwcAJwJfCucK+QruAsgARwBlAS4AZwBpAGECyABDARUIRws0CwoAVALlBfEAIABOCeIAIABSBQIC4AsgCzwBZgBzCvAK7QBmCCwLLAMxBJYB0AF4AsgAUwBGAE0CnwBvAC0AUgsNAtEAcgLIAE0B5wBvC14CnwF0C2ELJQGDASwBtgsKAEwEBgIWBI0AIAtWAa0LIAAnCwIDJQPOAHILPwniCyALTwKqC1EDVgBmAG4K4AS2AGYK4wHoCtsBnQM0CuEBpQKlAyUI5AGFAp0E6Ap4AG4ISgrdAQYBPwb9CGgKrwcbBNcLlARsAuAAZwB1BwYG7QMIBgoLfgSWC4gEtgUXCY4BsAhmC5gLfwTyC5wB0AGgBjMK2wq2CuEJMQqpAk0LpwFKCSgB3ABkAGoDfge4C38BSwu6AVoChwTMBnELmQdQC8QI5Qu4CvEK3Au2AHkBegPVAqsLkQfJARsL0AvSCcoK6wVHBPkI9AvCAUQLywvRAWEL2gE6AhIBKgiDC9ULtQS2C84L4wvUB3gLzQq8C9gL7QPDATQJGwu4A/8L1wS2AHYBlAs0Ct4LmQv7C8QL+wUrAuAJpQL9AxYC0guRAHYBHQucDAIL/QF7CigMCQOiDAEL/AwEAeQCQgHcAqsC4ArbAeYMEwwDBLYCCwsoAGkMGwrMCuEMDQwVAYkLiwngDBsLzwv6DBQEtgPBAWYFKwBjDBsLrwwlDC4BBgvcAycL9wvqAQYMJgiHC44DjAp4C/EEtgEIC/YLmQxDAR4DkwU+Cn0ELQuIBxIE0gi1ArgLvwE7ATAIzwEFCM8MVQxXBgoMVQeICmUE0gTGAGEMXAEdDF4B3AqGCj0BgwFjAXABZQOkCXMBega0ArsBrwIiDG0BlgBtBEABDwxxACgAMALIADEAZgByACkMXAjDDGQKiwtYCq0CrwqdAHcFUAj9BE4EUAF5AvoDQAyHACAC4gZCAlwEWwj9DJEMjQNWBBQEwQyCDGYKVAINA4sB8QSVAYwE7gxvDKEAYQxyBO0Exwx1DGsAbgx4DHoD5gx9DH8BGQBnDGMGCgxnAzQD6gPtAC0AMQxVA70AdAxkCPEHKQAiDLQCDQzACqUHQwyzDJsMtgpUDLgD4wPlDLsMVQKHDFoBXwMGCcEBmgzRDMUMywnBDMgMwwQgDGQBIwEWAt0MVQJhDNME0gzgA3YBIwHcCEgHkABnCIsM3wpxAt0MZwINAhgFuQxeDOMMygzUDOcM8QyeA2wAcwz1DFsBGQBoBPIEagToBK8AcAOPBIsEjQEwB78JGgU+DGkMoQxsDKkMbgGvDKYMqApoAZwB8QEnB3IKaA0LAR0AaAB5AHAD1QMXCN0EagLDAvMKfA0BB28NHw0hAXkDBQEOA4sBew0lB5ANKwEFDSsNIgyfAWUC4AugCMgAIgbjBNcHDwTcAY4NCgEZBuMEwQcPBHsEpQuYBccIoAdlCGYDVgKZB7MBMAQGBaANTAXIBkoNUgHTDVUBhQZTDNcNRAkGDOQLjw1WBi0M3AkdDVoBBgoTDVIDzg1mCSYHVw1dDT0JHgezDWwI5AdIB7gNcARwCLAKmQXGDXcC0gEwAGoBHQxTAp0AZgN4DHMIhQVfBS4DrQJiBH4CbQIfCrcNdAJyAiYBqAJtBUwG/AUaBHUCWQIRAlsBzQV3A8UB1ARIA5gB2A2bAd0B3wnYDZsC+AcbBEUG9wvGAe4B8AJHAowCXgKPAfwCTgUtDSgAIgsHAQUNgAruA3gKbgINDZcCEgHqAoYG+QUlAkoNiAIaDYoCHgJvAaEK0gIlCpACZAnaAmYDsAJqAiwDswrZBSEGPgrYAjQCgwoUAnoCOgI8AcEBuQJ/AoEN3QI+Dd8CsAGgBBQAYwB5BYIFTwotDeYBdA3pB3EBxAHxDe0N6A2zAhcB8QKLDfUCSwKQDfgFUQEZAGoCDQ24DYIK7AJmAlgEPQ2YAbEChQHsC8cJhgUMDcQDnwIcDccNkAhVDY4NywJ0Am0CKg3OAmcNjgIwDdIBqQ2TDdYEdQ3YDd4BzA33DbIFIw2wApENrgVgACIHagraARkC/QINC7IJWwfLBOgOBQMdDTwBxQhqAQUHIQhtCEkBMABsB78HIQ0NB5UOLw4xA8MBSgc2CoEJDALiBHYEUAPDAGMFUAI5CJMHAABxC6AChwROAZgIQwNbAbEGBgsxClEL/QorA5QBPAK4ARIHfwXxAREBDwh5Db4AawA6CGsAbgL/BFEOPwKrDjsORwaUBNMLoQ4/A8ME8gpsDkgHUQVWBUgNeQakAV8BwwZEDoMOcgQgDnwOdglLBpUEdw5PDlEFKQW7AhgOVQTGDlgMjABjDlsGngRgCzIOYATMDmIG1w5lAcIDnA5pBD4AfA5sDm4OcAxhARkEMgGvDl8I9AsdDVQAdA6sCzMIRgXjATALHQWZDrIDpAYtDW4LHQdADrEBlA6zCQ4NdA62CHQOuQhGBnQOtgTeDr8OrQ1yDskOuA7ACSEHLgIdDskOvg7GDXIGIw6qB2oO1g4uACIAbQTBDtYHvA62BCAO1gf4DqoAcwhKAa8O5w62DucOxQG2CHcFqw7rCHMOqw7uBKcGUgQ6A1YCDAhzBNcO6Q7vBlIH8w7xCEcBYw70ByUHuwb7DwAMnw8DBfMAcwhPDwcI2A78DvUF2gRwAyUHCg7mCHMGFQ8PDwQI7QYcDvEBHQ8PBKAI0A7dDucAYwTyDx4FAgw5DvgO5wKZDw8G7A7xDvMO5wMwAzIPKABrDvsO9ATcDrMO8Q8kDvQMOQoEDyEAaw7fDvQFkA7xDwgPLwu3Dz0O4w70DosO4ghTApwAaALoBWkInABtCA0OvwFhC+8O3QkGDwICIg1jCSgOtge/DHEALQ5DB7gDiw8IAiIK0Q9bDqoPFwynDxoPUAB4D2gCIgdZA4sPVw6xDroGJw9mDt0JEgxpAYsPYAzNADAAMAAlBrQMagyiDHMMpQ05DRYMpAEcAjgNGwTuDtQIZA9yCS0HQg91A4sPFwOkB30DNQAxD3wPfgygDKwMowyqDHAPaQ+CD4cNGg+bC/4LHQ9LAGkPWQQ4BNIO9w42DqQEQAlwBEMB6AcABEcESQZoBEwDdwyLBFEIagHWBFUFCQHWBFoFmwRdBa4GYwRiCKwDxgb9BIMEaQRrBG0B1wRvBHEEcwrYAWgOTgR5AhYBeQK1BH4AeASAAqsDyQSEBIYEiAHyBIsIRQyJAU8BxASTAWoBDwVXBJkEcQEFAG8AYgBqA94DLQEMDYUJRwWdAlwD6QF8AwgEJgjHAdcETwFEAbABEQhgCPQFFw/qD+wP7g87CpkFXAU6DcIEkQUwDZQHvAocCaEN4AUhBTgFXQUNEAsFHQU7DZUFPxATBRkHvAUdATAEcQINBHEBnQbvBHEHiBAhDVYC4AHuBd4BGQRxCFMQJg1bCgcCmg8UACIEcQTyEC4MOAKlC8gQNATXEDYOfwvdEB4MfQ/qBHkNVgE9AmEBIxAeCnIP6gtRBAkQHgNAD+oGIBBMEDUAcg0hCuoQHgEOD+oDpgccECsHbwOeByEInwKdBmUIogmFAhQEygGOCwIP4gilCuoIpwv+AX0QVwVLBygQNhBVECAQWAdODkkH3weiBpcH4wgVAeAH5ggYBbYH6QZeBgcFwQgeB+4IIAe0AW0O/xBaBhUQXAcoCDUBbwg3AWYIOQa5CDsQPwdqBcAAcgqtEJQQJQMICq0B3AO8AGgQKhAzAZ8IdBCWEJwGGBCUAGMEMhCkCacBEgiZAzAO0BAAAZ8CmRCqCcENaBArAZ8QihCbEKsKwg/xCJkPsQm4EJQFShCzCdIFSgIUEL0ERhC/ELYB6A/qELkJwQVZEMUEQxC+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",N=A=>({all:A=A||new Map,on(B,g){let Q=A.get(B);Q?Q.push(g):A.set(B,[g])},once(B,g){let Q=(...Q)=>(A.get(B)&&A.delete(B),g(...Q)),w=A.get(B);w?w.splice(0,w.length,Q):A.set(B,[Q])},off(B,g){let Q=A.get(B);Q&&(g?Q.splice(Q.indexOf(g)>>>0,1):A.set(B,[]))},emit(B,g){let Q=A.get(B);Q&&Q.slice().forEach(A=>{A(g)}),Q=A.get("*"),Q&&Q.slice().forEach(A=>{A(B,g)})}});function $(A){try{let B=atob(A);return Uint8Array.from(B,A=>A.charCodeAt(0))}catch(A){throw new Error(`Failed to convert base64 to buffer: ${A.message}`)}}function T(A){try{let B=_(A);return new TextDecoder("utf-8").decode(B)}catch(A){throw new Error(`Failed to decompress to string: ${A.message}`)}}function _(A){try{let B=$(A),g=[];for(let A=0;A<B.length;A+=2)g.push(B[A]<<8|B[A+1]);let Q=new Map,w=256;for(let A=0;A<256;A++)Q.set(A,String.fromCharCode(A));let E=Q.get(g[0])||"",e=E;for(let A=1;A<g.length;A++){let B=g[A],C=Q.get(B);C||(C=E+E[0]),e+=C,Q.set(w++,E+C[0]),E=C}return(new TextEncoder).encode(e)}catch(A){throw new Error(`Failed to decode and decompress to buffer: ${A.message}`)}}var AA=(A,B)=>{B=B||"fwkui";let g=Array.from({length:24},(A,B)=>"l"+B);if(!A.querySelector('style[id="'+B+'"]')){let B=document.createElement("style");B.id="fwkui",A instanceof ShadowRoot?A.prepend(B):document.head.append(B);let Q=`@layer ${g.join(", ")};`,w=setInterval(()=>{B.sheet&&(clearInterval(w),B.sheet.insertRule(Q,B.sheet.cssRules.length))})}},m=(A={css:"",gValue:{},exNames:[],mQuery:[],valueExt:{}})=>{let B=JSON.parse(T(v)),g={};var Q={};let{css:w=null,mQuery:E=[],gValue:e={},valueExt:C={},exNames:t=[]}=A||{};Array.isArray(E)||(E=[]),Array.isArray(t)||(t=[]),Object.getPrototypeOf(e)!==Object.getPrototypeOf({})&&(e={}),Object.getPrototypeOf(C)!==Object.getPrototypeOf({})&&(C={});var s={n:"none",nm:"normal",a:"auto",i:"inherit",in:"initial",is:"inline-start",ie:"inline-end",tr:"transparent",c:"center",cl:"collapse",l:"left",r:"right",h:"hidden",v:"visible",s:"start",e:"end",t:"top",b:"bottom",bs:"block-start",be:"block-end",...C};let r=()=>{let A={},g={};for(let Q of B){let[B,w,E]=Q.split("\t");if(A[B]=w,E){let A=Object.fromEntries(E.split("|").map(A=>{let[B,g]=A.split(":");return[B,g]}));g[B]=A}}return{p:A,v:g}},D=A=>{if(t.length>0&&t.every(B=>B.includes("*")?new RegExp("^"+B.replace(/\*/g,".+")+"$").test(A):B==A))return null;let B=new RegExp(["^((?<m>xs|sm|md|lg|xl|2xl|sma|mda|lga|xla):)?","(?<l>[0-9]*)?","(?<p>",["(",["(\\[([a-zA-Z]+)\\])"],"|",["(","((-w|[a-z])((-)?[a-z])*)","(([A-Z#!])|((-)?[.0-9])|(--|{|'))","([^&@]+)?",")"],")"],["(&","((-w|[a-z])((-)?[a-z])*)","(([A-Z#!])|((-)?[.0-9])|(--|{|'))","([^@]+)?",")?"],["(&","\\[([a-zA-Z]+)\\]",")?"],")","(@(?<s>.*))?$"].flat(1/0).join("")),{m:g="default",l:Q=0,p:w,s:E=""}=B.exec(A)?.groups??{};if(!w)return null;let e=w.split("&").map(A=>G(A)).filter(A=>A);if(0==e.length)return null;let C=E.replace(/(';|;)/g,A=>"';"==A?";":" "),s=CSS.escape(A),r=`selector(${s}${C})`;return C&&!CSS.supports(r)?null:{media:g,layer:Q,className:s,property:e.join(";"),selector:C}},G=A=>{let B=(A=>{let B=new RegExp("^(\\[(?<p>[a-zA-Z]+)\\])$"),{p:g=""}=B.exec(A)?.groups??{};if(g&&e[g]&&Array.isArray(e[g])){let A=e[g];if(A.every(A=>CSS.supports(A)))return A.join(";")}return null})(A);if(B)return B;let w=new RegExp(["^(?<p>(-w|[a-z])((-)?[a-z]+)*)","(?<v>(([A-Z#!.{'])|((-)?[0-9])|--)(.+)?)$"].join("")),{p:E,v:C=""}=w.exec(A)?.groups??{};if(!E||!C)return null;let t=g[E]||E,r=C[0],D=C.substring(1),G="!"!==r?C:D,c="!"==r;G=G[0].toLowerCase()+G.substring(1),G=G.startsWith("--")?"var("+G+")":G.startsWith("{")&&G.endsWith("}")?G.substring(1,G.length-1):Q[E]?.[G]||s[G]||G,G=G.replace(/(';|;)/g,A=>"';"==A?";":" ");let o=G+(c?" !important":""),I=[t+":"+o];switch(t){case"mx":I=[`margin-left:${o}`,`margin-right:${o}`];break;case"my":I=[`margin-top:${o}`,`margin-bottom:${o}`];break;case"px":I=[`padding-left:${o}`,`padding-right:${o}`];break;case"py":I=[`padding-top:${o}`,`padding-bottom:${o}`];break;case"bdx":I=[`border-left:${o}`,`border-right:${o}`];break;case"bdy":I=[`border-top:${o}`,`border-bottom:${o}`]}return I.every(A=>CSS.supports(A))?I.join(";"):null},c=A=>{var B=[...A?.classList||[]].filter(A=>{if(A){let B=45==A.charCodeAt(0)?A.charCodeAt(1):A.charCodeAt(0);return B>=97&&B<=122||B>=48&&B<=57}return!1});return A?.children?.length>0&&Array.from(A?.children).forEach(A=>{B.push(...c(A))}),B.flat(1/0)},o=(A,B)=>{if("function"!=typeof B)throw new Error("Callback is not a function");if(!A)return;let g=null;A instanceof Document?g=A.documentElement:(A instanceof ShadowRoot||A instanceof HTMLElement)&&(g=A),g&&(B(c(g)),new MutationObserver(A=>{for(let g of A)if("attributes"==g.type&&"class"==g.attributeName){if(1==g.target.nodeType){let A=String(g.target?.className??""),Q=String(g?.oldValue??"");if(A||Q){let g=A.split(" ").map(A=>A.trim()).filter(A=>A),w=Q.split(" ").map(A=>A.trim()).filter(A=>A);g=g.filter(A=>!w.includes(A)),"function"==typeof B&&B([...new Set(g)])}}}else if("childList"==g.type&&g.addedNodes.length>0){let A=[...g.addedNodes].filter(A=>1==A.nodeType).map(A=>c(A)).flat(1/0);"function"==typeof B&&B([...new Set(A)])}}).observe(g,{attributes:!0,attributeOldValue:!0,attributeFilter:["class"],childList:!0,subtree:!0}))};return{buildCss:(A=document)=>{let B=A?.getRootNode();if(!B)return;let e=new Map;var C=r();g=C.p,Q=C.v,AA(B);let t=N(),s=[{default:""},{xs:"screen and (max-width: 575px)"},{sm:"screen and (min-width: 576px)"},{md:"screen and (min-width: 768px)"},{lg:"screen and (min-width: 992px)"},{xl:"screen and (min-width: 1200px)"},{"2xl":"screen and (min-width: 1400px)"},{sma:"screen and (max-width: 768px)"},{mda:"screen and (max-width: 992px)"},{lga:"screen and (max-width: 1200px)"},{xla:"screen and (max-width: 1400px)"},...E],G=s.filter((A,B)=>s.findLastIndex(B=>Object.keys(B)[0]==Object.keys(A)[0])==B),c=G.map(A=>Object.keys(A)[0]),I={},a={root:new CSSStyleSheet},l={root:""},n={root:[]},H={root:!1};c.forEach(A=>{I[A]=new Set,a[A]=new CSSStyleSheet({media:G.find(B=>Object.keys(B)[0]==A)?.[A]||""}),l[A]="",n[A]=[],H[A]=!1}),w&&Array.isArray(w)?(l.root=w.join("\n"),a.root.replaceSync(l.root)):(l.root=w||"",a.root.replaceSync(l.root)),["root",...c].forEach(A=>{B.adoptedStyleSheets.includes(a[A])||(B.adoptedStyleSheets=[...B.adoptedStyleSheets,a[A]])});let M=(A,B)=>{let{media:g,property:Q,selector:w,layer:E,className:C}=B,t=a[g],s=I[g],r=l,D=n,G=H;E=Number(E)||0;let c=C,o=e.get(A);var M=`@layer l${E}{${o?`.${o}${w}`:`.${c}${w}`}{${Q}}}`;s.has(M)||(s.add(M),D[g].push(M),G[g]||(G[g]=!0,queueMicrotask(()=>{let A=D[g];A.length>0&&(r[g]+=(r[g]?"\n":"")+A.join("\n"),t.replaceSync(r[g]),D[g]=[]),G[g]=!1})))};return t.on("observeDom",A=>{A.length>0&&A.forEach(A=>{let B=D(A);B&&M(A,B)})}),{clsx:(...A)=>{let B=A.map(A=>Array.isArray(A)?A:[A]).flat(1/0).map(A=>A.split(/(\s|\t)+/g).filter(A=>A.trim())).flat(1/0);B=[...new Set(B)];let g=B.map(A=>{if(e.has(A))return e.get(A);{let B="D"+e.size.toString(32).toUpperCase();return e.set(A,B),B}});return queueMicrotask(()=>t.emit("observeDom",B)),g.join(" ")},observe:()=>{o(B,A=>{A.length>0&&A.forEach(A=>{let B=D(A);B&&M(A,B)})})}}}}},BA=(A,B)=>{m(B).buildCss(A).observe()},gA=(A,B)=>m(B).buildCss(A).clsx,oA={css:m,cssObserve:BA,clsx:gA};export{gA as cssClsx,BA as cssObserve,oA as default,m as xcss};
|
|
1
|
+
var v="AFsAIgB3AGwAYwBcAHQALQB3AGUAYgBrAGkBBgBsAGkAbgBlAC0AYwBsAGEAbQBwACIALAEBAHQAZgEEAQYBCAEKAQwALQB0AGUAeAEGAGYAaQBsAGwBEgBvAGwAbwByARgBGgBzAQUBBwEJAQsBBgEjASUALQBzAHQAcgBvAGsAZQEwAHcAdABzAR0BNAEgATcBJAEGATsBPQE/ASsBLQEvARkBQgBzAHcBMwEfATYBIgFJAToBPAE+AREAdwBpAGQAdABoAQUAbQA6AG0AZQBkAGkAdQBtAHwAdAA6AWEAaQBjAGsBMABhAGMBHQF0AGMAZQBuAQYAYwEsAS4BBQB1ADoAdQBuAHMAZQB0AXMBdgEOAGcAbgErAXoBeQB0AQUAcwA6ATsAYQByAHQAfABlADoBeQBkAHwAZgGRAGYAbAEkAVoBlAGWAGYBmAGfAaEBmgB8AG4AOgBuAS4AbQBhAGwAfABiADoAYgBhAYQBDgEQAZwBswEnAHIBOwAgAbUBtwEPAGUAfABsAbMBFAG+AcAAZQG4AcMAcwBwAZIAcAF0AREAYgGFAQgBeQB8AHMAYQHPAdEALQGUAG8BggGbAYQB2gF4AC0AZQB2AXkAbAB5AdcBbQFLAYUAYwBoAdcAYwGSAGEBpQAgAXgBjQByAHwAdQHxAYIB2AH0AfYBIwFQACIAYQBpAQUBsABpAYoALQEMAGUAbQEyAHQBqwGtAHIBrwGxAfEB/wBlAfgBkQGTAZUBlwGZAG4BmwGdADoBpwB4AaICGgGlAiABoAIiAakAcwIYAcoAZgIjAZYB4QG3Ai0BqQGzAckBywG6AiAAaQG9AHQBvwG2AcoBwgHEAcYBtgI7AjUCPwFEAfIB/gGOAhYB+QH7AYMB8wBlAfUCSQIBAbYCBQGJAYsCMQEFAg8BrgGwAHwCFAJRAdcBkgB0AaMCGwIpAisAbAItAhkCLwGYAjEB5AIdAZwBngInAi4BnAGmAnACMwG0Aj0CNgBmAbsCOQHIAncCPwHFADoBxwJDAn0BuQE7AmAAcgHtAe8CRgH9Ak8CFQH4AfoBgQJNAkgB9wFzAlQAbAFzAG4CBAJhApgBrwB0AGkAbwBuApcBcAIFApsAYQKdAp8BKwEWAG8AcwEMAp4AbgEFAHIAOgKHAHABFAF4AHwB2QBhAGQBmwF0ADoBdwFqAHUBFAEjAHwAcgHZArICtABlACwAIAK4AroCuwLKAsgCvQBtAr8CpQHDAsMCuwLFAdECzgK5As4BdQK+AsABQAEZAGECmABkAGUCowBpApwCrQAtAuIBFAB5AqEBaALkAuYCpwFoAocAYwKmAq4BPAKxAeUCFgGEArYCvABsAgAAbgLSArYCsAGwAv4C0gAtAocB5gG9AcMAbgKwAhACEgLIAwcC+QHDAZQBqwMDAhYC/wEjAw8C+AMJAsgDDQGwAuwAdQLuAqUC5wBkAHUCwwL0AqEAZgBtAyEC9AAtAScBKQAtAG0AbwLiAQUAZgIgAS4AdwGUAGQAcwGyAnYBcQM4AHIDOgGqAbMBrQEQAsgBtQM+AzkDOwJ5AasAYgBvAWECyABmAzcDSQMcAp8C3gICApgCogKaAuUDIgKnAgoDJgLnAXwBggGGAt8CmAL1AuADWwMsAv8BZgGQAZIBDgLiAqEAcAINA2cC7wGLArMAYQB5AaIBIwEFAc4B0AB1AYQBmwKwAHIBggNlAGcCoQEbAysC5wKdAG0BDwBnAy0BggLzAq0BBQBlAGkBmQI9AgkAbgGXAG8DlQGEAC0B3gGWA5MDmgBlA5YBDwOdAHUBlgBsAoABwgGUAdcCGAEjAHACcQIwA64CbABkAXMAcAIFAHAAcAOiAsMAbgF4AWMBswFmAG4CvwBpATsALQBiA6YAdAKfAWwDNQE4ARsAaQHKAZsCNAPHA8kCFABoAGUBcQNNAHgBcwByAgUBzQPWAQYDXwBvA2wAMQAgAC8AIAAxAHwAdgA6ADEANgPkACAAOQEwAQoAZABmAQUDRwBrAGQBPQOvAy4CAAPwAGsAZgB2A/QBdAP9AdsAdgPDAGkAYgEoAQwC6wEZAGIAZwQAAXEAZwE9Ad8D8ABnAGEEDgBrBBAB3gIdAdwAdAJhAe4DwAGPAUMBkgBjAT0BKQGcAjgAeAFnAcQCgABvAGMDHgQLAGcAYgMqAHQD9QQYAd8DxQGgBBoDMQMzAg4BrAJaAbEBZALQAv0AaQKzAekCGAQjAGUB1gOaAG8DCALqAHwAZAA6AGQBlAE/A5gDqAGJAGgBIwOYAGMETwF8AU8C6AMyAGcBwwOUBFwBLgPFAyUDmABoA6gAaAM5AC0EVgIvA6gAcwBvAGYBDQIHBFcETgOUAWgAZgGlAocDvAHDAZgBJAETA34CrQB8AGgAOgBoAHUBzAHZAdgAdAMlA1wEWQA6BGMB+ABsAYAEkgOLAa0CqwB0BAoAIgQMARMEFgQ1BBoBEwRDA/QCNAEuAuIAcgPFAG8AeAB8AHABswHQArkDjASnBKkAYwGzAXwBjQF6BLABbAFuAUkEEwEdBDQEEQSfAX0D2wQcAW4DuwHNAZQBjgJcBI8DJQR7AHQEkAQTApkEvQQZAGQCCQGvBGAEEwPhBDMEAQSeBNIBLgIHAQ8EogG0BKQCFgS3BKsAOgStAWgAbgONA9gCXASzAp8EWAEGA9gEEwO2BNgEDwS+BNIAcAKqAqwCnwEFAW0DyABwAzwDTQQcAG8BawRVAGUEcgLCArEEdAGWAl0B9wHEAW0BoARyACAE/QJcAW0CjQURAG8E/gGVBQgAZwRXBRYE/gEDAoAFBQI7Ao0CXAULAgACUAUMAHIB8QByBQkFJwIAAkAFIAUQBQADyAFrBLIEjwJRAb8DTgUzAsIBswUrBRsCQwU5BQIE8QB4BJ0E9QAtBPcElwLnBUMAdAUEBQYDgQUJBMgCjQTxAHkFRATRBUYE+AMsBVMEwgUSBKMFAQU0BTYCkwQvBMEE0AQ2ArIDogQgA4EAZQO5AqUAfAB4AvcFagEGBKkAeQVuBWYALQRFAeIC0wGrBPUBqgQ9AwYFaQVmAsIBkQAgBWUCpQAgBMUCtQByBWgFbwWCBX4FawMLBXwFgwI7BPUEEwINBWMEGgKrAHoC4wTMBI8E7QIDAqAECwBsAGsFlAEtAXEBOgBpBZgD8ABkA/QE4QTBBE8AZAU5BCkDOgRQAbYD1QGbAGQBswWuAHUAYgGgAHwAZwA6BBgESwLTBQgAZARgAHwDlAEPAYQBlgRKA6YFyAWoBboAawWqA0AE4gW6BCwBcgQLBbYBAwXQBKUENwXUAU4BLgXNAaAF2QXSBaMAawOzBd8D1gXhBKYF0wWkAZoF3QIBAGIF1wBlBZQFqwXbBesFlgSYBeAAdAWtBa8FtQGRBFEAcwW0BE4FtwHeBboBwwW9Bb8B5gUHBSsFwwRhADoFxwGFAHwFygFDAYUF5gFUBDMF8wXqBeQF7AFeAWAAaAXfBfIF0QXpBeMCLgYeBLwGFwYiAmgF7QYeBh8F2gYYAi4BWgB5BfgF+gQcBbAF/QWzBbAGAgW5BbsGBgE9BcAGCQFfBcQFxgGDBg8GEQXMBdYFugFTBegF9AXkBigGGwFhBh4EIANNBiAGSgYvBjEEUAX7BE4GNQX/BjcGVgY5BgUFvgY8BggFTgYLBcUGDQZCBckAOgOeBkUEmgXXAV4GSQYtBk0GHQZGBm4FQABtBc0GJQZSBTIFAgYpBkYAbAViBhcGdARsBSEDBgK4AWkAcwXNBYgGcwVdAwYFCQaDAWgDfgXNATsGiQUzBlQFmQYyASMF/AWyBloFtQY4BgQFvAZfAG8GPQZiBkAGZQXIBhAGaAXLBhMGRgYVBlEGLAaABnAE+wFuAGgBDwB8BEABZwFpAWsBYQaxAXAF1QZrBJwGFgZSBFwBFANxBZkCKwHQAyYBwwIUASwGwgGEBagGdwXaBM0F1gRIBn4GUgXsBewCwwaOBoYG0QBzBtMF2gXsBigG1waFBagC5QQNBr8F2gNbBNUF1gKeBkkG5wERBmkGqQZrAjkG6wTUAREFkAGQAesBPAKIBgkFjAGWAHIFeQTRAl8FhgNWBe8DwwbyAGEEYAE6AQ4BeAbiBtsGzgTiBuwBOgHeBSkHAgFoBqsF8wcPBnAG4gbrAG4BywbiBw0EpgEPAcsGewbwBZkGrAcOBxsBwgXlBukF5wblByYHIQXsBtAHIwYrBy0HKAbeBfcHEwPOBxUGUgcgBzQEGgcYBukBkwcaByECaAcLBx4DlwdCAmEBlQciBwMCKgdBBygGKAE7BjAHNwZIBywHHwcnARAGLgc+BvABOwBsB00HVwdQAaAG4gBuBzkG5gdWAV0BXwZOBdYHXAdUBoEEcgWoBdgHawUPAXsEwAduBzIEpgdxBpQHbgdjBOIHdwavBVoGsgOYBrUGjga4BIQBbwFxBagEFQdrBuAGjwXWAsMGSQeKBtkGawbcBOIFPQRXBagFKQeOBowHMAXvAb0HmAU+BpQBBQFgBlYGMwaYBf4GAAIYASwBXwYBBlwGnQY7BqAGYQXCBkABqwYOBckDpganBhIDYweRB3oEpgeUAR4HZwFiB34GsweBBrcBbAeEBrIHhgXWAc0GSQWGA4wFqAGEB5IEpgYoBtYGhAeLBmsCKgfPBi4G3wfTB5AF7wd1B58F+QFtBa4HowZYBpkHpgGSB6gGmwerBjoGnwahB7AEYQeyBmYGEAe1Bu4HuAXvBlAF8wT9BagEzAZJBP0HSgFgBn0H+wUXB2wD3wfaB/kGiAdrB/wHvAaNBuEF1gFDCAADrwdfBpUH4AZXBbEHpQQpB6cDbgeqBbgHrAfrB68GCgexBqQGQwfyBqgH9AFgB7oBIggBB30E/Ad/BrQBZQa2AWoHxAa6B8cGawgmCCkGugeACC0HgggwB4UGvABiBaoFXQaHBaoCIgLiAXwD4AGLAGIChwBhBc8FmgETA1UHAAcJBwIAeAX/BakGFgIiBf8CuABvAHcD8AhRB78D2AE6BGoFrghZBAsIUQB6CEEFpQB6B8wECwByAGsHiAhHA6IF5AHzA/sIaQBrCD0EMwhIBeQB0wNRAocD8AhqBM8IdgOXAqsDbwEZBC0DcQEFCIMDLAiAA1YEIwf6BMwExgdyAU8BMAETBMEBEwO6CJAAbAO4CIUBDgOvAdAHaAAiAR0EkAEFBkED1QUrAZYE/ATEBsYBjgiQBKEEzATAA5cCAAT3AsACrQiQAUQHvwSQAToB7gILCIkBLAieASwBagGLA2EBegiQASwD8wirBJQBiwMuApYIggEsBuQEXAi9AC0EFAEXCMkH/wjECM0DggdgCNEHlwjTAG0BiwjVAREHMARcB5wI2QjbAr8BEQgQCMEGfQYVCMwI2gMGCOMBBwe+COYCDQjpAlYB0AWeCJ0BLAjoCLwI6gdZBFwIhQj4AYMIkAF6CPwBegWdCP8CnQBiCPAFnAOkAQ8BPAXHAXAGUwWXCIkBegBpCLQJCAGLCQoFKwGDCQ0D1QUJCQQAaQcECKsJAgkJAXoJFwKrAGMHRgdOBaYJEAKdCQcJIAkVCSIJDAklCQ8IqQj3CSwIrQkjCQ0I+gE8CQECYQHCAgEC8wb9CToFnQTiA2oIiQE8BCAEtAk7ARAEpgSYA7kIkAQcCToIqAiCCS4I/ANiByYERwQfCQQIBgi/AgAFfQZqAGMJIgkHCVQH0AbvBCMIhQMlBHAEwQN8AG8JCgJKBa0FBQBhAr8FCgFkCUcBWQPAAHUEgwSFAcoE/gBwBb0AcAE9BBAF8QM7AHcAOgM4AQwFUAHKAbEE/AFJA+gBbQMIAp0ELQEqA8wCtgOoAgYBtgJcAc4BfABwAekDMQFlBj0CHQV8A/cFFwGqAdkBrQEGAbABLQEIAZsEEAZfAGEAYgW8AbMEEAmsBAcE6AK2AZEJpgi2BCQCEwEsArAEXAlcCSgCwgOBCFgJvQWYAaoDDAnCBH0CsAb0BfEJvgbbAZIJxgB8AHcCsAB3Cc4JSQGsCckJDwHXAhYBkgnWCcsJ0AGSCdIChwnXAGUJ3QniCdMJzAGDCdMF8QmCARABUwnTAHcB4QdiA5wJ4Am+CGcAOgB6BqAAbQOXAHwJ9gn1CfcDpQe4AvEHoAI5A94IsQEZCFMBaAHNAuoD9AG0BeMFxQGzBzsHVwYYBmQKDwHDAzUCIQXFAzUKEwMtAicEuAJhBp0BDAZlByEKHQW7BMwBzgoiCN0AYQBwAvQBbAF4ASkBbgmsAaABEgmHCisBLAouBgQBTgi9CjMAbAW9CiYKNwjqBDUE/gEbCjsKLwERA1EDTgTiCj8HxApCCjYD1QK4CkcEEQpAAHIKSgowAT0J0gpIAvYKPApUAZwCsAGfCcEGPAGWBjsHqQIHCiAHKAQQB6kGyQS1AUMBxAOUAQ4DxAIKBnUBGQILAHABHQpxBJgKMQEpB5ABnwQgA/oCFgEwAGYFSgIhCKAAOgAwA+YCyQOmAG8C+wPjA+MJbwPICn0AeAh0AiEDxQG2A8MKjQhTCpAC8QoDBPoC9gpZBYgCsQpdAxoC+gbJCMUCXAm7CP0FfQMIBswBGQp+CMMKkApcCGEAIgp+BuQKkAQYCq4KfgINCpAF/wkXBrwKfgYVCpAJ0AooAQUJggq+BP4J3QrCCqYDEQV7Aa0Kwgp9B2oKXAKlCKABkQoZAmgFxQGYChkBqQVOBT4EKgdxCn0C9QNRCMAKqQqrBO0DLQEVASgFWQHZAHUAaQE6AuAAcwE6AhYAaQBmAsgAcwB5ATsCCwAtCucK8ArqCuwFKwrvACAAJwBBA7gBoAAgAEMEwAAgAEUDMQBqAGkAJwLIACcAUwBlAGcAbwJPAFUASQsECwYLCAsKCwwLDgsQCxIAUwB5AG0DTQBsCwkK/ABOA04AbwsBCwMLBQBvCwcAJwJfCucK+QruAsgARwBlAS4AZwBpAGECyABDARUIRws0CwoAVALlBfEAIABOCeIAIABSBQIC4AsgCzwBZgBzCvAK7QBmCCwLLAMxBJYB0AF4AsgAUwBGAE0CnwBvAC0AUgsNAtEAcgLIAE0B5wBvC14CnwF0C2ELJQGDASwBtgsKAEwEBgIWBI0AIAtWAa0LIAAnCwIDJQPOAHILPwniCyALTwKqC1EDVgBmAG4K4AS2AGYK4wHoCtsBnQM0CuEBpQKlAyUI5AGFAp0E6Ap4AG4ISgrdAQYBPwb9CGgKrwcbBNcLlARsAuAAZwB1BwYG7QMIBgoLfgSWC4gEtgUXCY4BsAhmC5gLfwTyC5wB0AGgBjMK2wq2CuEJMQqpAk0LpwFKCSgB3ABkAGoDfge4C38BSwu6AVoChwTMBnELmQdQC8QI5Qu4CvEK3Au2AHkBegPVAqsLkQfJARsL0AvSCcoK6wVHBPkI9AvCAUQLywvRAWEL2gE6AhIBKgiDC9ULtQS2C84L4wvUB3gLzQq8C9gL7QPDATQJGwu4A/8L1wS2AHYBlAs0Ct4LmQv7C8QL+wUrAuAJpQL9AxYC0guRAHYBHQucDAIL/QF7CigMCQOiDAEL/AwEAeQCQgHcAqsC4ArbAeYMEwwDBLYCCwsoAGkMGwrMCuEMDQwVAYkLiwngDBsLzwv6DBQEtgPBAWYFKwBjDBsLrwwlDC4BBgvcAycL9wvqAQYMJgiHC44DjAp4C/EEtgEIC/YLmQxDAR4DkwU+Cn0ELQuIBxIE0gi1ArgLvwE7ATAIzwEFCM8MVQxXBgoMVQeICmUE0gTGAGEMXAEdDF4B3AqGCj0BgwFjAXABZQOkCXMBega0ArsBrwIiDG0BlgBtBEABDwxxACgAMALIADEAZgByACkMXAjDDGQKiwtYCq0CrwqdAHcFUAj9BE4EUAF5AvoDQAyHACAC4gZCAlwEWwj9DJEMjQNWBBQEwQyCDGYKVAINA4sB8QSVAYwE7gxvDKEAYQxyBO0Exwx1DGsAbgx4DHoD5gx9DH8BGQBnDGMGCgxnAzQD6gPtAC0AMQxVA70AdAxkCPEHKQAiDLQCDQzACqUHQwyzDJsMtgpUDLgD4wPlDLsMVQKHDFoBXwMGCcEBmgzRDMUMywnBDMgMwwQgDGQBIwEWAt0MVQJhDNME0gzgA3YBIwHcCEgHkABnCIsM3wpxAt0MZwINAhgFuQxeDOMMygzUDOcM8QyeA2wAcwz1DFsBGQBoBPIEagToBK8AcAOPBIsEjQEwB78JGgU+DGkMoQxsDKkMbgGvDKYMqApoAZwB8QEnB3IKaA0LAR0AaAB5AHAD1QMXCN0EagLDAvMKfA0BB28NHw0hAXkDBQEOA4sBew0lB5ANKwEFDSsNIgyfAWUC4AugCMgAIgbjBNcHDwTcAY4NCgEZBuMEwQcPBHsEpQuYBccIoAdlCGYDVgKZB7MBMAQGBaANTAXIBkoNUgHTDVUBhQZTDNcNRAkGDOQLjw1WBi0M3AkdDVoBBgoTDVIDzg1mCSYHVw1dDT0JHgezDWwI5AdIB7gNcARwCLAKmQXGDXcC0gEwAGoBHQxTAp0AZgN4DHMIhQVfBS4DrQJiBH4CbQIfCrcNdAJyAiYBqAJtBUwG/AUaBHUCWQIRAlsBzQV3A8UB1ARIA5gB2A2bAd0B3wnYDZsC+AcbBEUG9wvGAe4B8AJHAowCXgKPAfwCTgUtDSgAIgsHAQUNgAruA3gKbgINDZcCEgHqAoYG+QUlAkoNiAIaDYoCHgJvAaEK0gIlCpACZAnaAmYDsAJqAiwDswrZBSEGPgrYAjQCgwoUAnoCOgI8AcEBuQJ/AoEN3QI+Dd8CsAGgBBQAYwB5BYIFTwotDeYBdA3pB3EBxAHxDe0N6A2zAhcB8QKLDfUCSwKQDfgFUQEZAGoCDQ24DYIK7AJmAlgEPQ2YAbEChQHsC8cJhgUMDcQDnwIcDccNkAhVDY4NywJ0Am0CKg3OAmcNjgIwDdIBqQ2TDdYEdQ3YDd4BzA33DbIFIw2wApENrgVgACIHagraARkC/QINC7IJWwfLBOgOBQMdDTwBxQhqAQUHIQhtCEkBMABsB78HIQ0NB5UOLw4xA8MBSgc2CoEJDALiBHYEUAPDAGMFUAI5CJMHAABxC6AChwROAZgIQwNbAbEGBgsxClEL/QorA5QBPAK4ARIHfwXxAREBDwh5Db4AawA6CGsAbgL/BFEOPwKrDjsORwaUBNMLoQ4/A8ME8gpsDkgHUQVWBUgNeQakAV8BwwZEDoMOcgQgDnwOdglLBpUEdw5PDlEFKQW7AhgOVQTGDlgMjABjDlsGngRgCzIOYATMDmIG1w5lAcIDnA5pBD4AfA5sDm4OcAxhARkEMgGvDl8I9AsdDVQAdA6sCzMIRgXjATALHQWZDrIDpAYtDW4LHQdADrEBlA6zCQ4NdA62CHQOuQhGBnQOtgTeDr8OrQ1yDskOuA7ACSEHLgIdDskOvg7GDXIGIw6qB2oO1g4uACIAbQTBDtYHvA62BCAO1gf4DqoAcwhKAa8O5w62DucOxQG2CHcFqw7rCHMOqw7uBKcGUgQ6A1YCDAhzBNcO6Q7vBlIH8w7xCEcBYw70ByUHuwb7DwAMnw8DBfMAcwhPDwcI2A78DvUF2gRwAyUHCg7mCHMGFQ8PDwQI7QYcDvEBHQ8PBKAI0A7dDucAYwTyDx4FAgw5DvgO5wKZDw8G7A7xDvMO5wMwAzIPKABrDvsO9ATcDrMO8Q8kDvQMOQoEDyEAaw7fDvQFkA7xDwgPLwu3Dz0O4w70DosO4ghTApwAaALoBWkInABtCA0OvwFhC+8O3QkGDwICIg1jCSgOtge/DHEALQ5DB7gDiw8IAiIK0Q9bDqoPFwynDxoPUAB4D2gCIgdZA4sPVw6xDroGJw9mDt0JEgxpAYsPYAzNADAAMAAlBrQMagyiDHMMpQ05DRYMpAEcAjgNGwTuDtQIZA9yCS0HQg91A4sPFwOkB30DNQAxD3wPfgygDKwMowyqDHAPaQ+CD4cNGg+bC/4LHQ9LAGkPWQQ4BNIO9w42DqQEQAlwBEMB6AcABEcESQZoBEwDdwyLBFEIagHWBFUFCQHWBFoFmwRdBa4GYwRiCKwDxgb9BIMEaQRrBG0B1wRvBHEEcwrYAWgOTgR5AhYBeQK1BH4AeASAAqsDyQSEBIYEiAHyBIsIRQyJAU8BxASTAWoBDwVXBJkEcQEFAG8AYgBqA94DLQEMDYUJRwWdAlwD6QF8AwgEJgjHAdcETwFEAbABEQhgCPQFFw/qD+wP7g87CpkFXAU6DcIEkQUwDZQHvAocCaEN4AUhBTgFXQUNEAsFHQU7DZUFPxATBRkHvAUdATAEcQINBHEBnQbvBHEHiBAhDVYC4AHuBd4BGQRxCFMQJg1bCgcCmg8UACIEcQTyEC4MOAKlC8gQNATXEDYOfwvdEB4MfQ/qBHkNVgE9AmEBIxAeCnIP6gtRBAkQHgNAD+oGIBBMEDUAcg0hCuoQHgEOD+oDpgccECsHbwOeByEInwKdBmUIogmFAhQEygGOCwIP4gilCuoIpwv+AX0QVwVLBygQNhBVECAQWAdODkkH3weiBpcH4wgVAeAH5ggYBbYH6QZeBgcFwQgeB+4IIAe0AW0O/xBaBhUQXAcoCDUBbwg3AWYIOQa5CDsQPwdqBcAAcgqtEJQQJQMICq0B3AO8AGgQKhAzAZ8IdBCWEJwGGBCUAGMEMhCkCacBEgiZAzAO0BAAAZ8CmRCqCcENaBArAZ8QihCbEKsKwg/xCJkPsQm4EJQFShCzCdIFSgIUEL0ERhC/ELYB6A/qELkJwQVZEMUEQxC+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",N=A=>({all:A=A||new Map,on(B,g){let Q=A.get(B);Q?Q.push(g):A.set(B,[g])},once(B,g){let Q=(...Q)=>(A.get(B)&&A.delete(B),g(...Q)),w=A.get(B);w?w.splice(0,w.length,Q):A.set(B,[Q])},off(B,g){let Q=A.get(B);Q&&(g?Q.splice(Q.indexOf(g)>>>0,1):A.set(B,[]))},emit(B,g){let Q=A.get(B);Q&&Q.slice().forEach(A=>{A(g)}),Q=A.get("*"),Q&&Q.slice().forEach(A=>{A(B,g)})}});function _(A){try{let B=atob(A);return Uint8Array.from(B,A=>A.charCodeAt(0))}catch(A){throw new Error(`Failed to convert base64 to buffer: ${A.message}`)}}function T(A){try{let B=AA(A);return new TextDecoder("utf-8").decode(B)}catch(A){throw new Error(`Failed to decompress to string: ${A.message}`)}}function AA(A){try{let B=_(A),g=[];for(let A=0;A<B.length;A+=2)g.push(B[A]<<8|B[A+1]);let Q=new Map,w=256;for(let A=0;A<256;A++)Q.set(A,String.fromCharCode(A));let E=Q.get(g[0])||"",e=E;for(let A=1;A<g.length;A++){let B=g[A],C=Q.get(B);C||(C=E+E[0]),e+=C,Q.set(w++,E+C[0]),E=C}return(new TextEncoder).encode(e)}catch(A){throw new Error(`Failed to decode and decompress to buffer: ${A.message}`)}}var J=new RegExp(["^((?<m>xs|sm|md|lg|xl|2xl|sma|mda|lga|xla):)?","(?<l>[0-9]*)?","(?<p>",["(",["(\\[([a-zA-Z]+)\\])"],"|",["(","((-w|[a-z])((-)?[a-z])*)","(([A-Z#!])|((-)?[.0-9])|(--|{|'))","([^&@]+)?",")"],")"],["(&","((-w|[a-z])((-)?[a-z])*)","(([A-Z#!])|((-)?[.0-9])|(--|{|'))","([^@]+)?",")?"],["(&","\\[([a-zA-Z]+)\\]",")?"],")","(@(?<s>.*))?$"].flat(1/0).join("")),BA=(A,B)=>{B=B||"fwkui";let g=Array.from({length:24},(A,B)=>"l"+B);if(!A.querySelector('style[id="'+B+'"]')){let B=document.createElement("style");B.id="fwkui",A instanceof ShadowRoot?A.prepend(B):document.head.append(B);let Q=`@layer ${g.join(", ")};`,w=setInterval(()=>{B.sheet&&(clearInterval(w),B.sheet.insertRule(Q,B.sheet.cssRules.length))})}},O=(A={css:"",gValue:{},exNames:[],mQuery:[],valueExt:{}})=>{let B=JSON.parse(T(v)),g={};var Q={};let{css:w=null,mQuery:E=[],gValue:e={},valueExt:C={},exNames:t=[]}=A||{};Array.isArray(E)||(E=[]),Array.isArray(t)||(t=[]),Object.getPrototypeOf(e)!==Object.getPrototypeOf({})&&(e={}),Object.getPrototypeOf(C)!==Object.getPrototypeOf({})&&(C={});var s={n:"none",nm:"normal",a:"auto",i:"inherit",in:"initial",is:"inline-start",ie:"inline-end",tr:"transparent",c:"center",cl:"collapse",l:"left",r:"right",h:"hidden",v:"visible",s:"start",e:"end",t:"top",b:"bottom",bs:"block-start",be:"block-end",...C};let D=()=>{let A={},g={};for(let Q of B){let[B,w,E]=Q.split("\t");if(A[B]=w,E){let A=Object.fromEntries(E.split("|").map(A=>{let[B,g]=A.split(":");return[B,g]}));g[B]=A}}return{p:A,v:g}},r=A=>{if(t.length>0&&t.every(B=>B.includes("*")?new RegExp("^"+B.replace(/\*/g,".+")+"$").test(A):B==A))return null;let B=J,{m:g="default",l:Q=0,p:w,s:E=""}=B.exec(A)?.groups??{};if(!w)return null;let e=w.split("&").map(A=>G(A)).filter(A=>A);if(0==e.length)return null;let C=E.replace(/(';|;)/g,A=>"';"==A?";":" "),s=CSS.escape(A),D=`selector(${s}${C})`;return C&&!CSS.supports(D)?null:{media:g,layer:Q,className:s,property:e.join(";"),selector:C}},G=A=>{let B=(A=>{let B=new RegExp("^(\\[(?<p>[a-zA-Z]+)\\])$"),{p:g=""}=B.exec(A)?.groups??{};if(g&&e[g]&&Array.isArray(e[g])){let A=e[g];if(A.every(A=>CSS.supports(A)))return A.join(";")}return null})(A);if(B)return B;let w=new RegExp(["^(?<p>(-w|[a-z])((-)?[a-z]+)*)","(?<v>(([A-Z#!.{'])|((-)?[0-9])|--)(.+)?)$"].join("")),{p:E,v:C=""}=w.exec(A)?.groups??{};if(!E||!C)return null;let t=g[E]||E,D=C[0],r=C.substring(1),G="!"!==D?C:r,c="!"==D;G=G[0].toLowerCase()+G.substring(1),G=G.startsWith("--")?"var("+G+")":G.startsWith("{")&&G.endsWith("}")?G.substring(1,G.length-1):Q[E]?.[G]||s[G]||G,G=G.replace(/(';|;)/g,A=>"';"==A?";":" ");let o=G+(c?" !important":""),I=[t+":"+o];switch(t){case"mx":I=[`margin-left:${o}`,`margin-right:${o}`];break;case"my":I=[`margin-top:${o}`,`margin-bottom:${o}`];break;case"px":I=[`padding-left:${o}`,`padding-right:${o}`];break;case"py":I=[`padding-top:${o}`,`padding-bottom:${o}`];break;case"bdx":I=[`border-left:${o}`,`border-right:${o}`];break;case"bdy":I=[`border-top:${o}`,`border-bottom:${o}`]}return I.every(A=>CSS.supports(A))?I.join(";"):null},c=A=>{var B=[...A?.classList||[]].filter(A=>{if(A){let B=45==A.charCodeAt(0)?A.charCodeAt(1):A.charCodeAt(0);return B>=97&&B<=122||B>=48&&B<=57}return!1});return A?.children?.length>0&&Array.from(A?.children).forEach(A=>{B.push(...c(A))}),B.flat(1/0)},o=(A,B)=>{if("function"!=typeof B)throw new Error("Callback is not a function");if(!A)return;let g=null;A instanceof Document?g=A.documentElement:(A instanceof ShadowRoot||A instanceof HTMLElement)&&(g=A),g&&(B(c(g)),new MutationObserver(A=>{for(let g of A)if("attributes"==g.type&&"class"==g.attributeName){if(1==g.target.nodeType){let A=String(g.target?.className??""),Q=String(g?.oldValue??"");if(A||Q){let g=A.split(" ").map(A=>A.trim()).filter(A=>A),w=Q.split(" ").map(A=>A.trim()).filter(A=>A);g=g.filter(A=>!w.includes(A)),"function"==typeof B&&B([...new Set(g)])}}}else if("childList"==g.type&&g.addedNodes.length>0){let A=[...g.addedNodes].filter(A=>1==A.nodeType).map(A=>c(A)).flat(1/0);"function"==typeof B&&B([...new Set(A)])}}).observe(g,{attributes:!0,attributeOldValue:!0,attributeFilter:["class"],childList:!0,subtree:!0}))};return{buildCss:(A=document)=>{let B=A?.getRootNode();if(!B)return;let e=new Map;var C=D();g=C.p,Q=C.v,BA(B);let t=N(),s=[{default:""},{xs:"screen and (max-width: 575px)"},{sm:"screen and (min-width: 576px)"},{md:"screen and (min-width: 768px)"},{lg:"screen and (min-width: 992px)"},{xl:"screen and (min-width: 1200px)"},{"2xl":"screen and (min-width: 1400px)"},{sma:"screen and (max-width: 768px)"},{mda:"screen and (max-width: 992px)"},{lga:"screen and (max-width: 1200px)"},{xla:"screen and (max-width: 1400px)"},...E],G=s.filter((A,B)=>s.findLastIndex(B=>Object.keys(B)[0]==Object.keys(A)[0])==B),c=G.map(A=>Object.keys(A)[0]),I={},a={root:new CSSStyleSheet},l={root:""},n={root:[]},H={root:!1};c.forEach(A=>{I[A]=new Set,a[A]=new CSSStyleSheet({media:G.find(B=>Object.keys(B)[0]==A)?.[A]||""}),l[A]="",n[A]=[],H[A]=!1}),w&&Array.isArray(w)?(l.root=w.join("\n"),a.root.replaceSync(l.root)):(l.root=w||"",a.root.replaceSync(l.root)),["root",...c].forEach(A=>{B.adoptedStyleSheets.includes(a[A])||(B.adoptedStyleSheets=[...B.adoptedStyleSheets,a[A]])});let M=(A,B)=>{let{media:g,property:Q,selector:w,layer:E,className:C}=B,t=a[g],s=I[g],D=l,r=n,G=H;E=Number(E)||0;let c=C,o=e.get(A);var M=`@layer l${E}{${o?`.${o}${w}`:`.${c}${w}`}{${Q}}}`;s.has(M)||(s.add(M),r[g].push(M),G[g]||(G[g]=!0,queueMicrotask(()=>{let A=r[g];A.length>0&&(D[g]+=(D[g]?"\n":"")+A.join("\n"),t.replaceSync(D[g]),r[g]=[]),G[g]=!1})))};return t.on("observeDom",A=>{A.length>0&&A.forEach(A=>{let B=r(A);B&&M(A,B)})}),{clsx:(...A)=>{let B=A.map(A=>Array.isArray(A)?A:[A]).flat(1/0).map(A=>A.split(/(\s|\t)+/g).filter(A=>A.trim())).flat(1/0);B=[...new Set(B)];let g=B.map(A=>{let B=A;if(e.has(A))B=e.get(A);else if(J.test(A)){let g="D"+e.size.toString(32).toUpperCase();e.set(A,g),B=g}return B});return queueMicrotask(()=>t.emit("observeDom",B)),g.join(" ")},observe:()=>{o(B,A=>{A.length>0&&A.forEach(A=>{let B=r(A);B&&M(A,B)})})}}}}},gA=(A,B)=>{O(B).buildCss(A).observe()},eA=(A,B)=>O(B).buildCss(A).clsx,cA={css:O,cssObserve:gA,clsx:eA};export{eA as cssClsx,gA as cssObserve,cA as default,O as xcss};
|