@bookklik/senangstart-css 0.2.9 → 0.2.12

package/docs/guide/preflight.md

@@ -134,6 +134,25 @@ Consider disabling Preflight if:
 - You're using another CSS framework that already provides base styles
 - You need to preserve browser default styling for specific use cases
 
+### Safe Area Inset
+
+Support for modern devices with notches and rounded corners:
+
+\`\`\`css
+body {
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+}
+\`\`\`
+
+This automatically adds padding to account for device features like:
+- iPhone notches and dynamic islands
+- Rounded screen corners
+- Home indicators on iPad
+- Cutouts on Android devices
+
 ## 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).
+For complete list of Preflight styles, view [preflight.js source](https://github.com/bookklik-technologies/senangstart-css/blob/main/src/compiler/generators/preflight.js).

package/docs/ms/guide/preflight.md

@@ -134,6 +134,25 @@ Pertimbangkan untuk menyahaktifkan Preflight jika:
 - Anda menggunakan rangka kerja CSS lain yang sudah menyediakan gaya asas
 - Anda perlu mengekalkan gaya lalai pelayar untuk kes penggunaan tertentu
 
+### Inset Kawasan Selamat
+
+Sokongan untuk peranti moden dengan takuk dan sudut bulat:
+
+```css
+body {
+  padding-top: env(safe-area-inset-top);
+  padding-right: env(safe-area-inset-right);
+  padding-bottom: env(safe-area-inset-bottom);
+  padding-left: env(safe-area-inset-left);
+}
+```
+
+Ini secara automatik menambah padding untuk mengambil kira ciri peranti seperti:
+- Takuk iPhone dan pulau dinamik
+- Sudut skrin bulat
+- Penunjuk rumah pada iPad
+- Potong pada peranti Android
+
 ## 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/breakpoints.md

@@ -11,6 +11,7 @@ Rujukan lengkap untuk breakpoint responsif.
 | `tab:` | 768px | Tablet |
 | `lap:` | 1024px | Komputer riba |
 | `desk:` | 1280px | Desktop |
+| `print:` | print | Media cetak |
 
 ## Keserasian Tailwind
 
@@ -44,6 +45,7 @@ SenangStart menyokong titik henti (breakpoint) lalai Tailwind CSS menggunakan pr
 @media (min-width: 768px) { /* tab: */ }
 @media (min-width: 1024px) { /* lap: */ }
 @media (min-width: 1280px) { /* desk: */ }
+@media print { /* print: */ }
 ```
 
 ## Penggunaan
@@ -76,6 +78,18 @@ SenangStart menyokong titik henti (breakpoint) lalai Tailwind CSS menggunakan pr
 </h1>
 ```
 
+### Gaya Cetakan
+
+```html
+<div space="hidden print:block p:medium bg:white">
+  Kandungan yang dicetak sahaja
+</div>
+
+<button visual="hidden print:inline border:w-thin border:dark">
+  Cetak halaman ini
+</button>
+```
+
 ## Pendekatan Mobile-First
 
 SenangStart menggunakan reka bentuk responsif mobile-first:

package/docs/ms/reference/visual/border-radius.md

@@ -1,10 +1,10 @@
 # Border Radius
 
-Tetapkan jejari sempadan
+Tetapkan jejari sempadan untuk semua bucu atau bucu tertentu
 
 ## Sintaks
 ```
-visual="rounded:[value]"
+visual="rounded:[value]" | visual="rounded-{t|b|l|r|tl|tr|bl|br}:[value]"
 ```
 
 ## Nilai
@@ -22,6 +22,8 @@ visual="rounded:[value]"
 ```html
 <div visual="rounded:medium">Rounded corners</div>
 <div visual="rounded:round">Pill shape</div>
