npm - @fwkui/x-css - Versions diffs - 1.0.3 → 1.0.4 - Mend

@fwkui/x-css 1.0.3 → 1.0.4

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 (7) hide show

package/README-EN.md DELETED Viewed

@@ -1,1159 +0,0 @@
-# x-css User Guide
-`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.
-## Installation
-To use `x-css`, import it into your project:
-```packages/fkui/css-dist/README-EN.md#L1-20
-<script type="module">
-  import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
-  $.cssObserve(document);
-</script>
-```
-# Using xCSS
-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:
-- Read and write class names following the syntax and understand how they compile into CSS
-- Control media queries, `@layer`, `!important`, pseudo selectors, and combine multiple properties in a single class
-> Note: A full list of property and value abbreviations is below in this document.
-## Design Tokens (CSS Variables)
-- 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.
-- How to declare:
-  - Put variables in a style tag at the top of the document or in a CSS file imported before using xCSS.
-  - Use CSS variable names starting with `--`, e.g. `--bg-gradient-login`, `--panel`, `--shadow-card`, `--color-primary`, `--space-md`, …
-- How to use in xCSS:
-  - Use directly inside braces: `bg{var(--bg-gradient-login)}` or `bxsh{var(--shadow-card)}` or `p{var(--space-md)}`
-  - Use available aliases if configured: `bgc--panel` or `c--primary` (if alias maps exist)
-  - You can use fallbacks with `var(--name, fallbackValue)` for older browser compatibility.
-- Note: CSS variables must be loaded before rendering classes that depend on them.
-- Example token declarations (put at the document head or an early-imported stylesheet):
-```packages/fkui/css-dist/README-EN.md#L21-40
-<style>
-  :root {
-    --bg-gradient-login: linear-gradient(#6a11cb, #2575fc);
-    --panel: #ffffff;
-    --shadow-card: 0 10px 20px rgba(0,0,0,.15);
-    --radius-card: 12px;
-    --color-primary: #0070f3;
-    --space-md: 16px;
-  }
-</style>
-```
-- Example: using tokens on a login page:
-```packages/fkui/css-dist/README-EN.md#L41-70
-<body class="bg{var(--bg-gradient-login)} h100vh w100% dF jcC aiC">
-  <main class="w360px md:w420px lg:w480px bgcWhite p28px bxsh{var(--shadow-card)} bdra12px">
-    ...
-    <button class="w100% p12px cWhite bdN bdra8px bxsh{var(--shadow-card)}" style="--color-primary: #0070f3;">
-      Sign in
-    </button>
-  </main>
-</body>
-```
-- Migration & alias hints:
-  - If you have aliases like `bgc--panel` or `c--primary`, define tokens and use them consistently.
-  - Example: `:root { --panel: #fff; }` and use either `bgc--panel` or `bgc{var(--panel)}` depending on your build setup.
-See examples and the Design Tokens section below for integration patterns.
-## General Syntax
-```
-[MQ:][layer]<property><value>[@selector]
-```
-Important note: `<property><value>` is REQUIRED — a class must contain both property and value.
-Examples of valid syntax:
-- `cRed` — color red (layer 0)
-- `5cRed` — color red at layer 5
-- `md:cRed` — color red on medium screens
-- `md:5cRed` — color red at layer 5 on medium screens
-### Components
-#### 1. Media Query (MQ) — Optional
-- `xs:` — small screens (max-width: 575px)
-- `sm:` — small screens (min-width: 576px)
-- `md:` — medium screens (min-width: 768px)
-- `lg:` — large screens (min-width: 992px)
-- `xl:` — extra large screens (min-width: 1200px)
-- `2xl:` — very large screens (min-width: 1400px)
-- `sma:` — up to small screens (max-width: 768px)
-- `mda:` — up to medium screens (max-width: 992px)
-- `lga:` — up to large screens (max-width: 1200px)
-- `xla:` — up to extra large screens (max-width: 1400px)
-#### 2. Layer — Optional
-- `1` to `19` — CSS layer priority (higher number = higher priority)
-- Default: `0` (layer 0)
-- Purpose: group rules by layer (base, component, utilities, overrides…)
-#### 3. Property — REQUIRED
-- Lowercase; can be full name or abbreviation
-- No `-` except special cases starting with `-w` for hyphenated properties
-- Examples: `w` (width), `h` (height), `c` (color), `bg` (background)
-#### 4. Value — REQUIRED
-- Numbers: `10`, `-4.5`, `0.5`, optionally with units: `10px`, `1.5rem`, `100%`
-- Named values start with uppercase: `Red`, `Center`, `Block`, `Fixed`, `None`
-- Literal values inside braces: `c{rgb(255,0,0)}`, `bg{linear-gradient(...)}`
-- CSS variables: start with `--`: `c--primary` → `color: var(--primary)`
-- Important: prefix `!` before value to mark `!important`: `w!10px` → `width: 10px !important`
-- Functions: use TitleCase + parentheses and `;` instead of spaces:
-  - `wCalc(100%;-;20px)` → `width: calc(100% - 20px)`
-  - `tTranslate(50%;,;-50%)` → `transform: translate(50% , -50%)`
-#### 5. Selector — Optional
-- Starts with `@`
-- Use `;` in place of spaces
-- Can include pseudo classes/elements, child selectors, or combinations
-- Examples: `@:hover`, `@:focus`, `@:active`, `@>a`, `@.btn;:hover`
-## Examples
-### Basic
-```packages/fkui/css-dist/README-EN.md#L71-90
-<!-- Red color -->
-<div class="cRed">Text in red</div>
-<!-- Width 100px -->
-<div class="w100px">Width 100px</div>
-<!-- Padding 20px -->
-<div class="p20px">Padding 20px</div>
-<!-- Opacity 50% -->
-<div class="opc50%">50% opacity</div>
-<!-- Font size 14px -->
-<div class="fns14px">Font size 14px</div>
-```
-### With Media Query
-```packages/fkui/css-dist/README-EN.md#L91-110
-<!-- Red on large screens -->
-<div class="lg:cRed">Red on desktop</div>
-<!-- Hidden on extra small screens -->
-<div class="xs:vHidden">Hidden on mobile</div>
-<!-- Responsive width -->
-<div class="w100% md:w50% lg:w33%">Responsive width</div>
-```
-### With Layer
-```packages/fkui/css-dist/README-EN.md#L111-130
-<!-- High-priority layer -->
-<div class="5cRed">High-priority red</div>
-<!-- Low-priority layer -->
-<div class="1cBlue">Low-priority blue</div>
-<!-- Combine layer and media query -->
-<div class="md:7cGreen">Green at layer 7 on desktop</div>
-```
-### With Selector
-```packages/fkui/css-dist/README-EN.md#L131-150
-<!-- Hover effect -->
-<div class="cRed@:hover">Red on hover</div>
-<!-- Focus effect -->
-<input class="bdw2px@:focus" placeholder="Border on focus" />
-<!-- Child selector -->
-<div class="cBlue@>a">Blue color for child anchor</div>
-<!-- Complex selector -->
-<div class="cRed@.btn;:hover">Red when hovering a .btn</div>
-```
-### With Special Values
-```packages/fkui/css-dist/README-EN.md#L151-170
-<!-- !important -->
-<div class="c!red">Red !important</div>
-<!-- CSS Variable -->
-<div class="c--primary">Color from CSS variable</div>
-<!-- Custom literal value -->
-<div class="w{calc(100%;-;20px)}">Computed width</div>
-<!-- CSS function -->
-<div class="wClamp(280px;640px;100%)">Width with clamp</div>
-<!-- Complex box-shadow -->
-<div class="bxsh{0;2px;8px;rgba(0,0,0,.1)}">Complex shadow</div>
-```
-### Combine multiple properties with `&`
-```packages/fkui/css-dist/README-EN.md#L171-190
-<!-- Multiple properties at once -->
-<div class="cRed&fw700&taC">Red, font-weight 700, centered</div>
-<!-- Flexbox layout -->
-<div class="dF&aiC&jcSp">Flexbox center + space-between</div>
-<!-- Padding and margin -->
-<div class="p8px&m0">Padding 8px and margin 0</div>
-<!-- Combine with selector -->
-<div class="cRed&fw700@:hover">Red and fw700 on hover</div>
-```
-## Priority & Collision Rules
-1. `@layer`: rules from larger-numbered layers override smaller ones (when same origin/specificity)
-2. Selector specificity: more specific selector wins
-3. Order of appearance: later rules in the same layer and specificity win
-4. `!important` beats normal rules in the same cascade scope
-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.
-## Important Rules
-### ✅ Valid
-- `cRed` — color red (property: `c`, value: `Red`)
-- `w10px` — width 10px (property: `w`, value: `10px`)
-- `md:cRed` — red on medium screens (MQ: `md`, property: `c`, value: `Red`)
-- `2w100px` — width 100px at layer 2 (layer: `2`, property: `w`, value: `100px`)
-- `cRed@:hover` — red on hover
-- `w!100px` — width 100px `!important`
-- `c{red}` — custom literal value for color
-- `cRed&w700` — combine multiple properties
-- `wCalc(100%;-;20px)` — function-style value with `;`
-### ❌ Invalid
-- `Cred` — uppercase `C` used for property (properties must be lowercase)
-- `C{red}` — property must be lowercase
-- `cRed}` — missing opening brace
-- `c-red` — hyphen not allowed in property
-- `W-10px` — uppercase property and hyphen
-- `w-!10px` — hyphen misuse; use `w!10px`
-- `cRed @:hover` — spaces in class name not allowed
-- `c` — missing value
-- `Red` — missing property
-## Common Mistakes & How to Avoid Them
-- Using uppercase on property names → incorrect. Properties must be lowercase or `--var`.
-- Missing property or value → both are required.
-- Confusing `-` and `!`: `w-!10px` is wrong; use `w!10px`.
-- Forgetting `;` inside values that contain spaces: `ff{Courier New}` should be `ff{Courier;New}`.
-- Selectors that contain spaces must use `;` and will be converted during output.
-- If you don't provide an abbreviation table, the compiler cannot map `ta` to `text-align`, for example.
-## Notes
-1. Property and Value are required — each class must include both.
-2. Class names should be lowercase for properties; values may contain uppercase letters.
-3. Avoid spaces in class names — use `;` instead.
-4. CSS.supports validation — classes should produce supported CSS.
-5. Layer priority — higher layer number wins.
-6. Media queries apply only within their specified ranges.
-7. Use `;` to represent whitespace in values. Example: `ff{Courier;New;monospace}` → `font-family: Courier New, monospace`
-## Practical Tips (from real-world experience)
-### 🎯 Class naming principles
-#### ✅ Recommended
-- Keep class names short and readable: `cRed`, `w100px`, `p16px`
-- Use conventional abbreviations: `dF` instead of `displayFlex` (d: display, F: Flex)
-#### ❌ Avoid
-- Extremely long names: `wCalc(100%;-;20px;-;30px;-;10px)` — prefer CSS variables
-- Complex inline values: `bxsh{0;4px;8px;12px;rgba(0,0,0,0.1);inset}` — prefer variables
-- Repeating properties for colors: `cRed`, `cBlue`, `cGreen` — use a color palette
-### 🎨 Managing complex values
-#### Use CSS Variables for long values:
-```packages/fkui/css-dist/README-EN.md#L191-210
-:root {
-  --shadow-card: 0 4px 8px rgba(0, 0, 0, 0.1);
-  --shadow-hover: 0 8px 16px rgba(0, 0, 0, 0.15);
-  --border-radius: 8px;
-  --spacing-sm: 8px;
-  --spacing-md: 16px;
-  --spacing-lg: 24px;
-}
-```
-```packages/fkui/css-dist/README-EN.md#L211-230
-<!-- Instead of writing a long value -->
-<div class="bxsh{0;4px;8px;rgba(0,0,0,0.1)} bdra8px p16px">
-  <!-- Use variables -->
-  <div class="bxsh--shadow-card bdra--border-radius p--spacing-md"></div>
-</div>
-```
-#### Create component classes for common patterns:
-```packages/fkui/css-dist/README-EN.md#L231-250
-<!-- Instead of repeating many utilities -->
-<div class="dF&aiC&jcSp&p16px&bgcWhite&bxsh{0;2px;4px;rgba(0,0,0,0.1)}">
-  <!-- Define a component class -->
-  <div class="card"></div>
-</div>
-```
-### 📱 Responsive Design Best Practices
-#### Mobile-first approach
-```packages/fkui/css-dist/README-EN.md#L251-270
-<!-- Base styles for mobile -->
-<div class="w100% p8px">
-  <!-- Overrides for desktop -->
-  <div class="md:w50% md:p16px lg:w33% lg:p24px"></div>
-</div>
-```
-#### Group breakpoints logically
-```packages/fkui/css-dist/README-EN.md#L271-290
-<!-- Main layout -->
-<div class="dB md:dF">
-  <!-- Responsive spacing -->
-  <div class="p8px md:p16px lg:p24px">
-    <!-- Responsive typography -->
-    <div class="fns14px md:fns16px lg:fns18px"></div>
-  </div>
-</div>
-```
-### 🎭 Layer Management
-#### Organize layers by hierarchy
-```packages/fkui/css-dist/README-EN.md#L291-310
-<!-- Base styles (0) -->
-<div class="cBlack fns16px">
-  <!-- Component styles (1-5) -->
-  <div class="2btnPrimary">
-    <!-- Utility styles (6-10) -->
-    <div class="8m16px">
-      <!-- Override styles (11-19) -->
-      <div class="15cRed"></div>
-    </div>
-  </div>
-</div>
-```
-### 🔧 Performance Tips
-#### Avoid over-engineering
-```packages/fkui/css-dist/README-EN.md#L311-330
-<!-- Simple and effective -->
-<div class="dF&aiC&p16px">
-  <!-- Instead of over-complicating -->
-  <div class="dF&aiC&jcC&p16px&m0&b0&bgcT"></div>
-</div>
-```
-#### Use shorthand when possible
-```packages/fkui/css-dist/README-EN.md#L331-350
-<!-- Margin shorthand -->
-<div class="m16px">
-  <!-- margin: 16px -->
-  <div class="mt8px&mb8px">
-    <!-- margin-top: 8px; margin-bottom: 8px -->
-    <div class="p16px">
-      <!-- padding: 16px -->
-      <div class="px16px&py8px"><!-- padding: 8px 16px --></div>
-    </div>
-  </div>
-</div>
-```
-### 🎨 Design System Integration
-#### Create design tokens:
-```packages/fkui/css-dist/README-EN.md#L351-380
-:root {
-  /* Colors */
-  --color-primary: #0070f3;
-  --color-secondary: #7928ca;
-  --color-success: #0070f3;
-  --color-warning: #f5a623;
-  --color-error: #e00;
-  /* Spacing scale */
-  --space-1: 4px;
-  --space-2: 8px;
-  --space-3: 12px;
-  --space-4: 16px;
-  --space-5: 20px;
-  --space-6: 24px;
-  /* Typography scale */
-  --text-xs: 12px;
-  --text-sm: 14px;
-  --text-base: 16px;
-  --text-lg: 18px;
-  --text-xl: 20px;
-}
-```
-#### Use semantic naming
-```packages/fkui/css-dist/README-EN.md#L381-400
-<!-- Instead of a specific color class -->
-<div class="cBlue">
-  <!-- Prefer semantic names -->
-  <div class="cPrimary">
-    <div class="cSuccess">
-      <div class="cError"></div>
-    </div>
-  </div>
-</div>
-```
-### 🚀 Maintenance Tips
-#### Document for your team
-```packages/fkui/css-dist/README-EN.md#L401-420
-<!-- Component: Button Primary -->
-<!-- Usage: <button class="btnPrimary">Click me</button> -->
-<!-- Variants: btnSecondary, btnDanger, btnGhost -->
-<button class="btnPrimary">Click me</button>
-```
-#### Consistent naming convention
-```packages/fkui/css-dist/README-EN.md#L421-440
-<!-- Layout -->
-<div class="container">
-  <div class="row">
-    <div class="col">
-      <!-- Components -->
-      <div class="card">
-        <div class="btn">
-          <div class="input">
-            <!-- Utilities -->
-            <div class="textCenter">
-              <div class="mAuto">
-                <div class="dNone"></div>
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</div>
-```
-### 💡 Pro Tips
-1. Always test on mobile first — mobile-first approach.
-2. Use browser dev tools to inspect compiled CSS output.
-3. Create a style guide documenting common patterns.
-4. Perform code reviews to ensure consistency across the team.
-5. Monitor performance and CSS bundle size.
-6. Put accessibility first.
-## Composite Example
-**HTML**
-```packages/fkui/css-dist/README-EN.md#L441-470
-<div
-  class="md:7 dF&aiC&jcSp p16px bgc--panel bxsh{0;2px;8px;rgba(0,0,0,.1)} c--fg@>a;:hover"
->
-  <a class="cBlue wClamp(120px;240px;100%)">Link</a>
-  <button class="w!120px h40px bdra8px cWhite bgc#0070f3">Button</button>
-</div>
-```
-**Generated CSS (conceptual)**
-```packages/fkui/css-dist/README-EN.md#L471-510
-@media (min-width: 768px) {
-  @layer l7 {
-    .md\:7\.dF\&aiC\&jcSp\:where(*) {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 16px;
-      background-color: var(--panel);
-      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
-    }
-    .md\:7\.c\-\-fg\@\>a\;\:hover > a:hover {
-      color: var(--fg);
-    }
-    .md\:7\.wClamp\(120px\;240px\;100\%\) {
-      width: clamp(120px, 240px, 100%);
-    }
-  }
-}
-.cBlue {
-  color: blue;
-}
-.w\!120px {
-  width: 120px !important;
-}
-.h40px {
-  height: 40px;
-}
-.bdra8px {
-  border-radius: 8px;
-}
-.cWhite {
-  color: #fff;
-}
-.bgc\#0070f3 {
-  background-color: #0070f3;
-}
-```
-## Quick Reference
-### Media Query
-| Abbrev | Screen size |
-| ------ | ----------- |
-| `xs:`  | ≤ 575px     |
-| `sm:`  | ≥ 576px     |
-| `md:`  | ≥ 768px     |
-| `lg:`  | ≥ 992px     |
-| `xl:`  | ≥ 1200px    |
-| `2xl:` | ≥ 1400px    |
-### Layer
-| Abbrev | Description                                 |
-| ------ | ------------------------------------------- |
-| `0`    | Default layer (low priority)                |
-| `1-19` | Custom layers (higher number = higher priority) |
-### Special values
-| Symbol | Meaning           |
-| ------ | ----------------- |
-| `!`    | !important        |
-| `--`   | CSS Variable      |
-| `{}`   | Literal/custom value |
-| `;`    | Replacement for spaces inside class names |
-## FAQ
-**Q:** Why must keyword values start with an uppercase letter?
-**A:** To distinguish properties (lowercase) from named values (capitalized). This avoids confusion between `red` as a value and a potential property.
-**Q:** What should I use for spaces inside values?
-**A:** Use `;` inside values and selectors to avoid breaking the class name.
-**Q:** I want to add a new breakpoint — how?
-**A:** Add a new prefix (e.g. `xxl:`) and map it to `@media (min-width: ...)` in your compiler configuration.
-**Q:** Do I need to escape classes when writing them in HTML?
-**A:** No. Write them as-is; the compiler will escape characters when generating CSS output.
----
-# Full reference: all xCSS properties and abbreviations
-## Data structure
-- Abbrev: short token used in class names
-- CSS Property: full CSS property name
-- Value abbreviations: mapping of short tokens to CSS values (if any)
----
-## 1. Layout & Display
-### Display
-| Abbrev | Property  | Value abbreviations |
-| ------ | --------- | ------------------- |
-| `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` |
-### Position
-| Abbrev | Property   | Values                      |
-| ------ | ---------- | --------------------------- |
-| `pos`  | `position` | `s:static`, `f:fixed`, `a:absolute`, `r:relative`, `st:sticky` |
-### Sizing
-| Abbrev | Property        | Notes/values                                |
-| ------ | --------------- | ------------------------------------------- |
-| `w`    | `width`         | `mic:min-content`, `mac:max-content`, `fc:fit-content`, `f:100%` |
-| `h`    | `height`        | `mic:min-content`, `mac:max-content`, `fc:fit-content` |
-| `mw`   | `max-width`     | -                                           |
-| `mxw`  | `max-width`     | -                                           |
-| `mh`   | `max-height`    | -                                           |
-| `miw`  | `min-width`     | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
-| `mih`  | `min-height`    | `f:100%`, `mic:min-content`, `mac:max-content`, `fc:fit-content` |
-| `blks` | `block-size`    | -                                           |
-| `ins`  | `inline-size`   | -                                           |
-| `mbs`  | `max-block-size`| -                                           |
-| `mis`  | `max-inline-size`| -                                          |
-| `mibs` | `min-block-size`| -                                           |
-| `misz` | `min-inline-size`| -                                          |
-### Positioning
-| Abbrev | Property                  | Notes |
-| ------ | ------------------------- | ----- |
-| `t`    | `top`                     | -     |
-| `r`    | `right`                   | -     |
-| `b`    | `bottom`                  | -     |
-| `l`    | `left`                    | -     |
-| `i`    | `inset`                   | -     |
-| `iblk` | `inset-block`             | -     |
-| `ibe`  | `inset-block-end`         | -     |
-| `ibsta`| `inset-block-start`       | -     |
-| `ii`   | `inset-inline`            | -     |
-| `iie`  | `inset-inline-end`        | -     |
-| `iis`  | `inset-inline-start`      | -     |
----
-## 2. Spacing
-### Margin
-| Abbrev | Property            | Notes |
-| ------ | ------------------- | ----- |
-| `m`    | `margin`            | -     |
-| `mt`   | `margin-top`        | -     |
-| `mr`   | `margin-right`      | -     |
-| `mb`   | `margin-bottom`     | -     |
-| `ml`   | `margin-left`       | -     |
-| `mblk` | `margin-block`      | -     |
-| `mbe`  | `margin-block-end`  | -     |
-| `mbsta`| `margin-block-start`| -     |
-| `min`  | `margin-inline`     | -     |
-| `mie`  | `margin-inline-end` | -     |
-| `mista`| `margin-inline-start`| -    |
-### Padding
-| Abbrev | Property               | Notes/values |
-| ------ | ---------------------- | ------------ |
-| `p`    | `padding`              | -            |
-| `pt`   | `padding-top`          | -            |
-| `pr`   | `padding-right`        | -            |
-| `pb`   | `padding-bottom`       | -            |
-| `pl`   | `padding-left`         | -            |
-| `pblk` | `padding-block`        | -            |
-| `pbe`  | `padding-block-end`    | -            |
-| `pbs`  | `padding-block-start`  | -            |
-| `pi`   | `padding-inline`       | `s:start`, `c:center`, `e:end`, `b:baseline`, `st:stretch` |
-| `pie`  | `padding-inline-end`   | -            |
-| `pis`  | `padding-inline-start` | -            |
----
-## 3. Colors & Background
-### Color
-| Abbrev | Property | Values                        |
-| ------ | -------- | ----------------------------- |
-| `c`    | `color`  | `i:inherit`, `t:transparent`  |
-### Background
-| Abbrev | Property                 | Notes/values |
-| ------ | ------------------------ | ------------ |
-| `bg`   | `background`             | -            |
-| `bgc`  | `background-color`       | `t:transparent`, `c:currentcolor` |
-| `bgi`  | `background-image`       | -            |
-| `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` |
-| `bgpx` | `background-position-x`  | `l:left`, `r:right`, `c:center` |
-| `bgpy` | `background-position-y`  | `t:top`, `b:bottom`, `c:center` |
-| `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` |
-| `bgs`  | `background-size`        | `c:contain`  |
-| `bga`  | `background-attachment`  | `s:scroll`, `f:fixed`, `l:local`|
-| `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` |
-| `bgcl` | `background-clip`        | `bb:border-box`, `pb:padding-box`, `cb:content-box`, `t:text` |
-| `bgo`  | `background-origin`      | `bb:border-box`, `pb:padding-box`, `cb:content-box` |
----
-## 4. Border
-### Border General
-| Abbrev | Property       | Values |
-| ------ | -------------- | ------ |
-| `bd`   | `border`       | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
-| `bds`  | `border-style` | `dt:dotted`, `ds:dashed`, `s:solid`, `db:double`, `g:groove`, `r:ridge`, `in:inset`, `out:outset` |
-| `bdc`  | `border-color` | -      |
-| `bdw`  | `border-width` | `t:thin`, `m:medium`, `th:thick` |
-### Border Sides
-| Abbrev | Property         | Notes |
-| ------ | ---------------- | ----- |
-| `bdt`  | `border-top`     | -     |
-| `bdr`  | `border-right`   | -     |
-| `bdb`  | `border-bottom`  | -     |
-| `bdl`  | `border-left`    | -     |
-### Border Radius
-| Abbrev | Property                     | Notes |
-| ------ | ---------------------------- | ----- |
-| `bda`  | `border-radius`              | -     |
-| `bdra` | `border-radius`              | -     |
-| `bdtlr`| `border-top-left-radius`     | -     |
-| `bdtrr`| `border-top-right-radius`    | -     |
-| `bdblr`| `border-bottom-left-radius`  | -     |
-| `bdbrr`| `border-bottom-right-radius` | -     |
-| `bdeer`| `border-end-end-radius`      | -     |
-| `bdesr`| `border-end-start-radius`    | -     |
-| `bdser`| `border-start-end-radius`    | -     |
-| `bdssr`| `border-start-start-radius`  | -     |
-### Border Block/Inline
-| Abbrev | Property                 | Values |
-| ------ | ------------------------ | ------ |
-| `bdblk`| `border-block`           | -      |
-| `bdblc`| `border-block-color`     | -      |
-| `bdble`| `border-block-end`       | -      |
-| `bdbls`| `border-block-start`     | -      |
-| `bdblst`| `border-block-style`    | `d:dotted`, `ds:dashed`, `db:double`, `g:groove`, `r:ridge`, `i:inset`, `o:outset` |
-| `bdblwi`| `border-block-width`    | -      |
-| `bdi`  | `border-inline`          | -      |
-| `bdic` | `border-inline-color`    | -      |
-| `bdie` | `border-inline-end`      | -      |
-| `bdista`| `border-inline-start`   | -      |
-| `bdistl`| `border-inline-style`   | -      |
-| `bdinw`| `border-inline-width`    | -      |
----
-## 5. Typography
-### Font
-(Abbreviations for font- related properties — many are supported; see mapping tables in the original file for the complete list.)
-| Abbrev | Property                    | Notes/values |
-| ------ | --------------------------- | ------------ |
-| `fn`   | `font`                      | -            |
-| `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` |
-| `fns`  | `font-size`                 | -            |
-| `fw`   | `font-weight`               | -            |
-| `fnsty`| `font-style`                | -            |
-| ...    | (other font-variant & feature properties are included) | - |
-### Text
-| Abbrev | Property              | Values/notes |
-| ------ | --------------------- | ------------ |
-| `ta`   | `text-align`          | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify`, `mp:match-parent`, `mc:-moz-center`, `wc:-webkit-center` |
-| `tal`  | `text-align-last`     | `s:start`, `e:end`, `l:left`, `r:right`, `c:center`, `j:justify` |
-| `td`   | `text-decoration`     | `u:underline` |
-| `tdc`  | `text-decoration-color` | - |
-| `tdl`  | `text-decoration-line`| `u:underline`, `o:overline`, `lt:line-through`, `b:blink` |
-| `tds`  | `text-decoration-style` | `db:double`, `dt:dotted`, `ds:dashed`, `w:wavy` |
-| `tdt`  | `text-decoration-thickness` | `ff:from-font` |
-| `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` |
-| `ttr`  | `text-transform`      | `c:capitalize`, `u:uppercase`, `l:lowercase`, `fw:full-width`, `fsk:full-size-kana` |
-| `tw`   | `text-wrap`           | `w:wrap`, `n:nowrap`, `b:balance`, `p:pretty` |
-| ...    | (other text properties included) | - |
-### Line & Spacing
-| Abbrev | Property              | Notes |
-| ------ | --------------------- | ----- |
-| `lh`   | `line-height`         | -     |
-| `lts`  | `letter-spacing`      | `n:normal` |
-| `wrs`  | `word-spacing`        | -     |
-| `lbrk` | `line-break`          | -     |
-| `wrb`  | `word-break`          | -     |
-| `wrtm` | `writing-mode`        | -     |
----
-## 6. Flexbox
-| Abbrev | Property            | Values/notes |
-| ------ | ------------------- | ------------ |
-| `fx`   | `flex`              | `i:0 1 auto`, `a:1 1 auto` |
-| `fxb`  | `flex-basis`        | -            |
-| `fxd`  | `flex-direction`    | `r:row`, `rr:row-reverse`, `c:column`, `cr:column-reverse` |
-| `fxw`  | `flex-wrap`         | `w:wrap`, `wr:wrap-reverse`, `n:nowrap` |
-| `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` |
-| `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` |
-| `as`   | `align-self`        | similar values as `ai` |
-| `ac`   | `align-content`     | `s:start`, `e:end`, `sp:space-between`, `sa:space-around`, `se:space-evenly`, `st:stretch`, etc. |
----
-## 7. Grid
-(Full grid abbreviations and value mappings are supported — see original mapping for exhaustive list.)
-| Abbrev | Property                 | Notes |
-| ------ | ------------------------ | ----- |
-| `g`    | `grid`                   | -     |
-| `ga`   | `grid-area`              | -     |
-| `gc`   | `grid-column`            | `f:1 / -1` |
-| `gtc`  | `grid-template-columns`  | `s:subgrid` |
-| `gap`  | `gap`                    | -     |
-| `ji`   | `justify-items`          | many mapping values (center, stretch, start, end, etc.) |
-| ...    | (other grid properties)  | -     |
----
-## 8. Effects & Filters
-### Opacity & Visibility
-| Abbrev | Property   | Notes |
-| ------ | ---------- | ----- |
-| `opc`  | `opacity`  | -     |
-| `v`    | `visibility` | `c:collapse` |
-### Filter & Backdrop
-| Abbrev | Property         | Notes |
-| ------ | ---------------- | ----- |
-| `flt`  | `filter`         | -     |
-| `bkdf` | `backdrop-filter`| -     |
-### Blend Modes
-| Abbrev | Property          | Values |
-| ------ | ----------------- | ------ |
-| `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` |
-### Box Shadow
-| Abbrev | Property     | Notes |
-| ------ | ------------ | ----- |
-| `bxsh` | `box-shadow` | -     |
-| `bxshd`| `box-shadow` | -     |
----
-## 9. Transforms & Animations
-### Transform
-| Abbrev | Property           | Notes |
-| ------ | ------------------ | ----- |
-| `tra`  | `transform`        | -     |
-| `tras` | `transform-style`  | -     |
-| `rot`  | `rotate`           | -     |
-| `s`    | `scale`            | -     |
-| `trl`  | `translate`        | -     |
-### Transition
-| Abbrev  | Property                   | Notes |
-| ------- | -------------------------- | ----- |
-| `tran`  | `transition`               | -     |
-| `trand` | `transition-delay`         | -     |
-| `trandur`| `transition-duration`     | -     |
-| `trantf`| `transition-timing-function`| -    |
-### Animation
-| Abbrev | Property                   | Notes |
-| ------ | -------------------------- | ----- |
-| `ani`  | `animation`                | -     |
-| `anide`| `animation-delay`          | -     |
-| `anidu`| `animation-duration`       | -     |
-| `anips`| `animation-play-state`     | `p:paused`, `r:running` |
-| `anitf`| `animation-timing-function`| `ei:ease-in`, `eo:ease-out`, `eio:ease-in-out`, `l:linear`, `ss:step-start`, `se:step-end` |
----
-## 10. Overflow & Scrolling
-### Overflow
-| Abbrev | Property         | Values |
-| ------ | ---------------- | ------ |
-| `ofl`  | `overflow`       | -      |
-| `oflx` | `overflow-x`     | `c:clip`, `s:scroll` |
-| `ofly` | `overflow-y`     | `c:clip`, `s:scroll` |
-### Scroll
-| Abbrev | Property              | Notes |
-| ------ | --------------------- | ----- |
-| `scrb` | `scroll-behavior`     | -     |
-| `scrm` | `scroll-margin`       | -     |
-| `scrsa`| `scroll-snap-align`   | -     |
-| `sbc`  | `scrollbar-color`     | -     |
-| `sbg`  | `scrollbar-gutter`    | -     |
-### Overscroll
-| Abbrev | Property                      | Values |
-| ------ | ----------------------------- | ------ |
-| `osrbh`| `overscroll-behavior`         | `c:contain` |
-| `osrbb`| `overscroll-behavior-block`   | `c:contain` |
-| `osrbi`| `overscroll-behavior-inline`  | `c:contain` |
----
-## 11. Lists & Tables
-### Lists
-| Abbrev | Property           | Values |
-| ------ | ------------------ | ------ |
-| `ls`   | `list-style`       | `i:inside`, `di:disc`, `c:circle`, `s:square`, `de:decimal`, ... |
-### Tables
-| Abbrev | Property           | Values |
-| ------ | ------------------ | ------ |
-| `tbl`  | `table-layout`     | -      |
-| `bdcl` | `border-collapse`  | `s:separate`, `c:collapse` |
-| `bdsp` | `border-spacing`   | -      |
-### Columns
-| Abbrev | Property           | Notes |
-| ------ | ------------------ | ----- |
-| `col`  | `columns`          | -     |
-| `colc` | `column-count`     | -     |
-| `colg` | `column-gap`       | -     |
----
-## 12. Advanced Properties
-### Containment
-| Abbrev | Property                         | Notes |
-| ------ | -------------------------------- | ----- |
-| `cnt`  | `contain`                        | -     |
-| `cntibs`| `contain-intrinsic-block-size`  | -     |
-| `cntih`| `contain-intrinsic-height`       | -     |
-### Container Queries
-| Abbrev | Property        | Notes |
-| ------ | --------------- | ----- |
-| `ctr`  | `container`     | -     |
-| `ctrn` | `container-name`| -     |
-| `ctrt` | `container-type`| -     |
-### Content & Counters
-| Abbrev | Property              | Notes |
-| ------ | --------------------- | ----- |
-| `ctt`  | `content`             | -     |
-| `cntri`| `counter-increment`   | -     |
-| `cntrr`| `counter-reset`       | -     |
-### Page Breaks
-| Abbrev | Property                  | Notes |
-| ------ | ------------------------- | ----- |
-| `pg`   | `page`                    | -     |
-| `pgba` | `page-break-after`        | -     |
-| `pgbb` | `page-break-before`       | -     |
-| `brka` | `break-after`             | -     |
-### Other Advanced
-| Abbrev | Property           | Values/notes |
-| ------ | ------------------ | ------------ |
-| `a`    | `all`              | -            |
-| `is`   | `isolation`        | `i:isolate`  |
-| `z`    | `z-index`          | -            |
-| `ord`  | `order`            | -            |
-| `fl`   | `float`            | `is:inline-start`, `ie:inline-end`, `r:right`, `l:left` |
-| `rsz`  | `resize`           | `b:both`, `h:horizontal`, `v:vertical` |
-| `us`   | `user-select`      | `t:text`, `all:all`, `c:contain` |
-| `cr`   | `cursor`           | many cursor value mappings (pointer, default, move, not-allowed, grab, etc.) |
-| `toa`  | `touch-action`     | `p:pan-x`, `py:pan-y`, `pm:pan-x pan-y`, `pi:pinch-zoom` |
-| `zo`   | `zoom`             | -            |
----
-## 13. WebKit Specific
-| Abbrev | Property                    | Notes |
-| ------ | --------------------------- | ----- |
-| `wlc`  | `-webkit-line-clamp`        | -     |
-| `wtfc` | `-webkit-text-fill-color`   | -     |
-| `wts`  | `-webkit-text-stroke`       | -     |
-| `wtsw` | `-webkit-text-stroke-width` | `m:medium`, `t:thick` |
----
-## 14. Special Values
-### Common Values
-- `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`
-### Size Values
-- `t` = `thin`
-- `m` = `medium`
-- `th` = `thick`
-### Style Values
-- `s` = `solid`
-- `d` = `dotted`
-- `ds` = `dashed`
-- `db` = `double`
-- `g` = `groove`
-- `r` = `ridge`
-- `i` = `inset`
-- `o` = `outset`
----
-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:
-```
-[MQ:][layer]<property><value>[@selector]
-```
-(remember: `<property><value>` is required)
-### Full example (HTML + usage)
-```packages/fkui/css-dist/README-EN.md#L511-999
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="utf-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-    <title>Login</title>
-    <meta name="description" content="Basic HTML5 sample">
-    <style>
-    :root {
-      --primary-color: #007bff;
-      --secondary-color: #6c757d;
-      --success-color: #28a745;
-      --info-color: #17a2b8;
-      --warning-color: #ffc107;
-      --danger-color: #dc3545;
-      --light-text: #6c757d;
-      --dark-text: #343a40;
-      --body-bg: #f8f9fa;
-      --div-color: #dee2e6;
-      --bd3:1px 1px 1px 1px  #dee2e6;
-      --w:#fff;
-    }
-    </style>
-  </head>
-  <body>
-      <div class="dF jcC aiC h100vh bgc--body-bg px10px">
-              <div class="bgc--w p40px bda8px bxshd--bd3 w400px">
-                <h1 class="taC c--dark-text mb30px">Login</h1>
-                <div class="dF fxdC my8px">
-                  <input class="p8px" type="text" placeholder="Username">
-                </div>
-                <div class="dF fxdC my8px">
-                  <input class="p8px" type="password" placeholder="Password">
-                  <a href="#" class="c--primary-color taR mt8px">
-                    Forgot password?
-                  </a>
-                </div>
-                <div class="taC mt30px">
-                  <button class="bdN bgc--primary-color cWhite p12px w100%  bdra4px">
-                    Login
-                  </button>
-                </div>
-                <div class="dF aiC my20px">
-                  <div class="fx1 h1px bgc--div"></div>
-                  <span class="px10px c--light-text">Or continue with</span>
-                  <div class="fx1 h1px bgc--div"></div>
-                </div>
-                <div class="dF jcC">
-                  <button class="bdN bgc--info-color c--w p12px mx8px dF aiC  bdra4px">
-                    <span class="ml8px">Facebook</span>
-                  </button>
-                  <button class="bdN bgc--success-color c--w p12px mx8px dF aiC bdra4px">
-                    <span class="ml8px">X-Twitter</span>
-                  </button>
-                </div>
-                <div class="dF aiC my20px">
-                  <div class="fx1 h1px bgc--div"></div>
-                </div>
-                <div class="taC">
-                  <a href="#" class="p12px">
-                    Create new account
-                  </a>
-                </div>
-              </div>
-            </div>
-    <script type="module">
-      import $ from "https://unpkg.com/@fwkui/x-css@1.0.2/index.js";
-      $.cssObserve(document);
-    </script>
-  </body>
-</html>
-```
-```packages/fkui/css-dist/README-EN.md#L1000-1005
-(End of translated README)
-```