@ojiepermana/angular-theme 22.0.35 → 22.0.41

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

@@ -22,6 +22,22 @@ interface UserIdentity {
     readonly email: string;
 }
 
+/**
+ * Registry identitas brand/user yang dipublikasikan shell (mis. `LayoutWrapperDefault`).
+ * Surface lain — seperti apps-launcher di `Page` — membacanya agar menampilkan brand/user
+ * yang sama dengan flyout nav tanpa menerima input langsung.
+ */
+declare class LayoutIdentityService {
+    private readonly brandState;
+    private readonly userState;
+    readonly brand: _angular_core.Signal<BrandIdentity | null>;
+    readonly user: _angular_core.Signal<UserIdentity | null>;
+    setBrand(brand: BrandIdentity | null): void;
+    setUser(user: UserIdentity | null): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutIdentityService, never>;
+    static ɵprov: _angular_core.ɵɵInjectableDeclaration<LayoutIdentityService>;
+}
+
 /**
  * Slot brand untuk `<NavigationHeader>`: inisial/logo + judul. Murni input-driven.
  *
@@ -69,10 +85,15 @@ declare class LayoutUser {
 declare class LayoutNavSidebar {
     readonly brand: _angular_core.InputSignal<BrandIdentity>;
     readonly user: _angular_core.InputSignal<UserIdentity>;
-    /** Appearance dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
-    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
-    protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "">;
+    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">;
     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>;
 }
@@ -84,10 +105,15 @@ declare class LayoutNavSidebar {
 declare class LayoutNavDockbar {
     readonly brand: _angular_core.InputSignal<BrandIdentity>;
     readonly user: _angular_core.InputSignal<UserIdentity>;
-    /** Appearance dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
-    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
-    protected readonly shellClass: _angular_core.Signal<"border-r-[1.5px] border-border" | "">;
+    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">;
     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>;
 }
@@ -167,17 +193,24 @@ declare class LayoutWrapperDefault {
     readonly brand: _angular_core.InputSignal<BrandIdentity>;
     /** Identitas user. */
     readonly user: _angular_core.InputSignal<UserIdentity>;
+    private readonly identity;
+    constructor();
+    /**
+     * Kelas `<LayoutContent>` yang diatur consumer (mis. padding). Default kosong —
+     * library tidak lagi memaksa `p-6`; consumer/`<Page>` yang menentukan spacing.
+     */
+    readonly contentClassInput: _angular_core.InputSignal<string>;
     /** Wrapper layout & nilai `<Layout [layout-type]>`: navbar/flyout = horizontal, sisanya vertical. */
     protected readonly effectiveLayoutType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
     /** Tipe nav di dalam `#body`: `empty`/`fluid` → `brand` (header-only); selain itu `nav-type`. */
     protected readonly navKind: _angular_core.Signal<NavKind>;
     /** Lebar host `<Navigation>`: penuh-tinggi (vertical) atau penuh-lebar (horizontal). */
     protected readonly navClass: _angular_core.Signal<"w-full" | "h-full">;