+<div visual="rounded-t:medium">Top rounded</div>
+<div visual="rounded-tl:big rounded-br:big">Opposite corners</div>
 ```
 
 ## Pratonton
@@ -33,10 +35,10 @@ visual="rounded:[value]"
 <div layout="flex col" space="g:medium">
   <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rounded:medium"</code> - Bulatkan sudut elemen dari halus hingga berbentuk pil</p>
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
+   <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+   <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+   <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>
 </div>
 
@@ -45,10 +47,10 @@ visual="rounded:[value]"
 
 ```html
 <div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
-  <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
-  <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
-  <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
-  <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
+   <div space="p:small" visual="bg:primary text:white rounded:none">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">small</div>
+   <div space="p:small" visual="bg:primary text:white rounded:medium">medium</div>
+   <div space="p:small" visual="bg:primary text:white rounded:round">round</div>
 </div>
 ```
 
@@ -56,6 +58,44 @@ visual="rounded:[value]"
 
 </div>
 
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Jejari Sempadan Arah
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="rounded-t:medium"</code> - Bulatkan bucu tertentu untuk bentuk unik</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded-t:medium">top</div>
+   <div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
+   <div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
+   <div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded-t:medium">top</div>
+   <div space="p:small" visual="bg:primary text:white rounded-b:medium">bottom</div>
+   <div space="p:small" visual="bg:primary text:white rounded-l:medium">left</div>
+   <div space="p:small" visual="bg:primary text:white rounded-r:medium">right</div>
+</div>
+```
+
+</details>
+
+</div>
+
+## Nilai Arbitrari
+
+Sokong nilai tersuai menggunakan sintaks kurungan segi empat:
+
+```html
+<div visual="border:[custom-value]">Custom</div>
+```
+
 ## Nota
 
 > [!TIP]

package/docs/ms/reference/visual/contain.md

@@ -0,0 +1,57 @@
+# Contain
+
+Pencil rendering elemen untuk prestasi
+
+## Sintaks
+```
+visual="contain:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `none` | `contain: none` | Tiada pengandungan |
+| `strict` | `contain: strict` | Pengandungan penuh |
+| `content` | `contain: content` | Pengandungan kandungan |
+| `size` | `contain: size` | Pengandungan saiz |
+| `layout` | `contain: layout` | Pengandungan susun atur |
+| `style` | `contain: style` | Pengandungan gaya |
+| `paint` | `contain: paint` | Pengandungan lukis |
+
+## Contoh
+
+```html
+<div visual="contain:strict">Isolated rendering</div>
+<div visual="contain:content">Content isolation</div>
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Mengandung
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="contain:strict"</code> - Pencil elemen dari halaman lain untuk prestasi</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">strict</div>
+ </div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">none</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">content</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">strict</div>
+ </div>
+```
+
+</details>
+
+</div>

package/docs/ms/reference/visual/content-visibility.md

@@ -0,0 +1,53 @@
+# Content Visibility
+
+Optimumkan rendering dengan melangkau kandungan luar skrin
+
+## Sintaks
+```
+visual="content-visibility:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `visible` | `content-visibility: visible` | Render semua kandungan |
+| `auto` | `content-visibility: auto` | Langkau bila luar skrin |
+| `hidden` | `content-visibility: hidden` | Jangan render luar skrin |
+
+## Contoh
+
+```html
+<section visual="content-visibility:auto">Large list</section>
+<div visual="content-visibility:hidden">Hidden until needed</div>
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Ketampakan Kandungan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="content-visibility:auto"</code> - Pengoptimuman prestasi untuk kandungan luar skrin</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
+ </div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">visible</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">auto</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">hidden</div>
+ </div>
+```
+
+</details>
+
+</div>

package/docs/ms/reference/visual/placeholder-color.md

