@edsis/ui 21.3.6 → 21.3.8

package/layout/README.md

@@ -1,6 +1,6 @@
 # @edsis/ui/layout
 
-Primitive layout projection untuk menyusun shell UI dengan satu root `ui-layout`, satu variant layout (`vertical`, `horizontal`, atau `empty`), slot `ui-layout-nav`, dan area `ui-layout-content` yang menjadi scroll container utama.
+Primitive layout projection untuk menyusun shell UI dengan satu root `ui-layout`, satu variant layout (`vertical`, `horizontal`, `empty`, atau `fluid`), slot `ui-layout-nav`, dan area `ui-layout-content` yang menjadi scroll container utama.
 
 README ini mendokumentasikan seluruh API publik yang diekspor oleh package agar consumer bisa memahami kontrak komponen, type, service, dan perilaku layout tanpa perlu membaca source code.
 
@@ -14,6 +14,7 @@ import {
   UiLayoutComponent,
   UiLayoutContentComponent,
   UiLayoutEmptyComponent,
+  UiLayoutFluidComponent,
   UiLayoutHorizontalComponent,
   UiLayoutNavComponent,
   UiLayoutVerticalComponent,
@@ -65,10 +66,10 @@ Struktur yang direkomendasikan adalah sebagai berikut.
 
 ```html
 <ui-layout>
-  <ui-layout-vertical | ui-layout-horizontal | ui-layout-empty>
+  <ui-layout-vertical | ui-layout-horizontal | ui-layout-empty | ui-layout-fluid>
     <ui-layout-nav>...</ui-layout-nav>
     <ui-layout-content>...</ui-layout-content>
-  </ui-layout-vertical | ui-layout-horizontal | ui-layout-empty>
+  </ui-layout-vertical | ui-layout-horizontal | ui-layout-empty | ui-layout-fluid>
 </ui-layout>
 ```
 
@@ -77,6 +78,7 @@ Aturan penggunaannya:
 - Gunakan tepat satu variant layout di dalam `ui-layout`.
 - Untuk layout `vertical` dan `horizontal`, urutan child yang umum adalah `ui-layout-nav` lalu `ui-layout-content`.
 - Untuk layout `empty`, biasanya cukup `ui-layout-content`.
+- Untuk layout `fluid`, child dapat berupa konten page tunggal yang ingin dipusatkan terhadap frame.
 - `ui-layout-content` adalah area yang memiliki `overflow-auto`, jadi konten utama sebaiknya ditempatkan di sana.
 - Pada mode `vertical`, lebar nav mengikuti kontennya sendiri (`w-max`), bukan dipaksa oleh root layout.
 
@@ -120,6 +122,16 @@ Aturan penggunaannya:
 </ui-layout>
 ```
 
+### Fluid
+
+```html
+<ui-layout surface="grid" appearance="border-rail" width="fluid">
+  <ui-layout-fluid>
+    <section class="w-full max-w-xl border border-border bg-card/90 p-6">Content</section>
+  </ui-layout-fluid>
+</ui-layout>
+```
+
 ## Pola page-level yang direkomendasikan
 
 Untuk halaman yang memiliki default sendiri tetapi tetap harus tunduk pada nilai local storage yang sudah tersimpan, pakai `LayoutService.registerDefaults(...)` sekali di level page, lalu bind root `ui-layout` ke signal service.
@@ -184,13 +196,15 @@ Inputs:
 
 Behavior:
 
-- Mendaftarkan default `surface`, `appearance`, dan `width` ke `LayoutService` hanya saat local storage belum memiliki nilai valid.
-- Nilai visual final selalu dibaca kembali dari `LayoutService`, sehingga stored preference menang atas fallback input.
+- Jika consumer memberi input manual `surface`, `appearance`, atau `width`, nilai itu dipakai sebagai override in-memory untuk instance aktif tanpa menulis `localStorage`.
+- Jika input manual kosong, primitive mendaftarkan default `surface`, `appearance`, dan `width` ke `LayoutService` hanya saat local storage belum memiliki nilai valid.
+- Nilai visual final selalu dibaca kembali dari `LayoutService`, sehingga child primitive tetap membaca state yang sama selama instance aktif.
 - Menambahkan atribut host `data-surface`, `data-layout-appearance`, `data-layout-style`, `data-layout-width`, dan `data-layout-type`.
-- Root tidak menyediakan input `type`. Type aktif dikendalikan oleh variant layout yang dirender, atau oleh consumer melalui `LayoutService.registerDefaults({ type })` sebelum template mengevaluasi `layout.type()`.
+- Root tidak menyediakan input `type`. Type aktif dikendalikan oleh variant layout yang dirender sebagai override in-memory, atau oleh consumer melalui `LayoutService.registerDefaults({ type })` sebelum template mengevaluasi `layout.type()`.
 - Selalu merender frame border.
 - Jika `appearance="border-rail"`, root menambah rail dekoratif di empat sudut frame dan memanjangkan garis sudut itu sampai tepi viewport.
 - Jika `width="container"`, frame dipusatkan mulai breakpoint `lg` dengan container behavior.
+- Jika `width="fluid"` dan variant aktif adalah `ui-layout-fluid`, frame akan shrink mengikuti tinggi dan lebar konten lalu dipusatkan terhadap viewport.
 
 ### `UiLayoutVerticalComponent`
 
@@ -206,7 +220,7 @@ Inputs:
 
 Behavior:
 
-- Mengatur `LayoutService.type` menjadi `'vertical'`.
+- Mengatur `LayoutService.type` menjadi `'vertical'` hanya untuk state aktif dan tidak menulis `localStorage`.
 - Menggunakan grid `grid-cols-[auto_minmax(0,1fr)]`.
 - Dalam mode `border-rail`, host dibuat `overflow-visible` agar rail nav/frame dapat mengekstensi keluar area frame.
 
@@ -224,7 +238,7 @@ Inputs:
 
 Behavior:
 
-- Mengatur `LayoutService.type` menjadi `'horizontal'`.
+- Mengatur `LayoutService.type` menjadi `'horizontal'` hanya untuk state aktif dan tidak menulis `localStorage`.
 - Menggunakan flex column untuk menyusun nav dan content.
 - Tidak merender rail nav vertikal khusus.
 
@@ -242,7 +256,7 @@ Inputs:
 
 Behavior:
 
-- Mengatur `LayoutService.type` menjadi `'empty'`.
+- Mengatur `LayoutService.type` menjadi `'empty'` hanya untuk state aktif dan tidak menulis `localStorage`.
 - Menyediakan wrapper penuh untuk satu area konten.
 - `ui-layout-nav` akan tersembunyi jika tetap dirender di mode ini.
 
@@ -320,16 +334,18 @@ Gunakan `appearance` di template Angular. Alias `layout-style` tetap tersedia un
 
 Nilai `width` yang tersedia berasal dari `UI_LAYOUT_WIDTHS`.
 
-| Nilai         | Perilaku                                                                                                                                                |
-| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `'full'`      | Root menggunakan padding `p-4`, frame dan content tetap full width.                                                                                     |
-| `'wide'`      | Di bawah `lg` tampil seperti `full`, mulai `lg` memakai padding `p-12` di root.                                                                         |
-| `'container'` | Di bawah `lg` tampil seperti `full`, mulai `lg` root memakai `py-16` tanpa padding horizontal, lalu frame/content dipusatkan dengan container behavior. |
+| Nilai         | Perilaku                                                                                                                                                                  |
+| ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `'full'`      | Root menggunakan padding `p-4`, frame dan content tetap full width.                                                                                                       |
+| `'wide'`      | Di bawah `lg` tampil seperti `full`, mulai `lg` memakai padding `p-12` di root.                                                                                           |
+| `'container'` | Di bawah `lg` tampil seperti `full`, mulai `lg` root memakai `py-16` tanpa padding horizontal, lalu frame/content dipusatkan dengan container behavior.                   |
+| `'fluid'`     | Dipakai untuk `ui-layout-fluid`: root dan rail menjadi kanvas centering, frame shrink mengikuti ukuran konten, lalu tetap dibatasi `max-width` dan `max-height` viewport. |
 
 Ringkasnya:
 
 - `wide` dan `container` sengaja collapse ke tampilan `full` di bawah breakpoint `lg`.
 - Perbedaan utama `container` muncul mulai `lg`, saat frame dan content tidak lagi full bleed secara horizontal.
+- `fluid` ditujukan untuk halaman tunggal seperti auth, splash, atau status page yang membutuhkan frame auto-centered di kedua sumbu.
 
 ## `LayoutService`
 
@@ -353,30 +369,31 @@ Readonly signals:
 
 Methods:
 
-| Method                | Signature                                                      | Deskripsi                                                                                                                                                                                                 |
-| --------------------- | -------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
-| `registerSurface`     | `(surface: UiLayoutSurface) => void`                           | Mendaftarkan fallback `layout-surface` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                            |
-| `registerType`        | `(type: UiLayoutType) => void`                                 | Mendaftarkan fallback `layout-type` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                               |
-| `registerAppearance`  | `(appearance: UiLayoutStyle) => void`                          | Mendaftarkan fallback `layout-appearance` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                         |
-| `registerStyle`       | `(style: UiLayoutStyle) => void`                               | Alias kompatibilitas untuk `registerAppearance(...)`.                                                                                                                                                     |
-| `registerWidth`       | `(width: UiLayoutWidth) => void`                               | Mendaftarkan fallback `layout-width` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                              |
-| `registerDefaults`    | `(defaults: { surface?, appearance?, type?, width? }) => this` | Mendaftarkan beberapa fallback sekaligus. Ini adalah API yang direkomendasikan untuk page-level default karena consumer cukup memanggil satu method dan tetap menghormati nilai storage yang sudah valid. |
-| `setSurface`          | `(surface: UiLayoutSurface) => void`                           | Menulis surface ke signal dan local storage.                                                                                                                                                              |
-| `setType`             | `(type: UiLayoutType) => void`                                 | Menulis type ke signal dan local storage.                                                                                                                                                                 |
-| `setAppearance`       | `(appearance: UiLayoutStyle) => void`                          | Menulis appearance ke signal dan local storage `layout-appearance`.                                                                                                                                       |
-| `setStyle`            | `(style: UiLayoutStyle) => void`                               | Alias kompatibilitas untuk `setAppearance(...)`.                                                                                                                                                          |
-| `setWidth`            | `(width: UiLayoutWidth) => void`                               | Menulis width ke signal dan local storage.                                                                                                                                                                |
-| `getStoredSurface`    | `() => UiLayoutSurface`                                        | Membaca surface yang valid dari storage atau default.                                                                                                                                                     |
-| `getStoredType`       | `() => UiLayoutType`                                           | Membaca type yang valid dari storage atau default.                                                                                                                                                        |
-| `getStoredAppearance` | `() => UiLayoutStyle`                                          | Membaca appearance yang valid dari storage atau default.                                                                                                                                                  |
-| `getStoredStyle`      | `() => UiLayoutStyle`                                          | Alias kompatibilitas untuk `getStoredAppearance()`.                                                                                                                                                       |
-| `getStoredWidth`      | `() => UiLayoutWidth`                                          | Membaca width yang valid dari storage atau default.                                                                                                                                                       |
+| Method                | Signature                                                              | Deskripsi                                                                                                                                                                                                 |
+| --------------------- | ---------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `registerSurface`     | `(surface: UiLayoutSurface) => void`                                   | Mendaftarkan fallback `layout-surface` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                            |
+| `registerType`        | `(type: UiLayoutType) => void`                                         | Mendaftarkan fallback `layout-type` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                               |
+| `registerAppearance`  | `(appearance: UiLayoutStyle) => void`                                  | Mendaftarkan fallback `layout-appearance` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                         |
+| `registerStyle`       | `(style: UiLayoutStyle) => void`                                       | Alias kompatibilitas untuk `registerAppearance(...)`.                                                                                                                                                     |
+| `registerWidth`       | `(width: UiLayoutWidth) => void`                                       | Mendaftarkan fallback `layout-width` ke local storage hanya jika storage belum memiliki nilai valid. Jika sudah ada nilai valid, service tetap memakai nilai yang tersimpan.                              |
+| `registerDefaults`    | `(defaults: { surface?, appearance?, type?, width? }) => this`         | Mendaftarkan beberapa fallback sekaligus. Ini adalah API yang direkomendasikan untuk page-level default karena consumer cukup memanggil satu method dan tetap menghormati nilai storage yang sudah valid. |
+| `setSurface`          | `(surface: UiLayoutSurface, options?: { persist?: boolean }) => void`  | Menulis surface ke signal. Secara default juga menulis `localStorage`, tetapi consumer dapat memakai `persist: false` untuk override sementara.                                                           |
+| `setType`             | `(type: UiLayoutType, options?: { persist?: boolean }) => void`        | Menulis type ke signal. Secara default juga menulis `localStorage`, tetapi consumer dapat memakai `persist: false` untuk override sementara.                                                              |
+| `setAppearance`       | `(appearance: UiLayoutStyle, options?: { persist?: boolean }) => void` | Menulis appearance ke signal. Secara default juga menulis `layout-appearance`, tetapi consumer dapat memakai `persist: false` untuk override sementara.                                                   |
+| `setStyle`            | `(style: UiLayoutStyle, options?: { persist?: boolean }) => void`      | Alias kompatibilitas untuk `setAppearance(...)`, termasuk opsi `persist`.                                                                                                                                 |
+| `setWidth`            | `(width: UiLayoutWidth, options?: { persist?: boolean }) => void`      | Menulis width ke signal. Secara default juga menulis `localStorage`, tetapi consumer dapat memakai `persist: false` untuk override sementara.                                                             |
+| `getStoredSurface`    | `() => UiLayoutSurface`                                                | Membaca surface yang valid dari storage atau default.                                                                                                                                                     |
+| `getStoredType`       | `() => UiLayoutType`                                                   | Membaca type yang valid dari storage atau default.                                                                                                                                                        |
+| `getStoredAppearance` | `() => UiLayoutStyle`                                                  | Membaca appearance yang valid dari storage atau default.                                                                                                                                                  |
+| `getStoredStyle`      | `() => UiLayoutStyle`                                                  | Alias kompatibilitas untuk `getStoredAppearance()`.                                                                                                                                                       |
+| `getStoredWidth`      | `() => UiLayoutWidth`                                                  | Membaca width yang valid dari storage atau default.                                                                                                                                                       |
 
 Persistence behavior:
 
 - Storage key: `layout-surface`, `layout-type`, `layout-appearance`, dan `layout-width`.
 - Default value: `flat`, `vertical`, `flat`, dan `full`.
 - `registerDefaults(...)` adalah API yang direkomendasikan untuk menetapkan default per halaman tanpa menimpa nilai valid yang sudah tersimpan sebelumnya.
+- Manual template input pada `ui-layout` dan variant layout yang dirender consumer hanya mengubah state aktif; keduanya tidak lagi menulis `localStorage`.
 - Method `registerSurface(...)`, `registerType(...)`, `registerAppearance(...)`, dan `registerWidth(...)` tetap tersedia bila consumer memang perlu registrasi yang lebih granular.
 - Legacy storage key `layout-style` masih dibaca untuk kompatibilitas dan akan dibersihkan ketika appearance ditulis ulang ke `layout-appearance`.
 - Aman untuk SSR karena hanya mengakses `localStorage` saat runtime browser tersedia.
@@ -408,20 +425,20 @@ Seluruh symbol berikut diekspor dari `@edsis/ui/layout/types`.
 
 | Symbol                 | Nilai                                                                                                     |
 | ---------------------- | --------------------------------------------------------------------------------------------------------- |
-| `UiLayoutType`         | `vertical`, `horizontal`, `empty`                                                                         |
+| `UiLayoutType`         | `vertical`, `horizontal`, `empty`, `fluid`                                                                |
 | `UiLayoutSurface`      | `flat`, `grid`, `honeycome`, `line-vertical`, `line-horizontal`                                           |
 | `UiLayoutStyle`        | `flat`, `border-rail`                                                                                     |
-| `UiLayoutWidth`        | `full`, `wide`, `container`                                                                               |
+| `UiLayoutWidth`        | `full`, `wide`, `container`, `fluid`                                                                      |
 | `UiLayoutContextValue` | Objekt berbentuk `{ surface, type, appearance, style, width }` yang masing-masing berupa readonly signal. |
 
 ### Constants
 
 | Symbol                             | Nilai                                                               |
 | ---------------------------------- | ------------------------------------------------------------------- |
-| `UI_LAYOUT_TYPES`                  | `['vertical', 'horizontal', 'empty']`                               |
+| `UI_LAYOUT_TYPES`                  | `['vertical', 'horizontal', 'empty', 'fluid']`                      |
 | `UI_LAYOUT_SURFACES`               | `['flat', 'grid', 'honeycome', 'line-vertical', 'line-horizontal']` |
 | `UI_LAYOUT_STYLES`                 | `['flat', 'border-rail']`                                           |
-| `UI_LAYOUT_WIDTHS`                 | `['full', 'wide', 'container']`                                     |
+| `UI_LAYOUT_WIDTHS`                 | `['full', 'wide', 'container', 'fluid']`                            |
 | `UI_LAYOUT_DEFAULT_SURFACE`        | `'flat'`                                                            |
 | `UI_LAYOUT_DEFAULT_TYPE`           | `'vertical'`                                                        |
 | `UI_LAYOUT_DEFAULT_STYLE`          | `'flat'`                                                            |

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@edsis/ui",
-  "version": "21.3.6",
+  "version": "21.3.8",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/edsis/angular.git"

package/page/README.md

@@ -18,16 +18,96 @@ Primitive page shell untuk layout halaman dengan pendekatan nested component.
 - `stacked`
 - `side`
 
+## Scroll Modes
+
+- `content` (default): hanya `ui-page-content` yang menjadi area scroll. Pada variant `side`, `ui-page-side` dan `ui-page-content` sama-sama stretch ke parent dan masing-masing punya scroll sendiri.
+- `page`: seluruh isi `ui-page` menjadi area scroll. Header, content, footer, dan pada variant `side` juga `ui-page-side` akan mengikuti tinggi content induk tanpa scroll internal.
+
+## Height Modes
+
+- `auto` (default): tinggi `ui-page-header` dan `ui-page-footer` mengikuti isi.
+- `fix`: `ui-page-header` dan `ui-page-footer` dipaksa `h-12` dan `overflow-hidden`, sehingga isi yang melebihi tinggi tersebut akan terpotong.
+
+## Behavior Summary
+
+| Variant   | `scroll="content"`                                                                        | `scroll="page"`                                                                           |
+| --------- | ----------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------- |
+| `stacked` | `ui-page-content` stretch ke tinggi yang tersedia dan menjadi area scroll                 | seluruh `ui-page` scroll bersama; header, content, footer ikut satu kanvas                |
+| `side`    | `ui-page-side` dan `ui-page-content` sama-sama stretch ke parent dan punya scroll sendiri | `ui-page-side` dan `ui-page-content` mengikuti tinggi content induk tanpa scroll internal |
+
+## Header And Footer Height
+
+Saat memakai `height="fix"`, slot berikut tidak boleh melebihi tinggi tetap yang disediakan:
+
+- `ui-page-header`: `h-12` dengan `overflow-hidden`
+- `ui-page-footer`: `h-12` dengan `overflow-hidden`
+
 ## Side Modes
 
 - `sticky`
 - `drawer`
 - `overlay`
 
-## Example
+## Examples
+
+### Stacked with content scroll
+
+```html
+<ui-page variant="stacked">
+  <ui-page-header>
+    <h1>Executive summary</h1>
+  </ui-page-header>
+
+  <ui-page-content>
+    <p>Secara default, slot content yang menjadi area scroll.</p>
+  </ui-page-content>
+
+  <ui-page-footer>
+    <button type="button">Save</button>
+  </ui-page-footer>
+</ui-page>
+```
+
+### Stacked with fixed header and footer height
 
 ```html
-<ui-page variant="side" position="left">
+<ui-page variant="stacked" height="fix">
+  <ui-page-header>
+    <div class="h-20">Bagian ini akan terpotong ke tinggi h-12.</div>
+  </ui-page-header>
+
+  <ui-page-content>
+    <p>Content tetap mengikuti mode scroll yang aktif.</p>
+  </ui-page-content>
+
+  <ui-page-footer>
+    <div class="h-20">Footer juga tidak boleh melebihi h-12.</div>
+  </ui-page-footer>
+</ui-page>
+```
+
+### Stacked with page scroll
+
+```html
+<ui-page variant="stacked" scroll="page">
+  <ui-page-header>
+    <h1>Executive summary</h1>
+  </ui-page-header>
+
+  <ui-page-content>
+    <p>Semua area di dalam page ikut scroll bersama.</p>
+  </ui-page-content>
+
+  <ui-page-footer>
+    <button type="button">Save</button>
+  </ui-page-footer>
+</ui-page>
+```
+
+### Side with content scroll
+
+```html
+<ui-page variant="side" position="left" scroll="content">
   <ui-page-header>
     <ui-page-side-toggle ariaLabel="Toggle side">
       <span>Open filters</span>
@@ -35,12 +115,30 @@ Primitive page shell untuk layout halaman dengan pendekatan nested component.
     <h1>Page title</h1>
   </ui-page-header>
 
-  <ui-page-side mode="overlay">
-    <p>Filters</p>
+  <ui-page-side mode="sticky">
+    <p>Side rail scroll sendiri.</p>
+  </ui-page-side>
+
+  <ui-page-content>
+    <p>Main content juga scroll sendiri.</p>
+  </ui-page-content>
+</ui-page>
+```
+
+### Side with page scroll
+
+```html
+<ui-page variant="side" position="left" scroll="page">
+  <ui-page-header>
+    <h1>Executive detail</h1>
+  </ui-page-header>
+
+  <ui-page-side mode="sticky">
+    <p>Side mengikuti tinggi content induk.</p>
   </ui-page-side>
 
   <ui-page-content>
-    <p>Main content</p>
+    <p>Root `ui-page` yang menjadi area scroll tunggal.</p>
   </ui-page-content>
 </ui-page>
 ```

package/types/edsis-ui-editor.d.ts

@@ -114,6 +114,7 @@ declare class EditorContentComponent implements AfterViewInit, OnDestroy, Contro
     protected handleBlur(): void;
     protected handleKeydown(event: KeyboardEvent): void;
     private exec;
+    private highlightColor;
     private syncEmptyState;
     private shortcutCommand;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<EditorContentComponent, never>;

package/types/edsis-ui-layout.d.ts

@@ -2,10 +2,10 @@ import * as _angular_core from '@angular/core';
 import { Signal } from '@angular/core';
 import { UiNavComponent } from '@edsis/ui/nav';
 
-declare const UI_LAYOUT_TYPES: readonly ["vertical", "horizontal", "empty"];
+declare const UI_LAYOUT_TYPES: readonly ["vertical", "horizontal", "empty", "fluid"];
 declare const UI_LAYOUT_SURFACES: readonly ["flat", "grid", "honeycome", "line-vertical", "line-horizontal"];
 declare const UI_LAYOUT_STYLES: readonly ["flat", "border-rail"];
-declare const UI_LAYOUT_WIDTHS: readonly ["full", "wide", "container"];
+declare const UI_LAYOUT_WIDTHS: readonly ["full", "wide", "container", "fluid"];
 type UiLayoutType = (typeof UI_LAYOUT_TYPES)[number];
 type UiLayoutSurface = (typeof UI_LAYOUT_SURFACES)[number];
 type UiLayoutStyle = (typeof UI_LAYOUT_STYLES)[number];
@@ -31,6 +31,9 @@ declare function isUiLayoutType(value: string | null): value is UiLayoutType;
 declare function isUiLayoutStyle(value: string | null): value is UiLayoutStyle;
 declare function isUiLayoutWidth(value: string | null): value is UiLayoutWidth;
 
+interface LayoutMutationOptions {
+    persist?: boolean;
+}
 declare class LayoutService {
     private readonly platformId;
     private readonly surfaceState;
@@ -38,10 +41,10 @@ declare class LayoutService {
     private readonly styleState;
     private readonly widthState;
     readonly surface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
-    readonly type: _angular_core.Signal<"vertical" | "horizontal" | "empty">;
+    readonly type: _angular_core.Signal<"vertical" | "horizontal" | "empty" | "fluid">;
     readonly appearance: _angular_core.Signal<"flat" | "border-rail">;
     readonly style: _angular_core.Signal<"flat" | "border-rail">;
-    readonly width: _angular_core.Signal<"full" | "wide" | "container">;
+    readonly width: _angular_core.Signal<"fluid" | "full" | "wide" | "container">;
     registerDefaults(defaults: {
         surface?: UiLayoutSurface;
         appearance?: UiLayoutStyle;
@@ -53,11 +56,11 @@ declare class LayoutService {
     registerAppearance(appearance: UiLayoutStyle): void;
     registerStyle(style: UiLayoutStyle): void;
     registerWidth(width: UiLayoutWidth): void;
-    setSurface(surface: UiLayoutSurface): void;
-    setType(type: UiLayoutType): void;
-    setAppearance(appearance: UiLayoutStyle): void;
-    setStyle(style: UiLayoutStyle): void;
-    setWidth(width: UiLayoutWidth): void;
+    setSurface(surface: UiLayoutSurface, options?: LayoutMutationOptions): void;
+    setType(type: UiLayoutType, options?: LayoutMutationOptions): void;
+    setAppearance(appearance: UiLayoutStyle, options?: LayoutMutationOptions): void;
+    setStyle(style: UiLayoutStyle, options?: LayoutMutationOptions): void;
+    setWidth(width: UiLayoutWidth, options?: LayoutMutationOptions): void;
     getStoredSurface(): UiLayoutSurface;
     getStoredType(): UiLayoutType;
     getStoredAppearance(): UiLayoutStyle;
@@ -78,24 +81,26 @@ declare class UiLayoutComponent {
     readonly surface: _angular_core.InputSignal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal" | null>;
     readonly appearance: _angular_core.InputSignal<"flat" | "border-rail" | null>;
     readonly layoutStyleAttribute: _angular_core.InputSignal<"flat" | "border-rail" | null>;
-    readonly width: _angular_core.InputSignal<"full" | "wide" | "container" | null>;
+    readonly width: _angular_core.InputSignal<"fluid" | "full" | "wide" | "container" | null>;
     readonly class: _angular_core.InputSignal<string>;
     protected readonly appearanceInput: _angular_core.Signal<"flat" | "border-rail" | null>;
     protected readonly resolvedSurface: _angular_core.Signal<"flat" | "grid" | "honeycome" | "line-vertical" | "line-horizontal">;
     protected readonly resolvedAppearance: _angular_core.Signal<"flat" | "border-rail">;
     protected readonly resolvedStyle: _angular_core.Signal<"flat" | "border-rail">;
-    protected readonly resolvedWidth: _angular_core.Signal<"full" | "wide" | "container">;
+    protected readonly resolvedWidth: _angular_core.Signal<"fluid" | "full" | "wide" | "container">;
     protected readonly isBorderRail: _angular_core.Signal<boolean>;
+    protected readonly isFluidFrame: _angular_core.Signal<boolean>;
     protected readonly showsHorizontalInsetRails: _angular_core.Signal<boolean>;
-    protected readonly railPaddingClasses: _angular_core.Signal<string>;
+    protected readonly frameStageClasses: _angular_core.Signal<string>;
     protected readonly railAnchorClasses: _angular_core.Signal<string>;
     protected readonly contentShellClasses: _angular_core.Signal<string>;
     protected readonly hostClasses: _angular_core.Signal<string>;
     protected readonly frameClasses: _angular_core.Signal<string>;
+    protected readonly frameLayerClasses: _angular_core.Signal<string>;
     constructor();
     private surfaceClasses;
-    private widthClasses;
-    private frameWidthClasses;
+    private widthPaddingClasses;
+    private frameSizeClasses;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiLayoutComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLayoutComponent, "ui-layout", never, { "surface": { "alias": "surface"; "required": false; "isSignal": true; }; "appearance": { "alias": "appearance"; "required": false; "isSignal": true; }; "layoutStyleAttribute": { "alias": "layout-style"; "required": false; "isSignal": true; }; "width": { "alias": "width"; "required": false; "isSignal": true; }; "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
@@ -127,6 +132,15 @@ declare class UiLayoutEmptyComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLayoutEmptyComponent, "ui-layout-empty", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
+declare class UiLayoutFluidComponent {
+    private readonly layout;
+    readonly class: _angular_core.InputSignal<string>;
+    protected readonly classes: _angular_core.Signal<string>;
+    constructor();
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiLayoutFluidComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLayoutFluidComponent, "ui-layout-fluid", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
 declare class UiLayoutNavComponent {
     protected readonly layout: LayoutService;
     protected readonly projectedNav: _angular_core.Signal<UiNavComponent | undefined>;
@@ -149,5 +163,5 @@ declare class UiLayoutContentComponent {
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiLayoutContentComponent, "ui-layout-content", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { LayoutService, UI_LAYOUT_APPEARANCE_STORAGE_KEY, UI_LAYOUT_DEFAULT_STYLE, UI_LAYOUT_DEFAULT_SURFACE, UI_LAYOUT_DEFAULT_TYPE, UI_LAYOUT_DEFAULT_WIDTH, UI_LAYOUT_STYLES, UI_LAYOUT_STYLE_STORAGE_KEY, UI_LAYOUT_SURFACES, UI_LAYOUT_SURFACE_STORAGE_KEY, UI_LAYOUT_TYPES, UI_LAYOUT_TYPE_STORAGE_KEY, UI_LAYOUT_WIDTHS, UI_LAYOUT_WIDTH_STORAGE_KEY, UiLayoutComponent, UiLayoutContentComponent, UiLayoutEmptyComponent, UiLayoutHorizontalComponent, UiLayoutNavComponent, UiLayoutVerticalComponent, isUiLayoutStyle, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth };
+export { LayoutService, UI_LAYOUT_APPEARANCE_STORAGE_KEY, UI_LAYOUT_DEFAULT_STYLE, UI_LAYOUT_DEFAULT_SURFACE, UI_LAYOUT_DEFAULT_TYPE, UI_LAYOUT_DEFAULT_WIDTH, UI_LAYOUT_STYLES, UI_LAYOUT_STYLE_STORAGE_KEY, UI_LAYOUT_SURFACES, UI_LAYOUT_SURFACE_STORAGE_KEY, UI_LAYOUT_TYPES, UI_LAYOUT_TYPE_STORAGE_KEY, UI_LAYOUT_WIDTHS, UI_LAYOUT_WIDTH_STORAGE_KEY, UiLayoutComponent, UiLayoutContentComponent, UiLayoutEmptyComponent, UiLayoutFluidComponent, UiLayoutHorizontalComponent, UiLayoutNavComponent, UiLayoutVerticalComponent, isUiLayoutStyle, isUiLayoutSurface, isUiLayoutType, isUiLayoutWidth };
 export type { UiLayoutContextValue, UiLayoutStyle, UiLayoutSurface, UiLayoutType, UiLayoutWidth };

package/types/edsis-ui-page.d.ts

@@ -3,19 +3,29 @@ import * as _angular_core from '@angular/core';
 declare const UI_PAGE_VARIANTS: readonly ["stacked", "side"];
 declare const UI_PAGE_SIDE_POSITIONS: readonly ["left", "right"];
 declare const UI_PAGE_SIDE_MODES: readonly ["sticky", "drawer", "overlay"];
+declare const UI_PAGE_SCROLL_VALUES: readonly ["content", "page"];
+declare const UI_PAGE_HEIGHT_VALUES: readonly ["auto", "fix"];
 type UiPageVariant = (typeof UI_PAGE_VARIANTS)[number];
 type UiPageSidePosition = (typeof UI_PAGE_SIDE_POSITIONS)[number];
 type UiPageSideMode = (typeof UI_PAGE_SIDE_MODES)[number];
+type UiPageScroll = (typeof UI_PAGE_SCROLL_VALUES)[number];
+type UiPageHeight = (typeof UI_PAGE_HEIGHT_VALUES)[number];
 declare const UI_PAGE_DEFAULT_VARIANT: UiPageVariant;
 declare const UI_PAGE_DEFAULT_SIDE_POSITION: UiPageSidePosition;
 declare const UI_PAGE_DEFAULT_SIDE_MODE: UiPageSideMode;
+declare const UI_PAGE_DEFAULT_SCROLL: UiPageScroll;
+declare const UI_PAGE_DEFAULT_HEIGHT: UiPageHeight;
 declare const UI_PAGE_DEFAULT_SIDE_WIDTH = "16rem";
 declare function isUiPageVariant(value: string | null): value is UiPageVariant;
 declare function isUiPageSidePosition(value: string | null): value is UiPageSidePosition;
 declare function isUiPageSideMode(value: string | null): value is UiPageSideMode;
+declare function isUiPageScroll(value: string | null): value is UiPageScroll;
+declare function isUiPageHeight(value: string | null): value is UiPageHeight;
 
 declare class UiPageStateService {
     private readonly variantState;
+    private readonly heightState;
+    private readonly scrollState;
     private readonly positionState;
     private readonly sideModeState;
     private readonly internalSideOpenState;
@@ -25,6 +35,8 @@ declare class UiPageStateService {
     private readonly sideOpenRequestState;
     private readonly sideOpenRequestVersionState;
     readonly variant: _angular_core.Signal<"stacked" | "side">;
+    readonly height: _angular_core.Signal<"auto" | "fix">;
+    readonly scroll: _angular_core.Signal<"content" | "page">;
     readonly position: _angular_core.Signal<"left" | "right">;
     readonly sideMode: _angular_core.Signal<"sticky" | "drawer" | "overlay">;
     readonly sideWidth: _angular_core.Signal<string>;
@@ -36,6 +48,8 @@ declare class UiPageStateService {
     readonly isSideVisible: _angular_core.Signal<boolean>;
     registerRoot(config: {
         variant: UiPageVariant;
+        height: UiPageHeight;
+        scroll: UiPageScroll;
         position: UiPageSidePosition;
         sideMode: UiPageSideMode;
         sideWidth: string;
@@ -71,6 +85,7 @@ declare class UiPageSideComponent {
     protected readonly isSticky: _angular_core.Signal<boolean>;
     protected readonly isDrawer: _angular_core.Signal<boolean>;
     protected readonly isOverlay: _angular_core.Signal<boolean>;
+    protected readonly resolvedScroll: _angular_core.Signal<"content" | "page">;
     protected readonly ariaHidden: _angular_core.Signal<"true" | null>;
     protected readonly classes: _angular_core.Signal<string>;
     constructor();
@@ -82,6 +97,8 @@ declare class UiPageComponent {
     protected readonly page: UiPageStateService;
     protected readonly projectedSide: _angular_core.Signal<UiPageSideComponent | undefined>;
     readonly variant: _angular_core.InputSignal<"stacked" | "side">;
+    readonly height: _angular_core.InputSignal<"auto" | "fix">;
+    readonly scroll: _angular_core.InputSignal<"content" | "page">;
     readonly position: _angular_core.InputSignal<"left" | "right">;
     readonly sideMode: _angular_core.InputSignal<"sticky" | "drawer" | "overlay">;
     readonly sideOpen: _angular_core.InputSignal<boolean | null>;
@@ -99,7 +116,7 @@ declare class UiPageComponent {
     constructor();
     protected handleBackdropClick(): void;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<UiPageComponent, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageComponent, "ui-page", never, { "variant": { "alias": "variant"; "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"], ["ui-page-header", "ui-page-side-toggle", "ui-page-side", "ui-page-content", "ui-page-footer"], true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageComponent, "ui-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"], ["ui-page-header", "ui-page-side-toggle", "ui-page-side", "ui-page-content", "ui-page-footer"], true, never>;
 }
 
 declare class UiPageSideToggleComponent {
@@ -115,23 +132,29 @@ declare class UiPageSideToggleComponent {
 }
 
 declare class UiPageHeaderComponent {
+    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<UiPageHeaderComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageHeaderComponent, "ui-page-header", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class UiPageContentComponent {
+    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<UiPageContentComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageContentComponent, "ui-page-content", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 declare class UiPageFooterComponent {
+    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<UiPageFooterComponent, never>;
     static ɵcmp: _angular_core.ɵɵComponentDeclaration<UiPageFooterComponent, "ui-page-footer", never, { "class": { "alias": "class"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
 }
 
-export { UI_PAGE_DEFAULT_SIDE_MODE, UI_PAGE_DEFAULT_SIDE_POSITION, UI_PAGE_DEFAULT_SIDE_WIDTH, UI_PAGE_DEFAULT_VARIANT, UI_PAGE_SIDE_MODES, UI_PAGE_SIDE_POSITIONS, UI_PAGE_VARIANTS, UiPageComponent, UiPageContentComponent, UiPageFooterComponent, UiPageHeaderComponent, UiPageSideComponent, UiPageSideToggleComponent, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
-export type { UiPageSideMode, UiPageSidePosition, UiPageVariant };
+export { UI_PAGE_DEFAULT_HEIGHT, UI_PAGE_DEFAULT_SCROLL, UI_PAGE_DEFAULT_SIDE_MODE, UI_PAGE_DEFAULT_SIDE_POSITION, UI_PAGE_DEFAULT_SIDE_WIDTH, UI_PAGE_DEFAULT_VARIANT, UI_PAGE_HEIGHT_VALUES, UI_PAGE_SCROLL_VALUES, UI_PAGE_SIDE_MODES, UI_PAGE_SIDE_POSITIONS, UI_PAGE_VARIANTS, UiPageComponent, UiPageContentComponent, UiPageFooterComponent, UiPageHeaderComponent, UiPageSideComponent, UiPageSideToggleComponent, isUiPageHeight, isUiPageScroll, isUiPageSideMode, isUiPageSidePosition, isUiPageVariant };
+export type { UiPageHeight, UiPageScroll, UiPageSideMode, UiPageSidePosition, UiPageVariant };

package/types/edsis-ui-theme.d.ts

@@ -4,9 +4,11 @@ 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"];
+type ThemeBrand = string;
 type ThemeMode = (typeof THEME_MODES)[number];
 type ResolvedThemeMode = (typeof RESOLVED_THEME_MODES)[number];
 type ThemeSeason = (typeof THEME_SEASONS)[number];
+declare const DEFAULT_THEME_BRAND: ThemeBrand;
 declare const DEFAULT_THEME_MODE: ThemeMode;
 declare const DEFAULT_THEME_SEASON: ThemeSeason;
 declare const THEME_MODE_STORAGE_KEY = "theme-mode";
@@ -15,9 +17,11 @@ declare function isThemeMode(value: string | null | undefined): value is ThemeMo
 declare function isResolvedThemeMode(value: string | null | undefined): value is ResolvedThemeMode;
 declare function isThemeSeason(value: string | null | undefined): value is ThemeSeason;
 declare function normalizeThemeMode(value: string | null | undefined): ThemeMode;
+declare function normalizeThemeBrand(value: string | null | undefined): ThemeBrand;
 declare function normalizeThemeSeason(value: string | null | undefined): ThemeSeason;
 
 interface UiThemeOptions {
+    readonly brand?: ThemeBrand;
     readonly mode?: ThemeMode;
     readonly season?: ThemeSeason;
 }
@@ -67,5 +71,5 @@ declare class ThemeSeasonService {
     static ɵprov: _angular_core.ɵɵInjectableDeclaration<ThemeSeasonService>;
 }
 
-export { DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, UI_THEME_OPTIONS, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
-export type { ResolvedThemeMode, ThemeMode, ThemeSeason, UiThemeOptions };
+export { DEFAULT_THEME_BRAND, DEFAULT_THEME_MODE, DEFAULT_THEME_SEASON, RESOLVED_THEME_MODES, THEME_MODES, THEME_MODE_STORAGE_KEY, THEME_SEASONS, THEME_SEASON_STORAGE_KEY, ThemeModeService, ThemeSeasonService, UI_THEME_OPTIONS, isResolvedThemeMode, isThemeMode, isThemeSeason, normalizeThemeBrand, normalizeThemeMode, normalizeThemeSeason, provideUiTheme };
+export type { ResolvedThemeMode, ThemeBrand, ThemeMode, ThemeSeason, UiThemeOptions };