@ojiepermana/angular-theme 22.0.35 → 22.0.41

package/README.md

@@ -1,8 +1,8 @@
 # @ojiepermana/angular-theme
 
 Theme layer for the `@ojiepermana/angular` design system: a runtime provider
-(mode / season), design tokens, and the Tailwind v4 CSS that the components are
-styled against.
+(mode / color / neutral / brand), design tokens, and the Tailwind v4 CSS that the
+components are styled against.
 
 ```bash
 bun add @ojiepermana/angular-theme
@@ -11,13 +11,13 @@ bun add @ojiepermana/angular-theme
 
 ## Entry points
 
-| Import path                              | Contents                                      |
-| ---------------------------------------- | --------------------------------------------- |
-| `@ojiepermana/angular-theme/styles`      | `provideUiTheme`, `ThemeModeService`, …       |
-| `@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 (seasonal themes, 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 (CSS)                                                                                         |
+| `@ojiepermana/angular-theme/styles/css/*` | Raw CSS assets (color + neutral palettes, Tailwind map)                                                                      |
 
 ## Tailwind v4 setup
 
@@ -26,9 +26,9 @@ stylesheet:
 
 ```css
 /* styles.css */
-@import '@ojiepermana/angular-theme/theme.css';                              /* base tokens + component styles */
+@import '@ojiepermana/angular-theme/styles/css/index.css';            /* base + all color + neutral palettes */
 @import 'tailwindcss';
-@import '@ojiepermana/angular-theme/styles/css/seasonal/base/tailwind.css';  /* maps tokens → bg-primary, text-foreground, rounded-md, … */
+@import '@ojiepermana/angular-theme/styles/css/base/tailwind.css';    /* maps tokens → bg-primary, bg-brand, text-foreground, … */
 ```
 
 Requires Tailwind CSS `^4.3.0`.
@@ -39,20 +39,52 @@ Requires Tailwind CSS `^4.3.0`.
 import { provideUiTheme } from '@ojiepermana/angular-theme/styles';
 
 export const appConfig = {
-  providers: [provideUiTheme({ mode: 'light', season: 'base' })],
+  providers: [
+    provideUiTheme({
+      mode: 'light',
+      color: 'base', // accent palette (base, red…rose, brand)
+      neutral: 'base', // gray family (base, slate, gray, zinc, …)
+      radius: 'md', // corner radius preset (none, sm, md, lg, xl, full)
+      space: 'normal', // spacing density preset (compact, normal, relaxed, spacious)
+      brand: { color: '221 83% 53%', foreground: '0 0% 100%' }, // consumer brand
+    }),
+  ],
 };
 ```
 
-- `mode` — bootstraps `ThemeModeService` and persists the default mode.
-- `season` — bootstraps `ThemeSeasonService` and persists the default season.
-- `seasonalCssUrl` — resolver to lazy-load a season's CSS at runtime instead of
-  bundling every season up front.
-
-### Seasonal themes
-
-`theme.css` bundles only the **base** tokens/components (`index.css`). Seasonal
-variants live under `styles/css/seasonal/<season>/package.css` and can be imported
-manually, or loaded at runtime via the `seasonalCssUrl` option of `provideUiTheme`.
+- `mode` — bootstraps `ThemeModeService` and persists the default mode (`light` / `dark` / `system`).
+- `color` — bootstraps `ThemeColorService`; initial accent palette (`<html theme-color>`).
+- `neutral` — initial neutral family (`<html theme-neutral>`); composes with any accent.
+- `radius` — bootstraps `ThemeRadiusService`; initial corner-radius preset (`<html theme-radius>`).
+  Drives the single `--radius-base` knob so the whole `--radius-*` scale and `rounded-*`
+  utilities follow. Values: `none`, `sm`, `md` (default), `lg`, `xl`, `full`.
+- `space` — bootstraps `ThemeSpaceService`; initial spacing-density preset (`<html theme-space>`).
+  Drives the single `--spacing-base` knob so every `p-*` / `m-*` / `gap-*` / `w-*` / `h-*`
+  utility follows. Values: `compact`, `normal` (default), `relaxed`, `spacious`.
+- `brand` — bootstraps `ThemeBrandService`; sets `--brand` / `bg-brand` and the
+  `theme-color='brand'` accent preset. Accepts an HSL triplet string (`'221 83% 53%'`)
+  or `{ color, foreground }`. Settable at runtime via `setBrand()`.
+
+A persisted choice (localStorage `theme-color` / `theme-neutral` / `theme-radius` /
+`theme-space` / `theme-brand`) always wins over the configured default.
+
+### Color system (FluxUI-style)
+
+Four independent axes switch at runtime via attribute selectors on `<html>`:
+
+- **accent** (`theme-color`) — `base` (core), `red … rose`, and `brand`. Each
+  re-tints the full palette. `base` = no override.
+- **neutral** (`theme-neutral`) — `base` (core), `slate`, `gray`, `zinc`, `neutral`,
+  `stone`, `mauve`, `olive`, `mist`, `taupe`. Overrides only the gray family and is
+  layered after accent so it wins the shared neutral tokens — letting you pair any
+  accent with any neutral.
+- **radius** (`theme-radius`) — `none`, `sm`, `md` (default), `lg`, `xl`, `full`.
+  Sets the `--radius-base` knob; the full `--radius-*` scale and `rounded-*` utilities follow.
+- **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.
 
 ### Material Symbols icons (opt-in)
 

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

@@ -1,8 +1,9 @@
 import * as i0 from '@angular/core';
-import { input, booleanAttribute, Component, computed } from '@angular/core';
+import { signal, Service, input, booleanAttribute, Component, computed, inject, effect } from '@angular/core';
 import { NavigationHeaderInitialComponent, NavigationHeaderTitleComponent, NavigationFooterActionComponent, NavigationFooterInitialComponent, NavigationFooterTitleComponent, NavigationSidebarComponent, NavigationHeaderComponent, NavigationFooterComponent, NavigationDockbarComponent, NavigationNavbarComponent, NavigationFlyoutComponent, NavigationContainerComponent } from '@ojiepermana/angular-navigation';
 import { IconComponent } from '@ojiepermana/angular-component/icon';
 import { NgTemplateOutlet } from '@angular/common';
+import { cn } from '@ojiepermana/angular-component/utils';
 import { LayoutComponent, LayoutVerticalComponent, LayoutHorizontalComponent, LayoutEmptyComponent, LayoutFluidComponent, LayoutNavigationComponent, LayoutContentComponent } from '@ojiepermana/angular-theme/layout';
 import { LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_WIDTH, LAYOUT_DEFAULT_TYPE } from '@ojiepermana/angular-theme/layout/types';
 
@@ -11,6 +12,31 @@ import { LAYOUT_DEFAULT_SURFACE, LAYOUT_DEFAULT_APPEARANCE, LAYOUT_DEFAULT_WIDTH
  * strukturnya; nilai konkret (brand/user) disediakan consumer sebagai input.
  */
 
+/**
+ * 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.
+ */
+class LayoutIdentityService {
+    brandState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "brandState" }] : /* istanbul ignore next */ []));
+    userState = signal(null, /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "userState" }] : /* istanbul ignore next */ []));
+    brand = this.brandState.asReadonly();
+    user = this.userState.asReadonly();
+    setBrand(brand) {
+        this.brandState.set(brand);
+    }
+    setUser(user) {
+        this.userState.set(user);
+    }
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutIdentityService, deps: [], target: i0.ɵɵFactoryTarget.Service });
+    static ɵprov = i0.ɵɵngDeclareService({ minVersion: "22.0.0", version: "22.0.3", ngImport: i0, type: LayoutIdentityService });
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutIdentityService, decorators: [{
+            type: Service
+        }] });
+
 /**
  * Slot brand untuk `<NavigationHeader>`: inisial/logo + judul. Murni input-driven.
  *
@@ -129,19 +155,27 @@ class LayoutNavSidebar {
     ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
     user = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
-    /** Appearance dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     appearance = input('flat', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
-    shellClass = computed(() => this.appearance() === 'flat' ? 'border-r-[1.5px] border-border' : '', /* @ts-ignore */
+    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 */
     ...(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 */
+    ...(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 */
+    ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavSidebar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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: `
     <NavigationSidebar nav-sidebar-collapse [class]="shellClass()">
-      <NavigationHeader>
+      <NavigationHeader [class]="headerClass()">
         <LayoutBrand [brand]="brand()" />
       </NavigationHeader>
-      <NavigationFooter class="px-3">
+      <NavigationFooter [class]="footerClass()">
         <LayoutUser [user]="user()" detailed />
       </NavigationFooter>
     </NavigationSidebar>
@@ -161,10 +195,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     host: { class: 'contents' },
                     template: `
     <NavigationSidebar nav-sidebar-collapse [class]="shellClass()">
-      <NavigationHeader>
+      <NavigationHeader [class]="headerClass()">
         <LayoutBrand [brand]="brand()" />
       </NavigationHeader>
-      <NavigationFooter class="px-3">
+      <NavigationFooter [class]="footerClass()">
         <LayoutUser [user]="user()" detailed />
       </NavigationFooter>
     </NavigationSidebar>
@@ -181,19 +215,27 @@ class LayoutNavDockbar {
     ...(ngDevMode ? [{ debugName: "brand" }] : /* istanbul ignore next */ []));
     user = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
-    /** Appearance dari shell (`[appearance]`); `flat` menambahkan border kanan pemisah konten. */
+    /** Appearance dari shell (`[appearance]`); menentukan ketebalan border pemisah. */
     appearance = input('flat', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "appearance" }] : /* istanbul ignore next */ []));
-    /** `flat` → border kanan; selaras border bawah navbar (`border-[1.5px] border-border`). */
-    shellClass = computed(() => this.appearance() === 'flat' ? 'border-r-[1.5px] border-border' : '', /* @ts-ignore */
+    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 */
     ...(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 */
+    ...(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 */
+    ...(ngDevMode ? [{ debugName: "footerClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutNavDockbar, deps: [], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "22.0.3", 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: `
     <NavigationDockbar [class]="shellClass()">
-      <NavigationHeader>
+      <NavigationHeader [class]="headerClass()">
         <LayoutBrand [brand]="brand()" compact />
       </NavigationHeader>
-      <NavigationFooter class="px-3">
+      <NavigationFooter [class]="footerClass()">
         <LayoutUser [user]="user()" />
       </NavigationFooter>
     </NavigationDockbar>
@@ -213,10 +255,10 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
                     host: { class: 'contents' },
                     template: `
     <NavigationDockbar [class]="shellClass()">
-      <NavigationHeader>
+      <NavigationHeader [class]="headerClass()">
         <LayoutBrand [brand]="brand()" compact />
       </NavigationHeader>
-      <NavigationFooter class="px-3">
+      <NavigationFooter [class]="footerClass()">
         <LayoutUser [user]="user()" />
       </NavigationFooter>
     </NavigationDockbar>
@@ -406,6 +448,18 @@ class LayoutWrapperDefault {
     /** Identitas user. */
     user = input.required(/* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []));
+    identity = inject(LayoutIdentityService);
+    constructor() {
+        // Publikasikan identitas ke registry agar surface lain (mis. apps-launcher di `Page`)
+        // menampilkan brand/user yang sama dengan flyout nav.
+        effect(() => this.identity.setBrand(this.brand()));
+        effect(() => this.identity.setUser(this.user()));
+    }
+    /**
+     * Kelas `<LayoutContent>` yang diatur consumer (mis. padding). Default kosong —
+     * library tidak lagi memaksa `p-6`; consumer/`<Page>` yang menentukan spacing.
+     */
+    contentClassInput = input('', { ...(ngDevMode ? { debugName: "contentClassInput" } : /* istanbul ignore next */ {}), alias: 'content-class' });
     /** Wrapper layout & nilai `<Layout [layout-type]>`: navbar/flyout = horizontal, sisanya vertical. */
     effectiveLayoutType = computed(() => {
         const layoutType = this.layoutType();
@@ -424,11 +478,11 @@ class LayoutWrapperDefault {
     /** Lebar host `<Navigation>`: penuh-tinggi (vertical) atau penuh-lebar (horizontal). */
     navClass = computed(() => this.effectiveLayoutType() === 'horizontal' ? 'w-full' : 'h-full', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "navClass" }] : /* istanbul ignore next */ []));
-    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; selain itu padding biasa. */
-    contentClass = computed(() => this.effectiveLayoutType() === 'fluid' ? 'w-full max-w-3xl p-6' : 'p-6', /* @ts-ignore */
+    /** Kelas `<LayoutContent>`: `fluid` membatasi lebar & memusatkan; padding diserahkan ke consumer. */
+    contentClass = computed(() => cn(this.effectiveLayoutType() === 'fluid' ? 'w-full max-w-3xl' : '', this.contentClassInput()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "contentClass" }] : /* istanbul ignore next */ []));
     static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.3", ngImport: i0, type: LayoutWrapperDefault, deps: [], target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutWrapperDefault, isStandalone: true, selector: "LayoutWrapperDefault", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, navType: { classPropertyName: "navType", publicName: "nav-type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "22.0.3", type: LayoutWrapperDefault, isStandalone: true, selector: "LayoutWrapperDefault", inputs: { surface: { classPropertyName: "surface", publicName: "surface", isSignal: true, isRequired: false, transformFunction: null }, appearance: { classPropertyName: "appearance", publicName: "layout-appearance", isSignal: true, isRequired: false, transformFunction: null }, width: { classPropertyName: "width", publicName: "width", isSignal: true, isRequired: false, transformFunction: null }, layoutType: { classPropertyName: "layoutType", publicName: "layout-type", isSignal: true, isRequired: false, transformFunction: null }, navType: { classPropertyName: "navType", publicName: "nav-type", isSignal: true, isRequired: false, transformFunction: null }, data: { classPropertyName: "data", publicName: "data", isSignal: true, isRequired: true, transformFunction: null }, brand: { classPropertyName: "brand", publicName: "brand", isSignal: true, isRequired: true, transformFunction: null }, user: { classPropertyName: "user", publicName: "user", isSignal: true, isRequired: true, transformFunction: null }, contentClassInput: { classPropertyName: "contentClassInput", publicName: "content-class", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "contents" }, ngImport: i0, template: `
     <Layout
       [surface]="surface()"
       [layout-appearance]="appearance()"
@@ -571,7 +625,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
     </Layout>
   `,
                 }]
-        }], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-appearance", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], layoutType: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-type", required: false }] }], navType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }] } });
+        }], ctorParameters: () => [], propDecorators: { surface: [{ type: i0.Input, args: [{ isSignal: true, alias: "surface", required: false }] }], appearance: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-appearance", required: false }] }], width: [{ type: i0.Input, args: [{ isSignal: true, alias: "width", required: false }] }], layoutType: [{ type: i0.Input, args: [{ isSignal: true, alias: "layout-type", required: false }] }], navType: [{ type: i0.Input, args: [{ isSignal: true, alias: "nav-type", required: false }] }], data: [{ type: i0.Input, args: [{ isSignal: true, alias: "data", required: true }] }], brand: [{ type: i0.Input, args: [{ isSignal: true, alias: "brand", required: true }] }], user: [{ type: i0.Input, args: [{ isSignal: true, alias: "user", required: true }] }], contentClassInput: [{ type: i0.Input, args: [{ isSignal: true, alias: "content-class", required: false }] }] } });
 
 /*
  * Public API of @ojiepermana/angular-theme/layout/wrapper
@@ -586,4 +640,4 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.3", ngImpor
  * Generated bundle index. Do not edit.
  */
 
-export { LayoutBrand, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };
+export { LayoutBrand, LayoutIdentityService, LayoutNavDockbar, LayoutNavFlyout, LayoutNavMinimal, LayoutNavNavbar, LayoutNavSidebar, LayoutUser, LayoutWrapperDefault };

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

@@ -116,6 +116,8 @@ class LayoutComponent {
     ...(ngDevMode ? [{ debugName: "isBorderRail" }] : /* istanbul ignore next */ []));
     isFluidFrame = computed(() => this.resolvedWidth() === 'fluid' && this.resolvedType() === 'fluid', /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "isFluidFrame" }] : /* istanbul ignore next */ []));
+    isFullFlat = computed(() => this.resolvedWidth() === 'full' && !this.isBorderRail(), /* @ts-ignore */
+    ...(ngDevMode ? [{ debugName: "isFullFlat" }] : /* istanbul ignore next */ []));
     showsInsetRails = computed(() => {
         const layoutType = this.resolvedType();
         return this.isBorderRail() && (layoutType === 'horizontal' || layoutType === 'vertical');
@@ -129,7 +131,15 @@ class LayoutComponent {
     ...(ngDevMode ? [{ debugName: "contentShellClasses" }] : /* istanbul ignore next */ []));
     hostClasses = computed(() => cn('relative isolate h-dvh w-full min-w-0 box-border overflow-hidden text-foreground', this.isFluidFrame() ? 'grid place-items-center' : 'block', this.surfaceClasses(), this.widthPaddingClasses(), this.class()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []));
-    frameClasses = computed(() => cn('relative min-h-0 min-w-0 border-border bg-background/55 backdrop-blur-xs', this.frameSizeClasses(), this.isBorderRail() ? 'overflow-visible border-[1.5px]' : 'overflow-hidden border'), /* @ts-ignore */
+    frameClasses = computed(() => cn('relative min-h-0 min-w-0 border-border bg-background/55 backdrop-blur-xs', this.frameSizeClasses(), 
+    // flat: the outer frame rounds with the active theme-radius
+    // (--layout-frame-radius → --radius-lg → --radius-base). border-rail keeps
+    // square corners for its grid-rail aesthetic.
+    this.isBorderRail()
+        ? 'overflow-visible border-[1.5px]'
+        : this.isFullFlat()
+            ? 'overflow-hidden'
+            : 'overflow-hidden border rounded-[var(--layout-frame-radius)]'), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "frameClasses" }] : /* istanbul ignore next */ []));
     frameLayerClasses = computed(() => cn('col-start-1 row-start-1', this.frameClasses()), /* @ts-ignore */
     ...(ngDevMode ? [{ debugName: "frameLayerClasses" }] : /* istanbul ignore next */ []));
@@ -180,6 +190,8 @@ class LayoutComponent {
         }
     }
     widthPaddingClasses() {
+        if (this.isFullFlat())
+            return '';
         switch (this.resolvedWidth()) {
             case 'wide':
                 return 'p-4 lg:p-12';
@@ -188,7 +200,7 @@ class LayoutComponent {
             case 'fluid':
                 return 'p-4 sm:p-6 lg:p-8';
             default:
-                return 'p-4';
+                return 'p-4'; // full + border-rail
         }
     }
     frameSizeClasses() {