@ojiepermana/angular-theme 22.0.41 → 22.0.44

package/fesm2022/ojiepermana-angular-theme-styles.mjs

@@ -198,10 +198,10 @@ class ThemeModeService {
             return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeModeService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ThemeModeService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeModeService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: ThemeModeService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeModeService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeModeService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -312,10 +312,10 @@ class ThemeBrandService {
             return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeBrandService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ThemeBrandService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeBrandService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: ThemeBrandService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeBrandService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeBrandService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -394,10 +394,10 @@ class ThemeColorService {
             return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeColorService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ThemeColorService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeColorService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: ThemeColorService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeColorService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeColorService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -472,10 +472,10 @@ class ThemeRadiusService {
             return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeRadiusService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ThemeRadiusService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeRadiusService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: ThemeRadiusService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeRadiusService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeRadiusService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 
@@ -532,10 +532,10 @@ class ThemeSpaceService {
             return;
         }
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeSpaceService, deps: [], target: i0.ɵɵFactoryTarget.Service });
-    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: ThemeSpaceService });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeSpaceService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.4", ngImport: i0, type: ThemeSpaceService });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: ThemeSpaceService, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: ThemeSpaceService, decorators: [{
             type: Service
         }], ctorParameters: () => [] });
 

package/layout/README.md

@@ -324,8 +324,11 @@ Nilai `surface` yang tersedia berasal dari `LAYOUT_SURFACES`.
 | Nilai               | Efek visual                                                                |
 | ------------------- | -------------------------------------------------------------------------- |
 | `'flat'`            | Background polos `bg-background`.                                          |
-| `'grid'`            | Pola grid tipis dua arah.                                                  |
-| `'honeycome'`       | Pola radial rapat. Nama API dieja `honeycome` agar sesuai export saat ini. |
+| `'grid'`            | Pola grid tipis dua arah; warna garis (`--layout-grid-color`) mengikuti Accent dengan kecerahan tetap (fallback neutral). |
+| `'grid-line'`       | Mosaik kotak: grid tipis + kotak highlight menyala. Mengikuti warna Accent (hue dari `--accent-foreground`, kecerahan dikunci `--layout-grid-highlight-l`), invert light/dark. Memaksa sudut frame kotak (`rounded-none`, seperti `border-rail`) + border frame warna Accent. Pada appearance `border-rail`, garis rail + border frame (tebal `--layout-rail-width` = 1.21px) ikut warna Accent (`--layout-rail-color`) dengan kecerahan dinaikkan (`--layout-rail-opacity`), bukan `--border` yang soft. |
+| `'honeycomb'`       | Pola heksagon honeycomb tipis (outline), token-colored mengikuti tema.     |
+| `'matrix'`     | Field biner (0/1) acak tipis, tinted brand `--primary`, recolor mengikuti tema. |
+| `'circuit'`         | Tekstur PCB / papan sirkuit yang ter-tile: jalur (trace) berbelok 45°, node via, dan pad cincin konsentris. Dua lapisan mask — trace tembaga netral (`--layout-grid-line`) + node aksen brand (`--primary`) — jadi papannya grayscale tapi node-nya menyala mengikuti tema; recolor light/dark. |
 | `'line-vertical'`   | Garis vertikal berulang.                                                   |
 | `'line-horizontal'` | Garis horizontal berulang.                                                 |
 
@@ -431,27 +434,27 @@ Seluruh symbol berikut diekspor dari `@ojiepermana/angular-theme/layout/types`.
 | Symbol               | Nilai                                                                                              |
 | -------------------- | -------------------------------------------------------------------------------------------------- |
 | `LayoutType`         | `vertical`, `horizontal`, `empty`, `fluid`                                                         |
-| `LayoutSurface`      | `flat`, `grid`, `honeycome`, `line-vertical`, `line-horizontal`                                    |
+| `LayoutSurface`      | `flat`, `grid`, `grid-line`, `honeycomb`, `matrix`, `circuit`, `line-vertical`, `line-horizontal`  |
 | `LayoutAppearance`   | `flat`, `border-rail`                                                                              |
 | `LayoutWidth`        | `full`, `wide`, `container`, `fluid`                                                               |
 | `LayoutContextValue` | Objekt berbentuk `{ surface, type, appearance, width }` yang masing-masing berupa readonly signal. |
 
 ### Constants
 
