@ojiepermana/angular 22.2.0 → 22.2.2

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

@@ -3,6 +3,8 @@ import { Component, booleanAttribute, computed, inject, input } from "@angular/c
 import { cn } from "@ojiepermana/angular/component/utils/core";
 import { SHELL_WINDOW_BRIDGE, ShellService, ShellService as ShellService$1, WEB_SHELL_WINDOW_BRIDGE, createTauriShellWindowBridge, isTauriRuntime, provideShellWindowBridge, provideTauriShellWindowBridge } from "@ojiepermana/angular/theme/shell/services";
 import { SHELL_COLORS, SHELL_COLOR_STORAGE_KEY, SHELL_DEFAULT_COLOR, SHELL_DEFAULT_COLOR as SHELL_DEFAULT_COLOR$1, SHELL_DEFAULT_DEVICE, SHELL_DEFAULT_DEVICE as SHELL_DEFAULT_DEVICE$1, SHELL_DEFAULT_FRAME, SHELL_DEFAULT_FRAME as SHELL_DEFAULT_FRAME$1, SHELL_DEFAULT_MODE, SHELL_DEFAULT_PLATFORM, SHELL_DEFAULT_WINDOW_STATE, SHELL_DEVICES, SHELL_DEVICE_STORAGE_KEY, SHELL_FRAMES, SHELL_FRAME_STORAGE_KEY, SHELL_MODES, SHELL_MODE_DEVICES, SHELL_MODE_STORAGE_KEY, SHELL_PLATFORMS, SHELL_WINDOW_STATES, defaultShellDeviceForMode, isShellColor, isShellDevice, isShellDeviceForMode, isShellFrame, isShellMode, isShellPlatform, isShellWindowState, normalizeShellColor, normalizeShellDevice, normalizeShellFrame, normalizeShellMode, resolveShellDeviceForMode, resolveShellDeviceForMode as resolveShellDeviceForMode$1, resolveShellFrameForMode, resolveShellFrameForMode as resolveShellFrameForMode$1, shellDevicesForMode } from "@ojiepermana/angular/theme/shell/types";
+import { LucideGrip } from "@lucide/angular";
+import { provideIcons } from "@ojiepermana/angular/component/icon";
 import { NavigationContainerComponent, NavigationFlyoutComponent, NavigationFooterComponent, NavigationHeaderComponent } from "@ojiepermana/angular/navigation";
 import { NAVIGATION_ADAPTER } from "@ojiepermana/angular/navigation/core";
 import { LayoutService } from "@ojiepermana/angular/theme/layout/services";
