@bookklik/senangstart-css 0.1.4 → 0.1.7

package/docs/guide/preflight.md

@@ -0,0 +1,139 @@
+---
+title: Preflight
+description: An opinionated set of base styles that resets browser defaults
+---
+
+# Preflight
+
+Preflight is SenangStart CSS's opinionated set of base styles, designed to smooth over cross-browser inconsistencies and make it easier for you to work within the constraints of your design system.
+
+## Overview
+
+When you include SenangStart CSS in your project, Preflight is automatically applied. It's built on top of [modern-normalize](https://github.com/sindresorhus/modern-normalize) and adds additional opinionated styles that we've found helpful.
+
+## What Preflight Does
+
+### Box-Sizing Reset
+
+All elements use `border-box` sizing, making it easier to manage widths with padding and borders:
+
+```css
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+}
+```
+
+### Margins Removed
+
+Default margins are stripped from all elements for a consistent starting point:
+
+```css
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+```
+
+### Headings Reset
+
+Headings are unstyled by default, inheriting font size and weight. This encourages using semantic markup while styling headings via your design system:
+
+```css
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+```
+
+### Lists Unstyled
+
+Lists have their default styling removed. Add list styles back when you need them:
+
+```css
+ol, ul, menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+```
+
+### Images Block-Level
+
+Images and other replaced elements are set to `display: block` and constrained to their parent width:
+
+```css
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  vertical-align: middle;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+### Form Element Normalization
+
+Form elements inherit font properties from their parent:
+
+```css
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+```
+
+### Buttons Have Cursor Pointer
+
+Buttons and elements with `role="button"` get a pointer cursor:
+
+```css
+button, [role="button"] {
+  cursor: pointer;
+}
+```
+
+## Disabling Preflight
+
+If you need to disable Preflight entirely, you can do so in your configuration:
+
+### Via Configuration File
+
+```js
+// senangstart.config.js
+export default {
+  preflight: false,
+  // ... other options
+}
+```
+
+### Via CLI Flag
+
+```bash
+# Build without Preflight
+npx senangstart build --no-preflight
+
+# Dev mode without Preflight
+npx senangstart dev --no-preflight
+```
+
+## When to Disable Preflight
+
+Consider disabling Preflight if:
+
+- You're integrating SenangStart CSS into an existing project with its own reset/normalize
+- You're using another CSS framework that already provides base styles
+- You need to preserve browser default styling for specific use cases
+
+## Full Preflight Styles
+
+For the complete list of Preflight styles, view the [preflight.js source](https://github.com/bookklik-technologies/senangstart-css/blob/main/src/compiler/generators/preflight.js).

package/docs/ms/guide/preflight.md

@@ -0,0 +1,139 @@
+---
+title: Preflight
+description: Set gaya asas yang jelas untuk menormalkan lalai pelayar
+---
+
+# Preflight
+
+Preflight adalah set gaya asas SenangStart CSS yang jelas, direka untuk melicinkan ketidakkonsistenan antara pelayar dan memudahkan anda bekerja dalam batasan sistem reka bentuk anda.
+
+## Gambaran Keseluruhan
+
+Apabila anda memasukkan SenangStart CSS dalam projek anda, Preflight digunakan secara automatik. Ia dibina di atas [modern-normalize](https://github.com/sindresorhus/modern-normalize) dan menambah gaya tambahan yang kami dapati berguna.
+
+## Apa Yang Preflight Lakukan
+
+### Reset Box-Sizing
+
+Semua elemen menggunakan saiz `border-box`, memudahkan pengurusan lebar dengan padding dan border:
+
+```css
+*,
+::before,
+::after {
+  box-sizing: border-box;
+  border-width: 0;
+  border-style: solid;
+}
+```
+
+### Margin Dikeluarkan
+
+Margin lalai dipadamkan dari semua elemen untuk titik permulaan yang konsisten:
+
+```css
+blockquote, dl, dd, h1, h2, h3, h4, h5, h6, hr, figure, p, pre {
+  margin: 0;
+}
+```
+
+### Reset Tajuk
+
+Tajuk tidak digayakan secara lalai, mewarisi saiz dan berat fon. Ini menggalakkan penggunaan markup semantik sambil menggayakan tajuk melalui sistem reka bentuk anda:
+
+```css
+h1, h2, h3, h4, h5, h6 {
+  font-size: inherit;
+  font-weight: inherit;
+}
+```
+
+### Senarai Tidak Digayakan
+
+Senarai mempunyai gaya lalai dikeluarkan. Tambah gaya senarai kembali apabila anda memerlukannya:
+
+```css
+ol, ul, menu {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+```
+
+### Imej Tahap-Blok
+
+Imej dan elemen ganti lain ditetapkan kepada `display: block` dan dikekang kepada lebar induk:
+
+```css
+img, svg, video, canvas, audio, iframe, embed, object {
+  display: block;
+  vertical-align: middle;
+}
+
+img, video {
+  max-width: 100%;
+  height: auto;
+}
+```
+
+### Normalisasi Elemen Borang
+
+Elemen borang mewarisi sifat fon dari induk mereka:
+
+```css
+button, input, optgroup, select, textarea {
+  font-family: inherit;
+  font-size: 100%;
+  font-weight: inherit;
+  line-height: inherit;
+  color: inherit;
+  margin: 0;
+  padding: 0;
+}
+```
+
+### Butang Mempunyai Kursor Pointer
+
+Butang dan elemen dengan `role="button"` mendapat kursor pointer:
+
+```css
+button, [role="button"] {
+  cursor: pointer;
+}
+```
+
+## Menyahaktifkan Preflight
+
+Jika anda perlu menyahaktifkan Preflight sepenuhnya, anda boleh melakukannya dalam konfigurasi anda:
+
+### Melalui Fail Konfigurasi
+
+```js
+// senangstart.config.js
+export default {
+  preflight: false,
+  // ... pilihan lain
+}
+```
+
+### Melalui Bendera CLI
+
+```bash
+# Bina tanpa Preflight
+npx senangstart build --no-preflight
+
+# Mod dev tanpa Preflight
+npx senangstart dev --no-preflight
+```
+
+## Bila Untuk Menyahaktifkan Preflight
+
+Pertimbangkan untuk menyahaktifkan Preflight jika:
+
+- Anda mengintegrasikan SenangStart CSS ke dalam projek sedia ada dengan reset/normalize sendiri
+- Anda menggunakan rangka kerja CSS lain yang sudah menyediakan gaya asas
+- Anda perlu mengekalkan gaya lalai pelayar untuk kes penggunaan tertentu
+
+## Gaya Preflight Penuh
+
+Untuk senarai lengkap gaya Preflight, lihat [sumber preflight.js](https://github.com/bookklik-technologies/senangstart-css/blob/main/src/compiler/generators/preflight.js).

package/docs/ms/reference/colors.md

@@ -4,28 +4,28 @@ Rujukan lengkap untuk palet warna.
 
 ## Warna Semantik
 
-| Key | Value | Description |
+| Kunci | Nilai | Penerangan |
 |-----|-------|-------------|
-| `white` | #FFFFFF | Pure white |
-| `black` | #000000 | Pure black |
-| `grey` | #6B7280 | Neutral grey |
-| `dark` | #3E4A5D | **Brand dark** |
-| `light` | #DBEAFE | **Brand light** |
-| `primary` | #2563EB | **Brand primary** |
-| `secondary` | #DBEAFE | **Brand secondary** |
-| `success` | #10B981 | Positive feedback |
-| `warning` | #F59E0B | Cautions |
-| `danger` | #EF4444 | Errors |
+| `white` | #FFFFFF | Putih tulen |
+| `black` | #000000 | Hitam tulen |
+| `grey` | #6B7280 | Kelabu neutral |
+| `dark` | #3E4A5D | **Gelap jenama** |
+| `light` | #DBEAFE | **Cerah jenama** |
+| `primary` | #2563EB | **Utama jenama** |
+| `secondary` | #DBEAFE | **Sekunder jenama** |
+| `success` | #10B981 | Maklum balas positif |
+| `warning` | #F59E0B | Amaran |
+| `danger` | #EF4444 | Ralat |
 
-## Color Palette
+## Palet Warna
 
-All colors are available in 11 shades: **50**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**, **950**
+Semua warna tersedia dalam 11 warna: **50**, **100**, **200**, **300**, **400**, **500**, **600**, **700**, **800**, **900**, **950**
 
-### Chromatic Colors
+### Warna Kromatik
 
 <div class="color-grid">
 
-| Color | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
+| Warna | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
 |-------|-----|------|------|------|------|------|------|------|------|------|------|
 | **Red** | <span style="background:#FEF2F2;padding:2px 8px;border-radius:4px">#FEF2F2</span> | <span style="background:#FEE2E2;padding:2px 8px;border-radius:4px">#FEE2E2</span> | <span style="background:#FECACA;padding:2px 8px;border-radius:4px">#FECACA</span> | <span style="background:#FCA5A5;padding:2px 8px;border-radius:4px">#FCA5A5</span> | <span style="background:#F87171;padding:2px 8px;border-radius:4px">#F87171</span> | <span style="background:#EF4444;padding:2px 8px;border-radius:4px;color:white">#EF4444</span> | <span style="background:#DC2626;padding:2px 8px;border-radius:4px;color:white">#DC2626</span> | <span style="background:#B91C1C;padding:2px 8px;border-radius:4px;color:white">#B91C1C</span> | <span style="background:#991B1B;padding:2px 8px;border-radius:4px;color:white">#991B1B</span> | <span style="background:#7F1D1D;padding:2px 8px;border-radius:4px;color:white">#7F1D1D</span> | <span style="background:#450A0A;padding:2px 8px;border-radius:4px;color:white">#450A0A</span> |
 | **Orange** | <span style="background:#FFF7ED;padding:2px 8px;border-radius:4px">#FFF7ED</span> | <span style="background:#FFEDD5;padding:2px 8px;border-radius:4px">#FFEDD5</span> | <span style="background:#FED7AA;padding:2px 8px;border-radius:4px">#FED7AA</span> | <span style="background:#FDBA74;padding:2px 8px;border-radius:4px">#FDBA74</span> | <span style="background:#FB923C;padding:2px 8px;border-radius:4px">#FB923C</span> | <span style="background:#F97316;padding:2px 8px;border-radius:4px;color:white">#F97316</span> | <span style="background:#EA580C;padding:2px 8px;border-radius:4px;color:white">#EA580C</span> | <span style="background:#C2410C;padding:2px 8px;border-radius:4px;color:white">#C2410C</span> | <span style="background:#9A3412;padding:2px 8px;border-radius:4px;color:white">#9A3412</span> | <span style="background:#7C2D12;padding:2px 8px;border-radius:4px;color:white">#7C2D12</span> | <span style="background:#431407;padding:2px 8px;border-radius:4px;color:white">#431407</span> |
@@ -47,11 +47,11 @@ All colors are available in 11 shades: **50**, **100**, **200**, **300**, **400*
 
 </div>
 
-### Neutral Colors
+### Warna Neutral
 
 <div class="color-grid">
 
-| Color | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
+| Warna | 50 | 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 950 |
 |-------|-----|------|------|------|------|------|------|------|------|------|------|
 | **Slate** | <span style="background:#F8FAFC;padding:2px 8px;border-radius:4px">#F8FAFC</span> | <span style="background:#F1F5F9;padding:2px 8px;border-radius:4px">#F1F5F9</span> | <span style="background:#E2E8F0;padding:2px 8px;border-radius:4px">#E2E8F0</span> | <span style="background:#CBD5E1;padding:2px 8px;border-radius:4px">#CBD5E1</span> | <span style="background:#94A3B8;padding:2px 8px;border-radius:4px">#94A3B8</span> | <span style="background:#64748B;padding:2px 8px;border-radius:4px;color:white">#64748B</span> | <span style="background:#475569;padding:2px 8px;border-radius:4px;color:white">#475569</span> | <span style="background:#334155;padding:2px 8px;border-radius:4px;color:white">#334155</span> | <span style="background:#1E293B;padding:2px 8px;border-radius:4px;color:white">#1E293B</span> | <span style="background:#0F172A;padding:2px 8px;border-radius:4px;color:white">#0F172A</span> | <span style="background:#020617;padding:2px 8px;border-radius:4px;color:white">#020617</span> |
 | **Gray** | <span style="background:#F9FAFB;padding:2px 8px;border-radius:4px">#F9FAFB</span> | <span style="background:#F3F4F6;padding:2px 8px;border-radius:4px">#F3F4F6</span> | <span style="background:#E5E7EB;padding:2px 8px;border-radius:4px">#E5E7EB</span> | <span style="background:#D1D5DB;padding:2px 8px;border-radius:4px">#D1D5DB</span> | <span style="background:#9CA3AF;padding:2px 8px;border-radius:4px">#9CA3AF</span> | <span style="background:#6B7280;padding:2px 8px;border-radius:4px;color:white">#6B7280</span> | <span style="background:#4B5563;padding:2px 8px;border-radius:4px;color:white">#4B5563</span> | <span style="background:#374151;padding:2px 8px;border-radius:4px;color:white">#374151</span> | <span style="background:#1F2937;padding:2px 8px;border-radius:4px;color:white">#1F2937</span> | <span style="background:#111827;padding:2px 8px;border-radius:4px;color:white">#111827</span> | <span style="background:#030712;padding:2px 8px;border-radius:4px;color:white">#030712</span> |
@@ -61,44 +61,44 @@ All colors are available in 11 shades: **50**, **100**, **200**, **300**, **400*
 
 </div>
 
-## Usage
+## Penggunaan
 
-### Background Colors
+### Warna Latar Belakang
 
 ```html
-<div visual="bg:blue-500">Blue 500 background</div>
-<div visual="bg:slate-100">Light slate background</div>
-<div visual="bg:emerald-600">Emerald 600 background</div>
+<div visual="bg:blue-500">Latar belakang Blue 500</div>
+<div visual="bg:slate-100">Latar belakang slate cerah</div>
+<div visual="bg:emerald-600">Latar belakang Emerald 600</div>
 ```
 
-### Text Colors
+### Warna Teks
 
 ```html
-<span visual="text:gray-900">Dark text</span>
-<span visual="text:blue-600">Blue link</span>
-<span visual="text:red-500">Error text</span>
+<span visual="text:gray-900">Teks gelap</span>
+<span visual="text:blue-600">Pautan biru</span>
+<span visual="text:red-500">Teks ralat</span>
 ```
 
-### Border Colors
+### Warna Sempadan
 
 ```html
-<div visual="border:gray-300 border-w:[1px]">Light border</div>
-<div visual="border:blue-500 border-w:[2px]">Blue border</div>
+<div visual="border:gray-300 border-w:[1px]">Sempadan cerah</div>
+<div visual="border:blue-500 border-w:[2px]">Sempadan biru</div>
 ```
 
-### Arbitrary Colors
+### Warna Arbitrari
 
-Use brackets for custom hex values:
+Gunakan kurungan untuk nilai hex tersuai:
 
 ```html
-<div visual="bg:[#8B5CF6]">Custom purple</div>
-<div visual="text:[#EC4899]">Custom pink text</div>
-<div visual="bg:[rgba(0,0,0,0.5)]">Semi-transparent</div>
+<div visual="bg:[#8B5CF6]">Ungu tersuai</div>
+<div visual="text:[#EC4899]">Teks merah jambu tersuai</div>
+<div visual="bg:[rgba(0,0,0,0.5)]">Separuh telus</div>
 ```
 
-## Customization
+## Penyesuaian
 
-Add custom colors in `senangstart.config.js`:
+Tambah warna tersuai dalam `senangstart.config.js`:
 
 ```javascript
 export default {
@@ -113,14 +113,14 @@ export default {
 }
 ```
 
-## Semantic Usage
+## Penggunaan Semantik
 
-| Color | Recommended Use |
+| Warna | Kegunaan Disyorkan |
 |-------|-----------------|
-| `primary` | Main actions, links, highlights |
-| `success` | Positive feedback, confirmations |
-| `warning` | Cautions, important notices |
-| `danger` | Errors, destructive actions |
-| `grey` | Secondary text, borders |
-| `dark` | Primary text, headings |
-| `light` | Backgrounds, subtle fills |
+| `primary` | Tindakan utama, pautan, sorotan |
+| `success` | Maklum balas positif, pengesahan |
+| `warning` | Amaran, notis penting |
+| `danger` | Ralat, tindakan merosakkan |
+| `grey` | Teks sekunder, sempadan |
+| `dark` | Teks utama, tajuk |
+| `light` | Latar belakang, isian halus |

package/docs/ms/reference/layout/align-content.md

@@ -0,0 +1,35 @@
+# Align Content
+
+Jajarkan baris kandungan dalam bekas flex berbilang baris
+
+## Sintaks
+```
+layout="content:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `start` | `align-content: flex-start` | Jajar ke permulaan |
+| `end` | `align-content: flex-end` | Jajar ke hujung |
+| `center` | `align-content: center` | Tengahkan kandungan |
+| `between` | `align-content: space-between` | Ruang antara baris |
+| `around` | `align-content: space-around` | Ruang sekeliling baris |
+| `evenly` | `align-content: space-evenly` | Ruang sekata |
+| `stretch` | `align-content: stretch` | Regangkan baris |
+
+## Contoh
+
+```html
+<div layout="flex wrap content:center">Centered rows</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/align-items.md

@@ -0,0 +1,33 @@
+# Align Items
+
+Jajarkan item sepanjang paksi silang
+
+## Sintaks
+```
+layout="items:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `start` | `align-items: flex-start` | Jajar ke permulaan |
+| `end` | `align-items: flex-end` | Jajar ke hujung |
+| `center` | `align-items: center` | Tengahkan item |
+| `baseline` | `align-items: baseline` | Jajar ke garis asas |
+| `stretch` | `align-items: stretch` | Regangkan item |
+
+## Contoh
+
+```html
+<div layout="flex items:center">Centered</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/align-self.md

@@ -0,0 +1,34 @@
+# Align Self
+
+Ganti penjajaran untuk satu item
+
+## Sintaks
+```
+layout="self:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `align-self: auto` | Guna penjajaran induk |
+| `start` | `align-self: flex-start` | Jajar ke permulaan |
+| `end` | `align-self: flex-end` | Jajar ke hujung |
+| `center` | `align-self: center` | Tengahkan item |
+| `baseline` | `align-self: baseline` | Jajar ke garis asas |
+| `stretch` | `align-self: stretch` | Regangkan item |
+
+## Contoh
+
+```html
+<div layout="self:center">Centered item</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/aspect-ratio.md

@@ -0,0 +1,40 @@
+# Aspect Ratio
+
+Tetapkan nisbah aspek elemen
+
+## Sintaks
+```
+layout="aspect:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `auto` | `aspect-ratio: auto` | Nisbah aspek semula jadi |
+| `square` | `aspect-ratio: 1 / 1` | Segi empat sama 1:1 |
+| `video` | `aspect-ratio: 16 / 9` | Video 16:9 |
+
+## Contoh
+
+```html
+<div layout="aspect:square">Square</div>
+<div layout="aspect:[4/3]">4:3</div>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="aspect:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/border-collapse.md

@@ -0,0 +1,30 @@
+# Border Collapse
+
+Kawal runtuhan sempadan jadual
+
+## Sintaks
+```
+layout="border:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `collapse` | `border-collapse: collapse` | Runtuhkan sempadan |
+| `separate` | `border-collapse: separate` | Asingkan sempadan |
+
+## Contoh
+
+```html
+<table layout="border:collapse">Collapsed table</table>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/border-spacing.md

@@ -0,0 +1,39 @@
+# Border Spacing
+
+Kawal jarak antara sempadan jadual
+
+## Sintaks
+```
+layout="border-spacing:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `border-spacing` | `border-spacing: {value}` | Semua jarak |
+| `border-spacing-x` | `border-spacing: {value} 0` | Jarak mendatar |
+| `border-spacing-y` | `border-spacing: 0 {value}` | Jarak menegak |
+
+## Contoh
+
+```html
+<table layout="border-separate border-spacing:small">Spaced</table>
+```
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div layout="border:[custom-value]">Custom</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```

package/docs/ms/reference/layout/box-sizing.md

@@ -0,0 +1,30 @@
+# Box Sizing
+
+Kawal cara lebar dan tinggi dikira
+
+## Sintaks
+```
+layout="box:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `border` | `box-sizing: border-box` | Termasuk padding dan sempadan dalam saiz |
+| `content` | `box-sizing: content-box` | Tidak termasuk padding dan sempadan |
+
+## Contoh
+
+```html
+<div layout="box:border">Border box</div>
+```
+
+## Responsif
+
+```html
+<!-- Contoh responsif -->
+<div layout="mob:... tab:... lap:...">
+  Kandungan responsif
+</div>
+```