@julianoczkowski/create-trimble-app 2.0.0

package/templates/angular/.cursor/rules/modus-angular-border-usage.mdc

@@ -0,0 +1,286 @@
+---
+description: Essential border usage rules for Modus Design System integration in Angular + Vite
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Border Usage Guidelines - Modus Design System (Angular)
+
+## CRITICAL: Use Design System Border Utilities
+
+When working with borders in this Angular + Vite app, always use custom design system border utilities instead of Tailwind color classes or inline styles.
+
+## NEVER Do These
+
+### 1. Tailwind Color Classes in Borders
+
+```html
+<!-- WRONG: Tailwind color classes -->
+<div class="border border-red-500">Error message</div>
+<div class="border-2 border-green-500">Success message</div>
+<div class="border border-blue-500">Info message</div>
+<div class="border border-yellow-500">Warning message</div>
+```
+
+### 2. Inline Border Styles
+
+```html
+<!-- WRONG: Inline styles -->
+<div [style.border]="'1px solid var(--border)'">Content</div>
+<div [style.border]="'2px solid var(--modus-wc-color-success)'">Content</div>
+```
+
+### 3. Generic Tailwind Border Classes
+
+```html
+<!-- WRONG: Generic Tailwind classes -->
+<div class="border border-gray-300">Content</div>
+<div class="border-2 border-slate-400">Content</div>
+```
+
+## ALWAYS Do These
+
+### 1. Use Design System Border Utilities
+
+```html
+<!-- CORRECT: Design system utilities -->
+<div class="border-default">Default border</div>
+<div class="border-success">Success border</div>
+<div class="border-warning">Warning border</div>
+<div class="border-destructive">Error border</div>
+<div class="border-primary">Primary border</div>
+```
+
+### 2. Use Thick Border Utilities for Emphasis
+
+```html
+<!-- CORRECT: Thick borders for emphasis -->
+<div class="border-thick">Default thick border</div>
+<div class="border-thick-success">Success thick border</div>
+<div class="border-thick-warning">Warning thick border</div>
+<div class="border-thick-destructive">Error thick border</div>
+<div class="border-thick-primary">Primary thick border</div>
+```
+
+### 3. Use Directional Border Utilities
+
+```html
+<!-- CORRECT: Directional borders -->
+<div class="border-top-default">Top border only</div>
+<div class="border-bottom-default">Bottom border only</div>
+<div class="border-left-default">Left border only</div>
+<div class="border-right-default">Right border only</div>
+```
+
+### 4. Use Dashed Border Utilities
+
+```html
+<!-- CORRECT: Dashed borders -->
+<div class="border-dashed">1px dashed border</div>
+<div class="border-thick-dashed">2px dashed border</div>
+```
+
+## Available Border Utilities
+
+### Standard Borders (1px)
+
+```css
+border-default          /* 1px solid var(--border) */
+border-success          /* 1px solid var(--modus-wc-color-success) */
+border-warning          /* 1px solid var(--modus-wc-color-warning) */
+border-destructive      /* 1px solid var(--modus-wc-color-error) */
+border-primary          /* 1px solid var(--modus-wc-color-info) */
+
+border-dashed           /* 1px dashed var(--border) */
+```
+
+### Thick Borders (2px)
+
+```css
+border-thick            /* 2px solid var(--border) */
+border-thick-success    /* 2px solid var(--modus-wc-color-success) */
+border-thick-warning    /* 2px solid var(--modus-wc-color-warning) */
+border-thick-destructive /* 2px solid var(--modus-wc-color-error) */
+border-thick-primary    /* 2px solid var(--modus-wc-color-info) */
+
+border-thick-dashed     /* 2px dashed var(--border) */
+```
+
+### Directional Borders
+
+```css
+border-top-default      /* border-top: 1px solid var(--border) */
+border-bottom-default   /* border-bottom: 1px solid var(--border) */
+border-left-default     /* border-left: 1px solid var(--border) */
+border-right-default    /* border-right: 1px solid var(--border) */
+```
+
+## Context-Specific Usage
+
+### Success States
+
+```html
+<!-- CORRECT: Success borders -->
+<div class="border-success">Success message</div>
+<div class="border-thick-success">Important success</div>
+<div class="border-top-success">Success indicator</div>
+```
+
+### Warning States
+
+```html
+<!-- CORRECT: Warning borders -->
+<div class="border-warning">Warning message</div>
+<div class="border-thick-warning">Important warning</div>
+```
+
+### Error States
+
+```html
+<!-- CORRECT: Error borders -->
+<div class="border-destructive">Error message</div>
+<div class="border-thick-destructive">Critical error</div>
+<div class="border-bottom-destructive">Error indicator</div>
+```
+
+### Primary/Info States
+
+```html
+<!-- CORRECT: Primary borders -->
+<div class="border-primary">Info message</div>
+<div class="border-thick-primary">Important info</div>
+<div class="border-left-primary">Info indicator</div>
+```
+
+## Common Violations and Fixes
+
+### Violation: Tailwind Color Classes
+
+```html
+<!-- WRONG -->
+<div class="border border-red-500">Error</div>
+<div class="border-2 border-green-500">Success</div>
+
+<!-- CORRECT -->
+<div class="border-destructive">Error</div>
+<div class="border-thick-success">Success</div>
+```
+
+### Violation: Inline Styles
+
+```html
+<!-- WRONG -->
+<div [style.border]="'1px solid var(--border)'">Content</div>
+
+<!-- CORRECT -->
+<div class="border-default">Content</div>
+```
+
+## Reference Implementation
+
+### Card Components
+
+```typescript
+@Component({
+  template: `
+    <div class="bg-card border-default rounded-lg p-4">
+      <div class="text-lg font-semibold">Card Title</div>
+      <div class="text-muted-foreground">Card content</div>
+    </div>
+  `,
+})
+export class CardComponent {}
+```
+
+### Alert Components
+
+```typescript
+@Component({
+  template: `
+    <div class="bg-success/5 border-success rounded-lg p-4">
+      <div class="flex items-center">
+        <i class="modus-icons text-success mr-2">check_circle</i>
+        <div class="text-success font-medium">Success message</div>
+      </div>
+    </div>
+  `,
+})
+export class SuccessAlertComponent {}
+```
+
+### Form Components
+
+```typescript
+@Component({
+  template: `
+    <div [class]="hasError() ? 'border-destructive' : 'border-default'" class="rounded-md p-3">
+      <modus-text-input
+        [value]="value()"
+        (inputChange)="handleChange($event)"
+      />
+    </div>
+  `,
+})
+export class FormFieldComponent {
+  readonly value = input<string>('');
+  readonly hasError = input<boolean>(false);
+  readonly valueChange = output<string>();
+  
+  handleChange(value: string): void {
+    this.valueChange.emit(value);
+  }
+}
+```
+
+## Linting and Validation
+
+```bash
+# Check for border violations
+npm run lint:borders
+
+# All linting checks
+npm run lint:all
+```
+
+## Quick Reference
+
+```css
+/* Default content */
+border-default
+
+/* Success states */
+border-success
+border-thick-success
+
+/* Warning states */
+border-warning
+border-thick-warning
+
+/* Error states */
+border-destructive
+border-thick-destructive
+
+/* Primary states */
+border-primary
+border-thick-primary
+
+/* Dashed borders */
+border-dashed
+border-thick-dashed
+
+/* Directional borders */
+border-top-default
+border-bottom-default
+border-left-default
+border-right-default
+```
+
+## Quick Checklist
+
+- [ ] Using design system border utilities
+- [ ] No Tailwind color classes in borders
+- [ ] No inline border styles
+- [ ] Using appropriate border thickness (default vs thick)
+- [ ] Using contextual colors (success, warning, error, primary)
+- [ ] Passing border linting checks
+- [ ] Using directional borders when appropriate