@@ -0,0 +1,92 @@
+# Warna Placeholder
+
+Tetapkan warna teks placeholder dalam input borang
+
+## Sintaks
+
+Warna placeholder dikonfigurasikan melalui penyesuaian tema dalam `senangstart.config.js`:
+
+```javascript
+theme: {
+  placeholder: '#9ca3af'  // Warna kelabu lalai
+}
+```
+
+## Konfigurasi Tema
+
+Tetapkan warna placeholder tersuai:
+
+```javascript
+// senangstart.config.js
+export default {
+  theme: {
+    placeholder: '#94a3b8'  // Kelabu slate tersuai
+  }
+}
+```
+
+## Contoh
+
+```html
+<input type="text" placeholder="Masukkan nama anda">
+<input type="email" placeholder="anda@contoh.com">
+<textarea placeholder="Mesej anda..."></textarea>
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Warna Placeholder
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm">Warna teks placeholder digunakan secara automatik melalui Preflight</p>
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <input type="text" placeholder="Masukkan nama anda" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <input type="email" placeholder="anda@contoh.com" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <textarea placeholder="Mesej anda..." space="p:small border:neutral-300 border-w:thin rounded:small"></textarea>
+</div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex col" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+  <input type="text" placeholder="Masukkan nama anda" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <input type="email" placeholder="anda@contoh.com" space="p:small border:neutral-300 border-w:thin rounded:small">
+  <textarea placeholder="Mesej anda..." space="p:small border:neutral-300 border-w:thin rounded:small"></textarea>
+</div>
+```
+
+</details>
+
+</div>
+
+## Sokongan Mod Gelap
+
+Warna placeholder menyesuai secara automatik dengan mod gelap:
+
+```javascript
+theme: {
+  placeholder: '#9ca3af',  // Mod cerah
+  colors: {
+    'neutral-400': '#9ca3af'  // Digunakan dalam mod gelap
+  }
+}
+```
+
+## Sokongan Pelayar
+
+Pseudo-elemen `::placeholder` disokong dalam:
+- Chrome 57+
+- Firefox 51+
+- Safari 10.1+
+- Edge 12+
+
+## Nota
+
+- Warna placeholder digunakan secara global melalui CSS Preflight
+- Anda boleh menyesuaikan warna dalam konfigurasi tema anda
+- Gunakan nada neutral untuk keterbacaan yang lebih baik
+- Elakkan menggunakan putih atau hitam kerana isu kontras

package/docs/ms/reference/visual/ring-color.md

@@ -11,8 +11,8 @@ visual="ring-color:[color]"
 
 | Nilai | CSS Output | Huraian |
 |-------|------------|-------------|
-| `primary` | `--ring-color: var(--c-primary)` | Warna cincin utama |
-| `blue-500` | `--ring-color: var(--c-blue-500)` | Warna cincin biru |
+| `primary` | `--ss-ring-color: var(--c-primary)` | Warna cincin utama |
+| `blue-500` | `--ss-ring-color: var(--c-blue-500)` | Warna cincin biru |
 
 ## Contoh
 

package/docs/ms/reference/visual/ring-offset.md

@@ -11,9 +11,9 @@ visual="ring-offset:[size]"
 
 | Nilai | CSS Output | Huraian |
 |-------|------------|-------------|
-| `0` | `--ring-offset: 0px` | Tiada ruang |
-| `2` | `--ring-offset: 2px` | Ruang 2px |
-| `4` | `--ring-offset: 4px` | Ruang 4px |
+| `0` | `--ss-ring-offset-width: 0px` | Tiada ruang |
+| `2` | `--ss-ring-offset-width: 2px` | Ruang 2px |
+| `4` | `--ss-ring-offset-width: 4px` | Ruang 4px |
 
 ## Contoh
 

package/docs/ms/reference/visual/ring.md

@@ -12,11 +12,11 @@ visual="ring:[size]"
 | Nilai | CSS Output | Huraian |
 |-------|------------|-------------|
 | `none` | `box-shadow: 0 0 0 0 transparent` | Tiada cincin |