-    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; selain itu padding biasa. */
-    protected readonly contentClass: _angular_core.Signal<"w-full max-w-3xl p-6" | "p-6">;
+    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; padding diserahkan ke consumer. */
+    protected readonly contentClass: _angular_core.Signal<string>;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<LayoutWrapperDefault, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutWrapperDefault, "LayoutWrapperDefault", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "layout-appearance"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "layoutType": { "alias": "layout-type"; "required": false; "isSignal": true; }; "navType": { "alias": "nav-type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<LayoutWrapperDefault, "LayoutWrapperDefault", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "layout-appearance"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "layoutType": { "alias": "layout-type"; "required": false; "isSignal": true; }; "navType": { "alias": "nav-type"; "required": false; "isSignal": true; }; "data": { "alias": "data"; "required": true; "isSignal": true; }; "brand": { "alias": "brand"; "required": true; "isSignal": true; }; "user": { "alias": "user"; "required": true; "isSignal": true; }; "contentClassInput": { "alias": "content-class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { LayoutBrand, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };
+export { LayoutBrand, LayoutIdentityService, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };
 export type { BrandIdentity, UserIdentity };

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

@@ -23,6 +23,7 @@ declare class LayoutComponent {
     protected readonly resolvedType: _angular_core.Signal<"fluid" | "vertical" | "horizontal" | "empty">;
     protected readonly isBorderRail: _angular_core.Signal<boolean>;
     protected readonly isFluidFrame: _angular_core.Signal<boolean>;
+    protected readonly isFullFlat: _angular_core.Signal<boolean>;
     protected readonly showsInsetRails: _angular_core.Signal<boolean>;
     protected readonly frameStageClasses: _angular_core.Signal<string>;
     protected readonly railAnchorClasses: _angular_core.Signal<string>;

package/types/ojiepermana-angular-theme-page.d.ts

@@ -1,31 +1,78 @@
+import * as _ojiepermana_angular_theme_layout_wrapper from '@ojiepermana/angular-theme/layout/wrapper';
+import * as _ojiepermana_angular_navigation_service from '@ojiepermana/angular-navigation/service';
 import * as _angular_core from '@angular/core';
 
+declare class PageHeaderComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
+    protected readonly isBorderRail: _angular_core.Signal<boolean>;
+    /** Saat tombol apps mengambang di atas header, sisakan ruang kanan agar isi header tidak tertimpa. */
+    protected readonly reservesAppsLauncher: _angular_core.Signal<boolean>;
+    /** Lebar tombol apps (h-9 w-9 = 36px) + offset kanan (right-2 = 8px) + jarak aman; `null` = tak memesan. */
+    protected readonly appsLauncherReservePadding: _angular_core.Signal<"3.5rem" | null>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "PageHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class PageContentComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageContentComponent, "PageContent", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class PageDashboardComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageDashboardComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageDashboardComponent, "PageDashboard", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+declare class PageFooterComponent {
+    private readonly page;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
+    protected readonly isBorderRail: _angular_core.Signal<boolean>;
+    protected readonly classes: _angular_core.Signal<string>;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageFooterComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageFooterComponent, "PageFooter", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare const PAGE_VARIANTS: readonly ["stacked", "side"];
 declare const PAGE_SIDE_POSITIONS: readonly ["left", "right"];
 declare const PAGE_SIDE_MODES: readonly ["sticky", "drawer", "overlay"];
 declare const PAGE_SCROLL_VALUES: readonly ["content", "page"];
 declare const PAGE_HEIGHT_VALUES: readonly ["auto", "fix"];
+/** Visual appearance shared with the layout/navigation axes — unifies borders. */
+declare const PAGE_APPEARANCES: readonly ["flat", "border-rail"];
 type PageVariant = (typeof PAGE_VARIANTS)[number];
 type PageSidePosition = (typeof PAGE_SIDE_POSITIONS)[number];
 type PageSideMode = (typeof PAGE_SIDE_MODES)[number];
 type PageScroll = (typeof PAGE_SCROLL_VALUES)[number];
 type PageHeight = (typeof PAGE_HEIGHT_VALUES)[number];
+type PageAppearance = (typeof PAGE_APPEARANCES)[number];
 declare const PAGE_DEFAULT_VARIANT: PageVariant;
 declare const PAGE_DEFAULT_SIDE_POSITION: PageSidePosition;
 declare const PAGE_DEFAULT_SIDE_MODE: PageSideMode;
 declare const PAGE_DEFAULT_SCROLL: PageScroll;
 declare const PAGE_DEFAULT_HEIGHT: PageHeight;
+declare const PAGE_DEFAULT_APPEARANCE: PageAppearance;
 declare const PAGE_DEFAULT_SIDE_WIDTH = "16rem";
 declare function isUiPageVariant(value: string | null): value is PageVariant;
 declare function isUiPageSidePosition(value: string | null): value is PageSidePosition;
 declare function isUiPageSideMode(value: string | null): value is PageSideMode;
 declare function isUiPageScroll(value: string | null): value is PageScroll;
 declare function isUiPageHeight(value: string | null): value is PageHeight;
+declare function isUiPageAppearance(value: string | null): value is PageAppearance;
 
 declare class PageStateService {
     private readonly variantState;
     private readonly heightState;
     private readonly scrollState;
+    private readonly appearanceState;
     private readonly positionState;
     private readonly sideModeState;
     private readonly internalSideOpenState;
@@ -34,15 +81,19 @@ declare class PageStateService {
     private readonly sideIdState;
     private readonly sideOpenRequestState;
     private readonly sideOpenRequestVersionState;
+    /** Aktif saat apps-launcher mengambang di atas `PageHeader`; header memesan ruang kanan agar isinya tidak tertimpa. */
+    private readonly appsLauncherReserveState;
     readonly variant: _angular_core.Signal<"stacked" | "side">;
     readonly height: _angular_core.Signal<"auto" | "fix">;
     readonly scroll: _angular_core.Signal<"content" | "page">;
+    readonly appearance: _angular_core.Signal<"flat" | "border-rail">;
     readonly position: _angular_core.Signal<"left" | "right">;
     readonly sideMode: _angular_core.Signal<"sticky" | "drawer" | "overlay">;
     readonly sideWidth: _angular_core.Signal<string>;
     readonly sideId: _angular_core.Signal<string | null>;
     readonly sideOpenRequest: _angular_core.Signal<boolean | null>;
     readonly sideOpenRequestVersion: _angular_core.Signal<number>;
+    readonly appsLauncherReserve: _angular_core.Signal<boolean>;
     readonly sideOpen: _angular_core.Signal<boolean>;
     readonly isSideInteractive: _angular_core.Signal<boolean>;
     readonly isSideVisible: _angular_core.Signal<boolean>;
@@ -50,6 +101,7 @@ declare class PageStateService {
         variant: PageVariant;
         height: PageHeight;
         scroll: PageScroll;
+        appearance: PageAppearance;
         position: PageSidePosition;
         sideMode: PageSideMode;
         sideWidth: string;
@@ -60,6 +112,7 @@ declare class PageStateService {
         width: string;
         id: string;
     }): void;
+    setAppsLauncherReserve(reserve: boolean): void;
     setControlledSideOpen(open: boolean | null): void;
     setSideOpen(open: boolean): void;
     openSide(): boolean;
@@ -95,28 +148,60 @@ declare class PageSideComponent {
 
 declare class PageComponent {
     protected readonly page: PageStateService;
+    private readonly layout;
+    private readonly navigation;
+    private readonly identity;
     protected readonly projectedSide: _angular_core.Signal<PageSideComponent | undefined>;
+    protected readonly projectedHeader: _angular_core.Signal<PageHeaderComponent | undefined>;
     readonly variant: _angular_core.InputSignal<"stacked" | "side">;
     readonly height: _angular_core.InputSignal<"auto" | "fix">;
     readonly scroll: _angular_core.InputSignal<"content" | "page">;
+    /** Visual appearance shared with the layout (`flat | border-rail`); unifies header/footer borders. */
+    readonly appearance: _angular_core.InputSignal<"flat" | "border-rail">;
     readonly position: _angular_core.InputSignal<"left" | "right">;
     readonly sideMode: _angular_core.InputSignal<"sticky" | "drawer" | "overlay">;
     readonly sideOpen: _angular_core.InputSignal<boolean | null>;
     readonly sideWidth: _angular_core.InputSignal<string>;
     readonly class: _angular_core.InputSignal<string>;
     readonly sideOpenChange: _angular_core.OutputEmitterRef<boolean>;
+    /** Saat layout `empty`, munculkan tombol apps (flyout main navigation) di pojok kanan-atas. Set `false` untuk menonaktifkan. */
+    readonly appsLauncher: _angular_core.InputSignalWithTransform<boolean, unknown>;
+    /** Id navigasi yang disurface oleh apps-launcher (default `main`). */
+    readonly appsNavId: _angular_core.InputSignal<string>;
+    /** Ikon Material untuk tombol apps-launcher. */
+    readonly appsIcon: _angular_core.InputSignal<string>;
+    /** Label/aria-label tombol apps-launcher (tombol icon-only). */
+    readonly appsLabel: _angular_core.InputSignal<string>;
+    /** Id unik untuk instance `<Navigation>` apps-launcher; tak boleh memakai id `main` (akan bentrok `claimId`). */
+    protected readonly launcherNavId: string;
     protected readonly resolvedPosition: _angular_core.Signal<"left" | "right">;
     protected readonly resolvedSideMode: _angular_core.Signal<"sticky" | "drawer" | "overlay">;
     protected readonly isLeftSide: _angular_core.Signal<boolean>;
     protected readonly isRightSide: _angular_core.Signal<boolean>;
     protected readonly showsOverlayBackdrop: _angular_core.Signal<boolean>;
+    /** Signal data untuk id yang dipilih; di-recompute hanya saat `appsNavId` berubah. */
+    private readonly appsNavSource;
+    protected readonly appsNavData: _angular_core.Signal<readonly _ojiepermana_angular_navigation_service.NavigationItem[]>;
+    /** Apps-launcher hanya muncul di layout `empty`, saat diaktifkan, dan saat nav target punya data. */
+    protected readonly showsAppsLauncher: _angular_core.Signal<boolean>;
+    /**
+     * Host `<Navigation>` launcher di-absolute ke pojok kanan-atas (hanya membungkus tombol trigger;
+     * panel flyout tetap membentang selebar `Page` lewat pengukuran container). Saat ada `PageHeader`,
+     * tombol menyatu di dalam pita header (offset rapat); tanpa header, mengambang di atas konten.
+     */
+    protected readonly appsLauncherHostClass: _angular_core.Signal<string>;
+    /** Appearance flyout mengikuti layout (seperti shell flyout); fallback ke appearance `Page`. */
+    protected readonly appsLauncherAppearance: _angular_core.Signal<"flat" | "border-rail">;
+    /** Brand/user untuk header & footer flyout — sama seperti shell flyout; `null` saat tak ada shell. */
+    protected readonly appsBrand: _angular_core.Signal<_ojiepermana_angular_theme_layout_wrapper.BrandIdentity | null>;
+    protected readonly appsUser: _angular_core.Signal<_ojiepermana_angular_theme_layout_wrapper.UserIdentity | null>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly shellClasses: _angular_core.Signal<string>;
     protected readonly bodyClasses: _angular_core.Signal<string>;
     constructor();
     protected handleBackdropClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageComponent, "Page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide"], ["PageHeader", "PageSideToggle", "PageSide", "PageContent, PageDashboard", "PageFooter"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageComponent, "Page", never, { "variant": { "alias": "variant"; "required": false; "isSignal": true; }; "height": { "alias": "height"; "required": false; "isSignal": true; }; "scroll": { "alias": "scroll"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "position": { "alias": "position"; "required": false; "isSignal": true; }; "sideMode": { "alias": "sideMode"; "required": false; "isSignal": true; }; "sideOpen": { "alias": "sideOpen"; "required": false; "isSignal": true; }; "sideWidth": { "alias": "sideWidth"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; "appsLauncher": { "alias": "appsLauncher"; "required": false; "isSignal": true; }; "appsNavId": { "alias": "appsNavId"; "required": false; "isSignal": true; }; "appsIcon": { "alias": "appsIcon"; "required": false; "isSignal": true; }; "appsLabel": { "alias": "appsLabel"; "required": false; "isSignal": true; }; }, { "sideOpenChange": "sideOpenChange"; }, ["projectedSide", "projectedHeader"], ["PageHeader", "PageSideToggle", "PageSide", "PageContent, PageDashboard", "PageFooter"], true, never>;
 }
 
 declare class PageSideToggleComponent {
@@ -131,38 +216,5 @@ declare class PageSideToggleComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageSideToggleComponent, "PageSideToggle", never, { "ariaLabel": { "alias": "ariaLabel"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, { "toggled": "toggled"; }, never, ["*"], true, never>;
 }
 
-declare class PageHeaderComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageHeaderComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageHeaderComponent, "PageHeader", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class PageContentComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageContentComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageContentComponent, "PageContent", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class PageDashboardComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageDashboardComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageDashboardComponent, "PageDashboard", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-declare class PageFooterComponent {
-    private readonly page;
-    readonly class: _angular_core.InputSignal<string>;
-    protected readonly resolvedHeight: _angular_core.Signal<"auto" | "fix">;
-    protected readonly classes: _angular_core.Signal<string>;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<PageFooterComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<PageFooterComponent, "PageFooter", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
-}
-
-export { PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PAGE_HEIGHT_VALUES, PAGE_SCROLL_VALUES, PAGE_SIDE_MODES, PAGE_SIDE_POSITIONS, PAGE_VARIANTS, PageComponent, PageContentComponent, PageDashboardComponent, PageFooterComponent, PageHeaderComponent, PageSideComponent, PageSideToggleComponent, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
-export type { PageHeight, PageScroll, PageSideMode, PageSidePosition, PageVariant };
+export { PAGE_APPEARANCES, PAGE_DEFAULT_APPEARANCE, PAGE_DEFAULT_HEIGHT, PAGE_DEFAULT_SCROLL, PAGE_DEFAULT_SIDE_MODE, PAGE_DEFAULT_SIDE_POSITION, PAGE_DEFAULT_SIDE_WIDTH, PAGE_DEFAULT_VARIANT, PAGE_HEIGHT_VALUES, PAGE_SCROLL_VALUES, PAGE_SIDE_MODES, PAGE_SIDE_POSITIONS, PAGE_VARIANTS, PageComponent, PageContentComponent, PageDashboardComponent, PageFooterComponent, PageHeaderComponent, PageSideComponent, PageSideToggleComponent, isUiPageAppearance, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
+export type { PageAppearance, PageHeight, PageScroll, PageSideMode, PageSidePosition, PageVariant };

package/types/ojiepermana-angular-theme-styles.d.ts

@@ -1,21 +1,59 @@
-import * as _angular_core from '@angular/core';
+import * as i0 from '@angular/core';
 import { InjectionToken, EnvironmentProviders } from '@angular/core';
 
 declare const THEME_MODES: readonly ["light", "dark", "system"];
 declare const RESOLVED_THEME_MODES: readonly ["light", "dark"];
-declare const THEME_SEASONS: readonly ["base", "imlek", "ramadhan", "ied", "natal", "new-year"];
+/**
+ * FluxUI-style accent palettes (axis `theme-color`). `base` = core theme (no
+ * override); `brand` = the consumer's `--brand` color. Others re-tint the full
+ * palette. Order mirrors the FluxUI accent picker (base…rose) + `brand`.
+ */
+declare const THEME_COLORS: readonly ["base", "red", "orange", "amber", "yellow", "lime", "green", "emerald", "teal", "cyan", "sky", "blue", "indigo", "violet", "purple", "fuchsia", "pink", "rose", "brand"];
+/**
+ * Neutral (gray) families (axis `theme-neutral`). `base` = core theme neutrals.
+ * Overrides only the gray family, composing with any accent.
+ */
+declare const THEME_NEUTRALS: readonly ["base", "slate", "gray", "zinc", "neutral", "stone", "mauve", "olive", "mist", "taupe"];
+/**
+ * Corner radius presets (axis `theme-radius`). Each drives the single
+ * `--radius-base` knob; the whole `--radius-*` scale + `rounded-*` utilities
+ * follow. `md` = the 0.625rem default; `full` is the pill extreme.
+ */
+declare const THEME_RADII: readonly ["none", "sm", "md", "lg", "xl", "full"];
+/**
+ * Spacing density presets (axis `theme-space`). Each drives the single
+ * `--spacing-base` knob; every `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` utility follows.
+ * `normal` = the 0.25rem default (no-op baseline).
+ */
+declare const THEME_SPACES: readonly ["compact", "normal", "relaxed", "spacious"];
 type ThemeMode = (typeof THEME_MODES)[number];
 type ResolvedThemeMode = (typeof RESOLVED_THEME_MODES)[number];
-type ThemeSeason = (typeof THEME_SEASONS)[number];
+type ThemeColor = (typeof THEME_COLORS)[number];
+type ThemeNeutral = (typeof THEME_NEUTRALS)[number];
+type ThemeRadius = (typeof THEME_RADII)[number];
+type ThemeSpace = (typeof THEME_SPACES)[number];
 declare const DEFAULT_THEME_MODE: ThemeMode;
-declare const DEFAULT_THEME_SEASON: ThemeSeason;
+declare const DEFAULT_THEME_COLOR: ThemeColor;
+declare const DEFAULT_THEME_NEUTRAL: ThemeNeutral;
+declare const DEFAULT_THEME_RADIUS: ThemeRadius;
+declare const DEFAULT_THEME_SPACE: ThemeSpace;
 declare const THEME_MODE_STORAGE_KEY = "theme-mode";
-declare const THEME_SEASON_STORAGE_KEY = "theme-season";
+declare const THEME_COLOR_STORAGE_KEY = "theme-color";
+declare const THEME_NEUTRAL_STORAGE_KEY = "theme-neutral";
+declare const THEME_BRAND_STORAGE_KEY = "theme-brand";
+declare const THEME_RADIUS_STORAGE_KEY = "theme-radius";
+declare const THEME_SPACE_STORAGE_KEY = "theme-space";
 declare function isThemeMode(value: string | null | undefined): value is ThemeMode;
 declare function isResolvedThemeMode(value: string | null | undefined): value is ResolvedThemeMode;
-declare function isThemeSeason(value: string | null | undefined): value is ThemeSeason;
+declare function isThemeColor(value: string | null | undefined): value is ThemeColor;
+declare function isThemeNeutral(value: string | null | undefined): value is ThemeNeutral;
+declare function isThemeRadius(value: string | null | undefined): value is ThemeRadius;
+declare function isThemeSpace(value: string | null | undefined): value is ThemeSpace;
 declare function normalizeThemeMode(value: string | null | undefined): ThemeMode;
-declare function normalizeThemeSeason(value: string | null | undefined): ThemeSeason;
+declare function normalizeThemeColor(value: string | null | undefined): ThemeColor;
+declare function normalizeThemeNeutral(value: string | null | undefined): ThemeNeutral;
+declare function normalizeThemeRadius(value: string | null | undefined): ThemeRadius;
+declare function normalizeThemeSpace(value: string | null | undefined): ThemeSpace;
 
 interface ThemeIconOptions {
     /**
@@ -28,19 +66,30 @@ interface ThemeIconOptions {
      */
     readonly materialSymbols?: boolean;
 }
+/** Consumer brand color. HSL triplets `H S% L%` consumed by `hsl(var(--brand))`. */
+interface ThemeBrandOptions {
+    /** Brand color, e.g. `'221 83% 53%'`. */
+    readonly color: string;
+    /** Foreground on solid brand fills. Defaults to white. */
+    readonly foreground?: string;
+}
 interface ThemeOptions {
     readonly mode?: ThemeMode;
-    readonly season?: ThemeSeason;
-    readonly icons?: ThemeIconOptions;
+    /** Initial accent palette (`theme-color`). Persisted choice wins over this. */
+    readonly color?: ThemeColor;
+    /** Initial neutral family (`theme-neutral`). Persisted choice wins over this. */
+    readonly neutral?: ThemeNeutral;
+    /** Initial corner radius preset (`theme-radius`). Persisted choice wins over this. */
+    readonly radius?: ThemeRadius;
+    /** Initial spacing density preset (`theme-space`). Persisted choice wins over this. */
+    readonly space?: ThemeSpace;
     /**
-     * Resolves the stylesheet URL for a non-base season so it can be loaded
-     * lazily at runtime instead of bundling every season's CSS up front.
-     * Return `null` to skip loading for that season. When omitted, no runtime
-     * loading happens — the app is expected to bundle season CSS itself.
-     *
-     * Contoh: `(season) => '/themes/seasonal/' + season + '/package.css'`
+     * Consumer brand color → `--brand` / `bg-brand`, and the `brand` accent preset.
+     * Pass an HSL triplet string, or `{ color, foreground }`. Persisted/runtime
+     * changes (ThemeBrandService.setBrand) win over this default.
      */
-    readonly seasonalCssUrl?: (season: ThemeSeason) => string | null;
+    readonly brand?: string | ThemeBrandOptions;
+    readonly icons?: ThemeIconOptions;
 }
 declare const THEME_OPTIONS: InjectionToken<Readonly<ThemeOptions>>;
 
@@ -50,9 +99,9 @@ declare class ThemeModeService {
     private readonly options;
     private readonly modeState;
     private readonly systemPrefersDark;
-    readonly mode: _angular_core.Signal<"light" | "dark" | "system">;
-    readonly resolvedMode: _angular_core.Signal<"light" | "dark">;
-    readonly isDark: _angular_core.Signal<boolean>;
+    readonly mode: i0.Signal<"light" | "dark" | "system">;
+    readonly resolvedMode: i0.Signal<"light" | "dark">;
+    readonly isDark: i0.Signal<boolean>;
     constructor();
     setMode(mode: ThemeMode): void;
     toggle(): void;
@@ -65,33 +114,116 @@ declare class ThemeModeService {
     private storage;
     private readStorage;
     private writeStorage;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeModeService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeModeService>;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeModeService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeModeService>;
 }
 
 declare function provideUiTheme(options?: ThemeOptions): EnvironmentProviders;
 
-declare class ThemeSeasonService {
+/**
+ * Drives the two FluxUI-style color axes:
+ *  - accent  → `<html theme-color>`   (full tinted palette per color)
+ *  - neutral → `<html theme-neutral>` (gray family only)
+ *
+ * Both persist to localStorage and seed from `provideUiTheme({ color, neutral })`
+ * (a persisted choice wins over the configured default). `base` on either axis
+ * means "no override" — the core base theme applies.
+ */
+declare class ThemeColorService {
     private readonly documentRef;
     private readonly options;
-    private readonly seasonState;
-    readonly season: _angular_core.Signal<"base" | "imlek" | "ramadhan" | "ied" | "natal" | "new-year">;
+    private readonly colorState;
+    private readonly neutralState;
+    readonly color: i0.Signal<"base" | "red" | "orange" | "amber" | "yellow" | "lime" | "green" | "emerald" | "teal" | "cyan" | "sky" | "blue" | "indigo" | "violet" | "purple" | "fuchsia" | "pink" | "rose" | "brand">;
+    readonly neutral: i0.Signal<"base" | "slate" | "gray" | "zinc" | "neutral" | "stone" | "mauve" | "olive" | "mist" | "taupe">;
     constructor();
-    setSeason(season: ThemeSeason): void;
+    setColor(color: ThemeColor): void;
+    setNeutral(neutral: ThemeNeutral): void;
     private ensureDefaults;
-    private persistSeason;
-    private applySeasonAttribute;
-    /**
-     * Lazily loads the active season's stylesheet via `<link>` when the app
-     * configured `seasonalCssUrl`, so only base CSS ships in the main bundle.
-     */
-    private ensureSeasonStylesheet;
+    private applyAttribute;
     private storage;
     private readStorage;
-    private writeStorage;
-    static ɵfac: _angular_core.ɵɵFactoryDeclaration<ThemeSeasonService, never>;
-    static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeSeasonService>;
+    private persist;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeColorService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeColorService>;
+}
+
+/** Resolved brand color. Both fields are HSL triplets `H S% L%`. */
+interface ThemeBrand {
+    readonly color: string;
+    readonly foreground: string;
+}
+/**
+ * Consumer-configurable brand color. Writes `--brand` / `--brand-foreground` as
+ * inline custom properties on `<html>` so `bg-brand` / `text-brand-foreground`
+ * and the `theme-color='brand'` accent preset resolve to it.
+ *
+ * Default comes from `provideUiTheme({ brand })`; `setBrand()` overrides at
+ * runtime and persists. When unset, `--brand` falls back to `var(--primary)`.
+ */
+declare class ThemeBrandService {
+    private readonly documentRef;
+    private readonly options;
+    private readonly brandState;
+    readonly brand: i0.Signal<ThemeBrand | null>;
+    constructor();
+    /** Set the brand color. `color`/`foreground` are HSL triplets (e.g. `'221 83% 53%'`). */
+    setBrand(color: string, foreground?: string): void;
+    /** Clear the consumer brand → `--brand` falls back to `var(--primary)`. */
+    clearBrand(): void;
+    private ensureDefaults;
+    private normalizeOption;
+    private applyBrand;
+    private storage;
+    private readStoredBrand;
+    private persist;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeBrandService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeBrandService>;
+}
+
+/**
+ * Corner radius axis. Writes `<html theme-radius>`; each preset CSS sets the
+ * single `--radius-base` knob so the whole `--radius-*` scale + `rounded-*`
+ * utilities rescale. Persists to localStorage and seeds from
+ * `provideUiTheme({ radius })` (a persisted choice wins over the default).
+ */
+declare class ThemeRadiusService {
+    private readonly documentRef;
+    private readonly options;
+    private readonly radiusState;
+    readonly radius: i0.Signal<"none" | "sm" | "md" | "lg" | "xl" | "full">;
+    readonly radiusPx: i0.Signal<0 | 6 | 10 | 14 | 20 | 9999>;
+    constructor();
+    setRadius(radius: ThemeRadius): void;
+    private ensureDefaults;
+    private storage;
+    private readStorage;
+    private persist;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeRadiusService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeRadiusService>;
+}
+
+/**
+ * Spacing density axis. Writes `<html theme-space>`; each preset CSS sets the
+ * single `--spacing-base` knob, which Tailwind's `--spacing` derives from, so
+ * every `p-*`/`m-*`/`gap-*`/`w-*`/`h-*` utility rescales. Persists to
+ * localStorage and seeds from `provideUiTheme({ space })` (a persisted choice
+ * wins over the default).
+ */
+declare class ThemeSpaceService {
+    private readonly documentRef;
+    private readonly options;
+    private readonly spaceState;
+    readonly space: i0.Signal<"compact" | "normal" | "relaxed" | "spacious">;
+    constructor();
+    setSpace(space: ThemeSpace): void;
+    private ensureDefaults;
+    private storage;
+    private readStorage;
+    private persist;
+    static ɵfac: i0.ɵɵFactoryDeclaration<ThemeSpaceService, never>;
+    static ɵprov: i0.ɵɵInjectableDeclaration<ThemeSpaceService>;
 }
 
-export { DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_OPTIONS, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
-export type { ResolvedThemeMode, ThemeIconOptions, ThemeMode, ThemeOptions, ThemeSeason };
+export { DEFAULT_THEME_COLOR, DEFAULT_THEME_MODE, DEFAULT_THEME_NEUTRAL, DEFAULT_THEME_RADIUS, DEFAULT_THEME_SPACE, RESOLVED_THEME_MODES, THEME_BRAND_STORAGE_KEY, THEME_COLORS, THEME_COLOR_STORAGE_KEY, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_NEUTRALS, THEME_NEUTRAL_STORAGE_KEY, THEME_OPTIONS, THEME_RADII, THEME_RADIUS_STORAGE_KEY, THEME_SPACES, THEME_SPACE_STORAGE_KEY, ThemeBrandService, ThemeColorService, ThemeModeService, ThemeRadiusService, ThemeSpaceService, isResolvedThemeMode, isThemeColor, isThemeMode, isThemeNeutral, isThemeRadius, isThemeSpace, normalizeThemeColor, normalizeThemeMode, normalizeThemeNeutral, normalizeThemeRadius, normalizeThemeSpace, provideUiTheme };
+export type { ResolvedThemeMode, ThemeBrand, ThemeBrandOptions, ThemeColor, ThemeIconOptions, ThemeMode, ThemeNeutral, ThemeOptions, ThemeRadius, ThemeSpace };

package/styles/css/seasonal/ied/package.css

@@ -1,4 +0,0 @@
-/**
- * Seasonal overrides for the Ied theme.
- */
-@import './theme.css';