package/templates/angular/.cursor/rules/modus-angular-button-group-usage-short.mdc

@@ -0,0 +1,47 @@
+---
+description: Critical patterns for ModusButton usage inside ModusButtonGroup in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Button Group Usage - Short
+
+Critical pattern to avoid styling conflicts in button groups.
+
+## Key Rules
+
+- **No defaults for variant/color in ModusButton** - Defaults override button group settings
+- **Group controls styling** - ModusButtonGroup applies variant/color to all child buttons
+- **Don't set variant/color on buttons inside groups** - Let the group control them
+- **Explicitly set props for standalone buttons** - When not in a group, set variant and color
+- **Group uses setAttribute after load** - DOM manipulation requires no conflicting props
+- **Test all three variants** - Outlined, filled, and borderless should look distinct
+
+## Correct Patterns
+
+```typescript
+// CORRECT - No defaults, allows group to control
+readonly color = input<ButtonColor | undefined>();
+readonly variant = input<ButtonVariant | undefined>();
+
+// WRONG - Defaults override group settings
+readonly color = input<ButtonColor>('primary');
+readonly variant = input<ButtonVariant>('filled');
+```
+
+```html
+<!-- CORRECT: Group controls all button styling -->
+<modus-button-group variant="outlined" color="primary">
+  <modus-button>Button 1</modus-button>
+  <modus-button>Button 2</modus-button>
+</modus-button-group>
+
+<!-- WRONG: Individual button props override group -->
+<modus-button-group variant="outlined">
+  <modus-button variant="filled">Button</modus-button>
+</modus-button-group>
+```
+
+## Reference
+
+For detailed patterns and wrapper component implementation, fetch the full rule: `modus-angular-button-group-usage`