-| `thin` | `box-shadow: 0 0 0 1px var(--ring-color)` | Cincin nipis (1px) |
-| `regular` | `box-shadow: 0 0 0 2px var(--ring-color)` | Cincin biasa (2px) |
-| `small` | `box-shadow: 0 0 0 4px var(--ring-color)` | Cincin kecil (4px) |
-| `medium` | `box-shadow: 0 0 0 6px var(--ring-color)` | Cincin sederhana (6px) |
-| `big` | `box-shadow: 0 0 0 8px var(--ring-color)` | Cincin besar (8px) |
+| `thin` | `box-shadow: var(--ring-inset) 0 0 0 1px var(--ss-ring-color)` | Cincin nipis (1px) |
+| `regular` | `box-shadow: var(--ring-inset) 0 0 0 2px var(--ss-ring-color)` | Cincin biasa (2px) |
+| `small` | `box-shadow: var(--ring-inset) 0 0 0 4px var(--ss-ring-color)` | Cincin kecil (4px) |
+| `medium` | `box-shadow: var(--ring-inset) 0 0 0 6px var(--ss-ring-color)` | Cincin sederhana (6px) |
+| `big` | `box-shadow: var(--ring-inset) 0 0 0 8px var(--ss-ring-color)` | Cincin besar (8px) |
 
 ## Contoh
 

package/docs/ms/reference/visual/writing-mode.md

@@ -0,0 +1,53 @@
+# Writing Mode
+
+Tetapkan arah penulisan untuk teks RTL/menegak
+
+## Sintaks
+```
+visual="writing-mode:[value]"
+```
+
+## Nilai
+
+| Nilai | CSS Output | Huraian |
+|-------|------------|-------------|
+| `horizontal-tb` | `writing-mode: horizontal-tb` | Kiri ke kanan |
+| `vertical-rl` | `writing-mode: vertical-rl` | Atas ke bawah RTL |
+| `vertical-lr` | `writing-mode: vertical-lr` | Atas ke bawah LTR |
+| `sideways-rl` | `writing-mode: sideways-rl` | Menyerong RTL |
+| `sideways-lr` | `writing-mode: sideways-lr` | Menyerong LTR |
+
+## Contoh
+
+```html
+<div visual="writing-mode:vertical-rl">Vertical text</div>
+<div visual="writing-mode:horizontal-tb">Horizontal text</div>
+```
+
+## Pratonton
+
+<div space="p-x:big p-b:medium m-t:medium" visual="border-w:thin border:neutral-100 dark:border:neutral-800 rounded:medium">
+
+### Mod Penulisan
+
+<div layout="flex col" space="g:medium">
+  <p space="m:none" visual="text:neutral-600 dark:text:neutral-400 text-sm"><code>visual="writing-mode:vertical-rl"</code> - Kawal arah dan orientasi teks</p>
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
+ </div>
+</div>
+
+<details>
+<summary>Lihat Kod</summary>
+
+```html
+<div layout="flex" space="g:medium p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
+   <div space="p:small" visual="bg:primary text:white rounded:small">horizontal-tb</div>
+   <div space="p:small" visual="bg:primary text:white rounded:small">vertical-rl</div>
+ </div>
+```
+
+</details>
+
+</div>

package/docs/ms/reference/visual.md

@@ -148,6 +148,12 @@ Atribut `visual` mengawal warna, tekstur, tipografi, dan penampilan.
 
 - [Penyesuaian Warna Paksa](./visual/forced-color-adjust) - `forced-color-adjust:none`, `forced-color-adjust:auto`
 
+## Prestasi
+
+- [Ketampakan Kandungan](./visual/content-visibility) - `content-visibility:auto`, `content-visibility:hidden`
+- [Mengandung](./visual/contain) - `contain:strict`, `contain:content`, `contain:size`
+- [Mod Penulisan](./visual/writing-mode) - `writing-mode:horizontal-tb`, `writing-mode:vertical-rl`
+
 ## Contoh Pantas
 
 ```html