\n Sizes\n
\n\n\n @for (avatar of sizedAvatars; track avatar.label) {\n
\n \n
\n }\n Angular pipe for formatting Money values in templates.
\nExample :<!-- Display Money with default locale -->\n<span>{{ plannedAmount | money }}</span>\n___COMPODOC_EMPTY_LINE___\n<!-- Display Money with custom locale -->\n<span>{{ plannedAmount | money:'en-US' }}</span>Atoms
\n\n mnl-avatar keeps profile imagery and initials consistent, with graceful fallback to\n initials or a default Lucide user icon when no image is available.\n
\n\n Circular portraits, initials, and icon fallbacks adapt to the current theme\n without losing contrast.\n
\n\n Molecules\n
\n\n mnl-card provides the reusable island container for summaries, lists, and action areas,\n with optional header/footer slots and an interactive hover treatment.\n
\n\n Cards keep their soft elevation and semantic content hierarchy across both Menlo\n themes.\n
\n{{ example.label }}
\n\n {{ example.description }}\n
\n\n Track shared household commitments and keep an eye on utilization before the\n next payday.\n
\n\n\n Foundations\n
\n\n ng-apexcharts inherits Menlo's Catppuccin palette through a reactive chart token and\n shared default options for typography, grid, tooltip, and axis styling.\n
\n\n Active theme\n
\n\n {{ currentTheme() }}\n
\n\n Palette colors\n
\n\n Shared options\n
\n\n Nunito Sans, theme-aware tooltip mode, and subdued axis/grid tokens come from\n createMnlChartOptions().\n
\n\n {{ chartCard.chartLabel }}\n
\n\n {{ chartCard.chartDescription }}\n
\n\n {{ label() }}\n
\n\n\n {{ value() }}\n
\n\n @if (trend(); as trend) {\nMenlo
\n\n Navigation adapts between a thumb-friendly tab bar and spacious desktop sidebar.\n
\nAtoms
\n\n mnl-progress communicates budget health with semantic colour variants, accessible\n progressbar semantics, and reduced-motion friendly fill transitions.\n
\n\n Accent, success, warning, and error variants stay readable in both Menlo themes.\n
\n\n Molecules\n
\n\n mnl-stat turns key financial figures into readable summary blocks with optional\n directional trend badges.\n
\n\n Large values stay prominent while the trend badges keep direction and status\n scannable.\n
\n\r\n {{ forecasts() | json }}\r\n \r\n `,\r\n styles: ``\r\n})\r\nexport class MenloLib {\r\n public forecasts = signal\n Molecules\n
\n\n mnl-amount-input adds a compound currency prefix, grouped number formatting, and\n ControlValueAccessor support for Menlo's budget forms.\n
\n\n The grouped value, accent focus ring, and error treatment stay consistent across\n themes.\n
\n\n Molecules\n
\n\n mnl-amount-input adds a compound currency prefix, grouped number formatting, and\n ControlValueAccessor support for Menlo's budget forms.\n
\n\n The grouped value, accent focus ring, and error treatment stay consistent across\n themes.\n
\nAtoms
\n\n mnl-avatar keeps profile imagery and initials consistent, with graceful fallback to\n initials or a default Lucide user icon when no image is available.\n
\n\n Circular portraits, initials, and icon fallbacks adapt to the current theme\n without losing contrast.\n
\nAtoms
\n\n mnl-avatar keeps profile imagery and initials consistent, with graceful fallback to\n initials or a default Lucide user icon when no image is available.\n
\n\n Circular portraits, initials, and icon fallbacks adapt to the current theme\n without losing contrast.\n
\nAtoms
\n\n mnl-badge packages status tokens into a compact pill that can show dot or icon\n affordances across both Menlo themes.\n
\n\n Semantic status pills keep their contrast while staying compact enough for\n cards, lists, and dashboards.\n
\nAtoms
\n\n mnl-badge packages status tokens into a compact pill that can show dot or icon\n affordances across both Menlo themes.\n
\n\n Semantic status pills keep their contrast while staying compact enough for\n cards, lists, and dashboards.\n
\nAtoms
\n\n mnl-button is the shared action primitive for Menlo. These previews cover all variants,\n sizes, loading and disabled states, and projected Lucide icon examples in both themes.\n
\n\n Rounded-xl buttons with semantic Catppuccin tokens and accessible focus states.\n
\nAtoms
\n\n mnl-button is the shared action primitive for Menlo. These previews cover all variants,\n sizes, loading and disabled states, and projected Lucide icon examples in both themes.\n
\n\n Rounded-xl buttons with semantic Catppuccin tokens and accessible focus states.\n
\n\n Molecules\n
\n\n mnl-card provides the reusable island container for summaries, lists, and action areas,\n with optional header/footer slots and an interactive hover treatment.\n
\n\n Cards keep their soft elevation and semantic content hierarchy across both Menlo\n themes.\n
\n{{ example.label }}
\n\n {{ example.description }}\n
\n\n Track shared household commitments and keep an eye on utilization before the\n next payday.\n
\n\n\n Molecules\n
\n\n mnl-card provides the reusable island container for summaries, lists, and action areas,\n with optional header/footer slots and an interactive hover treatment.\n
\n\n Cards keep their soft elevation and semantic content hierarchy across both Menlo\n themes.\n
\n{{ example.label }}
\n\n {{ example.description }}\n
\n\n Track shared household commitments and keep an eye on utilization before the\n next payday.\n
\n\n\n This story verifies Catppuccin tokens, Nunito Sans, semantic theme colors, and the\n root ThemeService toggle inside Storybook.\n
\n\n This story verifies Catppuccin tokens, Nunito Sans, semantic theme colors, and the\n root ThemeService toggle inside Storybook.\n
\n\n Molecules\n
\n\n Resize the Storybook viewport to switch between the fixed mobile tab bar and the desktop\n sidebar while keeping the same router-aware navigation model.\n
\n\n Active state, badges, and navigation positioning stay consistent across\n viewports.\n
\n \n\n2 categories
\n\n +R 850\n
\n\n Organisms\n
\n\n The page shell composes the responsive navigation scaffold with a padded, max-width\n content column that stays scrollable across route changes.\n
\n\n Page content remains centered, padded, and scrollable while navigation adapts\n to the current viewport.\n
\nR 24 900
\n \n\nR 18 640
\n \n\n\n R 6 260\n
\n \n\n This placeholder content makes the shell scrollable so viewport padding,\n max-width constraints, and route-reset behavior are easy to review.\n
\n \n }\n\n Molecules\n
\n\n mnl-form-field standardizes labels, hints, and validation messaging around projected\n inputs while keeping the atoms responsible for their own interaction behavior.\n
\n\n Labels stay compact, help text stays subtle, and validation stays visible in\n both themes.\n
\n\n Molecules\n
\n\n mnl-form-field standardizes labels, hints, and validation messaging around projected\n inputs while keeping the atoms responsible for their own interaction behavior.\n
\n\n Labels stay compact, help text stays subtle, and validation stays visible in\n both themes.\n
\n\n Organisms\n
\n\n The layout keeps projected sections readable, lets consumers opt into desktop grids, and\n pins the action bar to the panel edge while the form body scrolls.\n
\n\n\n Budget details\n
\n\n Preview the shared form structure inside a responsive panel.\n
\n\n Organisms\n
\n\n The layout keeps projected sections readable, lets consumers opt into desktop grids, and\n pins the action bar to the panel edge while the form body scrolls.\n
\n\n\n Budget details\n
\n\n Preview the shared form structure inside a responsive panel.\n
\n\n Foundations\n
\n\n ng-apexcharts inherits Menlo's Catppuccin palette through a reactive chart token and\n shared default options for typography, grid, tooltip, and axis styling.\n
\n\n Active theme\n
\n\n {{ currentTheme() }}\n
\n\n Palette colors\n
\n\n Shared options\n
\n\n Nunito Sans, theme-aware tooltip mode, and subdued axis/grid tokens come from\n createMnlChartOptions().\n
\n\n {{ chartCard.chartLabel }}\n
\n\n {{ chartCard.chartDescription }}\n
\n\n Foundations\n
\n\n ng-apexcharts inherits Menlo's Catppuccin palette through a reactive chart token and\n shared default options for typography, grid, tooltip, and axis styling.\n
\n\n Active theme\n
\n\n {{ currentTheme() }}\n
\n\n Palette colors\n
\n\n Shared options\n
\n\n Nunito Sans, theme-aware tooltip mode, and subdued axis/grid tokens come from\n createMnlChartOptions().\n
\n\n {{ chartCard.chartLabel }}\n
\n\n {{ chartCard.chartDescription }}\n
\n\n Foundations\n
\n\n Catppuccin tokens are documented side-by-side so designers and developers can compare\n Latte and Mocha values without switching context. Contrast ratios are measured against\n each theme's page background.\n
\n\n Semantic Menlo tokens inherit these values through CSS variables.\n
\n{{ token.label }}
\n{{ token.classes }}
\n{{ token.note }}
\n| Token | \nLatte | \nContrast | \nMocha | \nContrast | \n
|---|---|---|---|---|
| {{ row.token }} | \n\n \n \n {{ row.latte }}\n | \n {{ row.latteContrast }} | \n\n \n \n {{ row.mocha }}\n | \n {{ row.mochaContrast }} | \n
\n Foundations\n
\n\n Catppuccin tokens are documented side-by-side so designers and developers can compare\n Latte and Mocha values without switching context. Contrast ratios are measured against\n each theme's page background.\n
\n\n Semantic Menlo tokens inherit these values through CSS variables.\n
\n{{ token.label }}
\n{{ token.classes }}
\n{{ token.note }}
\n| Token | \nLatte | \nContrast | \nMocha | \nContrast | \n
|---|---|---|---|---|
| {{ row.token }} | \n\n \n \n {{ row.latte }}\n | \n {{ row.latteContrast }} | \n\n \n \n {{ row.mocha }}\n | \n {{ row.mochaContrast }} | \n
\n Foundations\n
\n\n Menlo uses Lucide as the shared icon library. Each icon here is documented with the\n symbol name and import path for quick copy/paste into component work.\n
\n\n Commonly-used Lucide icons for home, budget, and feedback flows.\n
\n{{ entry.name }}
\nlucide-angular\n \r\n Foundations\r\n
\r\n\r\n Menlo uses Lucide as the shared icon library. Each icon here is documented with the\r\n symbol name and import path for quick copy/paste into component work.\r\n
\r\n\r\n Commonly-used Lucide icons for home, budget, and feedback flows.\r\n
\r\n{{ entry.name }}
\r\nlucide-angular\r\n \n Foundations\n
\n\n Menlo keeps elevation minimal and relies on generous rounding to make surfaces feel soft\n and touch-friendly across phones and desktop dashboards.\n
\n\n Elevation and rounding tokens previewed in {{ theme.mode }} mode.\n
\nShadow scale
\n{{ token.label }}
\n{{ token.note }}
\n{{\n token.classes\n }}\n Radius tokens
\n{{ token.label }}
\n{{ token.note }}
\n{{\n token.classes\n }}\n \n Foundations\n
\n\n Menlo keeps elevation minimal and relies on generous rounding to make surfaces feel soft\n and touch-friendly across phones and desktop dashboards.\n
\n\n Elevation and rounding tokens previewed in {{ theme.mode }} mode.\n
\nShadow scale
\n{{ token.label }}
\n{{ token.note }}
\n{{\n token.classes\n }}\n Radius tokens
\n{{ token.label }}
\n{{ token.note }}
\n{{\n token.classes\n }}\n \n Foundations\n
\n\n Menlo uses Tailwind's 4px spacing rhythm. These references make it easy to align cards,\n page gutters, and component internals around the same scale.\n
\n\n Utilities from 1 (4px) through 16 (64px).\n
\nStep {{ space.step }}
\n{{ space.rem }}
\n{{ space.pixels }}px
\n{{ space.classNames }}\n \n }\n \n Foundations\n
\n\n Menlo uses Tailwind's 4px spacing rhythm. These references make it easy to align cards,\n page gutters, and component internals around the same scale.\n
\n\n Utilities from 1 (4px) through 16 (64px).\n
\nStep {{ space.step }}
\n{{ space.rem }}
\n{{ space.pixels }}px
\n{{ space.classNames }}\n \n }\n \n Foundations\n
\n\n Nunito Sans is the default typeface across the system. Each role below documents the\n intended Tailwind class recipe and usage guidance.\n
\n\n Typography roles shown in {{ theme.mode }} mode.\n
\n{{ role.role }}
\n{{ role.classes }}
\n{{ role.note }}
\n\n Foundations\n
\n\n Nunito Sans is the default typeface across the system. Each role below documents the\n intended Tailwind class recipe and usage guidance.\n
\n\n Typography roles shown in {{ theme.mode }} mode.\n
\n{{ role.role }}
\n{{ role.classes }}
\n{{ role.note }}
\nAtoms
\n\n mnl-input provides a rounded-lg field primitive with signal-based value changes, error\n styling, icon slots, and ControlValueAccessor support for Menlo forms.\n
\n\n Accent rings stay pink, error states stay red, and the field remains legible in\n both themes.\n
\nAtoms
\n\n mnl-input provides a rounded-lg field primitive with signal-based value changes, error\n styling, icon slots, and ControlValueAccessor support for Menlo forms.\n
\n\n Accent rings stay pink, error states stay red, and the field remains legible in\n both themes.\n
\n\n Molecules\n
\n\n mnl-list-item standardises icon-or-avatar list rows so categories, settings, and\n transactions line up with a shared hover and selection treatment.\n
\n\n Rows stay readable whether they carry icons, avatars, badges, or lightweight\n trailing actions.\n
\nBudget categories
\n\n Keep groceries, utilities, and fuel tidy.\n
\nCard payment
\nPick n Pay · Approved 2 minutes ago
\nNotifications
\n\n Budget alerts and weekly recap emails.\n
\nDebit card ending 4002
\n\n Tap to update the repayment account.\n
\n\n Spending threshold alert\n
\nWarn me once groceries pass 85%.
\n\n Molecules\n
\n\n mnl-list-item standardises icon-or-avatar list rows so categories, settings, and\n transactions line up with a shared hover and selection treatment.\n
\n\n Rows stay readable whether they carry icons, avatars, badges, or lightweight\n trailing actions.\n
\nBudget categories
\n\n Keep groceries, utilities, and fuel tidy.\n
\nCard payment
\nPick n Pay · Approved 2 minutes ago
\nNotifications
\n\n Budget alerts and weekly recap emails.\n
\nDebit card ending 4002
\n\n Tap to update the repayment account.\n
\n\n Spending threshold alert\n
\nWarn me once groceries pass 85%.
\n\n {{ forecasts() | json }}\n\n",
+ "templateUrl": [],
+ "viewProviders": [],
+ "hostDirectives": [],
+ "inputsClass": [],
+ "outputsClass": [],
+ "propertiesClass": [
+ {
+ "name": "forecasts",
+ "defaultValue": "signal\r\n {{ forecasts() | json }}\r\n \r\n `,\r\n styles: ``\r\n})\r\nexport class MenloLib {\r\n public forecasts = signal\n {{ hint() }}\n
\n }\n\n @if (error()) {\n\n {{ hint() }}\n
\n }\n\n @if (error()) {\n\n {{ label() }}\n
\n\n\n {{ value() }}\n
\n\n @if (trend(); as trend) {\n\n {{ label() }}\n
\n\n\n {{ value() }}\n
\n\n @if (trend(); as trend) {\nMenlo
\n\n Navigation adapts between a thumb-friendly tab bar and spacious desktop sidebar.\n
\nMenlo
\n\n Navigation adapts between a thumb-friendly tab bar and spacious desktop sidebar.\n
\n\n {{ message() }}\n
\n\n @if (dismissible()) {\n\n {{ message() }}\n
\n\n @if (dismissible()) {\n