package/templates/angular/.cursor/rules/modus-angular-button-group-usage.mdc

@@ -0,0 +1,263 @@
+---
+description: Critical patterns for ModusButton usage inside ModusButtonGroup in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: false
+---
+
+# Modus Button Group Usage in Angular
+
+Critical patterns for using ModusButton components inside ModusButtonGroup.
+
+## The Problem
+
+When `ModusButton` has default values for `variant` and `color`, these explicit values **override** the `ModusButtonGroup`'s settings. This causes all buttons to look the same regardless of the group's variant prop.
+
+## Root Cause
+
+The `modus-wc-button-group` web component uses `setAttribute()` to apply its `variant` and `color` to child buttons **after** they load. If Angular buttons have explicit defaults, they override the group's settings.
+
+## Correct Pattern
+
+### ModusButton Wrapper Component
+
+Do NOT set defaults for `variant` or `color` in the ModusButton wrapper:
+
+```typescript
+// CORRECT - No defaults, allows inheritance from button group
+@Component({
+  selector: 'modus-button',
+  template: `
+    <modus-wc-button
+      [color]="color() || null"
+      [variant]="variant() || null"
+      [size]="size()"
+      [disabled]="disabled()"
+      (buttonClick)="handleButtonClick($event)"
+    >
+      <ng-content />
+    </modus-wc-button>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModusButtonComponent {
+  // No defaults for color and variant - allows group to control
+  readonly color = input<ButtonColor | undefined>();
+  readonly variant = input<ButtonVariant | undefined>();
+  readonly size = input<ButtonSize>('md');
+  readonly disabled = input<boolean>(false);
+
+  readonly buttonClick = output<MouseEvent | KeyboardEvent>();
+
+  handleButtonClick(event: CustomEvent<MouseEvent | KeyboardEvent>): void {
+    if (!this.disabled()) {
+      this.buttonClick.emit(event.detail);
+    }
+  }
+}
+```
+
+```typescript
+// WRONG - Defaults override button group settings
+@Component({
+  selector: 'modus-button',
+  // ...
+})
+export class ModusButtonComponent {
+  readonly color = input<ButtonColor>('primary'); // BAD: Will override group's color
+  readonly variant = input<ButtonVariant>('filled'); // BAD: Will override group's variant
+  // ...
+}
+```
+
+### Using ModusButton Standalone
+
+When using `ModusButton` outside a button group, explicitly set the props you need:
+
+```html
+<!-- Standalone button - explicitly set variant and color -->
+<modus-button variant="filled" color="primary" (buttonClick)="handleClick()">
+  Click Me
+</modus-button>
+```
+
+### Using ModusButton in a Button Group
+
+When inside a `ModusButtonGroup`, do NOT set variant/color on individual buttons:
+
+```html
+<!-- CORRECT - Group controls all button styling -->
+<modus-button-group variant="outlined" color="primary">
+  <modus-button (buttonClick)="handleClick1()">Button 1</modus-button>
+  <modus-button (buttonClick)="handleClick2()">Button 2</modus-button>
+  <modus-button (buttonClick)="handleClick3()">Button 3</modus-button>
+</modus-button-group>
+
+<!-- WRONG - Individual button props override group settings -->
+<modus-button-group variant="outlined" color="primary">
+  <modus-button variant="filled" (buttonClick)="handleClick1()">Button 1</modus-button>  <!-- BAD -->
+  <modus-button color="danger" (buttonClick)="handleClick2()">Button 2</modus-button>    <!-- BAD -->
+</modus-button-group>
+```
+
+## How ModusButtonGroup Works
+
+The web component applies styling to children via DOM manipulation:
+
+```typescript
+// Inside modus-wc-button-group.tsx
+private syncButtonStates(): void {
+  this.buttonElements = this.el.querySelectorAll('modus-wc-button');
+  this.setButtonAttribute('variant', this.variant);
+  this.setButtonAttribute('color', this.color || null);
+  this.setButtonAttribute('disabled', this.disabled ? 'true' : null);
+}
+```
+
+This only works if child buttons don't have explicit values that override the setAttribute calls.
+
+## Angular-Specific Implementation
+
+### Button Group Wrapper Component
+
+```typescript
+@Component({
+  selector: 'modus-button-group',
+  template: `
+    <modus-wc-button-group
+      [variant]="variant()"
+      [color]="color()"
+      [disabled]="disabled()"
+      [size]="size()"
+    >
+      <ng-content />
+    </modus-wc-button-group>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ModusButtonGroupComponent {
+  readonly variant = input<ButtonGroupVariant>('outlined');
+  readonly color = input<ButtonColor | undefined>();
+  readonly disabled = input<boolean>(false);
+  readonly size = input<ButtonSize>('md');
+}
+```
+
+### Usage in Demo Pages
+
+```typescript
+@Component({
+  template: `
+    <demo-example title="Button Group Variants">
+      <div class="space-y-4">
+        <div>
+          <div class="text-sm font-medium text-foreground mb-2">Outlined (default)</div>
+          <modus-button-group variant="outlined" color="primary">
+            <modus-button>Option 1</modus-button>
+            <modus-button>Option 2</modus-button>
+            <modus-button>Option 3</modus-button>
+          </modus-button-group>
+        </div>
+
+        <div>
+          <div class="text-sm font-medium text-foreground mb-2">Filled</div>
+          <modus-button-group variant="filled" color="primary">
+            <modus-button>Option 1</modus-button>
+            <modus-button>Option 2</modus-button>
+            <modus-button>Option 3</modus-button>
+          </modus-button-group>
+        </div>
+
+        <div>
+          <div class="text-sm font-medium text-foreground mb-2">Borderless</div>
+          <modus-button-group variant="borderless" color="primary">
+            <modus-button>Option 1</modus-button>
+            <modus-button>Option 2</modus-button>
+            <modus-button>Option 3</modus-button>
+          </modus-button-group>
+        </div>
+      </div>
+    </demo-example>
+  `,
+})
+export class ButtonGroupDemoComponent {}
+```
+
+### Selection State Pattern
+
+```typescript
+@Component({
+  template: `
+    <modus-button-group variant="outlined" color="primary">
+      @for (option of options(); track option.value) {
+        <modus-button
+          [class.bg-primary]="selectedValue() === option.value"
+          [class.text-white]="selectedValue() === option.value"
+          (buttonClick)="selectOption(option.value)"
+        >
+          {{ option.label }}
+        </modus-button>
+      }
+    </modus-button-group>
+  `,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+})
+export class ButtonGroupSelectionComponent {
+  readonly options = signal([
+    { value: 'option1', label: 'Option 1' },
+    { value: 'option2', label: 'Option 2' },
+    { value: 'option3', label: 'Option 3' },
+  ]);
+
+  readonly selectedValue = signal<string | null>(null);
+
+  selectOption(value: string): void {
+    this.selectedValue.set(value);
+  }
+}
+```
+
+## Quick Reference
+
+| Context                        | variant                | color                  | Notes                            |
+| ------------------------------ | ---------------------- | ---------------------- | -------------------------------- |
+| Standalone button              | Set explicitly         | Set explicitly         | Button controls its own style    |
+| Inside button group            | Do NOT set             | Do NOT set             | Group controls all button styles |
+| Mixed (some grouped, some not) | Set only on standalone | Set only on standalone | Follow context rules             |
+
+## Testing Checklist
+
+- [ ] Outlined variant shows bordered buttons with transparent background
+- [ ] Filled variant shows solid colored buttons
+- [ ] Borderless variant shows text-only buttons without borders
+- [ ] Color prop applies consistently to all buttons in group
+- [ ] Individual buttons don't override group styling
+- [ ] Selection state works correctly (if applicable)
+- [ ] Disabled state propagates from group to buttons
+
+## Common Mistakes to Avoid
+
+```typescript
+// WRONG: Setting defaults in component
+readonly color = input<ButtonColor>('primary');
+readonly variant = input<ButtonVariant>('filled');
+
+// CORRECT: No defaults, use undefined
+readonly color = input<ButtonColor | undefined>();
+readonly variant = input<ButtonVariant | undefined>();
+```
+
+```html
+<!-- WRONG: Setting props on buttons inside group -->
+<modus-button-group variant="outlined">
+  <modus-button variant="filled">Button</modus-button>
+</modus-button-group>
+
+<!-- CORRECT: Let group control styling -->
+<modus-button-group variant="outlined">
+  <modus-button>Button</modus-button>
+</modus-button-group>
+```
+
+---
+
+**Remember: When using buttons inside a button group, never set `variant` or `color` on individual buttons. The group controls all button styling through DOM manipulation, and explicit values on buttons will override the group's settings.**

package/templates/angular/.cursor/rules/modus-angular-checkbox-value-inversion-short.mdc

@@ -0,0 +1,36 @@
+---
+description: Critical bug fix for ModusWcCheckbox value property inversion in Angular
+globs: ["**/*.ts", "**/*.html", "**/*.scss", "**/*.css"]
+alwaysApply: true
+---
+
+# Modus Checkbox Value Inversion - Short
+
+Critical bug fix for ModusWcCheckbox value property inversion.
+
+## Key Rules
+
+- **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
+
+## Bug Details
+
+- When checkbox is **checked**: `target.value` returns `false`
+- When checkbox is **unchecked**: `target.value` returns `true`
+
+## Correct Pattern
+
+```typescript
+handleChange(event: CustomEvent<InputEvent>): void {
+  const value = (event.target as HTMLModusWcCheckboxElement).value;
+  const actualChecked = !value; // CRITICAL: Always invert
+  this.isChecked.set(actualChecked);
+}
+```
+
+## Reference
+
+For detailed bug explanation, wrapper component patterns, and utility functions, fetch the full rule: `modus-angular-checkbox-value-inversion`