@ojiepermana/angular 0.1.0 → 0.1.1

package/{theme/styles/layout → layout/src/component/horizontal}/horizontal.css

@@ -1,11 +1,11 @@
-horizontal[data-layout-mode='horizontal'] {
+:host {
   display: block;
   block-size: 100dvh;
   min-block-size: 100dvh;
   overflow: hidden;
 }
 
-horizontal[data-layout-mode='horizontal'] > layout {
+:host > layout {
   display: block;
   block-size: 100dvh;
   min-block-size: 100dvh;
@@ -16,7 +16,7 @@ horizontal[data-layout-mode='horizontal'] > layout {
   transition: var(--ngt-chrome-transition);
 }
 
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) {
+:host > layout > :is(content, shell-content) {
   display: flex;
   flex-direction: column;
   inline-size: min(100%, var(--layout-shell-max-width));
@@ -34,8 +34,9 @@ horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content)
   transition: var(--ngt-shell-transition);
 }
 
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
+:host > layout > :is(content, shell-content) > header {
   display: var(--layout-header-display);
+  grid-template-areas: 'brand navigation action';
   grid-template-columns: auto minmax(0, 1fr) auto;
   align-items: center;
   gap: 1rem;
@@ -47,32 +48,46 @@ horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content)
   transition: var(--ngt-chrome-transition);
 }
 
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > brand,
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > panel {
+:host > layout > :is(content, shell-content) > header > brand,
+:host > layout > :is(content, shell-content) > header > action {
   display: flex;
   min-inline-size: 0;
   align-items: center;
 }
 
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > brand {
+:host > layout > :is(content, shell-content) > header > brand {
+  grid-area: brand;
   justify-content: flex-start;
+  justify-self: start;
 }
 
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > nav {
+:host > layout > :is(content, shell-content) > header > navigation {
+  grid-area: navigation;
   display: flex;
+  inline-size: 100%;
   min-inline-size: 0;
   align-items: center;
+  justify-self: stretch;
   justify-content: center;
   gap: 0.75rem;
   flex-wrap: wrap;
 }
 
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > panel {
+:host > layout > :is(content, shell-content) > header > navigation > .layout-horizontal-navigation-slot {
+  flex: 0 1 auto;
+  display: block;
+  min-inline-size: 0;
+  max-inline-size: 100%;
+}
+
+:host > layout > :is(content, shell-content) > header > action {
+  grid-area: action;
   justify-content: flex-end;
+  justify-self: end;
   gap: 0.5rem;
 }
 
-horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > main {
+:host > layout > :is(content, shell-content) > main {
   flex: 1 1 auto;
   block-size: 100%;
   min-inline-size: 0;
@@ -87,23 +102,29 @@ horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content)
 }
 
 @media (max-width: 60rem) {
-  horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
+  :host > layout > :is(content, shell-content) > header {
+    grid-template-areas:
+      'brand action'
+      'navigation navigation';
     grid-template-columns: minmax(0, 1fr) auto;
     align-items: flex-start;
   }
 
-  horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > nav {
-    grid-column: 1 / -1;
-    justify-content: flex-start;
+  :host > layout > :is(content, shell-content) > header > navigation {
+    justify-content: center;
   }
 }
 
 @media (max-width: 40rem) {
-  horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header {
+  :host > layout > :is(content, shell-content) > header {
+    grid-template-areas:
+      'brand'
+      'navigation'
+      'action';
     grid-template-columns: 1fr;
   }
 
-  horizontal[data-layout-mode='horizontal'] > layout > :is(content, shell-content) > header > panel {
-    justify-content: flex-start;
+  :host > layout > :is(content, shell-content) > header > action {
+    justify-content: flex-end;
   }
 }

package/{theme/styles/layout → layout/src/component/vertical}/vertical.css

@@ -1,11 +1,11 @@
-vertical[data-layout-mode='vertical'] {
+:host {
   display: block;
   block-size: 100dvh;
   min-block-size: 100dvh;
   overflow: hidden;
 }
 
-vertical[data-layout-mode='vertical'] > layout {
+:host > layout {
   display: block;
   block-size: 100dvh;
   min-block-size: 100dvh;
@@ -16,7 +16,7 @@ vertical[data-layout-mode='vertical'] > layout {
   transition: var(--ngt-chrome-transition);
 }
 
-vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) {
+:host > layout > :is(content, shell-content) {
   display: flex;
   flex-direction: column;
   inline-size: min(100%, var(--layout-shell-max-width));
@@ -34,7 +34,7 @@ vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) {
   transition: var(--ngt-shell-transition);
 }
 
-vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > aside {
+:host > layout > :is(content, shell-content) > aside {
   display: var(--layout-sidebar-display);
   flex-direction: column;
   inline-size: 100%;
@@ -46,7 +46,7 @@ vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > a
   transition: var(--ngt-chrome-transition);
 }
 
-vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > main {
+:host > layout > :is(content, shell-content) > main {
   flex: 1 1 auto;
   block-size: 100%;
   min-inline-size: 0;
@@ -61,11 +61,11 @@ vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > m
 }
 
 @media (min-width: 48rem) {
-  vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) {
+  :host > layout > :is(content, shell-content) {
     flex-direction: row;
   }
 
-  vertical[data-layout-mode='vertical'] > layout > :is(content, shell-content) > aside {
+  :host > layout > :is(content, shell-content) > aside {
     flex: 0 0 var(--layout-sidebar-width);
     inline-size: var(--layout-sidebar-width);
     min-inline-size: var(--layout-sidebar-width);

package/{theme/styles/layout/index.css → layout/src/layout.css}

@@ -1,6 +1,3 @@
-@import './horizontal.css';
-@import './vertical.css';
-
 [data-layout-container='full'] {
   --layout-shell-max-width: 100%;
   --layout-shell-padding: 0rem;

package/navigation/README.md

@@ -4,9 +4,9 @@ Navigation for `@ojiepermana/angular` is split into three secondary entry points
 
 ## Entry Points
 
-- `@ojiepermana/angular/navigation` exposes the navigation item model, utility helpers, and `NavigationService`.
+- `@ojiepermana/angular/navigation` exposes the navigation item model, utility helpers, `NavigationService`, and `NavigationPreferencesService`.
 - `@ojiepermana/angular/navigation/vertical` exposes the vertical navigation container variants and vertical item components.
-- `@ojiepermana/angular/navigation/horizontal` exposes the horizontal navigation container and branch item component.
+- `@ojiepermana/angular/navigation/horizontal` exposes the horizontal navigation variants and branch item component.
 
 Do not import consumer code from `@ojiepermana/angular/internal` or from source file paths under this folder. Those paths are implementation details and are not part of the public contract.
 
@@ -16,6 +16,49 @@ Do not import consumer code from `@ojiepermana/angular/internal` or from source
 - Import `@ojiepermana/angular/styles/index.css` in the consuming application so the shared theme tokens are available.
 - Use Lucide icon names or aliases in `NavigationItem.icon`. The navigation components resolve icons through `@lucide/angular`.
 
+## Source Layout
+
+```text
+navigation/
+├── data/
+│   └── demo-navigation.data.ts
+├── state/
+│   ├── navigation.service.ts
+│   ├── navigation.type.ts
+│   └── navigation.utils.ts
+├── horizontal/
+│   ├── core/
+│   │   ├── horizontal-navigation.base.ts
+│   │   └── horizontal-navigation.shared.ts
+│   ├── default/
+│   │   ├── default.ts
+│   │   ├── default.css
+│   │   └── README.md
+│   ├── mega/
+│   │   ├── mega.ts
+│   │   ├── mega.css
+│   │   └── README.md
+│   └── types/
+│       ├── index.ts
+│       ├── branch.ts
+│       └── branch/
+│           ├── branch.ts
+│           └── README.md
+├── shared/
+│   ├── content/
+│   └── tree/
+└── vertical/
+  ├── core/
+  │   ├── vertical-navigation.base.ts
+  │   └── vertical-navigation.shared.ts
+  ├── default/
+  │   ├── default.ts
+  │   └── default.css
+  ├── collapsible/
+  │   └── collapsible.ts
+  └── types/
+```
+
 ## Quick Start
 
 ### 1. Define a navigation tree
@@ -83,9 +126,7 @@ export class ShellNavigationComponent {
 Vertical variants use these selectors:
 
 - `<vertical-navigation>` for the default width and density.
-- `<vertical-navigation-compact>` for a narrower layout.
-- `<vertical-navigation-dense>` for a denser layout.
-- `<vertical-navigation-thin>` for the thin icon-first layout.
+- `<vertical-navigation-collapsible>` for the upcoming collapsible variant contract. It currently reuses the default layout.
 
 All vertical variants share the same public API surface inherited from the base component, including `navigation`, `opened`, `mode`, `position`, `autoCollapse`, `inner`, `transparentOverlay`, and the `openedChanged` output.
 
@@ -115,6 +156,11 @@ export class TopNavigationComponent {
 }
 ```
 
+Horizontal variants use these selectors:
+
+- `<horizontal-navigation>` for the default horizontal layout.
+- `<horizontal-navigation-mega>` for a roomier mega-style horizontal layout.
+
 ### 4. Optionally mirror the tree into `NavigationService`
 
 `NavigationService` is useful when other parts of the application need lookup helpers, active item state, or expanded item state. Vertical navigation renders from its `navigation` input. Horizontal navigation renders from its `navigation` input first, and falls back to the service only when the input array is empty.
@@ -183,6 +229,45 @@ Mutation and lookup methods:
 - `expandItem()`, `collapseItem()`, `toggleItemExpanded()`, and `clearExpandedItems()`
 - `getNavigation()`, `getActiveItem()`, `getFlatNavigation()`, `getItem()`, and `getItemParent()`
 
+`activeItemId` and `expandedItemIds` now persist automatically through `NavigationPreferencesService`, while `NavigationService` stays focused on the navigation tree and lookup helpers.
+
+## Navigation Preferences Service
+
+`NavigationPreferencesService` is provided in root and stores persisted navigation preferences separately from the navigation tree itself.
+
+`provideNgNavigation()` configures the defaults that are used before any persisted browser state exists.
+
+Readonly state:
+
+- `horizontalVariant`
+- `verticalAppearance`
+- `activeItemId`
+- `expandedItemIds`
+
+Mutation methods:
+
+- `setHorizontalVariant()`
+- `setVerticalAppearance()`
+- `setActiveItem()` and `clearActiveItem()`
+- `setExpandedItemIds()`, `expandItem()`, `collapseItem()`, `toggleExpandedItem()`, and `clearExpandedItems()`
+- `syncWithNavigation()` and `reset()`
+
+Persisted flat localStorage keys:
+
+- `navigation-horizontal-variant`
+- `navigation-vertical-appearance`
+- `navigation-active-item`
+- `navigation-expanded-items`
+
+Legacy `ng-navigation:v1:vertical-appearance`, `ng-navigation:v1:active-item`, and `ng-navigation:v1:expanded-items` entries migrate automatically when they are read.
+
+Use `horizontalVariant()` to choose which horizontal variant component to render in the consumer app, and `verticalAppearance()` to choose which vertical variant component to render.
+
+Default provider config fields:
+
+- `defaultHorizontalVariant`
+- `defaultVerticalVariant`
+
 ## Styling Notes
 
 - Pass Tailwind utility classes or other class names through the item `classes` and `badge.classes` fields when you need local visual overrides.
@@ -210,6 +295,7 @@ Mutation and lookup methods:
 ## Notes For Contributors
 
 - Keep `@ojiepermana/angular/navigation` focused on the item model, helpers, and `NavigationService`.
+- Keep navigation persistence and UI preferences in `NavigationPreferencesService` instead of storing the full navigation tree in browser storage.
 - Keep render components in `@ojiepermana/angular/navigation/vertical` and `@ojiepermana/angular/navigation/horizontal`.
 - Move shared implementation helpers behind `@ojiepermana/angular/internal` instead of reaching across entry point boundaries with relative imports.
 - Treat `projects/library/navigation/shared` as a local compatibility layer for tests and source organization, not as consumer API.

package/navigation/horizontal/README.md

@@ -0,0 +1,49 @@
+# Horizontal Navigation
+
+The horizontal entrypoint exposes shared top-bar navigation variants for `@ojiepermana/angular`.
+
+## Public Imports
+
+```ts
+import { HorizontalNavigation, HorizontalNavigationMegaComponent } from '@ojiepermana/angular/navigation/horizontal';
+```
+
+## Variants
+
+- `HorizontalNavigation` renders the default selector `<horizontal-navigation>`.
+- `HorizontalNavigationMegaComponent` renders the mega selector `<horizontal-navigation-mega>`.
+
+## Source Layout
+
+```text
+horizontal/
+├── core/
+│   ├── horizontal-navigation.base.ts
+│   └── horizontal-navigation.shared.ts
+├── default/
+│   ├── default.ts
+│   ├── default.css
+│   └── README.md
+├── mega/
+│   ├── mega.ts
+│   ├── mega.css
+│   └── README.md
+├── types/
+│   ├── index.ts
+│   ├── README.md
+│   ├── branch.ts
+│   └── branch/
+│       ├── branch.ts
+│       └── README.md
+├── horizontal.ts
+├── index.ts
+├── ng-package.json
+└── public-api.ts
+```
+
+## Notes
+
+- `core/` contains variant-agnostic logic and template composition.
+- `default/` and `mega/` contain variant-specific components and styles.
+- `types/` contains reusable branch rendering primitives shared by all horizontal variants.
+- `horizontal.ts` remains a compatibility barrel that points to the default variant implementation.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ojiepermana/angular",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "publishConfig": {
     "access": "public"
   },

package/shell/README.md

@@ -29,9 +29,13 @@ export const appConfig: ApplicationConfig = {
         defaultMode: 'vertical',
         defaultContainer: 'boxed',
       },
+      navigation: {
+        defaultHorizontalVariant: 'default',
+        defaultVerticalVariant: 'default',
+      },
     }),
   ],
 };
 ```
 
-`provideNgShell()` is a convenience wrapper over `provideNgTheme()` and `provideNgLayout()`. It does not introduce a separate runtime state layer.
+`provideNgShell()` is a convenience wrapper over `provideNgTheme()`, `provideNgLayout()`, and `provideNgNavigation()`. It does not introduce a separate runtime state layer.

package/styles/index.css

@@ -1,2 +1,2 @@
 @import '../theme/styles/index.css';
-@import '../theme/styles/layout/index.css';
+@import '../layout/src/layout.css';

package/theme/README.md

@@ -188,9 +188,9 @@ It imports the current structure in this order:
 - `utilities/index.css`
 - `adapters/material-ui/index.css`
 
-Layout selectors now live in `projects/library/layout/styles/index.css` inside this workspace.
+Layout-wide selectors now live in `projects/library/layout/src/layout.css` inside this workspace.
 
-For applications that consume the published package, use the aggregate bundle at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package. The aggregate bundle imports theme first, then layout.
+For applications that consume the published package, use the aggregate bundle at `projects/library/styles/index.css` in this workspace or `@ojiepermana/angular/styles/index.css` from the published package. The aggregate bundle imports theme first, then the layout-wide selectors. Horizontal and vertical shell CSS are loaded by their respective layout components.
 
 Application-level resets are intentionally opt-in. If a consumer wants them, import `projects/library/styles/resets.css` in this workspace or `@ojiepermana/angular/styles/resets.css` from the published package in addition to the aggregate bundle.
 

package/types/ojiepermana-angular-internal.d.ts

@@ -21,6 +21,7 @@ declare class LocalStorageStateAdapter<Axis extends string> {
     constructor(config: LocalStorageStateAdapterConfig<Axis>);
     clear(axis: Axis): void;
     persist(axis: Axis, value: string): void;
+    readValue(axis: Axis): string | null;
     read<T extends string>(axis: Axis, fallback: T, isValid: (value: string) => value is T): T;
     private key;
     private legacyKey;

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

@@ -43,7 +43,7 @@ declare class LayoutHostDirective {
 
 declare class LayoutHorizontalComponent {
     static ɵfac: i0.ɵɵFactoryDeclaration<LayoutHorizontalComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutHorizontalComponent, "horizontal", never, {}, {}, never, ["[headerBrand]", "[headerNavigation]", "[headerActions]"], true, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<LayoutHorizontalComponent, "horizontal", never, {}, {}, never, ["[brand]", "[navigation]", "[action]"], true, never>;
 }
 
 declare class LayoutVerticalComponent {

package/types/ojiepermana-angular-navigation-horizontal.d.ts

@@ -12,6 +12,7 @@ declare class HorizontalNavigationBranchItem {
     item: _angular_core.InputSignal<NavigationItem>;
     menuItem: _angular_core.InputSignal<boolean>;
     nested: _angular_core.InputSignal<boolean>;
+    variant: _angular_core.InputSignal<HorizontalNavigationVariant>;
     itemClicked: _angular_core.OutputEmitterRef<NavigationItem>;
     branchOpened: _angular_core.OutputEmitterRef<HorizontalNavigationBranchItem>;
     branchClosed: _angular_core.OutputEmitterRef<HorizontalNavigationBranchItem>;
@@ -23,7 +24,7 @@ declare class HorizontalNavigationBranchItem {
     readonly treeShouldRenderItemFn: typeof shouldRenderNavigationItem;
     readonly treeHasChildrenFn: typeof hasNavigationChildren;
     readonly treeResolveParentKeyFn: typeof getNavigationTreePathKey;
-    readonly menuPanelClass: _angular_core.Signal<"horizontal-navigation-menu horizontal-navigation-menu--nested" | "horizontal-navigation-menu horizontal-navigation-menu--root">;
+    readonly menuPanelClass: _angular_core.Signal<string>;
     hasChildren(item: NavigationItem): boolean;
     shouldRenderItem(item: NavigationItem): boolean;
     trackByFn(index: number, item: NavigationItem): string | number;
@@ -40,38 +41,41 @@ declare class HorizontalNavigationBranchItem {
     closeMenu(): void;
     private _syncRootTriggerWidth;
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalNavigationBranchItem, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalNavigationBranchItem, "horizontal-navigation-branch-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "menuItem": { "alias": "menuItem"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; "branchOpened": "branchOpened"; "branchClosed": "branchClosed"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalNavigationBranchItem, "horizontal-navigation-branch-item", never, { "item": { "alias": "item"; "required": true; "isSignal": true; }; "menuItem": { "alias": "menuItem"; "required": false; "isSignal": true; }; "nested": { "alias": "nested"; "required": false; "isSignal": true; }; "variant": { "alias": "variant"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; "branchOpened": "branchOpened"; "branchClosed": "branchClosed"; }, never, never, true, never>;
 }
 
-declare class HorizontalNavigation {
-    private _navigationService;
+type HorizontalNavigationVariant = 'default' | 'mega';
+declare abstract class HorizontalNavigationBaseComponent {
+    abstract readonly variant: HorizontalNavigationVariant;
+    private readonly _navigationService;
     private _activeRootBranch;
-    name: _angular_core.InputSignal<string>;
-    navigation: _angular_core.InputSignal<NavigationItem[]>;
-    itemClicked: _angular_core.OutputEmitterRef<NavigationItem>;
-    navigationData: _angular_core.Signal<NavigationItem[]>;
-    /**
-     * Handle item click
-     */
+    readonly name: _angular_core.InputSignal<string>;
+    readonly navigation: _angular_core.InputSignal<NavigationItem[]>;
+    readonly itemClicked: _angular_core.OutputEmitterRef<NavigationItem>;
+    readonly navigationData: _angular_core.Signal<NavigationItem[]>;
+    isMegaVariant(): boolean;
     onItemClicked(item: NavigationItem): void;
     onRootBranchOpened(branch: HorizontalNavigationBranchItem): void;
     onRootBranchClosed(branch: HorizontalNavigationBranchItem): void;
     shouldRenderItem(item: NavigationItem): boolean;
     hasChildren(item: NavigationItem): boolean;
-    /**
-     * Get flat navigation for utility purposes
-     */
     getFlatNavigation(): NavigationItem[];
-    /**
-     * Get navigation item by ID
-     */
     getItem(id: string): NavigationItem | null;
-    /**
-     * Get navigation item parent by ID
-     */
     getItemParent(id: string): NavigationItem[] | NavigationItem | null;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalNavigationBaseComponent, never>;
+    static ɵdir: _angular_core.ɵɵDirectiveDeclaration<HorizontalNavigationBaseComponent, never, never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "navigation": { "alias": "navigation"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, never, true, never>;
+}
+
+declare class HorizontalNavigation extends HorizontalNavigationBaseComponent {
+    readonly variant: "default";
     static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalNavigation, never>;
-    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalNavigation, "horizontal-navigation", never, { "name": { "alias": "name"; "required": false; "isSignal": true; }; "navigation": { "alias": "navigation"; "required": false; "isSignal": true; }; }, { "itemClicked": "itemClicked"; }, never, never, true, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalNavigation, "horizontal-navigation", never, {}, {}, never, never, true, never>;
+}
+
+declare class HorizontalNavigationMegaComponent extends HorizontalNavigationBaseComponent {
+    readonly variant: "mega";
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<HorizontalNavigationMegaComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<HorizontalNavigationMegaComponent, "horizontal-navigation-mega", never, {}, {}, never, never, true, never>;
 }
 
-export { HorizontalNavigation, HorizontalNavigationBranchItem };
+export { HorizontalNavigation, HorizontalNavigationBranchItem, HorizontalNavigationMegaComponent };

package/types/ojiepermana-angular-navigation-vertical.d.ts

@@ -79,28 +79,27 @@ declare class VerticalNavigationDefaultComponent extends VerticalNavigationBaseC
     static ɵcmp: i0.ɵɵComponentDeclaration<VerticalNavigationDefaultComponent, "vertical-navigation", ["verticalNavigationDefault"], { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["[verticalNavigationHeader]", "[verticalNavigationContentHeader]", "[verticalNavigationContentFooter]", "[verticalNavigationFooter]"], true, never>;
 }
 
-declare class VerticalNavigationCompactComponent extends VerticalNavigationBaseComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
-    protected _componentPrefix: string;
-    protected _asideWrapperClass: string;
-    appearance: VerticalNavigationAppearance;
-    static ɵfac: i0.ɵɵFactoryDeclaration<VerticalNavigationCompactComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VerticalNavigationCompactComponent, "vertical-navigation-compact", ["verticalNavigationCompact"], { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["[verticalNavigationHeader]", "[verticalNavigationContentHeader]", "[verticalNavigationContentFooter]", "[verticalNavigationFooter]"], true, never>;
-}
-
-declare class VerticalNavigationDenseComponent extends VerticalNavigationBaseComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
-    protected _componentPrefix: string;
-    protected _asideWrapperClass: string;
-    appearance: VerticalNavigationAppearance;
-    static ɵfac: i0.ɵɵFactoryDeclaration<VerticalNavigationDenseComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VerticalNavigationDenseComponent, "vertical-navigation-dense", ["verticalNavigationDense"], { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["[verticalNavigationHeader]", "[verticalNavigationContentHeader]", "[verticalNavigationContentFooter]", "[verticalNavigationFooter]"], true, never>;
-}
-
-declare class VerticalNavigationThinComponent extends VerticalNavigationBaseComponent implements OnChanges, OnInit, AfterViewInit, OnDestroy {
-    protected _componentPrefix: string;
-    protected _asideWrapperClass: string;
+declare class VerticalNavigationCollapsibleComponent {
+    private navigationComponent?;
+    autoCollapse: boolean;
     appearance: VerticalNavigationAppearance;
-    static ɵfac: i0.ɵɵFactoryDeclaration<VerticalNavigationThinComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<VerticalNavigationThinComponent, "vertical-navigation-thin", ["verticalNavigationThin"], { "appearance": { "alias": "appearance"; "required": false; }; }, {}, never, ["[verticalNavigationHeader]", "[verticalNavigationContentHeader]", "[verticalNavigationContentFooter]", "[verticalNavigationFooter]"], true, never>;
+    inner: boolean;
+    mode: VerticalNavigationMode;
+    navigation: NavigationItem[];
+    opened: boolean;
+    position: VerticalNavigationPosition;
+    transparentOverlay: boolean;
+    readonly appearanceChanged: EventEmitter<VerticalNavigationAppearance>;
+    readonly modeChanged: EventEmitter<VerticalNavigationMode>;
+    readonly openedChanged: EventEmitter<boolean>;
+    readonly positionChanged: EventEmitter<VerticalNavigationPosition>;
+    protected readonly renderedAppearance: VerticalNavigationAppearance;
+    refresh(): void;
+    open(): void;
+    close(): void;
+    toggle(): void;
+    static ɵfac: i0.ɵɵFactoryDeclaration<VerticalNavigationCollapsibleComponent, never>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<VerticalNavigationCollapsibleComponent, "vertical-navigation-collapsible", ["verticalNavigationCollapsible"], { "autoCollapse": { "alias": "autoCollapse"; "required": false; }; "appearance": { "alias": "appearance"; "required": false; }; "inner": { "alias": "inner"; "required": false; }; "mode": { "alias": "mode"; "required": false; }; "navigation": { "alias": "navigation"; "required": false; }; "opened": { "alias": "opened"; "required": false; }; "position": { "alias": "position"; "required": false; }; "transparentOverlay": { "alias": "transparentOverlay"; "required": false; }; }, { "appearanceChanged": "appearanceChanged"; "modeChanged": "modeChanged"; "openedChanged": "openedChanged"; "positionChanged": "positionChanged"; }, never, ["[verticalNavigationHeader]", "[verticalNavigationContentHeader]", "[verticalNavigationContentFooter]", "[verticalNavigationFooter]"], true, never>;
 }
 
 declare class VerticalNavigationAsideItemComponent implements OnChanges, OnInit, OnDestroy {
@@ -150,6 +149,7 @@ declare class VerticalNavigationAsideItemComponent implements OnChanges, OnInit,
 declare class VerticalNavigationBasicItemComponent implements OnInit, OnDestroy {
     private _changeDetectorRef;
     private _navigationComponent;
+    private _navigationService;
     item: NavigationBasicItem;
     isActiveMatchOptions: IsActiveMatchOptions;
     private _unsubscribeAll;
@@ -162,6 +162,7 @@ declare class VerticalNavigationBasicItemComponent implements OnInit, OnDestroy
      */
     ngOnDestroy(): void;
     hasAction(): boolean;
+    markActive(): void;
     triggerAction(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<VerticalNavigationBasicItemComponent, never>;
     static ɵcmp: i0.ɵɵComponentDeclaration<VerticalNavigationBasicItemComponent, "vertical-navigation-basic-item", never, { "item": { "alias": "item"; "required": false; }; }, {}, never, never, true, never>;
@@ -211,6 +212,7 @@ declare class VerticalNavigationCollapsableItemComponent implements OnInit, OnDe
      * Check if the given item has the given url in one of its children
      */
     private _hasActiveChild;
+    private _shouldExpand;
     /**
      * Check if this is a children of the given item
      */
@@ -257,4 +259,4 @@ declare class VerticalNavigationSpacerItemComponent {
     static ɵcmp: i0.ɵɵComponentDeclaration<VerticalNavigationSpacerItemComponent, "vertical-navigation-spacer-item", never, {}, {}, never, never, true, never>;
 }
 
-export { VerticalNavigationAsideItemComponent, VerticalNavigationBasicItemComponent, VerticalNavigationCollapsableItemComponent, VerticalNavigationCompactComponent, VerticalNavigationDefaultComponent, VerticalNavigationDenseComponent, VerticalNavigationDividerItemComponent, VerticalNavigationGroupItemComponent, VerticalNavigationSpacerItemComponent, VerticalNavigationThinComponent };
+export { VerticalNavigationAsideItemComponent, VerticalNavigationBasicItemComponent, VerticalNavigationCollapsableItemComponent, VerticalNavigationCollapsibleComponent, VerticalNavigationDefaultComponent, VerticalNavigationDividerItemComponent, VerticalNavigationGroupItemComponent, VerticalNavigationSpacerItemComponent };