@softwarity/rail-nav 1.0.1

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 softwarity
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,276 @@
+<p align="center">
+  <a href="https://www.softwarity.io/">
+    <img src="https://www.softwarity.io/img/softwarity.svg" alt="Softwarity" height="60">
+  </a>
+</p>
+
+# @softwarity/rail-nav
+
+<p align="center">
+  <a href="https://www.npmjs.com/package/@softwarity/rail-nav">
+    <img src="https://img.shields.io/npm/v/@softwarity/rail-nav?color=blue&label=npm" alt="npm version">
+  </a>
+  <a href="https://github.com/softwarity/rail-nav/blob/main/LICENSE">
+    <img src="https://img.shields.io/badge/license-MIT-blue" alt="license">
+  </a>
+</p>
+
+Material Design 3 Navigation Rail component for Angular. Extends Angular Material `mat-sidenav` to provide a collapsible rail navigation pattern.
+
+**[Live Demo](https://softwarity.github.io/rail-nav/)**
+
+## Features
+
+- **Material Design 3** - Implements the Navigation Rail pattern from MD3
+- **Extends Material** - Built on top of `MatSidenav` for reliability
+- **Navigation Items** - `rail-nav-item` component with MD3 pill animation, badges, and router support
+- **Expand/Collapse** - Smooth transition between rail and drawer with adaptive width
+- **Backdrop** - Optional backdrop overlay when expanded
+- **Position** - Support for left (start) or right (end) positioning
+- **Dark Mode** - Automatically adapts to light/dark color scheme
+- **SCSS Theming** - Customizable via SCSS mixin following Angular Material pattern
+
+## Installation
+
+```bash
+npm install @softwarity/rail-nav
+```
+
+### Peer Dependencies
+
+| Package | Version |
+|---------|---------|
+| @angular/common | >= 21.0.0 |
+| @angular/core | >= 21.0.0 |
+| @angular/cdk | >= 21.0.0 |
+| @angular/material | >= 21.0.0 |
+
+## Usage
+
+Import the components in your Angular component:
+
+```typescript
+import {
+  RailnavComponent,
+  RailnavContainerComponent,
+  RailnavContentComponent,
+  RailnavItemComponent
+} from '@softwarity/rail-nav';
+
+@Component({
+  imports: [
+    RailnavComponent,
+    RailnavContainerComponent,
+    RailnavContentComponent,
+    RailnavItemComponent
+  ],
+  template: `
+    <rail-nav-container>
+      <rail-nav title="My App" subtitle="v1.0">
+        <rail-nav-item label="Home" routerLink="/home">
+          <mat-icon>home</mat-icon>
+        </rail-nav-item>
+        <rail-nav-item label="Settings" routerLink="/settings">
+          <mat-icon>settings</mat-icon>
+        </rail-nav-item>
+      </rail-nav>
+      <rail-nav-content>
+        <!-- Page content -->
+      </rail-nav-content>
+    </rail-nav-container>
+  `
+})
+export class AppComponent {}
+```
+
+## API
+
+### RailnavComponent
+
+The main navigation rail component. Extends `MatSidenav`.
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `collapsedWidth` | `number` | `72` | Width in pixels when collapsed (icon-only mode) |
+| `expandedWidth` | `number \| 'auto'` | `'auto'` | Width when expanded. Use `'auto'` for content-based width |
+| `position` | `'start' \| 'end'` | `'start'` | Position of the rail (left or right) |
+| `title` | `string` | - | Title displayed next to burger when expanded |
+| `subtitle` | `string` | - | Subtitle displayed below title when expanded |
+| `headerHeight` | `number` | `56` | Header height in pixels (to match toolbar) |
+| `hideDefaultHeader` | `boolean` | `false` | Hide the default header to provide custom content |
+
+| Property/Method | Type | Description |
+|-----------------|------|-------------|
+| `expanded` | `Signal<boolean>` | Read the current expanded state |
+| `toggleExpanded()` | `void` | Toggle between collapsed and expanded |
+| `expand()` | `void` | Expand the rail |
+| `collapse()` | `void` | Collapse the rail |
+
+### RailnavContainerComponent
+
+Container component. Extends `MatSidenavContainer`.
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `showBackdrop` | `boolean` | `true` | Show backdrop overlay when expanded |
+
+### RailnavContentComponent
+
+Content area component. Extends `MatSidenavContent`.
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `collapsedWidth` | `number` | `auto` | Width of collapsed rail. Auto-detected from sibling `rail-nav` if not set |
+| `position` | `'start' \| 'end'` | `auto` | Position of rail. Auto-detected from sibling `rail-nav` if not set |
+
+**Note:** Both inputs are optional. When placed inside a `rail-nav-container` alongside a `rail-nav`, the component automatically reads `collapsedWidth` and `position` from the sibling rail.
+
+### RailnavItemComponent
+
+Navigation item with MD3 pill animation.
+
+| Input | Type | Default | Description |
+|-------|------|---------|-------------|
+| `routerLink` | `string \| any[]` | - | Router link for navigation |
+| `label` | `string` | - | Label text (below icon when collapsed, beside when expanded) |
+| `badge` | `string \| number \| boolean` | - | Badge value. Use `true` for a small dot badge |
+| `active` | `boolean` | `false` | Whether this item is active (for non-router usage) |
+
+| Output | Type | Description |
+|--------|------|-------------|
+| `itemClick` | `void` | Emitted when clicked (automatically collapses rail) |
+
+## SCSS Theming
+
+Use the SCSS mixin to customize colors following the Angular Material pattern:
+
+```scss
+@use '@softwarity/rail-nav' as rail-nav;
+
+:root {
+  @include rail-nav.overrides((
+    backdrop-color: rgba(0, 0, 0, 0.5),
+    primary: #6200ea,
+    surface-color: #f5f5f5,
+  ));
+}
+```
+
+### Available Tokens
+
+| Token | Description |
+|-------|-------------|
+| `backdrop-color` | Background color for the backdrop overlay |
+| `surface-color` | Background color for the rail |
+| `surface-container-high` | Background color for hover states |
+| `on-surface` | Text color for primary content |
+| `on-surface-variant` | Text color for secondary content |
+| `secondary-container` | Background color for active items |
+| `on-secondary-container` | Text color for active items |
+| `primary` | Focus ring color |
+| `error` | Badge background color |
+| `on-error` | Badge text color |
+
+## CSS Custom Properties
+
+You can also use CSS custom properties directly:
+
+```css
+:root {
+  --rail-nav-backdrop-color: rgba(0, 0, 0, 0.5);
+  --rail-nav-surface-color: #ffffff;
+  --rail-nav-on-surface: #1c1b1f;
+  --rail-nav-primary: #6750a4;
+  --rail-nav-error: #b3261e;
+}
+```
+
+The component uses Material Design 3 system tokens (`--mat-sys-*`) as fallbacks.
+
+## Light/Dark Theme Support
+
+Use the CSS `light-dark()` function to define colors that automatically adapt to the user's color scheme:
+
+### With SCSS mixin
+
+```scss
+@use '@softwarity/rail-nav' as rail-nav;
+
+:root {
+  @include rail-nav.overrides((
+    backdrop-color: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6)),
+    surface-color: light-dark(#ffffff, #1e1e1e),
+    on-surface: light-dark(#1c1b1f, #e6e1e5),
+    primary: light-dark(#6750a4, #d0bcff),
+  ));
+}
+```
+
+### With CSS custom properties
+
+```css
+:root {
+  --rail-nav-backdrop-color: light-dark(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.6));
+  --rail-nav-surface-color: light-dark(#ffffff, #1e1e1e);
+  --rail-nav-on-surface: light-dark(#1c1b1f, #e6e1e5);
+  --rail-nav-on-surface-variant: light-dark(#49454f, #cac4d0);
+  --rail-nav-secondary-container: light-dark(#e8def8, #4a4458);
+  --rail-nav-on-secondary-container: light-dark(#1d192b, #e8def8);
+  --rail-nav-primary: light-dark(#6750a4, #d0bcff);
+  --rail-nav-error: light-dark(#b3261e, #f2b8b5);
+  --rail-nav-on-error: light-dark(#ffffff, #601410);
+}
+```
+
+### Setting up color-scheme
+
+For `light-dark()` to work, set the `color-scheme` property on your document:
+
+```scss
+html {
+  color-scheme: light;
+  &.dark-mode { color-scheme: dark; }
+}
+
+/* Or use system preference */
+html {
+  color-scheme: light dark;
+}
+```
+
+## Example
+
+```typescript
+@Component({
+  imports: [
+    RailnavComponent,
+    RailnavContainerComponent,
+    RailnavContentComponent,
+    RailnavItemComponent,
+    MatIconModule
+  ],
+  template: `
+    <rail-nav-container [showBackdrop]="true">
+      <rail-nav title="My App" subtitle="v1.0">
+        <rail-nav-item label="Home" [badge]="3" routerLink="/home">
+          <mat-icon>home</mat-icon>
+        </rail-nav-item>
+        <rail-nav-item label="Favorites" [badge]="true" routerLink="/favorites">
+          <mat-icon>favorite</mat-icon>
+        </rail-nav-item>
+        <rail-nav-item label="Settings" routerLink="/settings">
+          <mat-icon>settings</mat-icon>
+        </rail-nav-item>
+      </rail-nav>
+      <rail-nav-content>
+        <main>Your content here</main>
+      </rail-nav-content>
+    </rail-nav-container>
+  `
+})
+export class MyComponent {}
+```
+
+## License
+
+MIT

package/fesm2022/softwarity-rail-nav.mjs

@@ -0,0 +1,356 @@
+import * as i0 from '@angular/core';
+import { input, signal, effect, Component, ContentChild, inject, computed, output, ChangeDetectionStrategy } from '@angular/core';
+import { MatSidenav, MatSidenavContainer, MatDrawerContainer, MatSidenavContent } from '@angular/material/sidenav';
+import * as i1 from '@angular/material/core';
+import { MatRippleModule } from '@angular/material/core';
+import { RouterLink, RouterLinkActive } from '@angular/router';
+
+class RailnavComponent extends MatSidenav {
+    constructor() {
+        super();
+        /** Position: 'start' (left) or 'end' (right) - aliased to avoid conflict with MatSidenav.position */
+        this.railPosition = input('start', { ...(ngDevMode ? { debugName: "railPosition" } : {}), alias: 'position' });
+        /** Hide the default header (burger + title/subtitle) */
+        this.hideDefaultHeader = input(false, ...(ngDevMode ? [{ debugName: "hideDefaultHeader" }] : []));
+        /** Title displayed when expanded */
+        this.title = input(...(ngDevMode ? [undefined, { debugName: "title" }] : []));
+        /** Subtitle displayed when expanded */
+        this.subtitle = input(...(ngDevMode ? [undefined, { debugName: "subtitle" }] : []));
+        /** Whether to auto-collapse when an item is clicked */
+        this.autoCollapse = input(true, ...(ngDevMode ? [{ debugName: "autoCollapse" }] : []));
+        /** Whether the rail is expanded to show labels */
+        this.expanded = signal(false, ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        // Default settings for rail behavior
+        this.opened = true;
+        this.disableClose = true;
+        this.mode = 'side';
+        // Sync mode with expanded state
+        effect(() => {
+            this.mode = this.expanded() ? 'over' : 'side';
+        });
+    }
+    /** Toggle between collapsed (rail) and expanded (drawer) */
+    toggleExpanded() {
+        this.expanded.update(e => !e);
+    }
+    /** Collapse the rail */
+    collapse() {
+        this.expanded.set(false);
+    }
+    /** Expand the rail to drawer */
+    expand() {
+        this.expanded.set(true);
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RailnavComponent, isStandalone: true, selector: "rail-nav", inputs: { railPosition: { classPropertyName: "railPosition", publicName: "position", isSignal: true, isRequired: false, transformFunction: null }, hideDefaultHeader: { classPropertyName: "hideDefaultHeader", publicName: "hideDefaultHeader", isSignal: true, isRequired: false, transformFunction: null }, title: { classPropertyName: "title", publicName: "title", isSignal: true, isRequired: false, transformFunction: null }, subtitle: { classPropertyName: "subtitle", publicName: "subtitle", isSignal: true, isRequired: false, transformFunction: null }, autoCollapse: { classPropertyName: "autoCollapse", publicName: "autoCollapse", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.expanded": "expanded()", "class.position-end": "railPosition() === \"end\"" }, classAttribute: "mat-drawer mat-sidenav" }, usesInheritance: true, ngImport: i0, template: `
+    @if (!hideDefaultHeader()) {
+      <div class="rail-header" [class.position-end]="railPosition() === 'end'" matRipple (click)="toggleExpanded()">
+        @if (expanded() && (title() || subtitle()) && railPosition() === 'end') {
+          <div class="rail-branding position-end">
+            @if (title()) {
+              <span class="rail-title">{{ title() }}</span>
+            }
+            @if (subtitle()) {
+              <span class="rail-subtitle">{{ subtitle() }}</span>
+            }
+          </div>
+        }
+        <div class="rail-burger" [class.expanded]="expanded()" [class.position-end]="railPosition() === 'end'">
+          <!-- Menu icon (collapsed state) -->
+          <svg class="icon-menu" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+            <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
+          </svg>
+          <!-- Menu open icon (expanded state) -->
+          <svg class="icon-menu-open" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+            <path d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"/>
+          </svg>
+        </div>
+        @if (expanded() && (title() || subtitle()) && railPosition() === 'start') {
+          <div class="rail-branding">
+            @if (title()) {
+              <span class="rail-title">{{ title() }}</span>
+            }
+            @if (subtitle()) {
+              <span class="rail-subtitle">{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+    <ng-content />
+  `, isInline: true, styles: [":host{display:block;position:absolute;top:0;bottom:0;left:0;z-index:100;width:var(--rail-nav-collapsed-width, 72px);border:none!important;border-right:none!important;border-left:none!important;outline:none!important;box-shadow:none;background:var(--rail-nav-surface-color, var(--mat-sys-surface));transition:width .2s ease;overflow:visible}:host(.expanded){width:var(--rail-nav-expanded-width, fit-content);box-shadow:4px 0 8px #0003}:host(.position-end){left:auto;right:0}:host(.position-end.expanded){box-shadow:-4px 0 8px #0003}.rail-header{display:flex;align-items:center;gap:12px;height:var(--rail-nav-header-height, 56px);padding:16px 16px 16px 24px;box-sizing:border-box;cursor:pointer;color:var(--rail-nav-on-surface, var(--mat-sys-on-surface))}.rail-header.position-end{padding:16px 24px 16px 16px}.rail-header.position-end .rail-burger{margin-left:auto}.rail-header:hover{background:var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high))}.rail-burger{position:relative;width:24px;height:24px;flex-shrink:0}.rail-burger.position-end{transform:scaleX(-1)}.rail-burger svg{position:absolute;top:0;left:0;transition:opacity .3s ease,transform .3s ease}.rail-burger .icon-menu{opacity:1;transform:rotate(0)}.rail-burger .icon-menu-open{opacity:0;transform:rotate(-90deg)}.rail-burger.expanded .icon-menu{opacity:0;transform:rotate(90deg)}.rail-burger.expanded .icon-menu-open{opacity:1;transform:rotate(0)}.rail-burger.position-end .icon-menu{transform:rotate(0)}.rail-burger.position-end .icon-menu-open{transform:rotate(90deg)}.rail-burger.position-end.expanded .icon-menu{transform:rotate(-90deg)}.rail-burger.position-end.expanded .icon-menu-open{transform:rotate(0)}.rail-branding{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;overflow:hidden;text-align:right;padding-top:5px}.rail-branding.position-end{text-align:left}.rail-title{font-size:16px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--rail-nav-on-surface, var(--mat-sys-on-surface))}.rail-subtitle{font-size:11px;line-height:1;color:var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7}\n"], dependencies: [{ kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rail-nav', imports: [MatRippleModule], template: `
+    @if (!hideDefaultHeader()) {
+      <div class="rail-header" [class.position-end]="railPosition() === 'end'" matRipple (click)="toggleExpanded()">
+        @if (expanded() && (title() || subtitle()) && railPosition() === 'end') {
+          <div class="rail-branding position-end">
+            @if (title()) {
+              <span class="rail-title">{{ title() }}</span>
+            }
+            @if (subtitle()) {
+              <span class="rail-subtitle">{{ subtitle() }}</span>
+            }
+          </div>
+        }
+        <div class="rail-burger" [class.expanded]="expanded()" [class.position-end]="railPosition() === 'end'">
+          <!-- Menu icon (collapsed state) -->
+          <svg class="icon-menu" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+            <path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/>
+          </svg>
+          <!-- Menu open icon (expanded state) -->
+          <svg class="icon-menu-open" xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="currentColor">
+            <path d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"/>
+          </svg>
+        </div>
+        @if (expanded() && (title() || subtitle()) && railPosition() === 'start') {
+          <div class="rail-branding">
+            @if (title()) {
+              <span class="rail-title">{{ title() }}</span>
+            }
+            @if (subtitle()) {
+              <span class="rail-subtitle">{{ subtitle() }}</span>
+            }
+          </div>
+        }
+      </div>
+    }
+    <ng-content />
+  `, host: {
+                        'class': 'mat-drawer mat-sidenav',
+                        '[class.expanded]': 'expanded()',
+                        '[class.position-end]': 'railPosition() === "end"'
+                    }, styles: [":host{display:block;position:absolute;top:0;bottom:0;left:0;z-index:100;width:var(--rail-nav-collapsed-width, 72px);border:none!important;border-right:none!important;border-left:none!important;outline:none!important;box-shadow:none;background:var(--rail-nav-surface-color, var(--mat-sys-surface));transition:width .2s ease;overflow:visible}:host(.expanded){width:var(--rail-nav-expanded-width, fit-content);box-shadow:4px 0 8px #0003}:host(.position-end){left:auto;right:0}:host(.position-end.expanded){box-shadow:-4px 0 8px #0003}.rail-header{display:flex;align-items:center;gap:12px;height:var(--rail-nav-header-height, 56px);padding:16px 16px 16px 24px;box-sizing:border-box;cursor:pointer;color:var(--rail-nav-on-surface, var(--mat-sys-on-surface))}.rail-header.position-end{padding:16px 24px 16px 16px}.rail-header.position-end .rail-burger{margin-left:auto}.rail-header:hover{background:var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high))}.rail-burger{position:relative;width:24px;height:24px;flex-shrink:0}.rail-burger.position-end{transform:scaleX(-1)}.rail-burger svg{position:absolute;top:0;left:0;transition:opacity .3s ease,transform .3s ease}.rail-burger .icon-menu{opacity:1;transform:rotate(0)}.rail-burger .icon-menu-open{opacity:0;transform:rotate(-90deg)}.rail-burger.expanded .icon-menu{opacity:0;transform:rotate(90deg)}.rail-burger.expanded .icon-menu-open{opacity:1;transform:rotate(0)}.rail-burger.position-end .icon-menu{transform:rotate(0)}.rail-burger.position-end .icon-menu-open{transform:rotate(90deg)}.rail-burger.position-end.expanded .icon-menu{transform:rotate(-90deg)}.rail-burger.position-end.expanded .icon-menu-open{transform:rotate(0)}.rail-branding{display:flex;flex-direction:column;justify-content:center;gap:0;min-width:0;overflow:hidden;text-align:right;padding-top:5px}.rail-branding.position-end{text-align:left}.rail-title{font-size:16px;font-weight:500;line-height:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--rail-nav-on-surface, var(--mat-sys-on-surface))}.rail-subtitle{font-size:11px;line-height:1;color:var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));white-space:nowrap;overflow:hidden;text-overflow:ellipsis;opacity:.7}\n"] }]
+        }], ctorParameters: () => [], propDecorators: { railPosition: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }], hideDefaultHeader: [{ type: i0.Input, args: [{ isSignal: true, alias: "hideDefaultHeader", required: false }] }], title: [{ type: i0.Input, args: [{ isSignal: true, alias: "title", required: false }] }], subtitle: [{ type: i0.Input, args: [{ isSignal: true, alias: "subtitle", required: false }] }], autoCollapse: [{ type: i0.Input, args: [{ isSignal: true, alias: "autoCollapse", required: false }] }] } });
+
+class RailnavContainerComponent extends MatSidenavContainer {
+    constructor() {
+        super(...arguments);
+        /** Whether to show backdrop when expanded */
+        this.showBackdrop = input(true, ...(ngDevMode ? [{ debugName: "showBackdrop" }] : []));
+    }
+    ngAfterContentInit() {
+        super.ngAfterContentInit();
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavContainerComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RailnavContainerComponent, isStandalone: true, selector: "rail-nav-container", inputs: { showBackdrop: { classPropertyName: "showBackdrop", publicName: "showBackdrop", isSignal: true, isRequired: false, transformFunction: null } }, host: { classAttribute: "mat-drawer-container mat-sidenav-container" }, providers: [
+            { provide: MatDrawerContainer, useExisting: RailnavContainerComponent }
+        ], queries: [{ propertyName: "railnav", first: true, predicate: RailnavComponent, descendants: true }], usesInheritance: true, ngImport: i0, template: `
+    <ng-content />
+    @if (showBackdrop()) {
+      <div
+        class="railnav-backdrop"
+        [class.visible]="railnav?.expanded()"
+        [class.position-end]="railnav?.railPosition() === 'end'"
+        (click)="railnav?.collapse()">
+      </div>
+    }
+  `, isInline: true, styles: [":host{display:block;position:relative;height:100%;overflow:hidden}.railnav-backdrop{position:absolute;top:0;bottom:0;left:var(--rail-nav-collapsed-width, 72px);right:0;background:var(--rail-nav-backdrop-color, rgba(0, 0, 0, .4));z-index:99;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.railnav-backdrop.position-end{left:0;right:var(--rail-nav-collapsed-width, 72px)}.railnav-backdrop.visible{opacity:1;pointer-events:auto}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavContainerComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rail-nav-container', template: `
+    <ng-content />
+    @if (showBackdrop()) {
+      <div
+        class="railnav-backdrop"
+        [class.visible]="railnav?.expanded()"
+        [class.position-end]="railnav?.railPosition() === 'end'"
+        (click)="railnav?.collapse()">
+      </div>
+    }
+  `, host: {
+                        'class': 'mat-drawer-container mat-sidenav-container'
+                    }, providers: [
+                        { provide: MatDrawerContainer, useExisting: RailnavContainerComponent }
+                    ], styles: [":host{display:block;position:relative;height:100%;overflow:hidden}.railnav-backdrop{position:absolute;top:0;bottom:0;left:var(--rail-nav-collapsed-width, 72px);right:0;background:var(--rail-nav-backdrop-color, rgba(0, 0, 0, .4));z-index:99;cursor:pointer;opacity:0;pointer-events:none;transition:opacity .3s ease-in-out}.railnav-backdrop.position-end{left:0;right:var(--rail-nav-collapsed-width, 72px)}.railnav-backdrop.visible{opacity:1;pointer-events:auto}\n"] }]
+        }], propDecorators: { showBackdrop: [{ type: i0.Input, args: [{ isSignal: true, alias: "showBackdrop", required: false }] }], railnav: [{
+                type: ContentChild,
+                args: [RailnavComponent]
+            }] } });
+
+class RailnavContentComponent extends MatSidenavContent {
+    constructor() {
+        super(...arguments);
+        /** Optional: Position of the rail. If not set, uses the sibling rail-nav's position */
+        this.position = input(undefined, ...(ngDevMode ? [{ debugName: "position" }] : []));
+        /** Parent container that gives access to sibling rail-nav */
+        this.container = inject(RailnavContainerComponent, { optional: true });
+        /** Effective position - from input or from sibling rail-nav */
+        this.effectivePosition = computed(() => {
+            const inputValue = this.position();
+            if (inputValue !== undefined)
+                return inputValue;
+            return this.container?.railnav?.railPosition() ?? 'start';
+        }, ...(ngDevMode ? [{ debugName: "effectivePosition" }] : []));
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavContentComponent, deps: null, target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.1.0", version: "21.1.0", type: RailnavContentComponent, isStandalone: true, selector: "rail-nav-content", inputs: { position: { classPropertyName: "position", publicName: "position", isSignal: true, isRequired: false, transformFunction: null } }, host: { properties: { "class.position-end": "effectivePosition() === \"end\"" }, classAttribute: "mat-drawer-content mat-sidenav-content" }, usesInheritance: true, ngImport: i0, template: `<ng-content />`, isInline: true, styles: [":host{display:block;height:100%;overflow:auto;margin-left:var(--rail-nav-collapsed-width, 72px)}:host(.position-end){margin-left:0;margin-right:var(--rail-nav-collapsed-width, 72px)}\n"] }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavContentComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rail-nav-content', template: `<ng-content />`, host: {
+                        'class': 'mat-drawer-content mat-sidenav-content',
+                        '[class.position-end]': 'effectivePosition() === "end"'
+                    }, styles: [":host{display:block;height:100%;overflow:auto;margin-left:var(--rail-nav-collapsed-width, 72px)}:host(.position-end){margin-left:0;margin-right:var(--rail-nav-collapsed-width, 72px)}\n"] }]
+        }], propDecorators: { position: [{ type: i0.Input, args: [{ isSignal: true, alias: "position", required: false }] }] } });
+
+class RailnavItemComponent {
+    constructor() {
+        /** Router link for navigation */
+        this.routerLink = input(...(ngDevMode ? [undefined, { debugName: "routerLink" }] : []));
+        /** Label text displayed */
+        this.label = input(...(ngDevMode ? [undefined, { debugName: "label" }] : []));
+        /** Badge value (number, text, or true for dot badge) */
+        this.badge = input(...(ngDevMode ? [undefined, { debugName: "badge" }] : []));
+        /** Whether this item is active (for non-router usage) */
+        this.active = input(false, ...(ngDevMode ? [{ debugName: "active" }] : []));
+        /** Whether to show a badge */
+        this.hasBadge = computed(() => {
+            const b = this.badge();
+            return b !== undefined && b !== null && b !== false;
+        }, ...(ngDevMode ? [{ debugName: "hasBadge" }] : []));
+        /** Whether to show a small dot badge (no text) */
+        this.isDotBadge = computed(() => {
+            const b = this.badge();
+            return b === true || b === '';
+        }, ...(ngDevMode ? [{ debugName: "isDotBadge" }] : []));
+        /** Click event (for non-router usage) */
+        this.itemClick = output();
+        /** Reference to parent rail-nav */
+        this.railnav = inject(RailnavComponent);
+        /** Whether the rail is expanded */
+        this.expanded = computed(() => this.railnav.expanded(), ...(ngDevMode ? [{ debugName: "expanded" }] : []));
+        /** Position of the rail (start or end) */
+        this.position = computed(() => this.railnav.railPosition(), ...(ngDevMode ? [{ debugName: "position" }] : []));
+    }
+    /** Handle item click - emit event and optionally collapse rail */
+    onItemClick() {
+        this.itemClick.emit();
+        if (this.railnav.autoCollapse()) {
+            this.railnav.collapse();
+        }
+    }
+    /** Handle router link click - optionally collapse rail */
+    onRouterLinkClick() {
+        if (this.railnav.autoCollapse()) {
+            this.railnav.collapse();
+        }
+    }
+    static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavItemComponent, deps: [], target: i0.ɵɵFactoryTarget.Component }); }
+    static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "17.0.0", version: "21.1.0", type: RailnavItemComponent, isStandalone: true, selector: "rail-nav-item", inputs: { routerLink: { classPropertyName: "routerLink", publicName: "routerLink", isSignal: true, isRequired: false, transformFunction: null }, label: { classPropertyName: "label", publicName: "label", isSignal: true, isRequired: false, transformFunction: null }, badge: { classPropertyName: "badge", publicName: "badge", isSignal: true, isRequired: false, transformFunction: null }, active: { classPropertyName: "active", publicName: "active", isSignal: true, isRequired: false, transformFunction: null } }, outputs: { itemClick: "itemClick" }, host: { properties: { "class.expanded": "expanded()", "class.position-end": "position() === \"end\"" } }, ngImport: i0, template: `
+    @if (routerLink()) {
+      <a
+        class="rail-item"
+        [class.expanded]="expanded()"
+        [class.position-end]="position() === 'end'"
+        [class.active]="active()"
+        [routerLink]="routerLink()"
+        routerLinkActive="active"
+        (click)="onRouterLinkClick()">
+        <div class="rail-item-pill">
+          <div class="rail-item-ripple" matRipple></div>
+          <div class="rail-item-icon-wrapper">
+            <div class="rail-item-icon">
+              <ng-content />
+            </div>
+            @if (hasBadge()) {
+              <span class="rail-badge" [class.dot]="isDotBadge()">{{ isDotBadge() ? '' : badge() }}</span>
+            }
+          </div>
+          <span class="rail-item-label label-inline">{{ label() }}</span>
+        </div>
+        <span class="rail-item-label label-below">{{ label() }}</span>
+      </a>
+    } @else {
+      <button
+        type="button"
+        class="rail-item"
+        [class.expanded]="expanded()"
+        [class.position-end]="position() === 'end'"
+        [class.active]="active()"
+        (click)="onItemClick()">
+        <div class="rail-item-pill">
+          <div class="rail-item-ripple" matRipple></div>
+          <div class="rail-item-icon-wrapper">
+            <div class="rail-item-icon">
+              <ng-content />
+            </div>
+            @if (hasBadge()) {
+              <span class="rail-badge" [class.dot]="isDotBadge()">{{ isDotBadge() ? '' : badge() }}</span>
+            }
+          </div>
+          <span class="rail-item-label label-inline">{{ label() }}</span>
+        </div>
+        <span class="rail-item-label label-below">{{ label() }}</span>
+      </button>
+    }
+  `, isInline: true, styles: [":host{display:block}.rail-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-decoration:none;color:var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));cursor:pointer;padding:0;gap:4px;background:none;border:none;font:inherit;min-height:56px;box-sizing:border-box;outline:none;width:100%}.rail-item.position-end{align-items:flex-end}.rail-item:focus-visible .rail-item-pill{border-color:var(--rail-nav-primary, var(--mat-sys-primary))}.rail-item.position-end .rail-item-pill{justify-content:flex-end;padding-left:0;padding-right:10px}.rail-item.expanded{gap:0}.rail-item-pill{position:relative;display:flex;align-items:center;justify-content:flex-start;width:48px;height:32px;border-radius:9999px;border:2px solid transparent;overflow:visible;margin-top:12px;padding-left:10px;box-sizing:border-box;transition:background .2s ease,width .2s ease,height .2s ease,margin .2s ease}.rail-item-ripple{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.rail-item:hover .rail-item-pill{background:var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high))}.rail-item.active .rail-item-pill{background:var(--rail-nav-secondary-container, var(--mat-sys-secondary-container));color:var(--rail-nav-on-secondary-container, var(--mat-sys-on-secondary-container))}.rail-item.expanded .rail-item-pill{width:auto;height:48px;border-radius:9999px;padding:0 16px 0 10px;gap:12px;justify-content:flex-start;box-sizing:border-box;margin-top:0}.rail-item.expanded.position-end .rail-item-pill{flex-direction:row-reverse;justify-content:flex-start;padding:0 10px 0 16px}:host:first-child .rail-item-pill{margin-top:8px}:host:first-child .rail-item.expanded .rail-item-pill{margin-top:0}.rail-item-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible}.rail-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.rail-item-icon ::ng-deep>*{font-size:24px;width:24px;height:24px}.rail-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--rail-nav-error, var(--mat-sys-error));color:var(--rail-nav-on-error, var(--mat-sys-on-error));font-size:11px;font-weight:500;line-height:16px;text-align:center;box-sizing:border-box;z-index:10}.rail-badge.dot{top:-2px;right:-2px;min-width:6px;width:6px;height:6px;padding:0;border-radius:3px}.rail-item-label.label-below{font-size:12px;font-weight:500;line-height:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:48px;max-height:16px;opacity:1;transition:opacity .1s ease,max-height .2s ease}.rail-item.expanded .rail-item-label.label-below{opacity:0;max-height:0;pointer-events:none}.rail-item-label.label-inline{font-size:14px;font-weight:500;line-height:24px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:0;opacity:0;pointer-events:none}.rail-item.expanded .rail-item-label.label-inline{width:auto;flex:1;opacity:1;pointer-events:auto;transition:opacity .15s ease .1s}.rail-item.expanded.position-end .rail-item-label.label-inline{text-align:right}\n"], dependencies: [{ kind: "directive", type: RouterLink, selector: "[routerLink]", inputs: ["target", "queryParams", "fragment", "queryParamsHandling", "state", "info", "relativeTo", "preserveFragment", "skipLocationChange", "replaceUrl", "routerLink"] }, { kind: "directive", type: RouterLinkActive, selector: "[routerLinkActive]", inputs: ["routerLinkActiveOptions", "ariaCurrentWhenActive", "routerLinkActive"], outputs: ["isActiveChange"], exportAs: ["routerLinkActive"] }, { kind: "ngmodule", type: MatRippleModule }, { kind: "directive", type: i1.MatRipple, selector: "[mat-ripple], [matRipple]", inputs: ["matRippleColor", "matRippleUnbounded", "matRippleCentered", "matRippleRadius", "matRippleAnimation", "matRippleDisabled", "matRippleTrigger"], exportAs: ["matRipple"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush }); }
+}
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "21.1.0", ngImport: i0, type: RailnavItemComponent, decorators: [{
+            type: Component,
+            args: [{ selector: 'rail-nav-item', imports: [RouterLink, RouterLinkActive, MatRippleModule], template: `
+    @if (routerLink()) {
+      <a
+        class="rail-item"
+        [class.expanded]="expanded()"
+        [class.position-end]="position() === 'end'"
+        [class.active]="active()"
+        [routerLink]="routerLink()"
+        routerLinkActive="active"
+        (click)="onRouterLinkClick()">
+        <div class="rail-item-pill">
+          <div class="rail-item-ripple" matRipple></div>
+          <div class="rail-item-icon-wrapper">
+            <div class="rail-item-icon">
+              <ng-content />
+            </div>
+            @if (hasBadge()) {
+              <span class="rail-badge" [class.dot]="isDotBadge()">{{ isDotBadge() ? '' : badge() }}</span>
+            }
+          </div>
+          <span class="rail-item-label label-inline">{{ label() }}</span>
+        </div>
+        <span class="rail-item-label label-below">{{ label() }}</span>
+      </a>
+    } @else {
+      <button
+        type="button"
+        class="rail-item"
+        [class.expanded]="expanded()"
+        [class.position-end]="position() === 'end'"
+        [class.active]="active()"
+        (click)="onItemClick()">
+        <div class="rail-item-pill">
+          <div class="rail-item-ripple" matRipple></div>
+          <div class="rail-item-icon-wrapper">
+            <div class="rail-item-icon">
+              <ng-content />
+            </div>
+            @if (hasBadge()) {
+              <span class="rail-badge" [class.dot]="isDotBadge()">{{ isDotBadge() ? '' : badge() }}</span>
+            }
+          </div>
+          <span class="rail-item-label label-inline">{{ label() }}</span>
+        </div>
+        <span class="rail-item-label label-below">{{ label() }}</span>
+      </button>
+    }
+  `, changeDetection: ChangeDetectionStrategy.OnPush, host: {
+                        '[class.expanded]': 'expanded()',
+                        '[class.position-end]': 'position() === "end"'
+                    }, styles: [":host{display:block}.rail-item{display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-start;text-decoration:none;color:var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));cursor:pointer;padding:0;gap:4px;background:none;border:none;font:inherit;min-height:56px;box-sizing:border-box;outline:none;width:100%}.rail-item.position-end{align-items:flex-end}.rail-item:focus-visible .rail-item-pill{border-color:var(--rail-nav-primary, var(--mat-sys-primary))}.rail-item.position-end .rail-item-pill{justify-content:flex-end;padding-left:0;padding-right:10px}.rail-item.expanded{gap:0}.rail-item-pill{position:relative;display:flex;align-items:center;justify-content:flex-start;width:48px;height:32px;border-radius:9999px;border:2px solid transparent;overflow:visible;margin-top:12px;padding-left:10px;box-sizing:border-box;transition:background .2s ease,width .2s ease,height .2s ease,margin .2s ease}.rail-item-ripple{position:absolute;inset:0;border-radius:inherit;overflow:hidden}.rail-item:hover .rail-item-pill{background:var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high))}.rail-item.active .rail-item-pill{background:var(--rail-nav-secondary-container, var(--mat-sys-secondary-container));color:var(--rail-nav-on-secondary-container, var(--mat-sys-on-secondary-container))}.rail-item.expanded .rail-item-pill{width:auto;height:48px;border-radius:9999px;padding:0 16px 0 10px;gap:12px;justify-content:flex-start;box-sizing:border-box;margin-top:0}.rail-item.expanded.position-end .rail-item-pill{flex-direction:row-reverse;justify-content:flex-start;padding:0 10px 0 16px}:host:first-child .rail-item-pill{margin-top:8px}:host:first-child .rail-item.expanded .rail-item-pill{margin-top:0}.rail-item-icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;flex-shrink:0;overflow:visible}.rail-item-icon{display:flex;align-items:center;justify-content:center;width:24px;height:24px}.rail-item-icon ::ng-deep>*{font-size:24px;width:24px;height:24px}.rail-badge{position:absolute;top:-6px;right:-6px;min-width:16px;height:16px;padding:0 4px;border-radius:8px;background:var(--rail-nav-error, var(--mat-sys-error));color:var(--rail-nav-on-error, var(--mat-sys-on-error));font-size:11px;font-weight:500;line-height:16px;text-align:center;box-sizing:border-box;z-index:10}.rail-badge.dot{top:-2px;right:-2px;min-width:6px;width:6px;height:6px;padding:0;border-radius:3px}.rail-item-label.label-below{font-size:12px;font-weight:500;line-height:16px;text-align:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:48px;max-height:16px;opacity:1;transition:opacity .1s ease,max-height .2s ease}.rail-item.expanded .rail-item-label.label-below{opacity:0;max-height:0;pointer-events:none}.rail-item-label.label-inline{font-size:14px;font-weight:500;line-height:24px;text-align:left;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:0;opacity:0;pointer-events:none}.rail-item.expanded .rail-item-label.label-inline{width:auto;flex:1;opacity:1;pointer-events:auto;transition:opacity .15s ease .1s}.rail-item.expanded.position-end .rail-item-label.label-inline{text-align:right}\n"] }]
+        }], propDecorators: { routerLink: [{ type: i0.Input, args: [{ isSignal: true, alias: "routerLink", required: false }] }], label: [{ type: i0.Input, args: [{ isSignal: true, alias: "label", required: false }] }], badge: [{ type: i0.Input, args: [{ isSignal: true, alias: "badge", required: false }] }], active: [{ type: i0.Input, args: [{ isSignal: true, alias: "active", required: false }] }], itemClick: [{ type: i0.Output, args: ["itemClick"] }] } });
+
+/*
+ * Public API Surface of @softwarity/rail-nav
+ */
+
+/**
+ * Generated bundle index. Do not edit.
+ */
+
+export { RailnavComponent, RailnavContainerComponent, RailnavContentComponent, RailnavItemComponent };
+//# sourceMappingURL=softwarity-rail-nav.mjs.map

package/fesm2022/softwarity-rail-nav.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"softwarity-rail-nav.mjs","sources":["../../src/lib/railnav.component.ts","../../src/lib/railnav-container.component.ts","../../src/lib/railnav-content.component.ts","../../src/lib/railnav-item.component.ts","../../src/public-api.ts","../../src/softwarity-rail-nav.ts"],"sourcesContent":["import { Component, signal, effect, input } from '@angular/core';\nimport { MatSidenav } from '@angular/material/sidenav';\nimport { MatRippleModule } from '@angular/material/core';\n\n@Component({\n  selector: 'rail-nav',\n  imports: [MatRippleModule],\n  template: `\n    @if (!hideDefaultHeader()) {\n      <div class=\"rail-header\" [class.position-end]=\"railPosition() === 'end'\" matRipple (click)=\"toggleExpanded()\">\n        @if (expanded() && (title() || subtitle()) && railPosition() === 'end') {\n          <div class=\"rail-branding position-end\">\n            @if (title()) {\n              <span class=\"rail-title\">{{ title() }}</span>\n            }\n            @if (subtitle()) {\n              <span class=\"rail-subtitle\">{{ subtitle() }}</span>\n            }\n          </div>\n        }\n        <div class=\"rail-burger\" [class.expanded]=\"expanded()\" [class.position-end]=\"railPosition() === 'end'\">\n          <!-- Menu icon (collapsed state) -->\n          <svg class=\"icon-menu\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n            <path d=\"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z\"/>\n          </svg>\n          <!-- Menu open icon (expanded state) -->\n          <svg class=\"icon-menu-open\" xmlns=\"http://www.w3.org/2000/svg\" height=\"24px\" viewBox=\"0 -960 960 960\" width=\"24px\" fill=\"currentColor\">\n            <path d=\"M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z\"/>\n          </svg>\n        </div>\n        @if (expanded() && (title() || subtitle()) && railPosition() === 'start') {\n          <div class=\"rail-branding\">\n            @if (title()) {\n              <span class=\"rail-title\">{{ title() }}</span>\n            }\n            @if (subtitle()) {\n              <span class=\"rail-subtitle\">{{ subtitle() }}</span>\n            }\n          </div>\n        }\n      </div>\n    }\n    <ng-content />\n  `,\n  styles: [`\n    :host {\n      display: block;\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: 0;\n      z-index: 100;\n      width: var(--rail-nav-collapsed-width, 72px);\n      border: none !important;\n      border-right: none !important;\n      border-left: none !important;\n      outline: none !important;\n      box-shadow: none;\n      background: var(--rail-nav-surface-color, var(--mat-sys-surface));\n      transition: width 0.2s ease;\n      overflow: visible;\n    }\n\n    :host(.expanded) {\n      width: var(--rail-nav-expanded-width, fit-content);\n      box-shadow: 4px 0 8px rgba(0,0,0,.2);\n    }\n\n    :host(.position-end) {\n      left: auto;\n      right: 0;\n    }\n\n    :host(.position-end.expanded) {\n      box-shadow: -4px 0 8px rgba(0,0,0,.2);\n    }\n\n    .rail-header {\n      display: flex;\n      align-items: center;\n      gap: 12px;\n      height: var(--rail-nav-header-height, 56px);\n      padding: 16px 16px 16px 24px;\n      box-sizing: border-box;\n      cursor: pointer;\n      color: var(--rail-nav-on-surface, var(--mat-sys-on-surface));\n    }\n\n    .rail-header.position-end {\n      padding: 16px 24px 16px 16px;\n    }\n\n    .rail-header.position-end .rail-burger {\n      margin-left: auto;\n    }\n\n    .rail-header:hover {\n      background: var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high));\n    }\n\n    .rail-burger {\n      position: relative;\n      width: 24px;\n      height: 24px;\n      flex-shrink: 0;\n    }\n\n    .rail-burger.position-end {\n      transform: scaleX(-1);\n    }\n\n    .rail-burger svg {\n      position: absolute;\n      top: 0;\n      left: 0;\n      transition: opacity 0.3s ease, transform 0.3s ease;\n    }\n\n    /* Position start (left) - clockwise rotation */\n    .rail-burger .icon-menu {\n      opacity: 1;\n      transform: rotate(0deg);\n    }\n\n    .rail-burger .icon-menu-open {\n      opacity: 0;\n      transform: rotate(-90deg);\n    }\n\n    .rail-burger.expanded .icon-menu {\n      opacity: 0;\n      transform: rotate(90deg);\n    }\n\n    .rail-burger.expanded .icon-menu-open {\n      opacity: 1;\n      transform: rotate(0deg);\n    }\n\n    /* Position end (right) - counter-clockwise rotation (mirrored) */\n    .rail-burger.position-end .icon-menu {\n      transform: rotate(0deg);\n    }\n\n    .rail-burger.position-end .icon-menu-open {\n      transform: rotate(90deg);\n    }\n\n    .rail-burger.position-end.expanded .icon-menu {\n      transform: rotate(-90deg);\n    }\n\n    .rail-burger.position-end.expanded .icon-menu-open {\n      transform: rotate(0deg);\n    }\n\n    .rail-branding {\n      display: flex;\n      flex-direction: column;\n      justify-content: center;\n      gap: 0;\n      min-width: 0;\n      overflow: hidden;\n      text-align: right;\n      padding-top: 5px;\n    }\n\n    .rail-branding.position-end {\n      text-align: left;\n    }\n\n    .rail-title {\n      font-size: 16px;\n      font-weight: 500;\n      line-height: 1;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      color: var(--rail-nav-on-surface, var(--mat-sys-on-surface));\n    }\n\n    .rail-subtitle {\n      font-size: 11px;\n      line-height: 1;\n      color: var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      opacity: 0.7;\n    }\n  `],\n  host: {\n    'class': 'mat-drawer mat-sidenav',\n    '[class.expanded]': 'expanded()',\n    '[class.position-end]': 'railPosition() === \"end\"'\n  }\n})\nexport class RailnavComponent extends MatSidenav {\n  /** Position: 'start' (left) or 'end' (right) - aliased to avoid conflict with MatSidenav.position */\n  readonly railPosition = input<'start' | 'end'>('start', { alias: 'position' });\n\n  /** Hide the default header (burger + title/subtitle) */\n  readonly hideDefaultHeader = input(false);\n\n  /** Title displayed when expanded */\n  readonly title = input<string>();\n\n  /** Subtitle displayed when expanded */\n  readonly subtitle = input<string>();\n\n  /** Whether to auto-collapse when an item is clicked */\n  readonly autoCollapse = input(true);\n\n  /** Whether the rail is expanded to show labels */\n  readonly expanded = signal(false);\n\n  constructor() {\n    super();\n    // Default settings for rail behavior\n    this.opened = true;\n    this.disableClose = true;\n    this.mode = 'side';\n\n    // Sync mode with expanded state\n    effect(() => {\n      this.mode = this.expanded() ? 'over' : 'side';\n    });\n  }\n\n  /** Toggle between collapsed (rail) and expanded (drawer) */\n  toggleExpanded(): void {\n    this.expanded.update(e => !e);\n  }\n\n  /** Collapse the rail */\n  collapse(): void {\n    this.expanded.set(false);\n  }\n\n  /** Expand the rail to drawer */\n  expand(): void {\n    this.expanded.set(true);\n  }\n}\n","import { Component, ContentChild, AfterContentInit, input } from '@angular/core';\nimport { MatSidenavContainer, MatDrawerContainer } from '@angular/material/sidenav';\nimport { RailnavComponent } from './railnav.component';\n\n@Component({\n  selector: 'rail-nav-container',\n  template: `\n    <ng-content />\n    @if (showBackdrop()) {\n      <div\n        class=\"railnav-backdrop\"\n        [class.visible]=\"railnav?.expanded()\"\n        [class.position-end]=\"railnav?.railPosition() === 'end'\"\n        (click)=\"railnav?.collapse()\">\n      </div>\n    }\n  `,\n  styles: [`\n    :host {\n      display: block;\n      position: relative;\n      height: 100%;\n      overflow: hidden;\n    }\n\n    .railnav-backdrop {\n      position: absolute;\n      top: 0;\n      bottom: 0;\n      left: var(--rail-nav-collapsed-width, 72px);\n      right: 0;\n      background: var(--rail-nav-backdrop-color, rgba(0, 0, 0, 0.4));\n      z-index: 99;\n      cursor: pointer;\n      opacity: 0;\n      pointer-events: none;\n      transition: opacity 0.3s ease-in-out;\n    }\n\n    .railnav-backdrop.position-end {\n      left: 0;\n      right: var(--rail-nav-collapsed-width, 72px);\n    }\n\n    .railnav-backdrop.visible {\n      opacity: 1;\n      pointer-events: auto;\n    }\n  `],\n  host: {\n    'class': 'mat-drawer-container mat-sidenav-container'\n  },\n  providers: [\n    { provide: MatDrawerContainer, useExisting: RailnavContainerComponent }\n  ]\n})\nexport class RailnavContainerComponent extends MatSidenavContainer implements AfterContentInit {\n  /** Whether to show backdrop when expanded */\n  readonly showBackdrop = input(true);\n\n  @ContentChild(RailnavComponent) railnav?: RailnavComponent;\n\n  override ngAfterContentInit(): void {\n    super.ngAfterContentInit();\n  }\n}\n","import { Component, input, inject, computed } from '@angular/core';\nimport { MatSidenavContent } from '@angular/material/sidenav';\nimport { RailnavContainerComponent } from './railnav-container.component';\n\n@Component({\n  selector: 'rail-nav-content',\n  template: `<ng-content />`,\n  styles: [`\n    :host {\n      display: block;\n      height: 100%;\n      overflow: auto;\n      margin-left: var(--rail-nav-collapsed-width, 72px);\n    }\n\n    :host(.position-end) {\n      margin-left: 0;\n      margin-right: var(--rail-nav-collapsed-width, 72px);\n    }\n  `],\n  host: {\n    'class': 'mat-drawer-content mat-sidenav-content',\n    '[class.position-end]': 'effectivePosition() === \"end\"'\n  }\n})\nexport class RailnavContentComponent extends MatSidenavContent {\n  /** Optional: Position of the rail. If not set, uses the sibling rail-nav's position */\n  readonly position = input<'start' | 'end' | undefined>(undefined);\n\n  /** Parent container that gives access to sibling rail-nav */\n  private container = inject(RailnavContainerComponent, { optional: true });\n\n  /** Effective position - from input or from sibling rail-nav */\n  protected readonly effectivePosition = computed(() => {\n    const inputValue = this.position();\n    if (inputValue !== undefined) return inputValue;\n    return this.container?.railnav?.railPosition() ?? 'start';\n  });\n}\n","import { Component, input, output, computed, inject, ChangeDetectionStrategy } from '@angular/core';\nimport { RouterLink, RouterLinkActive } from '@angular/router';\nimport { MatRippleModule } from '@angular/material/core';\nimport { RailnavComponent } from './railnav.component';\n\n@Component({\n  selector: 'rail-nav-item',\n  imports: [RouterLink, RouterLinkActive, MatRippleModule],\n  template: `\n    @if (routerLink()) {\n      <a\n        class=\"rail-item\"\n        [class.expanded]=\"expanded()\"\n        [class.position-end]=\"position() === 'end'\"\n        [class.active]=\"active()\"\n        [routerLink]=\"routerLink()\"\n        routerLinkActive=\"active\"\n        (click)=\"onRouterLinkClick()\">\n        <div class=\"rail-item-pill\">\n          <div class=\"rail-item-ripple\" matRipple></div>\n          <div class=\"rail-item-icon-wrapper\">\n            <div class=\"rail-item-icon\">\n              <ng-content />\n            </div>\n            @if (hasBadge()) {\n              <span class=\"rail-badge\" [class.dot]=\"isDotBadge()\">{{ isDotBadge() ? '' : badge() }}</span>\n            }\n          </div>\n          <span class=\"rail-item-label label-inline\">{{ label() }}</span>\n        </div>\n        <span class=\"rail-item-label label-below\">{{ label() }}</span>\n      </a>\n    } @else {\n      <button\n        type=\"button\"\n        class=\"rail-item\"\n        [class.expanded]=\"expanded()\"\n        [class.position-end]=\"position() === 'end'\"\n        [class.active]=\"active()\"\n        (click)=\"onItemClick()\">\n        <div class=\"rail-item-pill\">\n          <div class=\"rail-item-ripple\" matRipple></div>\n          <div class=\"rail-item-icon-wrapper\">\n            <div class=\"rail-item-icon\">\n              <ng-content />\n            </div>\n            @if (hasBadge()) {\n              <span class=\"rail-badge\" [class.dot]=\"isDotBadge()\">{{ isDotBadge() ? '' : badge() }}</span>\n            }\n          </div>\n          <span class=\"rail-item-label label-inline\">{{ label() }}</span>\n        </div>\n        <span class=\"rail-item-label label-below\">{{ label() }}</span>\n      </button>\n    }\n  `,\n  styles: [`\n    :host {\n      display: block;\n    }\n\n    .rail-item {\n      display: flex;\n      flex-direction: column;\n      align-items: flex-start;\n      justify-content: flex-start;\n      text-decoration: none;\n      color: var(--rail-nav-on-surface-variant, var(--mat-sys-on-surface-variant));\n      cursor: pointer;\n      padding: 0;\n      gap: 4px;\n      background: none;\n      border: none;\n      font: inherit;\n      min-height: 56px;\n      box-sizing: border-box;\n      outline: none;\n      width: 100%;\n    }\n\n    .rail-item.position-end {\n      align-items: flex-end;\n    }\n\n    .rail-item:focus-visible .rail-item-pill {\n      border-color: var(--rail-nav-primary, var(--mat-sys-primary));\n    }\n\n    .rail-item.position-end .rail-item-pill {\n      justify-content: flex-end;\n      padding-left: 0;\n      padding-right: 10px;\n    }\n\n    .rail-item.expanded {\n      gap: 0;\n    }\n\n    .rail-item-pill {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: flex-start;\n      width: 48px;\n      height: 32px;\n      border-radius: 9999px;\n      border: 2px solid transparent;\n      overflow: visible;\n      margin-top: 12px;\n      padding-left: 10px;\n      box-sizing: border-box;\n      transition: background 0.2s ease, width 0.2s ease, height 0.2s ease, margin 0.2s ease;\n    }\n\n    .rail-item-ripple {\n      position: absolute;\n      inset: 0;\n      border-radius: inherit;\n      overflow: hidden;\n    }\n\n    .rail-item:hover .rail-item-pill {\n      background: var(--rail-nav-surface-container-high, var(--mat-sys-surface-container-high));\n    }\n\n    .rail-item.active .rail-item-pill {\n      background: var(--rail-nav-secondary-container, var(--mat-sys-secondary-container));\n      color: var(--rail-nav-on-secondary-container, var(--mat-sys-on-secondary-container));\n    }\n\n    /* Expanded pill includes both icon and label */\n    .rail-item.expanded .rail-item-pill {\n      width: auto;\n      height: 48px;\n      border-radius: 9999px;\n      padding: 0 16px 0 10px;\n      gap: 12px;\n      justify-content: flex-start;\n      box-sizing: border-box;\n      margin-top: 0;\n    }\n\n    .rail-item.expanded.position-end .rail-item-pill {\n      flex-direction: row-reverse;\n      justify-content: flex-start;\n      padding: 0 10px 0 16px;\n    }\n\n    /* First item: reduce space after header and keep icon stable during expand */\n    /* Collapsed: 8px + 16px (half of 32px) = 24px from top */\n    /* Expanded: 0px + 24px (half of 48px) = 24px from top */\n    :host:first-child .rail-item-pill {\n      margin-top: 8px;\n    }\n\n    :host:first-child .rail-item.expanded .rail-item-pill {\n      margin-top: 0;\n    }\n\n    .rail-item-icon-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      flex-shrink: 0;\n      overflow: visible;\n    }\n\n    .rail-item-icon {\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      width: 24px;\n      height: 24px;\n    }\n\n    .rail-item-icon ::ng-deep > * {\n      font-size: 24px;\n      width: 24px;\n      height: 24px;\n    }\n\n    .rail-badge {\n      position: absolute;\n      top: -6px;\n      right: -6px;\n      min-width: 16px;\n      height: 16px;\n      padding: 0 4px;\n      border-radius: 8px;\n      background: var(--rail-nav-error, var(--mat-sys-error));\n      color: var(--rail-nav-on-error, var(--mat-sys-on-error));\n      font-size: 11px;\n      font-weight: 500;\n      line-height: 16px;\n      text-align: center;\n      box-sizing: border-box;\n      z-index: 10;\n    }\n\n    /* Small dot badge (no text) */\n    .rail-badge.dot {\n      top: -2px;\n      right: -2px;\n      min-width: 6px;\n      width: 6px;\n      height: 6px;\n      padding: 0;\n      border-radius: 3px;\n    }\n\n    /* Label below icon (collapsed mode) */\n    .rail-item-label.label-below {\n      font-size: 12px;\n      font-weight: 500;\n      line-height: 16px;\n      text-align: center;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 48px;\n      max-height: 16px;\n      opacity: 1;\n      transition: opacity 0.1s ease, max-height 0.2s ease;\n    }\n\n    .rail-item.expanded .rail-item-label.label-below {\n      opacity: 0;\n      max-height: 0;\n      pointer-events: none;\n    }\n\n    /* Label inline with icon (expanded mode) */\n    .rail-item-label.label-inline {\n      font-size: 14px;\n      font-weight: 500;\n      line-height: 24px;\n      text-align: left;\n      white-space: nowrap;\n      overflow: hidden;\n      text-overflow: ellipsis;\n      width: 0;\n      opacity: 0;\n      pointer-events: none;\n    }\n\n    .rail-item.expanded .rail-item-label.label-inline {\n      width: auto;\n      flex: 1;\n      opacity: 1;\n      pointer-events: auto;\n      transition: opacity 0.15s ease 0.1s;\n    }\n\n    .rail-item.expanded.position-end .rail-item-label.label-inline {\n      text-align: right;\n    }\n  `],\n  changeDetection: ChangeDetectionStrategy.OnPush,\n  host: {\n    '[class.expanded]': 'expanded()',\n    '[class.position-end]': 'position() === \"end\"'\n  }\n})\nexport class RailnavItemComponent {\n  /** Router link for navigation */\n  readonly routerLink = input<string | any[]>();\n\n  /** Label text displayed */\n  readonly label = input<string>();\n\n  /** Badge value (number, text, or true for dot badge) */\n  readonly badge = input<string | number | boolean>();\n\n  /** Whether this item is active (for non-router usage) */\n  readonly active = input(false);\n\n  /** Whether to show a badge */\n  protected readonly hasBadge = computed(() => {\n    const b = this.badge();\n    return b !== undefined && b !== null && b !== false;\n  });\n\n  /** Whether to show a small dot badge (no text) */\n  protected readonly isDotBadge = computed(() => {\n    const b = this.badge();\n    return b === true || b === '';\n  });\n\n  /** Click event (for non-router usage) */\n  readonly itemClick = output<void>();\n\n  /** Reference to parent rail-nav */\n  private railnav = inject(RailnavComponent);\n\n  /** Whether the rail is expanded */\n  protected expanded = computed(() => this.railnav.expanded());\n\n  /** Position of the rail (start or end) */\n  protected position = computed(() => this.railnav.railPosition());\n\n  /** Handle item click - emit event and optionally collapse rail */\n  protected onItemClick(): void {\n    this.itemClick.emit();\n    if (this.railnav.autoCollapse()) {\n      this.railnav.collapse();\n    }\n  }\n\n  /** Handle router link click - optionally collapse rail */\n  protected onRouterLinkClick(): void {\n    if (this.railnav.autoCollapse()) {\n      this.railnav.collapse();\n    }\n  }\n}\n","/*\n * Public API Surface of @softwarity/rail-nav\n */\n\nexport { RailnavComponent } from './lib/railnav.component';\nexport { RailnavContainerComponent } from './lib/railnav-container.component';\nexport { RailnavContentComponent } from './lib/railnav-content.component';\nexport { RailnavItemComponent } from './lib/railnav-item.component';\n","/**\n * Generated bundle index. Do not edit.\n */\n\nexport * from './public-api';\n"],"names":[],"mappings":"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"}

package/package.json

@@ -0,0 +1,45 @@
+{
+  "name": "@softwarity/rail-nav",
+  "version": "1.0.1",
+  "author": "Softwarity",
+  "license": "MIT",
+  "description": "Angular Material Navigation Rail component - Material Design 3 compliant",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/softwarity/rail-nav.git"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "keywords": [
+    "angular",
+    "material",
+    "navigation",
+    "rail",
+    "sidenav",
+    "drawer",
+    "md3",
+    "component"
+  ],
+  "peerDependencies": {
+    "@angular/cdk": ">=21.0.0",
+    "@angular/common": ">=21.0.0",
+    "@angular/core": ">=21.0.0",
+    "@angular/material": ">=21.0.0"
+  },
+  "dependencies": {
+    "tslib": "^2.6.2"
+  },
+  "sideEffects": false,
+  "module": "fesm2022/softwarity-rail-nav.mjs",
+  "typings": "types/softwarity-rail-nav.d.ts",
+  "exports": {
+    "./package.json": {
+      "default": "./package.json"
+    },
+    ".": {
+      "types": "./types/softwarity-rail-nav.d.ts",
+      "default": "./fesm2022/softwarity-rail-nav.mjs"
+    }
+  }
+}

package/src/lib/_rail-nav-theme.scss

@@ -0,0 +1,89 @@
+@use 'sass:map';
+
+/// Available tokens for rail-nav theming
+///
+/// @param {Map} $tokens - Map of tokens to override
+///   - collapsed-width: Width of the rail when collapsed (default: 72px)
+///   - expanded-width: Width of the rail when expanded (default: fit-content)
+///   - header-height: Height of the header area (default: 56px)
+///   - backdrop-color: Background color for the backdrop overlay
+///   - surface-color: Background color for the rail
+///   - surface-container-high: Background color for hover states
+///   - on-surface: Text color for primary content
+///   - on-surface-variant: Text color for secondary content
+///   - secondary-container: Background color for active items
+///   - on-secondary-container: Text color for active items
+///   - primary: Focus ring color
+///   - error: Badge background color
+///   - on-error: Badge text color
+///
+/// @example
+///   @use '@softwarity/rail-nav' as rail-nav;
+///
+///   :root {
+///     @include rail-nav.overrides((
+///       collapsed-width: 80px,
+///       expanded-width: 280px,
+///       header-height: 64px,
+///       backdrop-color: rgba(0, 0, 0, 0.5),
+///       primary: #6200ea,
+///     ));
+///   }
+@mixin overrides($tokens: ()) {
+  $defaults: (
+    collapsed-width: null,
+    expanded-width: null,
+    header-height: null,
+    backdrop-color: null,
+    surface-color: null,
+    surface-container-high: null,
+    on-surface: null,
+    on-surface-variant: null,
+    secondary-container: null,
+    on-secondary-container: null,
+    primary: null,
+    error: null,
+    on-error: null
+  );
+  $merged: map.merge($defaults, $tokens);
+
+  @if map.get($merged, collapsed-width) {
+    --rail-nav-collapsed-width: #{map.get($merged, collapsed-width)};
+  }
+  @if map.get($merged, expanded-width) {
+    --rail-nav-expanded-width: #{map.get($merged, expanded-width)};
+  }
+  @if map.get($merged, header-height) {
+    --rail-nav-header-height: #{map.get($merged, header-height)};
+  }
+  @if map.get($merged, backdrop-color) {
+    --rail-nav-backdrop-color: #{map.get($merged, backdrop-color)};
+  }
+  @if map.get($merged, surface-color) {
+    --rail-nav-surface-color: #{map.get($merged, surface-color)};
+  }
+  @if map.get($merged, surface-container-high) {
+    --rail-nav-surface-container-high: #{map.get($merged, surface-container-high)};
+  }
+  @if map.get($merged, on-surface) {
+    --rail-nav-on-surface: #{map.get($merged, on-surface)};
+  }
+  @if map.get($merged, on-surface-variant) {
+    --rail-nav-on-surface-variant: #{map.get($merged, on-surface-variant)};
+  }
+  @if map.get($merged, secondary-container) {
+    --rail-nav-secondary-container: #{map.get($merged, secondary-container)};
+  }
+  @if map.get($merged, on-secondary-container) {
+    --rail-nav-on-secondary-container: #{map.get($merged, on-secondary-container)};
+  }
+  @if map.get($merged, primary) {
+    --rail-nav-primary: #{map.get($merged, primary)};
+  }
+  @if map.get($merged, error) {
+    --rail-nav-error: #{map.get($merged, error)};
+  }
+  @if map.get($merged, on-error) {
+    --rail-nav-on-error: #{map.get($merged, on-error)};
+  }
+}

package/types/softwarity-rail-nav.d.ts

@@ -0,0 +1,78 @@
+import * as _angular_core from '@angular/core';
+import { AfterContentInit } from '@angular/core';
+import { MatSidenav, MatSidenavContainer, MatSidenavContent } from '@angular/material/sidenav';
+
+declare class RailnavComponent extends MatSidenav {
+    /** Position: 'start' (left) or 'end' (right) - aliased to avoid conflict with MatSidenav.position */
+    readonly railPosition: _angular_core.InputSignal<"start" | "end">;
+    /** Hide the default header (burger + title/subtitle) */
+    readonly hideDefaultHeader: _angular_core.InputSignal<boolean>;
+    /** Title displayed when expanded */
+    readonly title: _angular_core.InputSignal<string | undefined>;
+    /** Subtitle displayed when expanded */
+    readonly subtitle: _angular_core.InputSignal<string | undefined>;
+    /** Whether to auto-collapse when an item is clicked */
+    readonly autoCollapse: _angular_core.InputSignal<boolean>;
+    /** Whether the rail is expanded to show labels */
+    readonly expanded: _angular_core.WritableSignal<boolean>;
+    constructor();
+    /** Toggle between collapsed (rail) and expanded (drawer) */
+    toggleExpanded(): void;
+    /** Collapse the rail */
+    collapse(): void;
+    /** Expand the rail to drawer */
+    expand(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RailnavComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RailnavComponent, "rail-nav", never, { "railPosition": { "alias": "position"; "required": false; "isSignal": true; }; "hideDefaultHeader": { "alias": "hideDefaultHeader"; "required": false; "isSignal": true; }; "title": { "alias": "title"; "required": false; "isSignal": true; }; "subtitle": { "alias": "subtitle"; "required": false; "isSignal": true; }; "autoCollapse": { "alias": "autoCollapse"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class RailnavContainerComponent extends MatSidenavContainer implements AfterContentInit {
+    /** Whether to show backdrop when expanded */
+    readonly showBackdrop: _angular_core.InputSignal<boolean>;
+    railnav?: RailnavComponent;
+    ngAfterContentInit(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RailnavContainerComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RailnavContainerComponent, "rail-nav-container", never, { "showBackdrop": { "alias": "showBackdrop"; "required": false; "isSignal": true; }; }, {}, ["railnav"], ["*"], true, never>;
+}
+
+declare class RailnavContentComponent extends MatSidenavContent {
+    /** Optional: Position of the rail. If not set, uses the sibling rail-nav's position */
+    readonly position: _angular_core.InputSignal<"start" | "end" | undefined>;
+    /** Parent container that gives access to sibling rail-nav */
+    private container;
+    /** Effective position - from input or from sibling rail-nav */
+    protected readonly effectivePosition: _angular_core.Signal<"start" | "end">;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RailnavContentComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RailnavContentComponent, "rail-nav-content", never, { "position": { "alias": "position"; "required": false; "isSignal": true; }; }, {}, never, ["*"], true, never>;
+}
+
+declare class RailnavItemComponent {
+    /** Router link for navigation */
+    readonly routerLink: _angular_core.InputSignal<string | any[] | undefined>;
+    /** Label text displayed */
+    readonly label: _angular_core.InputSignal<string | undefined>;
+    /** Badge value (number, text, or true for dot badge) */
+    readonly badge: _angular_core.InputSignal<string | number | boolean | undefined>;
+    /** Whether this item is active (for non-router usage) */
+    readonly active: _angular_core.InputSignal<boolean>;
+    /** Whether to show a badge */
+    protected readonly hasBadge: _angular_core.Signal<boolean>;
+    /** Whether to show a small dot badge (no text) */
+    protected readonly isDotBadge: _angular_core.Signal<boolean>;
+    /** Click event (for non-router usage) */
+    readonly itemClick: _angular_core.OutputEmitterRef<void>;
+    /** Reference to parent rail-nav */
+    private railnav;
+    /** Whether the rail is expanded */
+    protected expanded: _angular_core.Signal<boolean>;
+    /** Position of the rail (start or end) */
+    protected position: _angular_core.Signal<"start" | "end">;
+    /** Handle item click - emit event and optionally collapse rail */
+    protected onItemClick(): void;
+    /** Handle router link click - optionally collapse rail */
+    protected onRouterLinkClick(): void;
+    static ɵfac: _angular_core.ɵɵFactoryDeclaration<RailnavItemComponent, never>;
+    static ɵcmp: _angular_core.ɵɵComponentDeclaration<RailnavItemComponent, "rail-nav-item", never, { "routerLink": { "alias": "routerLink"; "required": false; "isSignal": true; }; "label": { "alias": "label"; "required": false; "isSignal": true; }; "badge": { "alias": "badge"; "required": false; "isSignal": true; }; "active": { "alias": "active"; "required": false; "isSignal": true; }; }, { "itemClick": "itemClick"; }, never, ["*", "*"], true, never>;
+}
+
+export { RailnavComponent, RailnavContainerComponent, RailnavContentComponent, RailnavItemComponent };