@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.cursor/rules/modus-angular-essentials.mdc

@@ -0,0 +1,272 @@
+---
+description: Comprehensive essential rules for Angular + Vite development with Modus Design System
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Angular Essentials
+
+Comprehensive essential rules for Angular + Vite development with Modus Design System.
+
+## Design System Integration
+
+### Color Usage
+
+- **Use design system colors only** - `bg-background`, `text-foreground`, `bg-primary`, etc.
+- **Never use generic Tailwind colors** - No `bg-blue-500`, `text-gray-600`, etc.
+- **Never use hardcoded values** - No hex colors, RGB values, or CSS variables directly
+- **Use semantic color names** - `bg-destructive`, `text-warning`, `bg-success`
+- **Follow color hierarchy** - Background > Card > Primary > Secondary > Muted
+- **Test in all themes** - Ensure colors work in light and dark modes
+
+### Opacity Usage
+
+- **Use custom opacity utilities, not Tailwind /80 syntax** - `text-foreground-80` not `text-foreground/80`
+- **CSS variables don't work with Tailwind opacity modifiers** - Tailwind needs actual color values
+- **Available opacity levels** - `80`, `60`, `40`, `20` (e.g., `text-foreground-80`, `bg-primary-60`)
+- **Available utilities** - `text-*`, `bg-*`, `border-*` with opacity variants
+- **All utilities defined in styles.css** - No Tailwind config changes needed
+- **Respects theme switching** - Works in all 6 Modus themes
+
+### Border Usage
+
+- **Use design system border utilities only** - `border-default`, `border-success`, `border-warning`, `border-destructive`, `border-primary`
+- **Never use Tailwind color classes in borders** - No `border-blue-500`, `border-gray-300`, etc.
+- **Use `border-thick` for emphasis** - For important borders and separators
+- **Use directional borders** - `border-t`, `border-b`, `border-l`, `border-r` with design system colors
+- **No inline styles for borders** - Use Tailwind classes exclusively
+
+### Icons
+
+- **Use Modus icons exclusively** - `<i class="modus-icons">icon-name</i>` or `<modus-icon name="icon-name" />`
+- **Never use other icon libraries** - No Font Awesome, Material Icons, Heroicons, etc.
+- **Use valid icon names only** - Check Modus Icons documentation for valid names
+- **Size with Tailwind classes** - `text-sm`, `text-lg`, `text-xl` for sizing
+- **Color with design system** - `text-primary`, `text-foreground`, `text-foreground-60`
+- **Validate icon names** - Run `npm run lint:icon-names` to verify
+
+### No Emojis
+
+- **Never use emojis in code** - No emoji characters in any code files
+- **Never use emojis in components** - No emoji in templates, content, or UI elements
+- **Never use emojis in content** - No emoji in text, descriptions, or user-facing content
+- **Use Modus icons instead** - Replace emojis with appropriate Modus icons
+- **Use Unicode characters for symbols** - Use proper Unicode symbols when needed
+
+## Angular Integration Patterns
+
+### Core Integration
+
+- **Use wrapper components** - Always use `<modus-button>`, not `<modus-wc-button>` directly
+- **Signal-based API** - Use `input()`, `output()`, `signal()`, `computed()`
+- **OnPush change detection** - All components use `ChangeDetectionStrategy.OnPush`
+- **Event handling** - Extract `event.detail` from CustomEvent when needed
+- **Modern control flow** - Use `@if`, `@for`, `@switch`, not `*ngIf`, `*ngFor`
+- **inject() for DI** - Use `inject()` function, not constructor injection
+
+### Angular Best Practices
+
+- **Single configurable components** - One component with variants, not multiple specific components
+- **Use design system colors only** - Never use generic Tailwind colors or hardcoded values
+- **Component composition pattern** - Build complex components from smaller, reusable pieces
+- **Theme-aware components** - Use theme context for conditional styling and content
+- **Performance optimization** - Use computed signals and lazy loading where appropriate
+
+### Signal Patterns
+
+```typescript
+// Signal-based inputs
+readonly color = input<ButtonColor>('primary');
+readonly disabled = input<boolean>(false);
+
+// Signal-based outputs
+readonly buttonClick = output<MouseEvent | KeyboardEvent>();
+
+// Writable signals for local state
+readonly isOpen = signal(false);
+
+// Computed for derived state
+readonly isDisabled = computed(() => this.disabled() || this.loading());
+```
+
+## Component-Specific Rules
+
+### Accordion State Management
+
+- **Let Modus components manage their own state** - Don't try to control accordion state from Angular
+- **Use `expanded` for initial state only** - Set initial state, then let component handle changes
+- **Use `(expandedChange)` for tracking** - Monitor state changes without controlling them
+- **Use ViewChild for programmatic control** - Access component methods when needed
+- **Avoid real-time synchronization** - Don't sync Angular state with accordion state
+
+### Checkbox Value Inversion
+
+- **Always invert checkbox value property** - `const actualChecked = !value` from `inputChange` event
+- **Use wrapper components** - Create Angular wrapper to handle inversion automatically
+- **Never trust the raw value** - The `value` property is inverted (false when checked, true when unchecked)
+- **Handle in event handlers** - Invert value in `(inputChange)` event handler
+- **Test thoroughly** - Verify checkbox behavior matches expected state
+
+### Modal Implementation
+
+- **Use document.getElementById for modal access** - Get the dialog element by ID
+- **Type-safe access** - Cast to `HTMLDialogElement | null`
+- **Check method existence** - `typeof dialog.showModal === 'function'`
+- **Use native dialog API** - `dialog.showModal()` and `dialog.close()`
+- **Never use querySelector with web component selectors**
+- **Descriptive, kebab-case modal IDs**
+
+### Select vs Dropdown Menu
+
+- **Prefer ModusDropdownMenu** - More reliable event handling than ModusSelect
+- **Reliable itemSelect events** - ModusDropdownMenu provides consistent event handling
+- **Proper state management** - Use Angular signals to track selected values and visibility
+- **Programmatic control** - Use `menuVisible` property for control
+- **Test thoroughly** - Verify dropdown behavior and event handling
+
+### Button Group Usage
+
+- **Don't set defaults for variant/color in button wrapper** - Allows group to control
+- **Inside button group**: Do NOT set variant/color on individual buttons
+- **Standalone buttons**: Explicitly set variant and color
+- **Group controls all button styling** via DOM manipulation
+
+## HTML and Styling
+
+### Semantic HTML
+
+- **Use div elements only** - All content must use `<div>` elements
+- **No semantic HTML elements** - Never use `h1`, `p`, `section`, `header`, `footer`, `nav`, `main`, `aside`, `article`, `span`
+- **Use Tailwind classes for styling** - Apply typography and layout with Tailwind classes
+- **Icon exception** - Only `<i>` elements allowed for Modus icons
+- **Consistent structure** - Maintain consistent div-based component structure
+
+### Tailwind Usage
+
+- **Tailwind v4 with design system** - Use Tailwind v4 with Modus Design System integration
+- **No generic Tailwind colors** - Never use `bg-blue-500`, `text-gray-600`, etc.
+- **Use design system colors** - `bg-background`, `text-foreground`, `bg-primary`, etc.
+- **Custom utilities for borders** - Use `border-default`, `border-success`, `border-warning`, etc.
+- **Custom utilities for opacity** - Use `text-foreground-80`, not `text-foreground/80`
+- **Test in all themes** - Ensure Tailwind classes work in all 6 themes
+
+## Theming
+
+### Theme Implementation
+
+- **6 Modus themes supported** - Classic Light/Dark, Modern Light/Dark, Connect Light/Dark
+- **Use data-theme attribute** - `data-theme="modus-classic-light"` on document
+- **Theme persistence** - Save to localStorage and restore on page load
+- **Theme-aware components** - Use computed signals for theme-specific styling
+- **Test all themes** - Verify components work in all 6 themes
+
+## Development Workflow
+
+### Quality Assurance
+
+- **Run linting commands during development** - `npm run lint:all` before commits
+- **Fix violations before committing** - No violations in committed code
+- **Check inline styles** - `npm run lint:styles` to catch inline style violations
+- **Verify design system colors** - `npm run lint:colors` for color compliance
+- **Validate Modus icons** - `npm run lint:icons` for icon usage
+- **Verify border usage** - `npm run lint:borders` for border compliance
+- **Check opacity utilities** - `npm run lint:opacity` for opacity compliance
+- **TypeScript validation** - `npm run type-check` for type errors
+
+### Testing
+
+- **Use Chrome DevTools MCP** - Real-time browser debugging
+- **Test before completion** - Validate all implementations in browser
+- **Check console for errors** - Look for JavaScript errors and warnings
+- **Test interactive elements** - Verify Modus Web Components work correctly
+- **Performance testing** - Use DevTools for performance analysis
+- **Test all 6 themes** - Verify components work in all themes
+
+### Linting Commands
+
+```bash
+npm run lint:styles    # Check inline styles
+npm run lint:colors    # Check color usage
+npm run lint:icons     # Check icon usage
+npm run lint:borders   # Check border violations
+npm run lint:opacity   # Check opacity utilities
+npm run lint:icon-names # Validate icon names
+npm run type-check     # TypeScript validation
+npm run lint:all       # Run all checks
+```
+
+## Quick Reference
+
+### Correct Patterns
+
+```typescript
+// Signal-based component
+@Component({
+  selector: 'app-example',
+  template: `
+    <div class="bg-background text-foreground p-4">
+      @if (isVisible()) {
+        <modus-button
+          [color]="color()"
+          [disabled]="disabled()"
+          (buttonClick)="handleClick($event)"
+        >
+          {{ buttonText() }}
+        </modus-button>
+      }
+    </div>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ExampleComponent {
+  readonly color = input<ButtonColor>('primary');
+  readonly disabled = input<boolean>(false);
+  readonly buttonText = input<string>('Click Me');
+  readonly isVisible = signal(true);
+
+  handleClick(event: MouseEvent | KeyboardEvent): void {
+    console.log('Button clicked:', event);
+  }
+}
+```
+
+### Forbidden Patterns
+
+```typescript
+// WRONG: Generic Tailwind colors
+template: `<div class="bg-blue-500 text-white">`
+
+// WRONG: Semantic HTML
+template: `<h1>Title</h1><p>Content</p>`
+
+// WRONG: Opacity with / syntax
+template: `<div class="text-foreground/80">`
+
+// WRONG: Tailwind border colors
+template: `<div class="border-red-500">`
+
+// WRONG: Direct web component usage
+template: `<modus-wc-button>`
+
+// WRONG: @Input() decorator
+@Input() color: string;
+
+// WRONG: *ngIf directive
+template: `<div *ngIf="condition">`
+```
+
+## Reference
+
+This rule consolidates all essential Modus Angular development guidelines. For detailed patterns, examples, and advanced techniques, refer to the individual rule files:
+
+- `modus-angular-20.mdc` - Angular 20 patterns
+- `modus-angular-design-system.mdc` - Colors, opacity, borders
+- `modus-angular-integration.mdc` - Wrapper component patterns
+- `modus-angular-icons.mdc` - Icon usage
+- `modus-angular-accordion-state-management.mdc` - Accordion state
+- `modus-angular-checkbox-value-inversion.mdc` - Checkbox bug handling
+- `modus-angular-button-group-usage.mdc` - Button group patterns
+- `modus-angular-select-vs-dropdown-menu.mdc` - Dropdown patterns
+- `modus-angular-semantic-html.mdc` - Div-only HTML
+- `modus-angular-development-workflow.mdc` - Linting and workflow
+- `modus-angular-chrome-devtools-testing.mdc` - Testing patterns

package/templates/angular/.cursor/rules/modus-angular-forms-validation-short.mdc

@@ -0,0 +1,56 @@
+---
+description: Comprehensive rules for implementing forms and validation in Angular with Modus
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Forms Validation - Short
+
+Essential patterns for forms and validation with Modus Web Components.
+
+## Key Rules
+
+- **Always use Reactive Forms** - Don't use template-driven forms
+- **Track touched state manually** - Modus components don't integrate with Angular form state
+- **Use computed signals for feedback** - Reactive, efficient validation
+- **Check touched state before showing errors** - Better UX
+- **Handle both inputChange and inputBlur** - Complete interaction tracking
+- **Extract event.detail** - Correct event handling pattern
+
+## Manual Touch Tracking
+
+```typescript
+readonly touchedFields = signal<Set<string>>(new Set());
+
+handleFieldChange(event: InputEvent, fieldName: string): void {
+  const target = event.target as HTMLInputElement;
+  this.form.controls[fieldName].setValue(target.value);
+  this.markFieldTouched(fieldName);
+}
+
+private markFieldTouched(fieldName: string): void {
+  this.touchedFields.update((fields) => {
+    const newFields = new Set(fields);
+    newFields.add(fieldName);
+    return newFields;
+  });
+}
+```
+
+## Validation Feedback
+
+```typescript
+readonly emailFeedback = computed<IInputFeedbackProp | undefined>(() => {
+  const control = this.form.controls.email;
+  const isTouched = this.touchedFields().has('email');
+  if (!isTouched || !control.errors) return undefined;
+  if (control.errors['required']) {
+    return { level: 'error', message: 'Email is required.' };
+  }
+  return undefined;
+});
+```
+
+## Reference
+
+For detailed form patterns and validation strategies, fetch the full rule: `modus-angular-forms-validation`

package/templates/angular/.cursor/rules/modus-angular-forms-validation.mdc

@@ -0,0 +1,124 @@
+---
+description: Comprehensive rules for implementing forms and validation in Angular with Modus Web Components
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Forms and Validation Rules
+
+Comprehensive guide for implementing forms and validation in Angular applications with Modus Web Components.
+
+## Core Principles
+
+### ALWAYS Use Reactive Forms
+
+```typescript
+import { FormBuilder, ReactiveFormsModule, Validators } from '@angular/forms';
+
+@Component({
+  imports: [ReactiveFormsModule],
+})
+export class MyFormComponent {
+  private readonly fb = new FormBuilder();
+
+  readonly form = this.fb.group({
+    email: ['', [Validators.required, Validators.email]],
+    password: ['', [Validators.required, Validators.minLength(8)]],
+  });
+}
+```
+
+## CRITICAL: Track Touched State Manually
+
+**Modus Web Components don't automatically track Angular form touched state.** You must manually track which fields have been touched.
+
+```typescript
+export class FormComponent {
+  readonly touchedFields = signal<Set<string>>(new Set());
+
+  handleFieldChange(event: InputEvent, fieldName: string): void {
+    const target = event.target as HTMLInputElement;
+    const control = this.form.controls[fieldName];
+    control.setValue(target.value);
+    this.markFieldTouched(fieldName);
+  }
+
+  handleFieldBlur(fieldName: string): void {
+    this.markFieldTouched(fieldName);
+  }
+
+  private markFieldTouched(fieldName: string): void {
+    this.touchedFields.update((fields) => {
+      const newFields = new Set(fields);
+      newFields.add(fieldName);
+      return newFields;
+    });
+  }
+}
+```
+
+## Validation Feedback Pattern
+
+### Use Computed Signals for Validation Feedback
+
+```typescript
+readonly emailFeedback = computed<IInputFeedbackProp | undefined>(() => {
+  const control = this.form.controls.email;
+  const isTouched = this.touchedFields().has('email');
+
+  if (!isTouched || !control.errors) return undefined;
+
+  if (control.errors['required']) {
+    return { level: 'error', message: 'Email address is required.' };
+  }
+  if (control.errors['email']) {
+    return { level: 'error', message: 'Please enter a valid email address.' };
+  }
+  return undefined;
+});
+```
+
+## Connecting Modus Components to Forms
+
+### Text Inputs
+
+```typescript
+readonly firstNameFeedback = computed<IInputFeedbackProp | undefined>(() => {
+  const control = this.form.controls.firstName;
+  const isTouched = this.touchedFields().has('firstName');
+  if (!isTouched || !control.errors) return undefined;
+  if (control.errors['required']) {
+    return { level: 'error', message: 'First name is required.' };
+  }
+  return undefined;
+});
+
+handleFirstNameChange(event: InputEvent): void {
+  const target = event.target as HTMLInputElement;
+  this.form.controls.firstName.setValue(target.value);
+  this.markFieldTouched('firstName');
+}
+```
+
+```html
+<modus-text-input
+  inputId="firstName"
+  placeholder="Enter first name"
+  [required]="true"
+  [value]="form.controls.firstName.value ?? ''"
+  [feedback]="firstNameFeedback()"
+  (inputChange)="handleFirstNameChange($event.detail)"
+  (inputBlur)="handleFirstNameBlur()"
+/>
+```
+
+## Best Practices Summary
+
+1. **ALWAYS use Reactive Forms** - Don't use template-driven forms
+2. **ALWAYS track touched state manually** - Modus components don't integrate automatically
+3. **ALWAYS use computed signals for feedback** - Reactive, efficient validation
+4. **ALWAYS check touched state before showing errors** - Better UX
+5. **ALWAYS use specific error messages** - Helpful, clear feedback
+6. **ALWAYS handle both inputChange and inputBlur** - Complete interaction tracking
+7. **ALWAYS extract event.detail** - Correct event handling
+8. **ALWAYS use null coalescing for value bindings** - `form.controls.field.value ?? ''`

package/templates/angular/.cursor/rules/modus-angular-icon-names.mdc

@@ -0,0 +1,70 @@
+---
+description: Complete list of valid Modus icon names for Angular applications
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+## Complete Icon Names List
+
+**Only these names are allowed** when using Modus icons. Always verify icon names against this list before using them.
+
+### A-C
+
+accessibility, accessibility_circle, add, add_bold, add_circle, add_heavy, address, advanced_instructions, alarm_add, alarm_off, alarm_on, alert, alert_outlined, align_bottom, align_center_horiz, align_center_vert, align_left, align_right, align_top, angle_90, antenna, apps, arc, arrow_back, arrow_down, arrow_down_circle, arrow_expand_diagonal_left, arrow_expand_diagonal_right, arrow_left, arrow_left_circle, arrow_next, arrow_right, arrow_right_circle, arrow_up, arrow_up_circle, artificial_intelligence, backup_restore_cloud, backup_restore_file, bar_graph, bar_graph_line, bar_graph_square, barcode, battery_0_horizontal, battery_0_vertical, battery_25_horizontal, battery_25_vertical, battery_50_horizontal, battery_50_vertical, battery_75_horizontal, battery_75_vertical, battery_charging_horizontal, battery_charging_vertical, battery_full_horizontal, battery_full_vertical, between, bolt, bookings, bookings_open, box_select, briefcase, brightness, brush, bug, bug_report, building_corporate, buildings, calculate, calculator, calculator_symbols, calendar, calendar_add, calendar_and_key, calendar_blank, calendar_booking, calendar_cancel, calendar_check, calendar_clock, calendar_event, calendar_loading_unloading, calendar_loading_unloading_date, calendar_plus, calendar_rebook, calendar_reserve, calendar_show, calendar_time_slot, calendar_week, camera, camera_disabled, camera_photo_add, cancel_circle, cancel_square, cancel_square_outlined, caret_down, caret_down_bold, caret_left, caret_left_bold, caret_right, caret_right_bold, caret_up, caret_up_bold, cell_merge, cell_properties, cell_split, certificate, chat, check, check_bold, check_circle, check_circle_outlined, check_heavy, chevron_double_down, chevron_double_left, chevron_double_right, chevron_double_up, chevron_left, chevron_left_bold, chevron_right, chevron_right_bold, circle_notch, circle_outline, clipboard, clipboard_actions, clipboard_check, clipboard_empty, clipboard_planning, clock, clock_add, clock_checkmark, clock_delay_warning, clock_delayed, clock_locked, clock_question_mark, close, close_bold, close_heavy, cloud, cloud_connected, cloud_disconnected, cloud_download, cloud_upload, code, coffee_cup, collapse, collapse_bold, color_picker, column_copy, column_cut, column_delete, column_insert_after, column_insert_before, column_paste_after, column_paste_before, column_properties, columns, combine, comment, comment_add, comment_empty, comment_message, comment_message_disabled, compare_arrows, compass, component, contacts, contrast, copy_content, costs, credit_card, crop, cube, curly_brackets, cursor, cursor_add, cursor_remove
+
+### D-H
+
+dashboard, data_missing, data_transfer_off, day_mostly_cloudy, day_partly_cloudy, delete, delivery_truck, delivery_truck_allocate, delivery_truck_motion, document, download, download_line, download_xls, drag_corner, drag_horizontal, drag_indicator, drag_vertical, drivers, drizzle, drone, earnings_statement, edit_combination, email, email_add, envelope, eraser, exclamation_mark, expand, expand_bold, expand_less, expand_less_bold, expand_less_circle, expand_more, expand_more_bold, expand_more_circle, export, factory, fast_forward, fast_rewind, file, file_bar_graph, file_check_in, file_check_out, file_cloud, file_copy, file_edit, file_merge, file_missing, file_new, file_secure, file_table, file_type_bmpf, file_type_csv, file_type_cur, file_type_doc, file_type_ico, file_type_key, file_type_log, file_type_numbers, file_type_pdf, file_type_pem, file_type_rfi, file_type_rfq, file_type_rtf, file_type_text, file_type_tif, file_type_tmp, file_type_xls, filter, filter_list, filter_off, first_page, flag, flag_finish, floorplan, flowchart, fog, folder_closed, folder_locked, folder_new, folder_open, folder_personal, folder_project, folder_public, folder_share, folder_unlocked, footprints, forestry, forklift, frame, freight_market, freight_matching, freight_trolley, full_screen, function, gantt_chart, gavel, gears, greater_than_equal_to, group_items, hail, hail_heavy, hail_light, hammer, hand, hard_hat, headset, heart, helicopter, help, help_outlined, history, home, hourglass
+
+### I-O
+
+ice, icons_shapes, image, image_add, image_disabled, image_scene, in_cab_device, in_field_device, info, info_outlined, info_token, inspect, invoice, invoice_euro, invoice_pound, invoice_yen, item_begins_with, item_contains, item_does_not_contain, item_does_not_equal, item_ends_with, item_equals, key, keyboard, keyboard_keys, labs, language, last_page, launch, launch_bold, layer, learn, less_than_equal_to, lightbulb_off, lightbulb_on, lightning, line_diagonal, line_graph, link, link_broken, link_off, list_bulleted, list_numbered, list_shapes, location, location_add, location_add_multiple, location_arrow, location_disabled, location_point, lock, lock_open, magic_wand, manage_accounts, manage_people, map, map_2d, map_marker, map_marker_circle, map_marker_multiple, map_markers, map_poi, master_data, megaphone, menu, menu_circle, mic, mix, mobile_app_version, monetarization, moon, more_circle, more_horizontal, more_vertical, mouse, move, move_last_down, move_last_left, move_last_right, move_last_up, night_mostly_cloudy, night_partly_cloudy, no_package, no_truck, not_synced_bold, notifications, notifications_off, object_mirror, object_outline, object_rotate, offers, overcast
+
+### P-S
+
+package, package_delivered, package_delivery, package_missing, package_pickup, package_sent, pager, paint_bucket, palette, pan, paper_plane, paperclip, password, pause_circle, payment_instant, pen, pencil, people_add, people_couple, people_group, person, person_account, person_add, person_clock, person_edit, person_remove, phone, phone_call, phone_hang_up, phone_mobile, pin, pin_add, pin_straight, pin_straight_cancel, play_circle, point_marker_tool, polygon, polygon_area_tool, polygon_concave, polygon_cone, polygon_drag_rectangle, polygon_line_tool, polygon_merge, polygon_select, printer, pulse, qr_code, question, quick_login, rain, rain_heavy, rain_icy, raindrop, redo, redo_bold, refresh, refresh_bold, remove, remove_bold, remove_circle, remove_heavy, reply, rewind, row_add, row_copy, row_cut, row_delete, row_highlighted, row_insert_after, row_insert_before, row_paste_after, row_paste_before, row_properties, row_remove, rows_show_less, rows_show_more, rss_feed, ruler, satellite, save_as, save_disk, scan_barcode, schema, scissors, screen, screenshot, search, server, server_round, settings, share, shield, shopping_cart, shopping_cart_minus, shopping_cart_plus, shortcut, shovel, show_less_caret, show_more_caret, sign_in, sign_out, signal, smiley_dissatisfied, smiley_dissatisfied_outlined, smiley_neutral, smiley_neutral_outlined, smiley_satisfied, smiley_satisfied_outlined, smiley_somewhat_dissatisfied, smiley_somewhat_dissatisfied_outlined, smiley_somewhat_satisfied, smiley_somewhat_satisfied_outlined, snow_heavy, snow_light, snow_particle, snowflake, snowflakes, sort, sort_alpha_down, sort_alpha_up, sort_arrow_down, sort_arrow_up, sort_down, sort_up, star, star_half, star_locked, star_northern, star_outlined, stars, stop_circle, street_measurement, submit_expense, sun, swap, switch_account, switch_left, switch_right, sync, sync_bold, sync_off
+
+### T-Z and Numbers
+
+table, tablet, tag, tag_disabled, template, text_align_left, text_align_right, text_bold, text_centered, text_grow, text_input, text_input_long, text_input_short, text_italic, text_marker, text_shrink, text_strikethrough, text_truncated, text_underlined, thermometer_cold, thermometer_hot, thumbs_down, thumbs_up, thunderstorm_heavy, thunderstorm_light, ticket, ticket_plane, time_off_work, time_slot_not_reserved, time_slot_reserved, timer, timer_countdown, timesheet, timesheet_approve, toggle_center, toggle_left_panel, toggle_off, toggle_on, toggle_right_panel, traffic_cone, tree_structure, triangle_down, triangle_left, triangle_right, triangle_up, trimble_logo, truck_add, truck_warning_delay, tune, tune_circle, uncombine, undo, undo_bold, unfold_less, unfold_more, unit_selector, unsorted_arrows, update, upload, upload_xls, user_account, user_active, user_guide, user_inactive, user_passkey, user_permissions, video, video_add, video_disabled, view_grid, view_list, visibility_off, visibility_on, volume_down, volume_mute, volume_up, vr_xr, warehouse, warning, warning_outlined, web, wheelbarrow, widgets, wifi, wifi_no_internet, wifi_off, wind, window, window_dock_undock, window_fit, window_resize, window_side_panel, window_template, window_views, window_wireframe, wintery_mix, wrench, zoom_box, zoom_in, zoom_out, 2_layers, 2_layers_off, 360, add_square, archive_square, auto_target, avoidance_zone, background_dark, background_light, base_station, bullseye, bullseye_off, bullseye_warning, clip, compactor, corner, dashboard_tiles, design_package, device_cb460, device_tsc7, devices_group, devices_status, dozer, easting, edit_mode, electric_meter_off, electric_meter_off_outline, electric_meter_outline_rounded, electric_meter_rounded, electric_meter_rounded_warn, elevation, gnss, gnss_r8, gnss_r8s_base, gnss_rpt, gnss_rts, gnss_sps986, gps, grader, hex, horizontal_accuracy, image_square, image_square_off, image_square_off_outline, image_square_outline, machine, machines, measure_up, northing, orbit, orthogonal, perspective, prism_pole, prism_pole_extend, receiver_generic_error_filled, receiver_generic_error_outline, receiver_generic_filled, receiver_generic_off_filled, receiver_generic_off_outline, receiver_generic_outline, receiver_generic_warn_filled, receiver_generic_warn_outline, ri, rpt, rts, rts_off, rts_rpt, select_area, sx10, sync_filled, todo, todo_add, total_station, total_station_lost, unarchive_square, vertical_accuracy, view_2_rows, view_3_column, visibility_part_outline, workers_queue, x12, x7, x7_card, x7_settings, xr10, zoom_center
+
+## Icon Categories by Usage
+
+### Navigation & UI
+
+`arrow_left`, `arrow_right`, `arrow_up`, `arrow_down`, `chevron_left`, `chevron_right`, `menu`, `close`, `home`, `settings`, `search`
+
+### Actions & Operations
+
+`add`, `remove`, `edit_combination`, `delete`, `save_disk`, `download`, `upload`, `copy_content`
+
+### Status & Feedback
+
+`check`, `check_circle`, `warning`, `alert`, `info`, `cancel_circle`, `help`
+
+### Files & Documents
+
+`file`, `folder_open`, `folder_closed`, `document`, `image`, `video`
+
+### Communication
+
+`email`, `phone`, `chat`, `comment`, `notifications`
+
+### Time & Calendar
+
+`calendar`, `clock`, `timer`, `history`
+
+### User & Account
+
+`person`, `people_group`, `user_account`, `key`, `lock`
+
+### Data & Analytics
+
+`bar_graph`, `line_graph`, `dashboard`
+
+## Validation
+
+```bash
+# Validate icon names used in templates
+npm run lint:icon-names
+```

package/templates/angular/.cursor/rules/modus-angular-icons-short.mdc

@@ -0,0 +1,40 @@
+---
+description: Modus Icons usage guide for Angular applications
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Icons - Short
+
+Essential icon usage rules for Modus Design System in Angular.
+
+## Key Rules
+
+- **Use Modus icons exclusively** - `<i class="modus-icons">icon_name</i>`
+- **Use UNDERSCORES in names** - `save_disk`, `arrow_left`, NOT `save-disk`, `arrow-left`
+- **Never use other icon libraries** - No Font Awesome, Material Icons, Heroicons
+- **Use valid icon names only** - Check modus-angular-icon-names.mdc for valid names
+- **Size with Tailwind classes** - `text-sm`, `text-lg`, `text-xl` for sizing
+- **Color with design system** - `text-primary`, `text-foreground`, `text-muted-foreground`
+
+## Usage Patterns
+
+```html
+<!-- Direct HTML usage -->
+<i class="modus-icons text-lg" aria-hidden="true">save_disk</i>
+<i class="modus-icons text-base" role="img" aria-label="Settings">settings</i>
+
+<!-- In buttons -->
+<modus-button icon="save_disk" iconPosition="left">Save</modus-button>
+<modus-button icon="settings" iconPosition="only" ariaLabel="Settings"></modus-button>
+```
+
+## Common Icons
+
+- **Navigation:** `arrow_left`, `arrow_right`, `chevron_left`, `chevron_right`, `menu`, `close`
+- **Actions:** `add`, `add_circle`, `edit`, `delete`, `save_disk`, `download`, `upload`
+- **Status:** `check`, `check_circle`, `error`, `warning`, `info`, `help`
+
+## Reference
+
+For complete icon list and accessibility guidelines, fetch the full rule: `modus-angular-icons`