@@ -13,7 +15,7 @@ var ShellNavigationFlyoutComponent = class ShellNavigationFlyoutComponent {
 	layout = inject(LayoutService, { optional: true });
 	identity = inject(LayoutIdentityService, { optional: true });
 	enabled = input(true, ...ngDevMode ? [{ debugName: "enabled" }] : /* istanbul ignore next */ []);
-	icon = input("apps", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
+	icon = input("grip", ...ngDevMode ? [{ debugName: "icon" }] : /* istanbul ignore next */ []);
 	label = input("Open navigation", ...ngDevMode ? [{ debugName: "label" }] : /* istanbul ignore next */ []);
 	navigationId = `__shell-navigation-${shellNavigationFlyoutInstanceId += 1}`;
 	navigationSource = this.navigation.data(LAYOUT_DESKTOP_NAVIGATION_DATA_ID);
@@ -24,7 +26,7 @@ var ShellNavigationFlyoutComponent = class ShellNavigationFlyoutComponent {
 	user = computed(() => this.identity?.user() ?? null, ...ngDevMode ? [{ debugName: "user" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ShellNavigationFlyoutComponent,
 		deps: [],
@@ -32,7 +34,7 @@ var ShellNavigationFlyoutComponent = class ShellNavigationFlyoutComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ShellNavigationFlyoutComponent,
 		isStandalone: true,
 		selector: "ShellNavigationFlyout",
@@ -64,6 +66,7 @@ var ShellNavigationFlyoutComponent = class ShellNavigationFlyoutComponent {
 			styleAttribute: "--nav-flyout-floating-width: 100vw; --nav-flyout-floating-max-width: 100vw; --nav-flyout-floating-radius: 0 0 var(--shell-frame-radius) var(--shell-frame-radius);",
 			classAttribute: "contents"
 		},
+		providers: [provideIcons(LucideGrip)],
 		ngImport: i0,
 		template: `
     @if (showsFlyout()) {
@@ -174,13 +177,14 @@ var ShellNavigationFlyoutComponent = class ShellNavigationFlyoutComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ShellNavigationFlyoutComponent,
 	decorators: [{
 		type: Component,
 		args: [{
 			selector: "ShellNavigationFlyout",
+			providers: [provideIcons(LucideGrip)],
 			imports: [
 				NavigationContainerComponent,
 				NavigationFlyoutComponent,
@@ -279,7 +283,7 @@ var ShellBarComponent = class ShellBarComponent {
 	restoreLabel = input("Restore window", ...ngDevMode ? [{ debugName: "restoreLabel" }] : /* istanbul ignore next */ []);
 	closeLabel = input("Close window", ...ngDevMode ? [{ debugName: "closeLabel" }] : /* istanbul ignore next */ []);
 	navigationFlyout = input(true, ...ngDevMode ? [{ debugName: "navigationFlyout" }] : /* istanbul ignore next */ []);
-	navigationFlyoutIcon = input("apps", ...ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []);
+	navigationFlyoutIcon = input("grip", ...ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []);
 	navigationFlyoutLabel = input("Open navigation", ...ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []);
 	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
 	maximizeToggleLabel = computed(() => this.shell.isMaximized() ? this.restoreLabel() : this.maximizeLabel(), ...ngDevMode ? [{ debugName: "maximizeToggleLabel" }] : /* istanbul ignore next */ []);
@@ -310,7 +314,7 @@ var ShellBarComponent = class ShellBarComponent {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ShellBarComponent,
 		deps: [],
@@ -318,7 +322,7 @@ var ShellBarComponent = class ShellBarComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ShellBarComponent,
 		isStandalone: true,
 		selector: "ShellBar",
@@ -615,7 +619,7 @@ var ShellBarComponent = class ShellBarComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ShellBarComponent,
 	decorators: [{
@@ -943,7 +947,7 @@ var ShellComponent = class ShellComponent {
 		...ngDevMode ? { debugName: "navigationFlyout" } : /* istanbul ignore next */ {},
 		transform: booleanAttribute
 	});
-	navigationFlyoutIcon = input("apps", ...ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []);
+	navigationFlyoutIcon = input("grip", ...ngDevMode ? [{ debugName: "navigationFlyoutIcon" }] : /* istanbul ignore next */ []);
 	navigationFlyoutLabel = input("Open navigation", ...ngDevMode ? [{ debugName: "navigationFlyoutLabel" }] : /* istanbul ignore next */ []);
 	class = input("", ...ngDevMode ? [{ debugName: "class" }] : /* istanbul ignore next */ []);
 	resolvedMode = computed(() => this.mode() ?? this.shell.mode(), ...ngDevMode ? [{ debugName: "resolvedMode" }] : /* istanbul ignore next */ []);
@@ -954,7 +958,7 @@ var ShellComponent = class ShellComponent {
 	hostClasses = computed(() => cn("relative isolate flex h-dvh w-full min-w-0 flex-col overflow-hidden text-foreground", this.showsBar() && this.drag() && "shell-drag-region", this.resolvedColor() === "sync" || this.resolvedFrame() === "modern" ? "bg-[hsl(var(--shell-bar-background))]" : "bg-layout-canvas", this.class()), ...ngDevMode ? [{ debugName: "hostClasses" }] : /* istanbul ignore next */ []);
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ShellComponent,
 		deps: [],
@@ -962,7 +966,7 @@ var ShellComponent = class ShellComponent {
 	});
 	static ɵcmp = i0.ɵɵngDeclareComponent({
 		minVersion: "17.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		type: ShellComponent,
 		isStandalone: true,
 		selector: "Shell",
@@ -1155,7 +1159,7 @@ var ShellComponent = class ShellComponent {
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ShellComponent,
 	decorators: [{

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

@@ -1,6 +1,6 @@
-import { DOCUMENT, isPlatformBrowser } from "@angular/common";
+import { DOCUMENT } from "@angular/common";
 import * as i0 from "@angular/core";
-import { DestroyRef, InjectionToken, PLATFORM_ID, Service, computed, effect, inject, makeEnvironmentProviders, provideEnvironmentInitializer, signal } from "@angular/core";
+import { DestroyRef, InjectionToken, Service, computed, effect, inject, makeEnvironmentProviders, provideEnvironmentInitializer, signal } from "@angular/core";
 import { documentLocalStorage } from "@ojiepermana/angular/component/utils/core";
 function persistedSignal(options) {
 	const documentRef = options.documentRef !== void 0 ? options.documentRef : inject(DOCUMENT, { optional: true });
@@ -374,7 +374,7 @@ var ThemeBrandService = class ThemeBrandService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeBrandService,
 		deps: [],
@@ -382,14 +382,14 @@ var ThemeBrandService = class ThemeBrandService {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeBrandService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ThemeBrandService,
 	decorators: [{ type: Service }],
@@ -419,7 +419,7 @@ var ThemeColorService = class ThemeColorService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeColorService,
 		deps: [],
@@ -427,14 +427,14 @@ var ThemeColorService = class ThemeColorService {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeColorService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ThemeColorService,
 	decorators: [{ type: Service }]
@@ -460,7 +460,7 @@ var ThemeModeService = class ThemeModeService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeModeService,
 		deps: [],
@@ -468,14 +468,14 @@ var ThemeModeService = class ThemeModeService {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeModeService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ThemeModeService,
 	decorators: [{ type: Service }]
@@ -503,7 +503,7 @@ var ThemeRadiusService = class ThemeRadiusService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeRadiusService,
 		deps: [],
@@ -511,14 +511,14 @@ var ThemeRadiusService = class ThemeRadiusService {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeRadiusService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ThemeRadiusService,
 	decorators: [{ type: Service }]
@@ -537,7 +537,7 @@ var ThemeSpaceService = class ThemeSpaceService {
 	}
 	static ɵfac = i0.ɵɵngDeclareFactory({
 		minVersion: "12.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeSpaceService,
 		deps: [],
@@ -545,27 +545,23 @@ var ThemeSpaceService = class ThemeSpaceService {
 	});
 	static ɵprov = i0.ɵɵngDeclareService({
 		minVersion: "22.0.0",
-		version: "22.2.0",
+		version: "22.2.3",
 		ngImport: i0,
 		type: ThemeSpaceService
 	});
 };
 i0.ɵɵngDeclareClassMetadata({
 	minVersion: "12.0.0",
-	version: "22.2.0",
+	version: "22.2.3",
 	ngImport: i0,
 	type: ThemeSpaceService,
 	decorators: [{ type: Service }]
 });
-const MATERIAL_SYMBOLS_FONT_ATTR = "data-icon-font";
-const MATERIAL_SYMBOLS_FONT_ID = "material-symbols";
-const MATERIAL_SYMBOLS_FONT_HREF = "https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD@20..48,100..700,0..1,-50..200&display=block";
 function provideUiTheme(options = {}) {
 	return makeEnvironmentProviders([{
 		provide: THEME_OPTIONS,
 		useValue: options
 	}, provideEnvironmentInitializer(() => {
-		if (options.icons?.materialSymbols === true) loadMaterialSymbolsStylesheet();
 		inject(ThemeModeService);
 		inject(ThemeColorService);
 		inject(ThemeBrandService);
@@ -573,16 +569,4 @@ function provideUiTheme(options = {}) {
 		inject(ThemeSpaceService);
 	})]);
 }
-function loadMaterialSymbolsStylesheet() {
-	const documentRef = inject(DOCUMENT, { optional: true });
-	const platformId = inject(PLATFORM_ID);
-	const head = documentRef?.head;
-	if (!isPlatformBrowser(platformId) || !head) return;
-	if (head.querySelector(`link[${MATERIAL_SYMBOLS_FONT_ATTR}="${MATERIAL_SYMBOLS_FONT_ID}"]`)) return;
-	const link = head.ownerDocument.createElement("link");
-	link.rel = "stylesheet";
-	link.href = MATERIAL_SYMBOLS_FONT_HREF;
-	link.setAttribute(MATERIAL_SYMBOLS_FONT_ATTR, MATERIAL_SYMBOLS_FONT_ID);
-	head.appendChild(link);
-}
 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, htmlAttributeEffect, htmlStylePropertyEffect, isResolvedThemeMode, isThemeColor, isThemeMode, isThemeNeutral, isThemeRadius, isThemeSpace, normalizeThemeColor, normalizeThemeMode, normalizeThemeNeutral, normalizeThemeRadius, normalizeThemeSpace, persistedHtmlAttributeSignal, persistedSignal, prefersDarkSignal, provideUiTheme };

package/navigation/README.md

@@ -5,7 +5,7 @@
 ```ts
 import {
   NavigationContainerComponent,
-  NavigationSidebarComponent, // type: NavigationDockbar/Navbar/FlyoutComponent
+  NavigationSidebarComponent, // type: NavigationDockbar/Minidock/Navbar/FlyoutComponent
   NavigationHeaderComponent,
   NavigationContentComponent,
   NavigationFooterComponent,
@@ -44,17 +44,17 @@ const items: NavigationItem[] = [
 </Navigation>
 ```
 
-Type dipilih lewat komponen anak deklaratif — `NavigationSidebar`, `NavigationDockbar`, `NavigationNavbar`, atau `NavigationFlyout` — satu type hidup per `<Navigation>`. Di dalam type, `NavigationHeader` dan `NavigationFooter` opsional, sedangkan `NavigationContent` selalu dirender (otomatis dibuat bila tidak diproyeksikan).
+Type dipilih lewat komponen anak deklaratif (`NavigationSidebar`, `NavigationDockbar`, `NavigationMinidock`, `NavigationNavbar`, atau `NavigationFlyout`), satu type hidup per `<Navigation>`. Di dalam type, `NavigationHeader` dan `NavigationFooter` opsional, sedangkan `NavigationContent` selalu dirender (otomatis dibuat bila tidak diproyeksikan).
 
 ## API Notes
 
 - `data` is the source of navigation data.
-- Type is declared by the child component: `NavigationSidebar`/`NavigationDockbar` (vertical), `NavigationNavbar`/`NavigationFlyout` (horizontal). Orientation is implied by the type child.
+- Type is declared by the child component: `NavigationSidebar`/`NavigationDockbar`/`NavigationMinidock` (vertical), `NavigationNavbar`/`NavigationFlyout` (horizontal). Orientation is implied by the type child.
 - `id` identifies a navigation instance so multiple navs can keep distinct service state.
 - `data-id` optionally publishes the input data under a different registry id. This lets a
   mobile mirror use isolated state (`id="main-mobile"`) while exposing the same data contract
   as the desktop navigation (`data-id="main"`).
-- `position` on `NavigationSidebar`/`NavigationDockbar` accepts `left` or `right` (vertical).
+- `position` on `NavigationSidebar`/`NavigationDockbar`/`NavigationMinidock` accepts `left` or `right` (vertical).
 - `collapsed` on `NavigationSidebar` controls the icon-only sidebar state.
 - `mode` on `NavigationDockbar` accepts `sticky` or `drawer`.
 - `dockbar-route-context` on `NavigationDockbar` opts into Router-aware header, rail deduplication,
@@ -64,7 +64,7 @@ Type dipilih lewat komponen anak deklaratif — `NavigationSidebar`, `Navigation
   `NavigationItem.badge.source` or route `data.navigationBadge`.
 - `ariaLabel` overrides the host navigation label and defaults to `Primary navigation`.
 - `label` on `NavigationFlyout` sets the single trigger label and defaults to `Menu`.
-- `icon` on `NavigationFlyout` renders a Material Symbols icon on the trigger; `icon-position` (`start`/`end`) sets its placement and `icon-only` hides the label visually while keeping it as the accessible name (compact mode is always icon-only and falls back to the `menu` icon).
+- `icon` on `NavigationFlyout` renders a Lucide icon on the trigger (the name must be registered with `provideIcons()`); `icon-position` (`start`/`end`) sets its placement and `icon-only` hides the label visually while keeping it as the accessible name (compact mode is always icon-only and falls back to the `menu` icon).
 - `nav-position` on `NavigationNavbar`/`NavigationFlyout` accepts `top` (default) or `bottom`. With `bottom`, the navbar grid panel opens upward with squared bottom corners, and the flyout panel anchors to the container's bottom edge with the tab row docked at the bottom — seamless for bars placed below the content.
 - `nav-appearance` on `NavigationNavbar`/`NavigationFlyout` accepts `flat` or `border-rail` (same vocabulary as the layout's `layout-appearance`). `border-rail` squares the panel (no rounding), frames entry icons with dimmed blueprint-style rail lines plus dashed center cross lines (instead of rounded boxes), renders the nested-collapse rail dashed, and replaces hover/active backgrounds with primary-colored text. `flat` keeps the current visuals.
 - The `navbar` type renders root items inline immediately; clicking a group (hover does not open it) opens a full-width grid panel below the bar with the same flyout-style entries, responsive columns, and nested collapse. Root group triggers intentionally render without a chevron; open state remains available through the trigger styling and `aria-expanded`.
@@ -109,19 +109,20 @@ Inputs pada `<Navigation>` (container):
 
 Inputs pada komponen type:
 
-| Component           | API                     | Type                                              | Notes                                                                         |
-| ------------------- | ----------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------- |
-| `NavigationSidebar` | `position`              | `left \| right \| null`                           | Side the rail docks to.                                                       |
-| `NavigationSidebar` | `collapsed`             | `boolean \| null`                                 | Controls collapsed vertical sidebar state.                                    |
-| `NavigationSidebar` | `nav-sidebar-collapse`  | `boolean`                                         | Enables hover-driven preview expansion on collapsed sidebars.                 |
-| `NavigationSidebar` | `previewExpanded`       | `boolean`                                         | Forces a collapsed sidebar to render expanded for preview.                    |
-| `NavigationDockbar` | `mode`                  | `sticky \| drawer \| null`                        | Docked aside beside the rail, or overlay drawer.                              |
-| `NavigationDockbar` | `position`              | `left \| right \| null`                           | Side the rail docks to.                                                       |
-| `NavigationDockbar` | `dockbar-route-context` | `boolean \| NavigationDockbarRouteConfig \| null` | Opt-in Router context and optional overrides.                                 |
-| `NavigationDockbar` | `dockbar-badge`         | `NavigationBadgeContext`                          | Reactive badge sources keyed by item or route metadata.                       |
-| `NavigationNavbar`  | `nav-appearance`        | `flat \| border-rail`                             | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
-| `NavigationFlyout`  | `label`                 | `string`                                          | Trigger label. Defaults to `Menu`.                                            |
-| `NavigationFlyout`  | `nav-appearance`        | `flat \| border-rail`                             | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
+| Component            | API                     | Type                                              | Notes                                                                         |
+| -------------------- | ----------------------- | ------------------------------------------------- | ----------------------------------------------------------------------------- |
+| `NavigationSidebar`  | `position`              | `left \| right \| null`                           | Side the rail docks to.                                                       |
+| `NavigationSidebar`  | `collapsed`             | `boolean \| null`                                 | Controls collapsed vertical sidebar state.                                    |
+| `NavigationSidebar`  | `nav-sidebar-collapse`  | `boolean`                                         | Enables hover-driven preview expansion on collapsed sidebars.                 |
+| `NavigationSidebar`  | `previewExpanded`       | `boolean`                                         | Forces a collapsed sidebar to render expanded for preview.                    |
+| `NavigationDockbar`  | `mode`                  | `sticky \| drawer \| null`                        | Docked aside beside the rail, or overlay drawer.                              |
+| `NavigationDockbar`  | `position`              | `left \| right \| null`                           | Side the rail docks to.                                                       |
+| `NavigationDockbar`  | `dockbar-route-context` | `boolean \| NavigationDockbarRouteConfig \| null` | Opt-in Router context and optional overrides.                                 |
+| `NavigationDockbar`  | `dockbar-badge`         | `NavigationBadgeContext`                          | Reactive badge sources keyed by item or route metadata.                       |
+| `NavigationMinidock` | `position`              | `left \| right \| null`                           | Side the rail docks to. The separating border is set through `class`.         |
+| `NavigationNavbar`   | `nav-appearance`        | `flat \| border-rail`                             | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
+| `NavigationFlyout`   | `label`                 | `string`                                          | Trigger label. Defaults to `Menu`.                                            |
+| `NavigationFlyout`   | `nav-appearance`        | `flat \| border-rail`                             | Style variant. `border-rail` = squared panel, dashed icon rails, no hover bg. |
 
 Semua type juga menerima `class` untuk kelas tambahan pada elemen shell-nya.
 
@@ -149,6 +150,56 @@ Semua type juga menerima `class` untuk kelas tambahan pada elemen shell-nya.
 | `columns`                                                            | `number`                                                                                     | Column count for `mega` style items.                                                                                        |
 | `children`                                                           | `readonly NavigationItem[]`                                                                  | Nested items. Trees can be deeper than one level.                                                                           |
 
+## Minidock
+
+`NavigationMinidock` is a permanent vertical icon rail. It renders exactly like a collapsed
+sidebar (`--layout-sidebar-collapsed-width`, `--nav-rail-item-size`, a tooltip per item, a two
+letter fallback for items without an icon), but it never expands: there is no `collapsed` input,
+no `nav-sidebar-collapse`, no hover or focus preview, no header toggle, and
+`NavigationService.toggleCollapsed()` does nothing for it. Its stored `nav-type-mode` is always
+`default`.
+
+```html
+<Navigation id="app-rail" [data]="items" class="h-full">
+  <NavigationMinidock class="border-r border-border" />
+</Navigation>
+```
+
+The data contract is strict. Minidock only accepts `basic`, `item`, or untyped items without
+children, plus `divider` and `spacer`. Any `group`, `collapsible`, `collapsable`, `mega`, or
+`aside` item, or any item with non empty `children` (hidden items included), throws an `Error`
+in development **and production**. The error reaches Angular's `ErrorHandler` and names the item
+index, its title, and the rejected type, for example
+`Item [2] "Component" bertipe "group".`
+
+Flatten grouped data with `toMinidockItems()` from `@ojiepermana/angular/navigation/types`.
+It is a pure function whose output always passes that check, and it is the safe path for data
+that comes from a backend:
+
+```ts
+import { toMinidockItems } from '@ojiepermana/angular/navigation/types';
+
+protected readonly railItems = computed(() => toMinidockItems(this.items()));
+```
+
+- Leaves are kept as the same object, unless a parent's `isHidden` has to be merged in.
+- `group` and `mega` (at any level) become a divider boundary and their content is flattened;
+  an empty group adds no divider.
+- `collapsible`, `collapsable`, and `aside` are dropped as parents; their children are lifted.
+- Leading, trailing, and repeated dividers are compacted; `spacer` survives only at the top level.
+- A leaf whose `id` repeats is kept once (first occurrence wins).
+- A lifted leaf is hidden when any of its parents is hidden, and a group's boundary divider hides
+  with that group.
+
+A `spacer` pushes every item after it to the bottom of the rail. `LayoutWrapperDefault` offers
+the type as `nav-type="minidock"` on a vertical layout: it renders `LayoutNavMinidock` with
+`toMinidockItems(data())` under the data id `main-minidock`, and keeps publishing the full
+`data()` under `main`.
+
+Adding `'minidock'` widens `NavigationVerticalType` (and so `NavigationType`). The change is
+additive, but a consumer `switch` that is exhaustive over `NavigationType` needs a `minidock`
+branch before it compiles again.
+
 ## Route-aware dockbar
 
 The feature is opt-in so existing dockbar, sidebar, navbar, and flyout consumers keep their
@@ -326,7 +377,7 @@ Any other navigation id, such as `erp-navbar`, only keeps its state in memory fo
 
 ## Icons
 
-Saat `item.icon` tersedia, `nav` akan merender Material Symbols secara default melalui `@ojiepermana/angular/component/icon`. Jalankan `provideUiTheme()` untuk preload global, atau biarkan `IconComponent` melakukan lazy-load saat icon pertama dipakai.
+Saat `item.icon` tersedia, `nav` merender ikon Lucide secara default melalui `@ojiepermana/angular/component/icon`. `item.icon` adalah nama kebab Lucide (misalnya `layout-dashboard`) dan harus didaftarkan lewat `provideIcons()` di aplikasi; ikon tetap milik komponen navigasi (toggle header, chevron, tombol tutup dockbar, ikon rute fallback `route`) didaftarkan oleh komponennya sendiri. Nama yang tidak terdaftar tidak merender ikon dan menulis satu warning di dev mode.
 
 ```html
 <Navigation [data]="items">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "22.2.0",
+  "version": "22.2.2",
   "description": "Accessible, tree-shakable Angular 22 design system from ojiepermana: UI components, charts, navigation shells, theme tokens, and an OpenAPI SDK generator.",
   "license": "MIT",
   "keywords": [
@@ -43,6 +43,7 @@
     "@angular/material": ">=22.2.0 <23.0.0",
     "@angular/platform-browser": ">=22.2.0 <23.0.0",
     "@angular/router": ">=22.2.0 <23.0.0",
+    "@lucide/angular": ">=1.61.0 <2.0.0",
     "rxjs": ">=7.8.0 <8.0.0"
   },
   "peerDependenciesMeta": {
@@ -502,5 +503,5 @@
   "module": "fesm2022/ojiepermana-angular.mjs",
   "typings": "types/ojiepermana-angular.d.ts",
   "type": "module",
-  "gitHead": "3b69b91d27302f5e63547b54b0a63e29386445db"
+  "gitHead": "915ddb2641dfdf3c3f256276f3c2eafd5ab31e64"
 }

package/theme/README.md

@@ -107,17 +107,11 @@ every accent and neutral palette, so switching needs no runtime CSS loading. The
 lightweight `theme.css` ships base only — import the axis files you need on top of
 it (or use `theme-full.css`) to enable runtime switching.
 
-### Material Symbols icons (opt-in)
+### Icons
 
-`provideUiTheme()` makes **no external network request by default**. To preload the
-Material Symbols font from Google Fonts:
-
-```ts
-provideUiTheme({ icons: { materialSymbols: true } });
-```
-
-Leave it off (the default) for privacy / offline / strict CSP, and self-host the
-font in your own stylesheet if you need it.
+`provideUiTheme()` makes **no external network request** and loads no icon font. Icons are
+Lucide SVGs registered with `provideIcons()` from `{{packageName}}/component/icon`; the theme
+only supplies the `--icon-size` and `--icon-stroke-width` tokens that `<Icon>` reads.
 
 ## Support and security
 

package/theme/page/README.md

@@ -76,6 +76,8 @@ Saat `Page` dirender di dalam layout `empty`, sebuah tombol icon-only tanpa bord
 
 Tombol hanya muncul ketika layout aktif `empty` dan nav target punya data. Di layout lain (`vertical`/`horizontal`/`fluid`) tombol tidak dirender karena navigasi utama sudah terlihat.
 
+Saat `LayoutWrapperDefault` memakai `nav-type="desktop"` dan layout `empty`, data navigasi diterbitkan ke `main` untuk launcher `Page`, bukan ke titlebar `Shell`. Hanya launcher di kanan `PageHeader` (atau di atas konten bila tanpa header) yang tampil. Item mini dock dan navigasinya tetap tersedia.
+
 | Input          | Type      | Default             | Keterangan                                                   |
 | -------------- | --------- | ------------------- | ------------------------------------------------------------ |
 | `appsLauncher` | `boolean` | `true`              | Aktif/nonaktifkan apps-launcher pada layout `empty`.         |

package/theme/shell/README.md

@@ -245,7 +245,11 @@ window-width popover:
 - Windows and Linux — before consumer `[shellBarStart]` content, at the far left
   opposite the window controls.
 
-The trigger is rendered only when desktop navigation data exists. It keeps a real
+The trigger is rendered only when desktop navigation data exists. On an `empty`
+layout, `LayoutWrapperDefault` publishes that data under `main` for the `Page`
+launcher instead, so the titlebar does not add a duplicate button. Other layouts
+keep their titlebar navigation, and minidock items remain independent.
+The trigger keeps a real
 button, `aria-haspopup="menu"`, an explicit accessible name, visible keyboard
 focus, and the established semantic shell/navigation tokens. Its surface stays
 transparent, including hover and open states, while the icon inherits the exact

package/theme/styles/README.md

@@ -33,19 +33,43 @@ export const appConfig = {
 - `brand` mem-bootstrap `ThemeBrandService`; set `--brand` / utility `bg-brand` dan preset
   accent `theme-color='brand'`. Menerima string HSL triplet atau `{ color, foreground }`.
   Bisa diubah runtime via `setBrand()`, persist di storage.
-- `icons.materialSymbols` mengontrol preload stylesheet Material Symbols pada bootstrap aplikasi.
 - Pilihan yang dipersist (`theme-color` / `theme-neutral` / `theme-radius` / `theme-space` /
   `theme-brand`) menang atas default.
 
 ## Default Behavior
 
-- Material Symbols **tidak** di-preload secara default (opt-in). Tanpa konfigurasi,
-  `provideUiTheme()` tidak melakukan request jaringan eksternal apa pun — ramah privasi,
-  offline, dan CSP.
-- Untuk mengaktifkan preload font dari Google Fonts, set `icons.materialSymbols` ke `true`,
-  atau self-host font Material Symbols dan `@import` sendiri di stylesheet Anda.
-- Jika memakai `@ojiepermana/angular/component/icon` tanpa provider tema, aktifkan
-  `provideMaterialSymbols()` dari entrypoint icon atau self-host stylesheet font sendiri.
+- `provideUiTheme()` tidak melakukan request jaringan eksternal apa pun dan tidak memuat font ikon:
+  ikon adalah SVG Lucide dari peer `@lucide/angular`, didaftarkan lewat `provideIcons()` dari
+  `@ojiepermana/angular/component/icon`. Tema hanya menyediakan token `--icon-size` (default `1.5rem`)
+  dan `--icon-stroke-width` (default `2`) yang dibaca komponen `<Icon>`.
+- Opsi `icons` di `provideUiTheme()` (`icons.materialSymbols`) sudah dihapus bersama Material Symbols;
+  hapus opsi itu dari konfigurasi Anda.
+
+## Font
+
+Token `--theme-font-sans` (`'Inter', …`) dan `--theme-font-mono` (`'JetBrains Mono', …`) hanya
+menamai font; tema tidak memuat file font apa pun dan paket tidak membawa biner font. Tanpa langkah
+di bawah, teks memakai font yang kebetulan terpasang di mesin pengunjung.
+
+Untuk memuatnya, impor lembar opsional setelah tema dan sajikan file woff2 dari origin Anda sendiri:
+
+```css
+@import '@ojiepermana/angular/theme/theme.css';
+@import '@ojiepermana/angular/theme/styles/css/fonts.css';
+```
+
+- `fonts.css` mendeklarasikan `@font-face` untuk `/fonts/inter/InterVariable.woff2` (dan varian
+  italic) serta `/fonts/jetbrains-mono/JetBrainsMono-{Regular,Medium,Bold}.woff2`, semuanya
+  `font-display: swap`. Ambil file dari rilis resmi [Inter](https://github.com/rsms/inter) dan
+  [JetBrains Mono](https://github.com/JetBrains/JetBrainsMono) (keduanya SIL OFL 1.1). Path lain?
+  Salin `fonts.css` dan ubah `url()`-nya.
+- Lembar itu juga menambahkan face `Inter Fallback` (Arial lokal dengan metrik Inter) ke
+  `--theme-font-sans`, sehingga pergantian ke Inter tidak menggeser layout.
+- Preload hanya file Inter tegak:
+  `<link rel="preload" href="/fonts/inter/InterVariable.woff2" as="font" type="font/woff2" crossorigin>`.
+  Browser hanya mengunduh face lain (italic, mono 500/700) saat halaman benar-benar memakainya.
+- Showcase memakai persis susunan ini (`apps/showcase/public/fonts/`), dan CSP `font-src 'self'`
+  sudah mengizinkannya.
 
 ## Token Semantik Status
 

package/theme/styles/css/base/components.css

@@ -91,6 +91,19 @@
     }
   }
 
+  /* Vestibular safety for every component, including the ones without their
+   * own motion-reduce variant: motion collapses to an instant state change. */
+  @media (prefers-reduced-motion: reduce) {
+    *,
+    *::before,
+    *::after {
+      animation-duration: 0.01ms !important;
+      animation-iteration-count: 1 !important;
+      transition-duration: 0.01ms !important;
+      scroll-behavior: auto !important;
+    }
+  }
+
   @media (pointer: coarse) {
     :where(
       button,
@@ -107,15 +120,6 @@
 }
 
 @layer components {
-  /* Icon family per appearance: Material Symbols Rounded is the default
-   * (IconComponent's own fallback); any border-rail scope — the layout axis
-   * (data-layout-appearance) or a navigation type-style (data-type-style) —
-   * swaps the inherited token to Sharp so every <Icon> inside follows. */
-  [data-layout-appearance='border-rail'],
-  [data-type-style='border-rail'] {
-    --icon-font-family: 'Material Symbols Sharp';
-  }
-
   .nav-text {
     font-family: var(--nav-font-family, var(--font-sans));
     font-size: var(--nav-text-size, var(--text-base));