docs: README and manifest descriptions; locale-aware table sort

.github/workflows/publish-packages.yml

@@ -215,7 +215,7 @@ jobs:
             <version>${VERSION}</version>
             <packaging>jar</packaging>
             <name>LombokCSS</name>
-            <description>Token-first component CSS framework — webjar distribution</description>
+            <description>Token-first component CSS framework — webjar distribution. Part of Lombok Ecosystem.</description>
             <url>https://github.com/codinglombok/LombokCSS</url>
             <licenses>
               <license>
@@ -269,7 +269,7 @@ jobs:
               <PackageId>codinglombok.LombokCSS</PackageId>
               <Version>${VERSION}</Version>
               <Authors>codinglombok</Authors>
-              <Description>Token-first component CSS framework — one markup, five design styles, dark mode + RTL, ~10KB gzipped</Description>
+              <Description>Token-first component CSS framework — one markup, five design styles, dark mode + RTL, ~10KB gzipped. Part of Lombok Ecosystem.</Description>
               <PackageLicenseExpression>MIT</PackageLicenseExpression>
               <PackageProjectUrl>https://github.com/codinglombok/LombokCSS</PackageProjectUrl>
               <RepositoryUrl>https://github.com/codinglombok/LombokCSS</RepositoryUrl>

CLAUDE.md

@@ -0,0 +1,48 @@
+# CLAUDE.md — memori proyek LombokCSS
+
+Berkas ini adalah memori lintas sesi untuk Claude Code. Baca dulu sebelum bekerja,
+perbarui di akhir setiap sesi (bagian "Status & lanjutan").
+
+## Konteks
+
+- Repo `codinglombok/LombokCSS`, katalog ekosistem **01.01**, tingkat **L0**, status 🟢 LIVE, versi **0.1.9**, lisensi **MIT**.
+- Acuan normatif: **MASTERPLAN_UTAMA v3.4** (2026-09-29) — Prinsip #11 "Universal tanpa klaim aplikasi", **ADR-019**, 9 dimensi D1–D9, 12 dokumen standar per repo.
+- Dokumen standar repo: `docs/*_LombokCSS_v0.1.9.md` (masterplan, architecture, changelog, map, structure_repo, full_summary_project, guide_how_to_use, how_to_dist, development_ide, API, Lang, SPEC).
+
+## Aturan wajib (v3.4)
+
+- DILARANG di README/manifest/dokumen: "Part of Lombok<Aplikasi/Framework>", "Library #…", "component of …", "for LombokRAG/PDF/Agentic". Yang boleh: "Part of Lombok Ecosystem", "Dipakai oleh X" (bagian terpisah).
+- Audit cepat: `grep -n -i -E "part of Lombok[A-Z]|library #|component of|for Lombok(RAG|PDF|Agentic)" README.md package.json composer.json bower.json lombokcss.gemspec`
+- README wajib punya "Why this library? (Mengapa library ini?)" dan "Standards implemented".
+- Checklist D1–D9 di `docs/masterplan_…` minimal 6/9 ✅ untuk rilis publik (saat ini 6/9).
+
+## Perintah
+
+```bash
+npm ci && npm run build        # dist/ dari src/
+npm test                       # anggaran ukuran (CSS ≤15 KB, JS ≤4 KB gzip) + SSR guard
+npx playwright test tests/behavior.spec.js   # 44 test perilaku
+npm run lint                   # Prettier
+cp dist/lombok.js docs/assets/lombok.js      # sinkron aset situs bila JS berubah
+```
+
+- `CHANGELOG.md` ditulis release-please — jangan diedit tangan; catatan masterplan masuk ke `docs/changelog_LombokCSS_v<ver>.md`.
+- Perubahan perilaku JS: perbarui `docs/SPEC_…` + test di `tests/behavior.spec.js`.
+
+## Status & lanjutan
+
+Sesi 2026-09-30 (branch `claude/affectionate-sagan-o4rxmx`) — penyelarasan v3.4:
+
+- [x] 12 dokumen standar + checklist universalitas (6/9)
+- [x] README: Why this library, Standards implemented, ekosistem = peer
+- [x] Deskripsi manifest npm/Composer/Bower/gem/NuGet/Maven + "Part of Lombok Ecosystem"
+- [x] `lombok.js`: sortir tabel via `Intl.Collator` dari `lang` terdekat (+2 test)
+
+Belum selesai (lanjutkan di sesi berikut):
+
+- [ ] Pemilik: ubah deskripsi GitHub About (teks ada di `docs/masterplan_…` §6)
+- [ ] C-02: email kontak nyata di `SECURITY.md` (masih placeholder) — butuh keputusan pemilik
+- [ ] C-03: hapus folder `package/` (salinan lama, tidak dipublikasikan)
+- [ ] C-04: SBOM + provenance npm di workflow rilis (target 0.2.0)
+- [ ] C-06: rename `docs/*_v0.1.9.md` saat versi minor naik
+- [ ] D8: tooltip & validasi form opsional; D5 → ✅ setelah C-02 + C-04

