@ojiepermana/angular-theme 22.0.44 → 22.0.46

package/README.md

@@ -11,26 +11,39 @@ bun add @ojiepermana/angular-theme
 
 ## Entry points
 
-| Import path                               | Contents                                                                                                                     |
-| ----------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
-| `@ojiepermana/angular-theme/styles`       | `provideUiTheme`, `ThemeModeService`, `ThemeColorService`, `ThemeBrandService`, `ThemeRadiusService`, `ThemeSpaceService`, … |
-| `@ojiepermana/angular-theme/layout`       | Layout shell building blocks                                                                                                 |
-| `@ojiepermana/angular-theme/page`         | Page-level scaffolding                                                                                                       |
-| `@ojiepermana/angular-theme/theme.css`    | Base tokens + component styles (CSS)                                                                                         |
-| `@ojiepermana/angular-theme/styles/css/*` | Raw CSS assets (color + neutral palettes, Tailwind map)                                                                      |
+| Import path                                 | Contents                                                                                                                     |
+| ------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| `@ojiepermana/angular-theme/styles`         | `provideUiTheme`, `ThemeModeService`, `ThemeColorService`, `ThemeBrandService`, `ThemeRadiusService`, `ThemeSpaceService`, … |
+| `@ojiepermana/angular-theme/layout`         | Layout shell building blocks                                                                                                 |
+| `@ojiepermana/angular-theme/page`           | Page-level scaffolding                                                                                                       |
+| `@ojiepermana/angular-theme/theme.css`      | Base tokens + component styles only — lightweight, no runtime axes                                                          |
+| `@ojiepermana/angular-theme/theme-full.css` | Base + every runtime axis (color, neutral, radius, space) — needed for `ThemeColorService`/`ThemeNeutralService` switching   |
+| `@ojiepermana/angular-theme/styles/css/*`   | Raw CSS assets (per-axis color + neutral palettes, Tailwind map)                                                            |
 
 ## Tailwind v4 setup
 
-The CSS is published with the package and addressable by name. In your global
-stylesheet:
+The CSS is published with the package and addressable by name. Use `theme-full.css`
+for the full design system (runtime color/neutral switching); use the lightweight
+`theme.css` plus only the axes you need for a smaller bundle.
 
 ```css
-/* styles.css */
-@import '@ojiepermana/angular-theme/styles/css/index.css';            /* base + all color + neutral palettes */
+/* styles.css — full design system */
+@import '@ojiepermana/angular-theme/theme-full.css';                  /* base + all color + neutral palettes */
 @import 'tailwindcss';
 @import '@ojiepermana/angular-theme/styles/css/base/tailwind.css';    /* maps tokens → bg-primary, bg-brand, text-foreground, … */
 ```
 
+For a lightweight setup, import the base then opt in to specific axes:
+
+```css
+/* styles.css — base + only the axes you use */
+@import '@ojiepermana/angular-theme/theme.css';                      /* base tokens + components, no axes */
+@import 'tailwindcss';
+@import '@ojiepermana/angular-theme/styles/css/base/tailwind.css';
+@import '@ojiepermana/angular-theme/styles/css/color/index.css';     /* opt in to accent palettes */
+@import '@ojiepermana/angular-theme/styles/css/neutral/index.css';   /* opt in to neutral families */
+```
+
 Requires Tailwind CSS `^4.3.0`.
 
 ## Provider
@@ -83,8 +96,10 @@ Four independent axes switch at runtime via attribute selectors on `<html>`:
 - **space** (`theme-space`) — `compact`, `normal` (default), `relaxed`, `spacious`.
   Sets the `--spacing-base` knob; every `p-*` / `m-*` / `gap-*` / `w-*` / `h-*` utility follows.
 
-`styles/css/index.css` bundles the core base theme plus every accent and neutral
-palette, so switching needs no runtime CSS loading.
+`theme-full.css` (i.e. `styles/css/index.css`) bundles the core base theme plus
+every accent and neutral palette, so switching needs no runtime CSS loading. The
+lightweight `theme.css` ships base only — import the axis files you need on top of
+it (or use `theme-full.css`) to enable runtime switching.
 
 ### Material Symbols icons (opt-in)
 

package/fesm2022/ojiepermana-angular-theme-layout-wrapper.mjs

