@ojiepermana/angular-theme 22.0.43 → 22.0.45

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: () => [] });
 
@@ -551,7 +551,7 @@ function provideUiTheme(options = {}) {
             // request (privacy / offline / CSP friendly). Set `icons.materialSymbols: true`
             // or self-host the font and import it yourself.
             if (options.icons?.materialSymbols === true) {
-                inject(MaterialSymbolsService).ensureLoaded();
+                inject(MaterialSymbolsService).load();
             }
             inject(ThemeModeService);
             inject(ThemeColorService);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular-theme",
-  "version": "22.0.43",
+  "version": "22.0.45",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"
@@ -13,15 +13,30 @@
     "@angular/common": ">=22.0.0",
     "@angular/core": ">=22.0.0",
     "@angular/router": ">=22.0.0",
-    "@ojiepermana/angular-navigation": "^22.0.43",
-    "@ojiepermana/angular-component": "^22.0.43",
+    "@ojiepermana/angular-navigation": "^22.0.45",
+    "@ojiepermana/angular-component": "^22.0.45",
     "rxjs": ">=7.8.0"
   },
+  "peerDependenciesMeta": {
+    "@angular/router": {
+      "optional": true
+    },
+    "@ojiepermana/angular-navigation": {
+      "optional": true
+    },
+    "rxjs": {
+      "optional": true
+    }
+  },
   "dependencies": {
     "tslib": "^2.8.1"
   },
   "exports": {
     "./theme.css": {
+      "style": "./styles/css/base/index.css",
+      "default": "./styles/css/base/index.css"
+    },
+    "./theme-full.css": {
       "style": "./styles/css/index.css",
       "default": "./styles/css/index.css"
     },
@@ -65,7 +80,9 @@
     "access": "public",
     "registry": "https://registry.npmjs.org/"
   },
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.css"
+  ],
   "module": "fesm2022/ojiepermana-angular-theme.mjs",
   "typings": "types/ojiepermana-angular-theme.d.ts",
   "type": "module"

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>
+```

package/styles/css/base/index.css

@@ -0,0 +1,14 @@
+/*
+ * Lightweight default theme stylesheet (exported as `@ojiepermana/angular-theme/theme.css`).
+ *
+ * Base only: core design tokens, light/dark, and component styles. It does NOT
+ * pull in the runtime theme axes (color palettes, neutral families, radius and
+ * space presets) so consumers ship a minimal stylesheet by default.
+ *
+ * Need the runtime axes? Either import the full sheet:
+ *   @import '@ojiepermana/angular-theme/theme-full.css';
+ * or opt in to only the axes you use:
+ *   @import '@ojiepermana/angular-theme/styles/css/color/index.css';
+ *   @import '@ojiepermana/angular-theme/styles/css/neutral/index.css';
+ */
+@import './package.css';

package/types/ojiepermana-angular-theme-layout-wrapper.d.ts

@@ -88,12 +88,20 @@ declare class LayoutNavSidebar {
     /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
     protected readonly isBorderRail: _angular_core.Signal<boolean>;
-    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
-    protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "border-r border-border">;
-    /** Header divider menebal jadi 1.5px di `border-rail` (selaras nav/shell); `flat` pakai default. */
-    protected readonly headerClass: _angular_core.Signal<"border-b-[1.5px] border-border" | "">;
-    /** Footer divider menebal jadi 1.5px di `border-rail`; `px-3` tetap dipertahankan. */
-    protected readonly footerClass: _angular_core.Signal<"px-3 border-t-[1.5px] border-border" | "px-3">;
+    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (1.21px, selaras rail layout), `flat` 1px. */
+    protected readonly shellClass: _angular_core.Signal<"border-r-[length:var(--layout-rail-width)] border-border" | "border-r border-border">;
+    /**
+     * Header divider: di `border-rail` border bawaan dimatikan (`border-b-0`) karena pemisahnya
+     * diambil-alih rail inset accent Layout (`data-layout-horizontal-top-rail` di `top-12`) — supaya
+     * tidak dempet/dobel dengan garis itu. `flat` pakai default (border bawaan NavigationHeader).
+     */
+    protected readonly headerClass: _angular_core.Signal<"border-b-0" | "">;
+    /**
+     * Footer divider: di `border-rail` border bawaan dimatikan (`border-t-0`) karena pemisahnya
+     * diambil-alih rail inset accent Layout (`data-layout-horizontal-bottom-rail` di `bottom-12`);
+     * `px-3` tetap dipertahankan.
+     */
+    protected readonly footerClass: _angular_core.Signal<"px-3 border-t-0" | "px-3">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavSidebar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavSidebar, "LayoutNavSidebar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }
@@ -108,12 +116,20 @@ declare class LayoutNavDockbar {
     /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
     protected readonly isBorderRail: _angular_core.Signal<boolean>;
-    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
-    protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "border-r border-border">;
-    /** Header divider menebal jadi 1.5px di `border-rail` (selaras nav/shell); `flat` pakai default. */
-    protected readonly headerClass: _angular_core.Signal<"border-b-[1.5px] border-border" | "">;
-    /** Footer divider menebal jadi 1.5px di `border-rail`; `px-3` tetap dipertahankan. */
-    protected readonly footerClass: _angular_core.Signal<"px-3 border-t-[1.5px] border-border" | "px-3">;
+    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (1.21px, selaras rail layout), `flat` 1px. */
+    protected readonly shellClass: _angular_core.Signal<"border-r-[length:var(--layout-rail-width)] border-border" | "border-r border-border">;
+    /**
+     * Header divider: di `border-rail` border bawaan dimatikan (`border-b-0`) karena pemisahnya
+     * diambil-alih rail inset accent Layout (`data-layout-horizontal-top-rail` di `top-12`) — supaya
+     * tidak dempet/dobel dengan garis itu. `flat` pakai default (border bawaan NavigationHeader).
+     */
+    protected readonly headerClass: _angular_core.Signal<"border-b-0" | "">;
+    /**
+     * Footer divider: di `border-rail` border bawaan dimatikan (`border-t-0`) karena pemisahnya
+     * diambil-alih rail inset accent Layout (`data-layout-horizontal-bottom-rail` di `bottom-12`);
+     * `px-3` tetap dipertahankan.
+     */
+    protected readonly footerClass: _angular_core.Signal<"px-3 border-t-0" | "px-3">;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutNavDockbar, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutNavDockbar, "LayoutNavDockbar", never, { "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; }, {}, never, never, true, never>;
 }