README.md

@@ -4,6 +4,9 @@
 > A modern, **token-first** component CSS framework. Drop a class, get a working
 > component — like Bootstrap. Re-theme everything by changing **one attribute** —
 > like a design system. Ships at **~9.7 KB gzipped** (full build, minified).
+>
+> Universal CSS framework for any web UI, on any device — part of the
+> [Lombok Ecosystem](https://github.com/codinglombok).
 
 ```text
 Component-based (Bootstrap)  +  Token-driven theming (design systems)  +  Tiny (Pico/UnoCSS)
@@ -43,7 +46,7 @@ Component-based (Bootstrap)  +  Token-driven theming (design systems)  +  Tiny (
 [![CI](https://img.shields.io/github/actions/workflow/status/codinglombok/LombokCSS/ci.yml?style=flat-square&logo=github-actions&logoColor=white&labelColor=2088FF&color=brightgreen&label=CI&branch=main)](https://github.com/codinglombok/LombokCSS/actions/workflows/ci.yml)
 [![Super-Linter](https://img.shields.io/github/actions/workflow/status/codinglombok/LombokCSS/linter.yml?style=flat-square&logo=github-actions&logoColor=white&labelColor=2088FF&color=brightgreen&label=Super-Linter&branch=main)](https://github.com/codinglombok/LombokCSS/actions/workflows/linter.yml)
 [![Visual Tests](https://img.shields.io/github/actions/workflow/status/codinglombok/LombokCSS/visual.yml?style=flat-square&logo=playwright&logoColor=white&labelColor=2EAD33&color=brightgreen&label=Visual+Tests&branch=main)](https://github.com/codinglombok/LombokCSS/actions/workflows/visual.yml)
-[![Tests](https://img.shields.io/badge/Tests-42%20passing-brightgreen?style=flat-square&logo=checkmarx&logoColor=white&labelColor=21B352)](https://github.com/codinglombok/LombokCSS/tree/main/tests)
+[![Tests](https://img.shields.io/badge/Tests-44%20passing-brightgreen?style=flat-square&logo=checkmarx&logoColor=white&labelColor=21B352)](https://github.com/codinglombok/LombokCSS/tree/main/tests)
 [![Zero deps](https://img.shields.io/badge/Dependencies-0%20runtime-brightgreen?style=flat-square&logo=data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAyNCAyNCI+PHBhdGggZmlsbD0id2hpdGUiIGQ9Ik05IDE2LjJMNC44IDEybC0xLjQgMS40TDkgMTkgMjEgN2wtMS40LTEuNHoiLz48L3N2Zz4=&labelColor=333)](https://github.com/codinglombok/LombokCSS/blob/main/package.json)
 [![Conventional Commits](https://img.shields.io/badge/Commits-Conventional-FE5196?style=flat-square&logo=conventionalcommits&logoColor=white)](https://conventionalcommits.org)
 [![Code style](https://img.shields.io/badge/Code%20style-Prettier-F7B93E?style=flat-square&logo=prettier&logoColor=white&labelColor=1A2B34)](https://prettier.io)
@@ -64,6 +67,10 @@ Component-based (Bootstrap)  +  Token-driven theming (design systems)  +  Tiny (
 
 ## Lombok Ecosystem
 
+Libraries that work well alongside LombokCSS — optional peers, not owners.
+LombokCSS has zero runtime dependencies and is a standalone library that
+belongs to no single application or framework.
+
 [![LombokClarion](https://img.shields.io/badge/LombokClarion-PHP%20Full%20Stack-777BB4?style=flat-square&logo=php&logoColor=white&labelColor=4F5B93)](https://github.com/codinglombok/LombokClarion)
 [![LombokCharts](https://img.shields.io/badge/LombokCharts-Zero--Dep%20Charts-FF6384?style=flat-square&logo=chartdotjs&logoColor=white&labelColor=C94070)](https://github.com/codinglombok/LombokCharts)
 [![LombokQRCode](https://img.shields.io/badge/LombokQRCode-QR%20Generator-00C9A7?style=flat-square&logo=qrcode&logoColor=white&labelColor=00927A)](https://github.com/codinglombok/LombokQRCode)
@@ -77,6 +84,35 @@ Component-based (Bootstrap)  +  Token-driven theming (design systems)  +  Tiny (
 
 ---
 
+## Why this library?
+
+**For whom:** web developers, designers, agencies, product teams and hardware
+makers who ship a browser UI — from a one-page landing site or a router/IoT
+admin panel served from flash, to a SaaS dashboard, an e-government form or an
+enterprise design system.
+
+**The problem:** most CSS frameworks bake one look into every component, so a
+rebrand, a dark mode or an RTL locale means overriding hundreds of rules or
+rewriting markup. Utility-first frameworks avoid that, but move the styling
+into every HTML attribute and need a build step.
+
+**Why LombokCSS instead:**
+
+- **One markup, five design styles** — switch the whole look with a single
+  `data-style` attribute; dark mode (`data-theme`) and RTL (`dir`) compose
+  independently with every style.
+- **Tiny and dependency-free** — ~9.7 KB gzipped CSS plus an optional ~3 KB JS;
+  works from a CDN, npm, Composer, RubyGems or a plain file copy, with no build
+  step.
+- **Runs anywhere a browser engine runs** — desktop and mobile browsers,
+  WebViews in iOS/Android apps, Electron/Tauri desktop apps, SSR frameworks,
+  kiosks and embedded device panels.
+- **Standards-based** — CSS logical properties, native `<dialog>`/`<details>`,
+  WAI-ARIA patterns, `prefers-color-scheme` / `prefers-reduced-motion`, and
+  BCP-47 `lang` / `dir` (see [Standards implemented](#standards-implemented)).
+
+---
+
 ## Documentation
 
 |                                                                                                                                           |                                                                                                                                                     |
@@ -343,6 +379,17 @@ Modern CSS used with graceful fallbacks: `:has()`, `:user-invalid`,
 properties, native `<dialog>`/`<details>`. Components ship with visible
 `:focus-visible` rings, ARIA hooks, and respect `prefers-reduced-motion`.
 
+## Standards implemented
+
+| Area                  | Standard                                                                                     |
+| --------------------- | -------------------------------------------------------------------------------------------- |
+| Accessibility         | WCAG 2.2 level AA colour contrast for built-in styles; WAI-ARIA 1.2 roles and states         |
+| Interaction patterns  | WAI-ARIA Authoring Practices: tabs, dialog (modal), disclosure, sortable table               |
+| Layout & writing mode | CSS Logical Properties and Values (RTL via `dir`)                                            |
+| User preferences      | Media Queries Level 5: `prefers-color-scheme`, `prefers-reduced-motion`                      |
+| Language              | BCP 47 language tags — table sort collates by the nearest `lang` attribute (`Intl.Collator`) |
+| HTML                  | WHATWG HTML Living Standard: native `<dialog>`, `<details>`, form validation states          |
+
 ## Testing
 
 Visual-regression + behavior tests run via Playwright in CI:

bower.json

@@ -1,6 +1,6 @@
 {
   "name": "lombokcss",
-  "description": "Token-first component CSS framework. One markup, five design styles, dark mode + RTL.",
+  "description": "Token-first component CSS framework. One markup, five design styles, dark mode + RTL. Part of Lombok Ecosystem.",
   "main": "dist/lombok.min.css",
   "license": "MIT",
   "homepage": "https://github.com/codinglombok/lombokcss",

composer.json

@@ -1,6 +1,6 @@
 {
   "name": "codinglombok/lombokcss",
-  "description": "Token-first component CSS framework. One markup, five design styles, dark mode + RTL. ~9.7KB gzipped.",
+  "description": "Token-first component CSS framework. One markup, five design styles, dark mode + RTL. ~9.7KB gzipped. Part of Lombok Ecosystem.",
   "type": "library",
   "license": "MIT",
   "keywords": [

dist/lombok.js

@@ -216,11 +216,26 @@
     );
   });
 
+  /* Collator for the BCP-47 language nearest to el (lang="sv", "de", …), so
+     text sorts the way readers of that language expect; numeric: true orders
+     "Item 2" before "Item 10". An unknown or malformed tag falls back to the
+     runtime default instead of throwing a RangeError. */
+  function collator(el) {
+    var host = el.closest("[lang]"),
+      opts = { numeric: true };
+    try {
+      return new Intl.Collator((host && host.getAttribute("lang")) || undefined, opts);
+    } catch {
+      return new Intl.Collator(undefined, opts);
+    }
+  }
+
   /* Table sort: <th aria-sort> click sorts its column (string/number aware) */
   d.querySelectorAll("table.table thead th[aria-sort]").forEach(function (th) {
     th.addEventListener("click", function () {
       var table = th.closest("table"),
-        tbody = table.tBodies[0];
+        tbody = table.tBodies[0],
+        cmp = collator(table).compare;
       var idx = Array.prototype.indexOf.call(th.parentNode.children, th);
       var asc = th.getAttribute("aria-sort") !== "ascending";
       th.parentNode.querySelectorAll("th[aria-sort]").forEach(function (o) {
@@ -233,7 +248,7 @@
           y = b.cells[idx].textContent.trim();
         var nx = parseFloat(x),
           ny = parseFloat(y);
-        var r = !isNaN(nx) && !isNaN(ny) ? nx - ny : x.localeCompare(y);
+        var r = !isNaN(nx) && !isNaN(ny) ? nx - ny : cmp(x, y);
         return asc ? r : -r;
       });
       rows.forEach(function (r) {

docs/API_LombokCSS_v0.1.9.md

@@ -0,0 +1,61 @@
+# API Reference — LombokCSS v0.1.9
+
+| Atribut | Nilai |
+| --- | --- |
+| Repo | [codinglombok/LombokCSS](https://github.com/codinglombok/LombokCSS) |
+| Versi library | 0.1.9 |
+| Tingkat / cluster | L0 · 01 Frontend, UI & Visualisasi Data (katalog 01.01) |
+| Acuan | MASTERPLAN_UTAMA v3.4 (2026-09-29) · ARCHITECTURE_UTAMA v3.4 · ADR-019 |
+| Tanggal dokumen | 2026-09-30 |
+| Lisensi | MIT (kebijakan §10: framework CSS) |
+
+Dokumen standar: [Masterplan](masterplan_LombokCSS_v0.1.9.md) · [Architecture](architecture_LombokCSS_v0.1.9.md) · [Changelog](changelog_LombokCSS_v0.1.9.md) · [Map](map_LombokCSS_v0.1.9.md) · [Structure Repo](structure_repo_LombokCSS_v0.1.9.md) · [Full Summary Project](full_summary_project_LombokCSS_v0.1.9.md) · [Guide How to Use](guide_how_to_use_LombokCSS_v0.1.9.md) · [How to Dist](how_to_dist_LombokCSS_v0.1.9.md) · [Development Ide](development_ide_LombokCSS_v0.1.9.md) · [API Reference](API_LombokCSS_v0.1.9.md) · [Bahasa (i18n)](Lang_LombokCSS_v0.1.9.md) · [Behavioral Specification](SPEC_LombokCSS_v0.1.9.md)
+
+---
+
+## 1. Atribut global
+
+| Atribut | Elemen | Nilai |
+| --- | --- | --- |
+| `data-style` | `<html>` atau kontainer | `modern-corporate-flat` · `resonant-stark` · `neo-brutalism` · `semantic-minimalist` · `glassmorphism` |
+| `data-theme` | `<html>` atau kontainer | `light` · `dark` |
+| `dir` | `<html>` | `ltr` · `rtl` |
+| `lang` | elemen mana pun | Tag BCP 47 (collation sortir tabel) |
+
+## 2. Token (CSS custom properties)
+
+| Kelompok | Token |
+| --- | --- |
+| Warna permukaan & teks | `--lc-bg` `--lc-surface` `--lc-surface-2` `--lc-text` `--lc-text-muted` `--lc-text-faint` `--lc-border` `--lc-border-strong` `--lc-border-width` |
+| Aksen | `--lc-accent` `--lc-accent-hover` `--lc-accent-active` `--lc-accent-text` `--lc-accent-soft` `--lc-accent-soft-text` `--lc-ring` |
+| Status | `--lc-{success,warning,danger,info}` + `-soft` + `-text` |
+| Bentuk & efek | `--lc-radius-sm` `--lc-radius` `--lc-radius-lg` `--lc-radius-full` `--lc-shadow-sm` `--lc-shadow` `--lc-shadow-lg` `--lc-shadow-hard` `--lc-blur` `--lc-glass-tint` `--lc-glass-border` `--lc-transition` |
+| Tipografi | `--lc-font-sans` `--lc-font-display` `--lc-font-mono` `--lc-text-{xs,sm,base,lg,xl,2xl,3xl,4xl}` `--lc-weight-{normal,medium,semibold,bold}` `--lc-leading-{tight,normal,relaxed}` `--lc-tracking` |
+| Ruang & tata letak | `--lc-space-{0,1,2,3,4,5,6,8,10,12}` `--lc-container` `--lc-navbar-h` |
+| Lapisan | `--lc-z-{base,dropdown,sticky,modal,toast,tooltip}` |
+
+## 3. Kelas komponen
+
+Lihat [Full Summary](full_summary_project_LombokCSS_v0.1.9.md) §2 dan situs docs
+(`components.html`, `forms.html`, `utilities.html`). Status visual: `.is-open`, `.is-active`, `.is-valid`, `.is-invalid`.
+
+## 4. JavaScript (`dist/lombok.js`)
+
+| Hook | Perilaku |
+| --- | --- |
+| `[data-dropdown-toggle]` dalam `.dropdown` | Toggle `.is-open`, `aria-expanded`; Esc & klik luar menutup |
+| `[role=tablist] [role=tab][aria-controls]` | `aria-selected`, panel `hidden` |
+| `[data-modal-open="id"]` / `[data-modal-close]` | `showModal()` / `close()` pada `<dialog>`; klik backdrop menutup |
+| `[data-drawer-open="id"]` / `[data-drawer-close]` | Drawer/offcanvas |
+| `[data-popover-toggle]` dalam `.popover` | Toggle `.is-open`; Esc menutup |
+| `.navbar-toggle` dalam `.navbar` | Toggle `.is-open` |
+| `.carousel` (`.carousel-track`, `.carousel-prev/next`, `.carousel-dots`) | Geser per slide, sadar RTL |
+| `table.table thead th[aria-sort]` | Sortir kolom: angka numerik, teks via `Intl.Collator(lang terdekat, {numeric:true})` |
+
+```ts
+Lombok.toast(msg: string, opts?: { variant?: "success"|"warning"|"danger"|"info"; timeout?: number /* ms, default 3500 */ }): HTMLElement
+```
+
+## 5. Ekspor paket npm
+
+`lombokcss` → `dist/lombok.js` · `lombokcss/css` → `dist/lombok.min.css` · `lombokcss/css-full` → `dist/lombok.css` · `lombokcss/js` · `lombokcss/src/*`.

docs/Lang_LombokCSS_v0.1.9.md

@@ -0,0 +1,39 @@
+# Bahasa (i18n) — LombokCSS v0.1.9
+
+| Atribut | Nilai |
+| --- | --- |
+| Repo | [codinglombok/LombokCSS](https://github.com/codinglombok/LombokCSS) |
+| Versi library | 0.1.9 |
+| Tingkat / cluster | L0 · 01 Frontend, UI & Visualisasi Data (katalog 01.01) |
+| Acuan | MASTERPLAN_UTAMA v3.4 (2026-09-29) · ARCHITECTURE_UTAMA v3.4 · ADR-019 |
+| Tanggal dokumen | 2026-09-30 |
+| Lisensi | MIT (kebijakan §10: framework CSS) |
+
+Dokumen standar: [Masterplan](masterplan_LombokCSS_v0.1.9.md) · [Architecture](architecture_LombokCSS_v0.1.9.md) · [Changelog](changelog_LombokCSS_v0.1.9.md) · [Map](map_LombokCSS_v0.1.9.md) · [Structure Repo](structure_repo_LombokCSS_v0.1.9.md) · [Full Summary Project](full_summary_project_LombokCSS_v0.1.9.md) · [Guide How to Use](guide_how_to_use_LombokCSS_v0.1.9.md) · [How to Dist](how_to_dist_LombokCSS_v0.1.9.md) · [Development Ide](development_ide_LombokCSS_v0.1.9.md) · [API Reference](API_LombokCSS_v0.1.9.md) · [Bahasa (i18n)](Lang_LombokCSS_v0.1.9.md) · [Behavioral Specification](SPEC_LombokCSS_v0.1.9.md)
+
+---
+
+## 1. Ringkasan i18n
+
+LombokCSS **tidak mengirim string UI sendiri**: semua teks (label tombol, isi toast,
+judul) ditulis pemakai di HTML/JS. Karena itu katalog pesan Core-20 (Prinsip #6) tidak
+berlaku untuk library ini; yang berlaku adalah dukungan tata tulis dan urutan bahasa.
+
+| Kemampuan | Status |
+| --- | --- |
+| Arah tulisan RTL (Arab, Ibrani, Persia, Urdu) | ✅ CSS logical properties; carousel sadar `dir` |
+| Urutan alfabet per bahasa (sortir tabel) | ✅ `Intl.Collator` dari atribut `lang` terdekat (BCP 47) |
+| Angka dalam teks ("Item 2" < "Item 10") | ✅ `numeric: true` |
+| Font skrip non-Latin | ⏳ pakai `--lc-font-sans`; tidak ada font bawaan |
+| Katalog pesan | N/A — tidak ada pesan bawaan |
+
+## 2. Contoh
+
+```html
+<html lang="ar" dir="rtl">
+<table class="table" lang="sv">…</table>   <!-- Å, Ä, Ö diurutkan setelah Z -->
+```
+
+## 3. Aturan fallback
+
+Tag `lang` kosong, tidak ada, atau tidak valid → collation default runtime (tidak melempar error).