@@ -160,14 +160,24 @@ class LayoutNavSidebar {
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     isBorderRail = computed(() => this.appearance() === 'border-rail', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
-    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
-    shellClass = computed(() => this.isBorderRail() ? 'border-r-[1.5px] border-border' : 'border-r border-border', /* @ts-ignore */
+    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (1.21px, selaras rail layout), `flat` 1px. */
+    shellClass = computed(() => this.isBorderRail()
+        ? 'border-r-[length:var(--layout-rail-width)] border-border'
+        : 'border-r border-border', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
-    /** Header divider menebal jadi 1.5px di `border-rail` (selaras nav/shell); `flat` pakai default. */
-    headerClass = computed(() => this.isBorderRail() ? 'border-b-[1.5px] border-border' : '', /* @ts-ignore */
+    /**
+     * 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).
+     */
+    headerClass = computed(() => (this.isBorderRail() ? 'border-b-0' : ''), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
-    /** Footer divider menebal jadi 1.5px di `border-rail`; `px-3` tetap dipertahankan. */
-    footerClass = computed(() => this.isBorderRail() ? 'px-3 border-t-[1.5px] border-border' : 'px-3', /* @ts-ignore */
+    /**
+     * 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.
+     */
+    footerClass = computed(() => this.isBorderRail() ? 'px-3 border-t-0' : 'px-3', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutNavSidebar, isStandalone: true, selector: "LayoutNavSidebar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
@@ -220,14 +230,24 @@ class LayoutNavDockbar {
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
     isBorderRail = computed(() => this.appearance() === 'border-rail', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
-    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` 1.5px, `flat` 1px. */
-    shellClass = computed(() => this.isBorderRail() ? 'border-r-[1.5px] border-border' : 'border-r border-border', /* @ts-ignore */
+    /** Border kanan pemisah; ketebalan ikut appearance: `border-rail` = `--layout-rail-width` (1.21px, selaras rail layout), `flat` 1px. */
+    shellClass = computed(() => this.isBorderRail()
+        ? 'border-r-[length:var(--layout-rail-width)] border-border'
+        : 'border-r border-border', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "shellClass" }] : /* istanbul ignore next */ []));
-    /** Header divider menebal jadi 1.5px di `border-rail` (selaras nav/shell); `flat` pakai default. */
-    headerClass = computed(() => this.isBorderRail() ? 'border-b-[1.5px] border-border' : '', /* @ts-ignore */
+    /**
+     * 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).
+     */
+    headerClass = computed(() => (this.isBorderRail() ? 'border-b-0' : ''), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "headerClass" }] : /* istanbul ignore next */ []));
-    /** Footer divider menebal jadi 1.5px di `border-rail`; `px-3` tetap dipertahankan. */
-    footerClass = computed(() => this.isBorderRail() ? 'px-3 border-t-[1.5px] border-border' : 'px-3', /* @ts-ignore */
+    /**
+     * 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.
+     */
+    footerClass = computed(() => this.isBorderRail() ? 'px-3 border-t-0' : 'px-3', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutNavDockbar, isStandalone: true, selector: "LayoutNavDockbar", inputs: { brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "appearance", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { inject, input, computed, DestroyRef, Component, effect, ChangeDetectionStrategy, contentChild } from '@angular/core';
+import { inject, input, computed, DestroyRef, Component, effect, contentChild } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 import { LayoutLoadingService, LayoutService } from '@ojiepermana/angular-theme/layout/services';
 export { LAYOUT_LOADING_HIDE_DELAY_MS, LAYOUT_LOADING_INITIAL_PROGRESS, LAYOUT_LOADING_SKIP, LAYOUT_LOADING_TRICKLE_CEILING, LAYOUT_LOADING_TRICKLE_INTERVAL_MS, LayoutLoadingService, LayoutService, layoutLoadingInterceptor } from '@ojiepermana/angular-theme/layout/services';
@@ -377,13 +377,12 @@ class LayoutComponent {
         </div>
       </div>
     </div>
-  `, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: LayoutLoadingComponent, selector: "LayoutLoading", inputs: ["class", "ariaLabel"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Layout',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     imports: [LayoutLoadingComponent],
                     host: {
                         '[class]': 'hostClasses()',
@@ -511,13 +510,12 @@ class LayoutVerticalComponent {
         this.layout.setType('vertical', { persist: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutVerticalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutVerticalComponent, isStandalone: true, selector: "LayoutVertical", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "vertical" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutVerticalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutVertical',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-layout-type': 'vertical',
@@ -536,13 +534,12 @@ class LayoutHorizontalComponent {
         this.layout.setType('horizontal', { persist: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutHorizontalComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutHorizontalComponent, isStandalone: true, selector: "LayoutHorizontal", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "horizontal" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutHorizontalComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutHorizontal',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-layout-type': 'horizontal',
@@ -561,13 +558,12 @@ class LayoutEmptyComponent {
         this.layout.setType('empty', { persist: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutEmptyComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutEmptyComponent, isStandalone: true, selector: "LayoutEmpty", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "empty" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutEmptyComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutEmpty',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-layout-type': 'empty',
@@ -586,13 +582,12 @@ class LayoutFluidComponent {
         this.layout.setType('fluid', { persist: false });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutFluidComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutFluidComponent, isStandalone: true, selector: "LayoutFluid", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-layout-type": "fluid" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutFluidComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutFluid',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-layout-type': 'fluid',
@@ -635,29 +630,31 @@ class LayoutNavigationComponent {
       <div
         aria-hidden="true"
         data-layout-nav-rail
-        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-[1.5px] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-(--layout-rail-width) transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
         [style.transform]="railTransform()"
       >
-        <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-[1.5px] bg-border"></div>
+        <div
+          data-layout-nav-rail-line
+          class="absolute inset-y-0 right-0 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+        ></div>
         <div
           data-layout-nav-rail-top
-          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
         ></div>
         <div
           data-layout-nav-rail-bottom
-          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
         ></div>
       </div>
     }
 
     <ng-content />
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutNavigationComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutNavigation',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         role: 'navigation',
@@ -671,17 +668,20 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       <div
         aria-hidden="true"
         data-layout-nav-rail
-        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-[1.5px] transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
+        class="pointer-events-none absolute inset-y-0 right-0 z-20 w-(--layout-rail-width) transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] motion-reduce:transition-none"
         [style.transform]="railTransform()"
       >
-        <div data-layout-nav-rail-line class="absolute inset-y-0 right-0 w-[1.5px] bg-border"></div>
+        <div
+          data-layout-nav-rail-line
+          class="absolute inset-y-0 right-0 w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
+        ></div>
         <div
           data-layout-nav-rail-top
-          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+          class="absolute bottom-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
         ></div>
         <div
           data-layout-nav-rail-bottom
-          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-[1.5px] bg-border"
+          class="absolute top-full right-0 h-[calc((100dvh-100%)/2)] w-(--layout-rail-width) bg-[hsl(var(--layout-rail-color)/var(--layout-rail-opacity))]"
         ></div>
       </div>
     }
@@ -703,13 +703,12 @@ class LayoutContentComponent {
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: LayoutContentComponent, isStandalone: true, selector: "LayoutContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.data-layout-type": "layout.type()", "attr.data-layout-width": "layout.width()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: LayoutContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'LayoutContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.data-layout-type]': 'layout.type()',

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

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { effect, signal, computed, Injectable, inject, ElementRef, input, booleanAttribute, untracked, ChangeDetectionStrategy, Component, contentChild, output } from '@angular/core';
+import { effect, signal, computed, Injectable, inject, ElementRef, input, booleanAttribute, untracked, Component, contentChild, output } from '@angular/core';
 import { cn } from '@ojiepermana/angular-component/utils';
 import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationHeaderComponent, NavigationFooterComponent } from '@ojiepermana/angular-navigation';
 import { NavigationService } from '@ojiepermana/angular-navigation/service';
@@ -317,7 +317,7 @@ class PageFilterComponent {
     ariaHidden = computed(() => !this.isSticky() && !this.page.filterOpen() ? 'true' : null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
     /** Saat panel mengambang tertutup, `inert` mengeluarkan isinya dari tab order & pohon aksesibilitas (AXE). */
-    inertWhenClosed = computed(() => (this.isInteractive() && !this.page.filterOpen() ? '' : null), /* @ts-ignore */
+    inertWhenClosed = computed(() => this.isInteractive() && !this.page.filterOpen() ? '' : null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inertWhenClosed" }] : /* istanbul ignore next */ []));
     dialogRole = computed(() => (this.isInteractive() ? 'dialog' : null), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dialogRole" }] : /* istanbul ignore next */ []));
@@ -345,10 +345,18 @@ class PageFilterComponent {
         this.isSticky() && 'shrink-0 w-[var(--page-filter-width)]', this.isSticky() && position === 'left' && 'border-r', this.isSticky() && position === 'right' && 'order-last border-l', 
         // drawer → meluncur dari tepi content region, mengambang di atas content.
         this.isDrawer() &&
-            'absolute inset-y-0 z-20 w-[var(--page-filter-width)] border shadow-sm transition-transform duration-200 ease-out', this.isDrawer() && position === 'left' && (open ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isDrawer() && position === 'right' && (open ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), 
+            'absolute inset-y-0 z-20 w-[var(--page-filter-width)] border shadow-sm transition-transform duration-200 ease-out', this.isDrawer() &&
+            position === 'left' &&
+            (open ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isDrawer() &&
+            position === 'right' &&
+            (open ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), 
         // overlay → seperti drawer, tapi di atas drawer (z lebih tinggi) dengan backdrop.
         this.isOverlay() &&
-            'absolute inset-y-0 z-30 w-[var(--page-filter-width)] border shadow-md transition-transform duration-200 ease-out', this.isOverlay() && position === 'left' && (open ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isOverlay() && position === 'right' && (open ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.class());
+            'absolute inset-y-0 z-30 w-[var(--page-filter-width)] border shadow-md transition-transform duration-200 ease-out', this.isOverlay() &&
+            position === 'left' &&
+            (open ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isOverlay() &&
+            position === 'right' &&
+            (open ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.class());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -391,13 +399,12 @@ class PageFilterComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFilterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageFilterComponent, isStandalone: true, selector: "PageFilter", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"filter\"", "attr.data-page-filter-placement": "resolvedPlacement()", "attr.data-page-filter-mode": "effectiveMode()", "attr.data-page-filter-open": "page.filterOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "attr.inert": "inertWhenClosed()", "attr.role": "dialogRole()", "attr.aria-modal": "ariaModal()", "attr.aria-label": "dialogLabel()", "attr.tabindex": "dialogTabindex()", "style.--page-filter-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageFilterComponent, isStandalone: true, selector: "PageFilter", inputs: { placement: { classPropertyName: "placement", publicName: "placement", isSignal: true, isRequired: false, transformFunction: null }, mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, collapsible: { classPropertyName: "collapsible", publicName: "collapsible", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"filter\"", "attr.data-page-filter-placement": "resolvedPlacement()", "attr.data-page-filter-mode": "effectiveMode()", "attr.data-page-filter-open": "page.filterOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "attr.inert": "inertWhenClosed()", "attr.role": "dialogRole()", "attr.aria-modal": "ariaModal()", "attr.aria-label": "dialogLabel()", "attr.tabindex": "dialogTabindex()", "style.--page-filter-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFilterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageFilter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'resolvedId',
@@ -440,13 +447,12 @@ class PageHeaderComponent {
     this.isBorderRail() ? 'border-b-[1.5px]' : 'border-b', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageHeaderComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageHeaderComponent, isStandalone: true, selector: "PageHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "header" }, properties: { "class": "classes()", "style.padding-right": "appsLauncherReservePadding()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageHeaderComponent, isStandalone: true, selector: "PageHeader", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "header" }, properties: { "class": "classes()", "style.padding-right": "appsLauncherReservePadding()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageHeaderComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageHeader',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         // Inline style menang atas utility responsif konsumen (mis. `md:px-6`), jadi ruang
@@ -466,15 +472,17 @@ class PageContentComponent {
     classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageContentComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageContentComponent, isStandalone: true, selector: "PageContent", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "content" }, properties: { "class": "classes()", "attr.tabindex": "resolvedScroll() === \"content\" ? \"0\" : null" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageContentComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageContent',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
+                        // When this region scrolls its own content, make it keyboard-focusable so it
+                        // can be scrolled without a mouse (axe scrollable-region-focusable).
+                        '[attr.tabindex]': 'resolvedScroll() === "content" ? "0" : null',
                         'data-page-slot': 'content',
                     },
                     template: `<ng-content />`,
@@ -489,13 +497,12 @@ class PageDashboardComponent {
     classes = computed(() => buildPageBodyClasses(this.resolvedScroll(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageDashboardComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageDashboardComponent, isStandalone: true, selector: "PageDashboard", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "dashboard" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageDashboardComponent, isStandalone: true, selector: "PageDashboard", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "dashboard" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageDashboardComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageDashboard',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-page-slot': 'dashboard',
@@ -516,13 +523,12 @@ class PageFooterComponent {
     this.isBorderRail() ? 'border-t-[1.5px]' : 'border-t', this.class(), this.resolvedHeight() === 'fix' && 'h-12 overflow-hidden'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFooterComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageFooterComponent, isStandalone: true, selector: "PageFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "footer" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageFooterComponent, isStandalone: true, selector: "PageFooter", inputs: { class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { attributes: { "data-page-slot": "footer" }, properties: { "class": "classes()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFooterComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageFooter',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         'data-page-slot': 'footer',
@@ -567,10 +573,10 @@ class PageSideComponent {
     ...(ngDevMode ? [{ debugName: "isInteractive" }] : /* istanbul ignore next */ []));
     resolvedScroll = computed(() => this.page.scroll() ?? PAGE_DEFAULT_SCROLL, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "resolvedScroll" }] : /* istanbul ignore next */ []));
-    ariaHidden = computed(() => (!this.isSticky() && !this.page.sideOpen() ? 'true' : null), /* @ts-ignore */
+    ariaHidden = computed(() => !this.isSticky() && !this.page.sideOpen() ? 'true' : null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "ariaHidden" }] : /* istanbul ignore next */ []));
     /** Saat panel mengambang tertutup, `inert` mengeluarkan isinya dari tab order & pohon aksesibilitas (AXE). */
-    inertWhenClosed = computed(() => (this.isInteractive() && !this.page.sideOpen() ? '' : null), /* @ts-ignore */
+    inertWhenClosed = computed(() => this.isInteractive() && !this.page.sideOpen() ? '' : null, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "inertWhenClosed" }] : /* istanbul ignore next */ []));
     dialogRole = computed(() => (this.isInteractive() ? 'dialog' : null), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "dialogRole" }] : /* istanbul ignore next */ []));
@@ -586,8 +592,16 @@ class PageSideComponent {
         return cn('block min-h-0 border-border bg-background', this.resolvedScroll() === 'content' && 'h-full overflow-auto', this.resolvedScroll() === 'page' && 'overflow-visible', this.isSticky() && 'shrink-0 w-[var(--page-side-width)]', 
         // Urutan DOM body = rail-lalu-content; `left` tak perlu reorder, `right` mendorong rail ke kolom kedua.
         this.isSticky() && position === 'left' && 'border-r', this.isSticky() && position === 'right' && 'order-last border-l', this.isDrawer() &&
-            'absolute inset-y-0 z-20 w-[var(--page-side-width)] border shadow-sm transition-transform duration-200 ease-out', this.isDrawer() && position === 'left' && (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isDrawer() && position === 'right' && (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.isOverlay() &&
-            'absolute inset-y-0 z-30 w-[var(--page-side-width)] border shadow-md transition-transform duration-200 ease-out', this.isOverlay() && position === 'left' && (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isOverlay() && position === 'right' && (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.class());
+            'absolute inset-y-0 z-20 w-[var(--page-side-width)] border shadow-sm transition-transform duration-200 ease-out', this.isDrawer() &&
+            position === 'left' &&
+            (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isDrawer() &&
+            position === 'right' &&
+            (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.isOverlay() &&
+            'absolute inset-y-0 z-30 w-[var(--page-side-width)] border shadow-md transition-transform duration-200 ease-out', this.isOverlay() &&
+            position === 'left' &&
+            (sideOpen ? 'left-0 translate-x-0' : 'left-0 -translate-x-full'), this.isOverlay() &&
+            position === 'right' &&
+            (sideOpen ? 'right-0 translate-x-0' : 'right-0 translate-x-full'), this.class());
     }, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "classes" }] : /* istanbul ignore next */ []));
     constructor() {
@@ -629,13 +643,12 @@ class PageSideComponent {
         });
     }
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageSideComponent, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageSideComponent, isStandalone: true, selector: "PageSide", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"side\"", "attr.data-page-side-mode": "resolvedMode()", "attr.data-page-side-open": "page.sideOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "attr.inert": "inertWhenClosed()", "attr.role": "dialogRole()", "attr.aria-modal": "ariaModal()", "attr.aria-label": "dialogLabel()", "attr.tabindex": "dialogTabindex()", "style.--page-side-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.4", type: PageSideComponent, isStandalone: true, selector: "PageSide", inputs: { mode: { classPropertyName: "mode", publicName: "mode", isSignal: true, isRequired: false, transformFunction: null }, position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, closeOnEsc: { classPropertyName: "closeOnEsc", publicName: "closeOnEsc", isSignal: true, isRequired: false, transformFunction: null }, ariaLabel: { classPropertyName: "ariaLabel", publicName: "ariaLabel", isSignal: true, isRequired: false, transformFunction: null }, class: { classPropertyName: "class", publicName: "class", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class": "classes()", "attr.id": "resolvedId", "attr.data-page-slot": "\"side\"", "attr.data-page-side-mode": "resolvedMode()", "attr.data-page-side-open": "page.sideOpen()", "attr.data-page-position": "resolvedPosition()", "attr.aria-hidden": "ariaHidden()", "attr.inert": "inertWhenClosed()", "attr.role": "dialogRole()", "attr.aria-modal": "ariaModal()", "attr.aria-label": "dialogLabel()", "attr.tabindex": "dialogTabindex()", "style.--page-side-width": "resolvedWidth()" } }, ngImport: i0, template: `<ng-content />`, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageSideComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageSide',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'classes()',
                         '[attr.id]': 'resolvedId',
@@ -718,10 +731,14 @@ class PageComponent {
     // (diisi `registerFilter`), lalu default — pola seragam agar Page & PageFilter selalu sepakat.
     hasFilter = computed(() => this.projectedFilter() !== undefined, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hasFilter" }] : /* istanbul ignore next */ []));
-    filterPlacement = computed(() => this.projectedFilter()?.placement() ?? this.page.filterPlacement() ?? PAGE_DEFAULT_FILTER_PLACEMENT, /* @ts-ignore */
+    filterPlacement = computed(() => this.projectedFilter()?.placement() ??
+        this.page.filterPlacement() ??
+        PAGE_DEFAULT_FILTER_PLACEMENT, /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterPlacement" }] : /* istanbul ignore next */ []));
     /** Mode efektif: `stacked` selalu `sticky`; `side` memakai mode pada `PageFilter`. */
-    filterMode = computed(() => this.filterPlacement() === 'stacked' ? 'sticky' : (this.projectedFilter()?.mode() ?? this.page.filterMode()), /* @ts-ignore */
+    filterMode = computed(() => this.filterPlacement() === 'stacked'
+        ? 'sticky'
+        : (this.projectedFilter()?.mode() ?? this.page.filterMode()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterMode" }] : /* istanbul ignore next */ []));
     filterPosition = computed(() => this.projectedFilter()?.position() ?? this.page.filterPosition(), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "filterPosition" }] : /* istanbul ignore next */ []));
@@ -856,7 +873,8 @@ class PageComponent {
         aria-label="Close overlay panel"
         data-page-overlay-backdrop
         class="absolute inset-0 z-20 bg-[hsl(var(--overlay-backdrop))]"
-        (click)="handleBackdropClick()"></button>
+        (click)="handleBackdropClick()"
+      ></button>
     }
 
     <div [class]="shellClasses()">
@@ -882,13 +900,15 @@ class PageComponent {
         [id]="launcherNavId"
         [data]="appsNavData()"
         ariaLabel="Application navigation"
-        [class]="appsLauncherHostClass()">
+        [class]="appsLauncherHostClass()"
+      >
         <NavigationFlyout
           [icon]="appsIcon()"
           icon-only
           trigger-variant="plain"
           [nav-appearance]="appsLauncherAppearance()"
-          [label]="appsLabel()">
+          [label]="appsLabel()"
+        >
           @if (appsBrand(); as brand) {
             <NavigationHeader>
               <LayoutBrand [brand]="brand" />
@@ -902,13 +922,12 @@ class PageComponent {
         </NavigationFlyout>
       </Navigation>
     }
-  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "trigger-class", "nav-position", "nav-appearance", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true, dependencies: [{ kind: "component", type: NavigationContainerComponent, selector: "Navigation", inputs: ["id", "data", "ariaLabel", "compact", "collapse-tree", "class", "itemClass", "nav-group-class", "activeIds", "activeUrl", "openedIds"], outputs: ["openedIdsChange", "itemSelected"] }, { kind: "component", type: NavigationFlyoutComponent, selector: "NavigationFlyout", inputs: ["label", "icon", "icon-only", "icon-position", "trigger-variant", "trigger-floating", "trigger-class", "nav-position", "nav-appearance", "class"] }, { kind: "component", type: NavigationHeaderComponent, selector: "NavigationHeader", inputs: ["toggle", "class"] }, { kind: "component", type: NavigationFooterComponent, selector: "NavigationFooter", inputs: ["class"] }, { kind: "component", type: LayoutBrand, selector: "LayoutBrand", inputs: ["brand", "compact"] }, { kind: "component", type: LayoutUser, selector: "LayoutUser", inputs: ["user", "detailed", "logoutLabel", "logoutIcon"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'Page',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     providers: [PageStateService],
                     imports: [
                         NavigationContainerComponent,
@@ -940,7 +959,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         aria-label="Close overlay panel"
         data-page-overlay-backdrop
         class="absolute inset-0 z-20 bg-[hsl(var(--overlay-backdrop))]"
-        (click)="handleBackdropClick()"></button>
+        (click)="handleBackdropClick()"
+      ></button>
     }
 
     <div [class]="shellClasses()">
@@ -966,13 +986,15 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
         [id]="launcherNavId"
         [data]="appsNavData()"
         ariaLabel="Application navigation"
-        [class]="appsLauncherHostClass()">
+        [class]="appsLauncherHostClass()"
+      >
         <NavigationFlyout
           [icon]="appsIcon()"
           icon-only
           trigger-variant="plain"
           [nav-appearance]="appsLauncherAppearance()"
-          [label]="appsLabel()">
+          [label]="appsLabel()"
+        >
           @if (appsBrand(); as brand) {
             <NavigationHeader>
               <LayoutBrand [brand]="brand" />
@@ -1016,7 +1038,8 @@ class PageFilterToggleComponent {
       [attr.aria-label]="ariaLabel()"
       [attr.aria-controls]="page.filterId()"
       [attr.aria-expanded]="page.filterOpen()"
-      (click)="handleClick()">
+      (click)="handleClick()"
+    >
       <ng-content>
         <svg
           aria-hidden="true"
@@ -1026,18 +1049,18 @@ class PageFilterToggleComponent {
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
-          stroke-linejoin="round">
+          stroke-linejoin="round"
+        >
           <path d="M3 5h18l-7 8v5l-4 2v-7z" />
         </svg>
       </ng-content>
     </button>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageFilterToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageFilterToggle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'hostClasses()',
                     },
@@ -1048,7 +1071,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.aria-label]="ariaLabel()"
       [attr.aria-controls]="page.filterId()"
       [attr.aria-expanded]="page.filterOpen()"
-      (click)="handleClick()">
+      (click)="handleClick()"
+    >
       <ng-content>
         <svg
           aria-hidden="true"
@@ -1058,7 +1082,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
           stroke="currentColor"
           stroke-width="2"
           stroke-linecap="round"
-          stroke-linejoin="round">
+          stroke-linejoin="round"
+        >
           <path d="M3 5h18l-7 8v5l-4 2v-7z" />
         </svg>
       </ng-content>
@@ -1089,18 +1114,18 @@ class PageSideToggleComponent {
       [attr.aria-label]="ariaLabel()"
       [attr.aria-controls]="page.sideId()"
       [attr.aria-expanded]="page.sideOpen()"
-      (click)="handleClick()">
+      (click)="handleClick()"
+    >
       <ng-content>
         <span aria-hidden="true" class="text-lg leading-none">☰</span>
       </ng-content>
     </button>
-  `, isInline: true, changeDetection: i0.ChangeDetectionStrategy.OnPush });
+  `, isInline: true });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImport: i0, type: PageSideToggleComponent, decorators: [{
             type: Component,
             args: [{
                     selector: 'PageSideToggle',
-                    changeDetection: ChangeDetectionStrategy.OnPush,
                     host: {
                         '[class]': 'hostClasses()',
                     },
@@ -1111,7 +1136,8 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.4", ngImpor
       [attr.aria-label]="ariaLabel()"
       [attr.aria-controls]="page.sideId()"
       [attr.aria-expanded]="page.sideOpen()"
-      (click)="handleClick()">
+      (click)="handleClick()"
+    >
       <ng-content>
         <span aria-hidden="true" class="text-lg leading-none">☰</span>
       </ng-content>

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

@@ -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.44",
+  "version": "22.0.46",
   "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.44",
-    "@ojiepermana/angular-component": "^22.0.44",
+    "@ojiepermana/angular-navigation": "^22.0.46",
+    "@ojiepermana/angular-component": "^22.0.46",
     "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/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>;
 }