@lancar/lxui 1.0.0 → 1.0.2

package/README.md

@@ -7,15 +7,15 @@
 [![License: MIT](https://img.shields.io/badge/License-MIT-blue.svg?style=flat-square)](LICENSE)
 [![Zero Dependencies](https://img.shields.io/badge/dependencies-0-brightgreen.svg?style=flat-square)](package.json)
 
-**Version:** 1.0.0 · **License:** MIT · **Zero Dependencies**
+\*\*Version:\*\* 1.0.1 · **License:** MIT · **Zero Dependencies**
 
 | | |
 |---|---|
 | 🏠 Homepage | https://ui.lancar.id |
 | 📖 Docs | https://ui.lancar.id/docs |
 | 📦 npm | https://www.npmjs.com/package/@lancar/lxui |
-| 🌐 CDN CSS | `https://cdn.lancar.id/ui/lxui.min.css` |
-| 🌐 CDN JS | `https://cdn.lancar.id/ui/lxui.min.js` |
+| 🚀 jsDelivr | https://www.jsdelivr.com/package/npm/@lancar/lxui |
+| 📦 Release | https://github.com/lancar-id/lxui/releases/tag/v1.0.0 |
 
 ---
 
@@ -29,14 +29,110 @@ yarn add @lancar/lxui
 pnpm add @lancar/lxui
 ```
 
-### CDN (browser)
+### CDN via jsDelivr (Recommended)
+
+Gunakan jsDelivr CDN dengan **SRI integrity hash** untuk keamanan maksimal.
+
+#### Quick Start (CSS + JS Bundle)
 
 ```html
 <!-- CSS -->
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css"
+      rel="stylesheet"
+      integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM"
+      crossorigin="anonymous">
+
+<!-- JS Bundle (semua komponen interaktif) -->
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.bundle.min.js"
+        integrity="sha384-7QH/Btek+SMRJjgwUj76BLTCXnoDWJk9Qv6t0vOVZE8G0BrV1/iWEKfhuiqHCRU8"
+        crossorigin="anonymous"></script>
+```
+
+#### File Reference (semua file + SRI hash)
+
+| File | Link & Integrity |
+|---|---|
+| **lxui.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css) · `sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM` |
+| **lxui.min.js** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.js) · `sha384-D+ge+vXYWwFL+gTJSDc0ipylsiNn8JupyzsmH3SPiqZx8K7et+yig9SoiVhYRzZp` |
+| **lxui.bundle.min.js** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.bundle.min.js) · `sha384-7QH/Btek+SMRJjgwUj76BLTCXnoDWJk9Qv6t0vOVZE8G0BrV1/iWEKfhuiqHCRU8` |
+| **lxui.esm.min.js** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.esm.min.js) · `sha384-4uwfs5UigfLMnj2BUvkkUu3bnKMBAvCfZEedJAvLfNZ2N0VIZ6xjTub5uuJkpQE7` |
+| **lxui.rtl.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.rtl.min.css) · `sha384-plKaGJovfJnBS7MMlAxezdUpmgDJC/k4rVDpfCn8NR9T8NLo6x45uGGtp+v2xWyy` |
+| **lxthemes.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxthemes.min.css) · `sha384-ReH/S5ERyCGxqDyyrDbK2Laon9kK2jbHOjWbSVn+xDtl8jM2tyiJf+kIYE9WkuJ1` |
+| **lxfonts.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxfonts.min.css) · `sha384-q/+4TIfVl2NGD8abj5nLW2FVcJQf+JV5Kzw5xvuTepbNCDX4nBtgD4gorSiTsf9o` |
+| **lxicons.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxicons.min.css) · `sha384-oygDeMMbXY9AksdFbSdGWwjSDpAaZCxIDIEoJ1O3hEPSKf+VlmSLw7D4ZwGj35k+` |
+| **lxeditor.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxeditor.min.css) · `sha384-7MQ36JMdVn8IBcrOO1zV2srOxLrEM/ZyTDP/BJjNM6ith6xM+QLHkSc3LbasM6X6` |
+| **lx-grid.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lx-grid.min.css) · `sha384-jjOu6Zuc28mqZQF9G2ugUl35cRYvCydP3kPVhgSqvHCWJHath2LPZd0HjcOn9CT0` |
+| **lx-utilities.min.css** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lx-utilities.min.css) · `sha384-uFJC/gi86M43+UspUd8HAOnOiv6ftVMPwGl9LZEXFyTAWvxv9WjRpXI90BZC5wM0` |
+| **lxmarked.min.js** | [jsDelivr](https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxmarked.min.js) · `sha384-ZKkPR/5Ojl6LJ/38kdNa7yLA7vzzdVk9ubqkCUasgDFeG+keMEHQliMj51pr7kU7` |
+
+#### HTML Snippets Lengkap
 
-<!-- JS (optional, for interactive components) -->
-<script src="https://cdn.lancar.id/ui/lxui.min.js"></script>
+```html
+<!-- ═══ CSS ═══════════════════════════════════════════════════ -->
+
+<!-- Main CSS (wajib) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css"
+      rel="stylesheet"
+      integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM"
+      crossorigin="anonymous">
+
+<!-- RTL Support (opsional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.rtl.min.css"
+      rel="stylesheet"
+      integrity="sha384-plKaGJovfJnBS7MMlAxezdUpmgDJC/k4rVDpfCn8NR9T8NLo6x45uGGtp+v2xWyy"
+      crossorigin="anonymous">
+
+<!-- UI Themes (opsional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxthemes.min.css"
+      rel="stylesheet"
+      integrity="sha384-ReH/S5ERyCGxqDyyrDbK2Laon9kK2jbHOjWbSVn+xDtl8jM2tyiJf+kIYE9WkuJ1"
+      crossorigin="anonymous">
+
+<!-- Icons 500+ (opsional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxicons.min.css"
+      rel="stylesheet"
+      integrity="sha384-oygDeMMbXY9AksdFbSdGWwjSDpAaZCxIDIEoJ1O3hEPSKf+VlmSLw7D4ZwGj35k+"
+      crossorigin="anonymous">
+
+<!-- Editor Themes (opsional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxeditor.min.css"
+      rel="stylesheet"
+      integrity="sha384-7MQ36JMdVn8IBcrOO1zV2srOxLrEM/ZyTDP/BJjNM6ith6xM+QLHkSc3LbasM6X6"
+      crossorigin="anonymous">
+
+<!-- Grid only (opsional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lx-grid.min.css"
+      rel="stylesheet"
+      integrity="sha384-jjOu6Zuc28mqZQF9G2ugUl35cRYvCydP3kPVhgSqvHCWJHath2LPZd0HjcOn9CT0"
+      crossorigin="anonymous">
+
+<!-- Utilities only (opsional) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lx-utilities.min.css"
+      rel="stylesheet"
+      integrity="sha384-uFJC/gi86M43+UspUd8HAOnOiv6ftVMPwGl9LZEXFyTAWvxv9WjRpXI90BZC5wM0"
+      crossorigin="anonymous">
+
+<!-- ═══ JS ════════════════════════════════════════════════════ -->
+
+<!-- UMD (browser <script>) -->
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.js"
+        integrity="sha384-D+ge+vXYWwFL+gTJSDc0ipylsiNn8JupyzsmH3SPiqZx8K7et+yig9SoiVhYRzZp"
+        crossorigin="anonymous"></script>
+
+<!-- Bundle (semua komponen) -->
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.bundle.min.js"
+        integrity="sha384-7QH/Btek+SMRJjgwUj76BLTCXnoDWJk9Qv6t0vOVZE8G0BrV1/iWEKfhuiqHCRU8"
+        crossorigin="anonymous"></script>
+
+<!-- ESM (via import) -->
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.esm.min.js"
+        integrity="sha384-4uwfs5UigfLMnj2BUvkkUu3bnKMBAvCfZEedJAvLfNZ2N0VIZ6xjTub5uuJkpQE7"
+        crossorigin="anonymous"></script>
+
+<!-- LxMarked — Markdown renderer (opsional) -->
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxmarked.min.js"
+        integrity="sha384-ZKkPR/5Ojl6LJ/38kdNa7yLA7vzzdVk9ubqkCUasgDFeG+keMEHQliMj51pr7kU7"
+        crossorigin="anonymous"></script>
 ```
 
 ### ES Module
@@ -74,10 +170,10 @@ import '@lancar/lxui/css/base/tokens'      // design tokens only
 import '@lancar/lxui/css/layout/grid'      // grid only
 
 // JS — per komponen
-import { Modal }    from 'lxui/js/modal'
-import { Toast }    from 'lxui/js/toast'
-import { Carousel } from 'lxui/js/carousel'
-import { theme }    from 'lxui/js/theme'
+import { Modal }    from '@lancar/lxui/js/modal'
+import { Toast }    from '@lancar/lxui/js/toast'
+import { Carousel } from '@lancar/lxui/js/carousel'
+import { theme }    from '@lancar/lxui/js/theme'
 ```
 
 ---
@@ -85,11 +181,24 @@ import { theme }    from 'lxui/js/theme'
 ## Modular Structure
 
 ```
-lxui/
-├── css/
-│   ├── base/           reset · tokens · tokens-extended · typography · utils
-│   ├── layout/         grid · utilities
-│   └── components/     44 individual component files
+@lancar/lxui/
+├── lxui.css / lxui.min.css         Full CSS bundle
+├── lxui.js / lxui.min.js           UMD (browser <script> + CommonJS)
+├── lxui.esm.js / lxui.esm.min.js   ES Module (import/export)
+├── lxui.bundle.js / .min.js         Bundle lengkap
+├── lxui.rtl.min.css                 RTL support
+├── lxthemes.min.css                 7 UI themes
+├── lxfonts.min.css                  Font stack CSS variables
+├── lxicons.min.css                  500+ SVG icons
+├── lxeditor.min.css                 12 editor/terminal themes
+├── lxmarked.js                      Markdown renderer
+├── lx-grid.min.css                  Grid only
+├── lx-utilities.min.css             Utilities only
+│
+├── css/                             Per-komponen CSS
+│   ├── base/        reset · tokens · tokens-extended · typography · utils
+│   ├── layout/      grid · utilities
+│   └── components/  44 file individual
 │       accordion · alert · animations · avatar · back-top · badge
 │       breadcrumb · button · callout · card · carousel · chip
 │       code-block · collapse · compat · dark-mode · divider · dropdown
@@ -98,39 +207,70 @@ lxui/
 │       progress · rating · section · skeleton · spinner · stat · steps
 │       table · tag · timeline · toast · toggler · tooltip
 │
-├── js/                 19 individual ES modules
+├── js/              19 ES modules individual
 │   utils · modal · toast · collapse · dropdown · offcanvas · tooltip
 │   popover · tab · carousel · scrollspy · clipboard · counter
 │   number-input · rating · theme · breakpoint · init · index
 │
-└── types/index.d.ts    TypeScript declarations
+└── types/index.d.ts  TypeScript declarations
+```
+
+### Self-hosted Fonts (terpisah — tidak ikut versi)
+
+```
+fonts/                      Shared font assets (zero CDN dependency)
+├── fonts.css               Semua @font-face + CSS vars
+├── fonts.min.css           Minified
+├── sans/                   Sans-serif fonts
+│   ├── sans.css / sans.min.css
+│   ├── plus-jakarta-sans/  *.woff2 + plus-jakarta-sans.css
+│   ├── inter/              *.woff2 + inter.css
+│   ├── manrope/            *.woff2 + manrope.css
+│   └── ibm-plex-sans/      *.woff2 + ibm-plex-sans.css
+├── serif/                  Serif fonts
+│   ├── literata/           *.woff2 + literata.css
+│   ├── source-serif-4/     *.woff2 + source-serif-4.css
+│   └── merriweather/       *.woff2 + merriweather.css
+├── accessibility/
+│   └── atkinson-hyperlegible/ *.woff2 + atkinson-hyperlegible.css
+└── mono/                   Monospace fonts
+    ├── jetbrains-mono/     *.woff2 + jetbrains-mono.css
+    └── fira-code/          *.woff2 + fira-code.css
+```
+
+```html
+<!-- Semua font self-hosted (via jsDelivr) -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/fonts/fonts.min.css"
+      rel="stylesheet">
+
+<!-- Hanya sans-serif -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/fonts/sans/sans.min.css"
+      rel="stylesheet">
+
+<!-- Hanya Inter -->
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/fonts/sans/inter/inter.min.css"
+      rel="stylesheet">
 ```
 
 ---
 
 ## Optional Tooling
 
-Pre-configured, opt-in only — install what you need:
+Sudah termasuk dalam repo, opt-in — install hanya yang diperlukan:
 
 ```bash
-# ESLint
-npm i -D eslint
-npx eslint js/
+# ESLint — JavaScript linting
+npm i -D eslint && npx eslint js/
 
-# Stylelint
+# Stylelint — CSS linting
 npm i -D stylelint stylelint-config-standard
 npx stylelint "css/**/*.css"
 
-# Prettier
-npm i -D prettier
-npx prettier --write .
-
-# Jest (unit tests)
-npm i -D jest jest-environment-jsdom
-npx jest
+# Prettier — code formatting
+npm i -D prettier && npx prettier --write .
 ```
 
-Config files included: `.eslintrc.json` · `.stylelintrc.json` · `.prettierrc` · `jest.config.js`
+Config files: `.eslintrc.json` · `.stylelintrc.json` · `.prettierrc`
 
 ---
 
@@ -142,13 +282,13 @@ Config files included: `.eslintrc.json` · `.stylelintrc.json` · `.prettierrc`
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
+  <link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
 </head>
 <body>
   <div class="lx-container">
     <button class="lx-btn lx-btn-primary">Hello LxUI</button>
   </div>
-  <script src="https://cdn.lancar.id/ui/lxui.min.js"></script>
+  <script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.js" integrity="sha384-D+ge+vXYWwFL+gTJSDc0ipylsiNn8JupyzsmH3SPiqZx8K7et+yig9SoiVhYRzZp" crossorigin="anonymous"></script>
 </body>
 </html>
 ```
@@ -157,22 +297,38 @@ Config files included: `.eslintrc.json` · `.stylelintrc.json` · `.prettierrc`
 
 ## File Distribution
 
-| File | Size | Description |
+### CSS
+
+| File | Size | Keterangan |
 |---|---|---|
-| `lxui.css` | 115 KB | Full source CSS |
-| `lxui.min.css` | **97 KB** | Minified CSS (recommended) |
-| `lxui.js` | 38 KB | UMD — browser `<script>` & CommonJS |
-| `lxui.min.js` | **23 KB** | UMD minified |
-| `lxui.esm.js` | 30 KB | ES Module (import/export) |
-| `lxui.esm.min.js` | **22 KB** | ESM minified |
-| `lxui.rtl.min.css` | 75 KB | RTL support |
-| `lxthemes.min.css` | 16 KB | 7 UI themes |
-| `lxfonts.min.css` | 4 KB | Font stacks (zero CDN) |
-| `lxicons.min.css` | 32 KB | 500+ SVG icons via CSS mask |
+| `lxui.min.css` | **97 KB** | Full CSS minified — recommended |
+| `lxui.rtl.min.css` | 75 KB | RTL (right-to-left) support |
+| `lxthemes.min.css` | 16 KB | 7 UI themes (lumen, terra, verdant…) |
+| `lxfonts.min.css` | 4 KB | Font stack CSS variables |
+| `lxicons.min.css` | 32 KB | 500+ SVG icons via CSS mask-image |
 | `lxeditor.min.css` | 8 KB | 12 editor/terminal color themes |
 | `lx-grid.min.css` | 6 KB | Grid system only |
 | `lx-utilities.min.css` | 19 KB | Utility classes only |
-| `types/index.d.ts` | — | TypeScript declarations |
+| `css/components/*.css` | 1–9 KB | 44 component files individual |
+| `fonts/fonts.min.css` | — | Self-hosted @font-face (10 families) |
+
+### JavaScript
+
+| File | Size | Keterangan |
+|---|---|---|
+| `lxui.min.js` | **23 KB** | UMD — browser `<script>` & CommonJS |
+| `lxui.esm.min.js` | **22 KB** | ES Module (named exports) |
+| `lxui.bundle.min.js` | **16 KB** | Bundle semua komponen |
+| `lxmarked.js` | 10 KB | Markdown renderer |
+| `js/*.js` | 0.5–5 KB | 19 modul individual |
+
+### Lainnya
+
+| File | Keterangan |
+|---|---|
+| `types/index.d.ts` | TypeScript declarations |
+| `lxui.css` | Full source CSS (unminified) |
+| `lxui.rtl.css` | RTL source (unminified) |
 
 ---
 
@@ -373,16 +529,16 @@ Tidak perlu install apapun. Tambahkan di `<head>`:
 
 ```html
 <!-- CSS -->
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
 
 <!-- JS Bundle (semua plugins) -->
-<script src="https://cdn.lancar.id/ui/lxui.bundle.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.bundle.min.js" integrity="sha384-7QH/Btek+SMRJjgwUj76BLTCXnoDWJk9Qv6t0vOVZE8G0BrV1/iWEKfhuiqHCRU8" crossorigin="anonymous"></script>
 ```
 
 Hanya JS tanpa bundled dependencies:
 
 ```html
-<script src="https://cdn.lancar.id/ui/lxui.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.js" integrity="sha384-D+ge+vXYWwFL+gTJSDc0ipylsiNn8JupyzsmH3SPiqZx8K7et+yig9SoiVhYRzZp" crossorigin="anonymous"></script>
 ```
 
 ### npm
@@ -414,7 +570,7 @@ Download rilis: https://ui.lancar.id/releases
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>LxUI Starter</title>
-  <link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
+  <link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
 </head>
 <body>
 
@@ -424,7 +580,7 @@ Download rilis: https://ui.lancar.id/releases
     <button class="lx-btn lx-btn-primary">Get Started</button>
   </div>
 
-  <script src="https://cdn.lancar.id/ui/lxui.bundle.min.js" defer></script>
+  <script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.bundle.min.js" integrity="sha384-7QH/Btek+SMRJjgwUj76BLTCXnoDWJk9Qv6t0vOVZE8G0BrV1/iWEKfhuiqHCRU8" crossorigin="anonymous"></script>
 </body>
 </html>
 ```
@@ -607,7 +763,7 @@ module.exports = {
 ```javascript
 // src/index.js
 import '@lancar/lxui/dist/lxui.min.css';
-import LxUI from 'lxui/dist/lxui.esm.min.js';
+import LxUI from '@lancar/lxui/lxui.esm.min.js';
 LxUI.init();
 ```
 
@@ -770,7 +926,7 @@ Untuk menonaktifkan, override dengan nilai literal:
 
 ```html
 <html lang="ar" dir="rtl" data-theme="lumen">
-  <link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.rtl.min.css">
+  <link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.rtl.min.css" rel="stylesheet" integrity="sha384-plKaGJovfJnBS7MMlAxezdUpmgDJC/k4rVDpfCn8NR9T8NLo6x45uGGtp+v2xWyy" crossorigin="anonymous">
 ```
 
 ### CSS Logical Properties
@@ -3654,7 +3810,7 @@ LxUI berintegrasi dengan **LxIcons** — icon library SVG dari lancar.id.
 ### LxIcons CDN
 
 ```html
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxicons.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxicons.min.css" rel="stylesheet" integrity="sha384-oygDeMMbXY9AksdFbSdGWwjSDpAaZCxIDIEoJ1O3hEPSKf+VlmSLw7D4ZwGj35k+" crossorigin="anonymous">
 ```
 
 ### npm
@@ -3756,7 +3912,7 @@ LxUI tidak bergantung pada icon library mana pun — `lxicons.min.css` adalah si
 | Lisensi | MIT |
 | Homepage | https://ui.lancar.id |
 | Dokumentasi | https://ui.lancar.id/docs |
-| CDN | https://cdn.lancar.id/ui/ |
+| CDN | https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/ |
 | NPM | `npmjs.com/package/lxui` |
 | Repository | `github.com/lancar-id/lxui` |
 | Ukuran CSS | ~45 KB minified |
@@ -4132,7 +4288,7 @@ node migrate-to-lxui.js
 
 **Homepage:** https://ui.lancar.id
 **Docs:** https://ui.lancar.id/docs
-**CDN:** https://cdn.lancar.id/ui/lxui.min.css
+**CDN:** https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css
 **GitHub:** https://github.com/lancar-id/lxui
 **NPM:** https://npmjs.com/package/lxui
 
@@ -4607,7 +4763,7 @@ var(--accent-fg)     /* text on accent bg */
 **CDN (terpisah dari CSS utama):**
 
 ```html
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxeditor.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxeditor.min.css" rel="stylesheet" integrity="sha384-7MQ36JMdVn8IBcrOO1zV2srOxLrEM/ZyTDP/BJjNM6ith6xM+QLHkSc3LbasM6X6" crossorigin="anonymous">
 ```
 
 **Aktivasi:**
@@ -4859,7 +5015,7 @@ export default defineConfig({
 ```javascript
 // src/main.js
 import '@lancar/lxui/dist/lxui.min.css';
-import LxUI from 'lxui/dist/lxui.esm.min.js';
+import LxUI from '@lancar/lxui/lxui.esm.min.js';
 
 LxUI.init();
 ```
@@ -4971,11 +5127,11 @@ LxUI menggunakan **system font stack** secara default — tidak memerlukan konek
 
 ```html
 <!-- Tanpa CDN — gunakan system fonts (offline-safe, direkomendasikan) -->
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
 
 <!-- Dengan Google Fonts (opsional, membutuhkan koneksi internet) -->
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxfonts.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxfonts.min.css" rel="stylesheet" integrity="sha384-q/+4TIfVl2NGD8abj5nLW2FVcJQf+JV5Kzw5xvuTepbNCDX4nBtgD4gorSiTsf9o" crossorigin="anonymous">
 ```
 
 ### Font Variables
@@ -5024,7 +5180,7 @@ LxUI menggunakan **system font stack** secara default — tidak memerlukan konek
 
 ## Quick Reference CDN
 
-Semua file yang tersedia di `https://cdn.lancar.id/ui/`:
+Semua file yang tersedia di `https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/`:
 
 | File | Deskripsi |
 |------|-----------|
@@ -5048,25 +5204,25 @@ Semua file yang tersedia di `https://cdn.lancar.id/ui/`:
 
 ```html
 <!-- CSS saja (tanpa JS) -->
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
 ```
 
 ### Starter lengkap
 
 ```html
 <!-- CSS -->
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxicons.min.css">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxicons.min.css" rel="stylesheet" integrity="sha384-oygDeMMbXY9AksdFbSdGWwjSDpAaZCxIDIEoJ1O3hEPSKf+VlmSLw7D4ZwGj35k+" crossorigin="anonymous">
 
 <!-- JS -->
-<script src="https://cdn.lancar.id/ui/lxui.bundle.min.js" defer></script>
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.bundle.min.js" integrity="sha384-7QH/Btek+SMRJjgwUj76BLTCXnoDWJk9Qv6t0vOVZE8G0BrV1/iWEKfhuiqHCRU8" crossorigin="anonymous"></script>
 ```
 
 ### Starter dengan editor themes
 
 ```html
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxui.min.css">
-<link rel="stylesheet" href="https://cdn.lancar.id/ui/lxeditor.min.css">
-<script src="https://cdn.lancar.id/ui/lxui.bundle.min.js" defer></script>
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.min.css" rel="stylesheet" integrity="sha384-Vzif+wDuE90qTTy1G5up0ueqPdC6vUOP6NecH8QpFIJhfHOoMB93jVkyxiv1vlnM" crossorigin="anonymous">
+<link href="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxeditor.min.css" rel="stylesheet" integrity="sha384-7MQ36JMdVn8IBcrOO1zV2srOxLrEM/ZyTDP/BJjNM6ith6xM+QLHkSc3LbasM6X6" crossorigin="anonymous">
+<script src="https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.2/lxui.bundle.min.js" integrity="sha384-7QH/Btek+SMRJjgwUj76BLTCXnoDWJk9Qv6t0vOVZE8G0BrV1/iWEKfhuiqHCRU8" crossorigin="anonymous"></script>
 ```
 

package/fonts/accessibility/accessibility.css

@@ -0,0 +1,34 @@
+/*! LxUI Fonts v1.0.1 | MIT | https://ui.lancar.id */
+/* ── ACCESSIBILITY fonts ── */
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Atkinson Hyperlegible'),
+       url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Atkinson Hyperlegible'),
+       url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Atkinson Hyperlegible'),
+       url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-700.woff2') format('woff2');
+}
+
+
+/* ── CSS Variables (accessibility) ── */
+:root {
+}

package/fonts/accessibility/accessibility.min.css

@@ -0,0 +1,2 @@
+/*! LxUI Fonts v1.0.1 | MIT | https://ui.lancar.id */
+@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:local('Atkinson Hyperlegible'),url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400Italic.woff2') format('woff2')}@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:local('Atkinson Hyperlegible'),url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400.woff2') format('woff2')}@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:local('Atkinson Hyperlegible'),url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-700.woff2') format('woff2')}:root{}

package/fonts/accessibility/atkinson-hyperlegible/atkinson-hyperlegible.css

@@ -0,0 +1,30 @@
+/*! LxUI Fonts v1.0.1 | MIT | https://ui.lancar.id */
+/* Atkinson Hyperlegible */
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Atkinson Hyperlegible'),
+       url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400Italic.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: local('Atkinson Hyperlegible'),
+       url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400.woff2') format('woff2');
+}
+
+@font-face {
+  font-family: 'Atkinson Hyperlegible';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: local('Atkinson Hyperlegible'),
+       url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-700.woff2') format('woff2');
+}
+

package/fonts/accessibility/atkinson-hyperlegible/atkinson-hyperlegible.min.css

@@ -0,0 +1,2 @@
+/*! LxUI Fonts v1.0.1 | MIT | https://ui.lancar.id */
+@font-face{font-family:'Atkinson Hyperlegible';font-style:italic;font-weight:400;font-display:swap;src:local('Atkinson Hyperlegible'),url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400Italic.woff2') format('woff2')}@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:400;font-display:swap;src:local('Atkinson Hyperlegible'),url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-400.woff2') format('woff2')}@font-face{font-family:'Atkinson Hyperlegible';font-style:normal;font-weight:700;font-display:swap;src:local('Atkinson Hyperlegible'),url('https://cdn.jsdelivr.net/npm/@lancar/lxui@1.0.1/fonts/accessibility/atkinson-hyperlegible/AtkinsonHyperlegible-700.woff2') format('woff2')}