-| Symbol                          | Nilai                                                               |
-| ------------------------------- | ------------------------------------------------------------------- |
-| `LAYOUT_TYPES`                  | `['vertical', 'horizontal', 'empty', 'fluid']`                      |
-| `LAYOUT_SURFACES`               | `['flat', 'grid', 'honeycome', 'line-vertical', 'line-horizontal']` |
-| `LAYOUT_APPEARANCES`            | `['flat', 'border-rail']`                                           |
-| `LAYOUT_WIDTHS`                 | `['full', 'wide', 'container', 'fluid']`                            |
-| `LAYOUT_DEFAULT_SURFACE`        | `'flat'`                                                            |
-| `LAYOUT_DEFAULT_TYPE`           | `'vertical'`                                                        |
-| `LAYOUT_DEFAULT_APPEARANCE`     | `'flat'`                                                            |
-| `LAYOUT_DEFAULT_WIDTH`          | `'full'`                                                            |
-| `LAYOUT_SURFACE_STORAGE_KEY`    | `'layout-surface'`                                                  |
-| `LAYOUT_APPEARANCE_STORAGE_KEY` | `'layout-appearance'`                                               |
-| `LAYOUT_TYPE_STORAGE_KEY`       | `'layout-type'`                                                     |
-| `LAYOUT_WIDTH_STORAGE_KEY`      | `'layout-width'`                                                    |
+| Symbol                          | Nilai                                                                                      |
+| ------------------------------- | ------------------------------------------------------------------------------------------ |
+| `LAYOUT_TYPES`                  | `['vertical', 'horizontal', 'empty', 'fluid']`                                             |
+| `LAYOUT_SURFACES`               | `['flat', 'grid', 'grid-line', 'honeycomb', 'matrix', 'circuit', 'line-vertical', 'line-horizontal']` |
+| `LAYOUT_APPEARANCES`            | `['flat', 'border-rail']`                                                                  |
+| `LAYOUT_WIDTHS`                 | `['full', 'wide', 'container', 'fluid']`                                                   |
+| `LAYOUT_DEFAULT_SURFACE`        | `'flat'`                                                                                   |
+| `LAYOUT_DEFAULT_TYPE`           | `'vertical'`                                                                               |
+| `LAYOUT_DEFAULT_APPEARANCE`     | `'flat'`                                                                                   |
+| `LAYOUT_DEFAULT_WIDTH`          | `'full'`                                                                                   |
+| `LAYOUT_SURFACE_STORAGE_KEY`    | `'layout-surface'`                                                                         |
+| `LAYOUT_APPEARANCE_STORAGE_KEY` | `'layout-appearance'`                                                                      |
+| `LAYOUT_TYPE_STORAGE_KEY`       | `'layout-type'`                                                                            |
+| `LAYOUT_WIDTH_STORAGE_KEY`      | `'layout-width'`                                                                           |
 
 ### Guards
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-theme",
-  "version": "22.0.41",
+  "version": "22.0.44",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,8 +13,8 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-navigation": "^22.0.41",
-    "@ojiepermana/angular-component": "^22.0.41",
+    "@ojiepermana/angular-navigation": "^22.0.44",
+    "@ojiepermana/angular-component": "^22.0.44",
     "rxjs": ">=7.8.0"
   },
   "dependencies": {

package/page/README.md

@@ -13,9 +13,12 @@ Dokumentasi ini mengikuti API publik terbaru dari `@ojiepermana/angular-theme/pa
 - `PageFooter`
 - `PageSide`
 - `PageSideToggle`
+- `PageFilter`
+- `PageFilterToggle`
 
 `PageSideToggle` menerima projected content untuk label atau ikon kustom. Jika tidak ada projected content, komponen akan memakai ikon fallback bawaan.
 `PageDashboard` mengikuti perilaku layout dan scroll yang sama dengan `PageContent`, tetapi disediakan sebagai slot semantik untuk dashboard, board, dan surface analitik.
+`PageFilter` adalah slot filter yang bisa diletakkan **stacked** (bar di antara `PageHeader` dan `PageContent`) atau **side** (kolom di samping `PageContent`). `PageFilterToggle` mengontrol `PageFilter` saat memakai mode `drawer`/`overlay`.
 
 ## Root API
 
@@ -31,13 +34,15 @@ Dokumentasi ini mengikuti API publik terbaru dari `@ojiepermana/angular-theme/pa
 | `sideMode`   | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'`  | Mode default untuk `PageSide` jika side tidak memberi override sendiri.                                             |
 | `sideWidth`  | `string`                            | `'16rem'`   | Lebar default side rail; dipakai juga untuk drawer dan overlay.                                                     |
 | `sideOpen`   | `boolean \| null`                   | `null`      | Saat `null`, state side tidak dikontrol dari parent. Saat `true/false`, komponen masuk controlled mode.             |
+| `filterOpen` | `boolean \| null`                   | `null`      | Controlled state untuk `PageFilter` drawer/overlay. `null` = uncontrolled (dikelola toggle/backdrop/Esc).           |
 | `class`      | `string`                            | `''`        | Class tambahan pada host `Page`.                                                                                    |
 
-| Output           | Payload   | Keterangan                                                                                   |
-| ---------------- | --------- | -------------------------------------------------------------------------------------------- |
-| `sideOpenChange` | `boolean` | Emit setiap ada permintaan buka/tutup side, baik dari toggle, backdrop, maupun tombol `Esc`. |
+| Output             | Payload   | Keterangan                                                                                        |
+| ------------------ | --------- | ------------------------------------------------------------------------------------------------- |
+| `sideOpenChange`   | `boolean` | Emit setiap ada permintaan buka/tutup side, baik dari toggle, backdrop, maupun tombol `Esc`.      |
+| `filterOpenChange` | `boolean` | Emit setiap ada permintaan buka/tutup filter (drawer/overlay), baik dari toggle, backdrop, `Esc`. |
 
-`Page` juga menambahkan atribut host `data-page-variant`, `data-page-height`, `data-page-scroll`, `data-page-appearance`, `data-page-position`, `data-page-side-mode`, dan `data-page-side-open` untuk styling atau inspeksi.
+`Page` juga menambahkan atribut host `data-page-variant`, `data-page-height`, `data-page-scroll`, `data-page-appearance`, `data-page-position`, `data-page-side-mode`, dan `data-page-side-open` untuk styling atau inspeksi. Saat `PageFilter` aktif, ditambahkan pula `data-page-filter-placement`, `data-page-filter-mode`, dan `data-page-filter-open`.
 
 ### Apps launcher (layout `empty`)
 
@@ -77,13 +82,14 @@ Tombol hanya muncul ketika layout aktif `empty` dan nav target punya data. Di la
 
 ### `PageSide`
 
-| Input        | Type                                | Default    | Keterangan                                                                                      |
-| ------------ | ----------------------------------- | ---------- | ----------------------------------------------------------------------------------------------- |
-| `mode`       | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'` | Override mode side untuk instance tersebut.                                                     |
-| `position`   | `'left' \| 'right' \| null`         | `null`     | Override posisi side untuk instance tersebut. Jika `null`, memakai nilai dari root `Page`.      |
-| `width`      | `string \| null`                    | `null`     | Override lebar side untuk instance tersebut. Jika `null`, memakai `sideWidth` dari root `Page`. |
-| `closeOnEsc` | `boolean`                           | `true`     | Berlaku untuk `drawer` dan `overlay`; menutup side ketika tombol `Esc` ditekan.                 |
-| `class`      | `string`                            | `''`       | Class tambahan pada host `PageSide`.                                                            |
+| Input        | Type                                | Default        | Keterangan                                                                                             |
+| ------------ | ----------------------------------- | -------------- | ------------------------------------------------------------------------------------------------------ |
+| `mode`       | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'`     | Override mode side untuk instance tersebut.                                                            |
+| `position`   | `'left' \| 'right' \| null`         | `null`         | Override posisi side untuk instance tersebut. Jika `null`, memakai nilai dari root `Page`.             |
+| `width`      | `string \| null`                    | `null`         | Override lebar side untuk instance tersebut. Jika `null`, memakai `sideWidth` dari root `Page`.        |
+| `closeOnEsc` | `boolean`                           | `true`         | Berlaku untuk `drawer` dan `overlay`; menutup side ketika tombol `Esc` ditekan.                        |
+| `ariaLabel`  | `string`                            | `'Side panel'` | Nama aksesibilitas panel saat `drawer`/`overlay` (dipasang sebagai `aria-label` pada `role="dialog"`). |
+| `class`      | `string`                            | `''`           | Class tambahan pada host `PageSide`.                                                                   |
 
 ### `PageSideToggle`
 
@@ -93,6 +99,31 @@ Tombol hanya muncul ketika layout aktif `empty` dan nav target punya data. Di la
 | `class`        | `string`  | `''`                 | Class tambahan pada host toggle.                            |
 | `toggled`      | `boolean` | -                    | Emit nilai open state terbaru setelah tombol toggle diklik. |
 
+### `PageFilter`
+
+| Input         | Type                                | Default     | Keterangan                                                                                                              |
+| ------------- | ----------------------------------- | ----------- | ----------------------------------------------------------------------------------------------------------------------- |
+| `placement`   | `'stacked' \| 'side'`               | `'stacked'` | `stacked` = bar di antara `PageHeader` dan `PageContent`; `side` = kolom di samping `PageContent`.                      |
+| `mode`        | `'sticky' \| 'drawer' \| 'overlay'` | `'sticky'`  | Hanya berlaku untuk `placement="side"`. `placement="stacked"` selalu `sticky`.                                          |
+| `position`    | `'left' \| 'right' \| null`         | `null`      | Posisi kolom saat `side`. Jika `null`, memakai default (`left`).                                                        |
+| `width`       | `string \| null`                    | `null`      | Lebar kolom saat `side`. Jika `null`, memakai `18rem`.                                                                  |
+| `closeOnEsc`  | `boolean`                           | `true`      | Berlaku untuk `drawer`/`overlay`; menutup filter ketika tombol `Esc` ditekan.                                           |
+| `collapsible` | `boolean`                           | `false`     | Khusus `placement="stacked"`: bar bisa dibuka/tutup lewat `PageFilterToggle`, default tertutup. Diabaikan untuk `side`. |
+| `ariaLabel`   | `string`                            | `'Filters'` | Nama aksesibilitas panel saat `drawer`/`overlay` (dipasang sebagai `aria-label` pada `role="dialog"`).                  |
+| `class`       | `string`                            | `''`        | Class tambahan pada host `PageFilter`.                                                                                  |
+
+`PageFilter` menambahkan atribut host `data-page-slot="filter"`, `data-page-filter-placement`, `data-page-filter-mode`, `data-page-filter-open`, dan `data-page-position`.
+
+Aksesibilitas: pada mode `drawer`/`overlay`, panel menjadi `role="dialog"` (dengan `aria-modal` untuk `overlay`), fokus dipindahkan ke panel saat terbuka dan dikembalikan ke pemicu saat tertutup, dan saat tertutup panel diberi `inert` sehingga isinya keluar dari tab order. `PageSide` memakai pola yang sama. Menekan `Esc` (atau mengklik backdrop overlay) menutup semua panel mengambang yang sedang terbuka.
+
+### `PageFilterToggle`
+
+| Input / Output | Type      | Default                | Keterangan                                                  |
+| -------------- | --------- | ---------------------- | ----------------------------------------------------------- |
+| `ariaLabel`    | `string`  | `'Toggle page filter'` | Label aksesibilitas untuk tombol toggle filter.             |
+| `class`        | `string`  | `''`                   | Class tambahan pada host toggle.                            |
+| `toggled`      | `boolean` | -                      | Emit nilai open state terbaru setelah tombol toggle diklik. |
+
 ## Variants
 
 - `stacked`
@@ -130,6 +161,15 @@ Saat memakai `height="fix"`, slot berikut tidak boleh melebihi tinggi tetap yang
 - `drawer`
 - `overlay`
 
+## Filter Placement
+
+`PageFilter` punya dua placement yang orthogonal terhadap `variant` `Page`:
+
+- `stacked` (default): filter menjadi bar selebar content di antara `PageHeader` dan `PageContent`. Filter mendorong content ke bawah; pada `scroll="content"`, content mengisi tinggi sisa dan scroll sendiri (filter `shrink-0`). Pada `scroll="page"`, bar dipin (`sticky top-0`) agar tetap terjangkau saat page scroll.
+- `side`: filter menjadi kolom di samping content. Mode `sticky` mendorong content ke samping (push); mode `drawer`/`overlay` mengambang di atas content dan dikontrol via `PageFilterToggle`, backdrop, atau tombol `Esc`.
+
+Karena independen dari `variant`, side filter bisa hidup berdampingan dengan `PageSide` — `PageSide` tetap menjadi rail terluar dan `PageFilter` menjadi kolom yang lebih dekat ke content (`[PageSide | PageFilter | PageContent]`).
+
 ## Examples
 
 ### Stacked with content scroll
@@ -275,3 +315,109 @@ Saat memakai `height="fix"`, slot berikut tidak boleh melebihi tinggi tetap yang
   </PageDashboard>
 </Page>
 ```
+
+### Stacked filter (bar antara header dan content)
+
+```html
+<Page variant="stacked">
+  <PageHeader>
+    <h1>Orders</h1>
+  </PageHeader>
+
+  <PageFilter placement="stacked">
+    <input type="search" aria-label="Cari order" placeholder="Cari…" />
+    <button type="button">Status</button>
+    <button type="button">Tanggal</button>
+  </PageFilter>
+
+  <PageContent>
+    <p>Content mengisi tinggi sisa dan scroll sendiri di bawah bar filter.</p>
+  </PageContent>
+</Page>
+```
+
+### Collapsible stacked filter
+
+```html
+<Page variant="stacked">
+  <PageHeader>
+    <PageFilterToggle ariaLabel="Toggle filters">
+      <span>Filters</span>
+    </PageFilterToggle>
+    <h1>Orders</h1>
+  </PageHeader>
+
+  <!-- Default tertutup; toggle membuka/menutup bar. -->
+  <PageFilter placement="stacked" collapsible>
+    <input type="search" aria-label="Cari order" placeholder="Cari…" />
+    <button type="button">Status</button>
+  </PageFilter>
+
+  <PageContent>
+    <p>Saat filter tertutup, content mengisi kembali ruang bar.</p>
+  </PageContent>
+</Page>
+```
+
+### Side filter (sticky push)
+
+```html
+<Page variant="stacked">
+  <PageHeader>
+    <h1>Catalog</h1>
+  </PageHeader>
+
+  <PageFilter placement="side" mode="sticky" position="left" width="18rem">
+    <p>Facet filter; mendorong content ke samping.</p>
+  </PageFilter>
+
+  <PageContent>
+    <p>Hasil produk.</p>
+  </PageContent>
+</Page>
+```
+
+### Side filter (controlled drawer)
+
+```html
+<Page [filterOpen]="filterOpen()" (filterOpenChange)="filterOpen.set($event)">
+  <PageHeader>
+    <PageFilterToggle ariaLabel="Toggle filter">
+      <span>Filter</span>
+    </PageFilterToggle>
+    <h1>Catalog</h1>
+  </PageHeader>
+
+  <PageFilter placement="side" mode="drawer" position="right">
+    <p>Drawer filter mengikuti state dari parent.</p>
+  </PageFilter>
+
+  <PageContent>
+    <p>Hasil produk.</p>
+  </PageContent>
+</Page>
+```
+
+### Filter dan side rail berdampingan
+
+`PageSide` (rail terluar) dan `PageFilter` (`placement="side"`) bisa aktif bersamaan: `[PageSide | PageFilter | PageContent]`.
+
+```html
+<Page variant="side" position="left">
+  <PageHeader>
+    <h1>Workspace</h1>
+  </PageHeader>
+
+  <PageSide mode="sticky">
+    <p>Navigasi.</p>
+  </PageSide>
+
+  <PageFilter placement="side" position="left">
+    <p>Filter.</p>
+  </PageFilter>
+
+  <PageContent>
+    <p>Content.</p>
+  </PageContent>
+</Page>
+```