chore: replace prettier organize imports and attributes plugins with eslint

.prettierrc.cjs

@@ -1,23 +1,5 @@
 // @ts-check
 
-/** @type {import('prettier-plugin-organize-attributes').PrettierPluginOrganizeAttributesParserOptions} */
-const organizeAttributesPluginAngularConfig = {
-    attributeGroups: [
-        '$ANGULAR_STRUCTURAL_DIRECTIVE',
-        '$ANGULAR_ELEMENT_REF',
-        '$ID',
-        '$DEFAULT',
-        '$CLASS',
-        '$ANGULAR_INPUT',
-        '$ANGULAR_TWO_WAY_BINDING',
-        '$ANGULAR_OUTPUT',
-        '$ANGULAR_ANIMATION',
-        '$ANGULAR_ANIMATION_INPUT'
-    ],
-    attributeSort: 'ASC',
-    attributeIgnoreCase: true
-};
-
 /** @type {import('prettier').Options} */
 const config = {
     printWidth: 120,
@@ -27,12 +9,7 @@ const config = {
     trailingComma: 'none',
     htmlWhitespaceSensitivity: 'ignore',
     endOfLine: 'lf',
-    plugins: [
-        'prettier-plugin-organize-attributes',
-        'prettier-plugin-organize-imports',
-        'prettier-plugin-astro',
-        'prettier-plugin-tailwindcss'
-    ],
+    plugins: ['prettier-plugin-astro', 'prettier-plugin-tailwindcss'],
     overrides: [
         {
             files: ['*.yml'],
@@ -50,8 +27,7 @@ const config = {
             files: ['*.html'],
             excludeFiles: ['index.html'],
             options: {
-                parser: 'angular',
-                ...organizeAttributesPluginAngularConfig
+                parser: 'angular'
             }
         },
         {

apps/radix-perf-testing/src/harness/benchmark.ts

@@ -1,6 +1,6 @@
-import { Type } from '@angular/core';
 import { appendSentinel, computeStats, mode, nextPaint, observePaint, Stats } from './metrics';
 import { createMount } from './mount';
+import { Type } from '@angular/core';
 
 export interface BenchmarkOptions {
     /** Measured iterations (default 20). */

apps/radix-perf-testing/src/harness/reporter.ts

@@ -1,5 +1,5 @@
-import { commands } from 'vitest/browser';
 import { BenchmarkResult } from './benchmark';
+import { commands } from 'vitest/browser';
 
 // Custom browser command registered in vite.config.mts. It runs in Node (has fs access) and
 // accumulates rows across all bench files in the run, writing BENCH_OUTPUT_PATH each time.

apps/radix-perf-testing/src/tests/checkbox.bench.ts

@@ -1,8 +1,8 @@
+import { benchmark, BenchmarkResult } from '../harness/benchmark';
+import { writeResults } from '../harness/reporter';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import { RdxCheckboxButtonDirective, RdxCheckboxRootDirective } from '@radix-ng/primitives/checkbox';
 import { afterAll, describe, expect, it } from 'vitest';
-import { benchmark, BenchmarkResult } from '../harness/benchmark';
-import { writeResults } from '../harness/reporter';
 
 const FILE = 'checkbox.bench.ts';
 const COUNT = 500;
@@ -16,7 +16,7 @@ const COUNT = 500;
     imports: [RdxCheckboxRootDirective, RdxCheckboxButtonDirective],
     template: `
         @for (item of items(); track item) {
-            <button [checked]="allChecked()" rdxCheckboxRoot rdxCheckboxButton type="button">·</button>
+            <button rdxCheckboxRoot rdxCheckboxButton type="button" [checked]="allChecked()">·</button>
         }
     `
 })

apps/radix-perf-testing/src/tests/select.bench.ts

@@ -1,3 +1,5 @@
+import { benchmark, BenchmarkResult } from '../harness/benchmark';
+import { writeResults } from '../harness/reporter';
 import { ChangeDetectionStrategy, Component, signal } from '@angular/core';
 import {
     RdxSelectGroup,
@@ -12,8 +14,6 @@ import {
     RdxSelectValue
 } from '@radix-ng/primitives/select';
 import { afterAll, describe, expect, it } from 'vitest';
-import { benchmark, BenchmarkResult } from '../harness/benchmark';
-import { writeResults } from '../harness/reporter';
 
 const FILE = 'select.bench.ts';
 // 50 = typical real-world list (the common path); 1000 = non-virtualized worst case (stresses the
@@ -41,7 +41,7 @@ const COUNTS = [50, 1000];
         RdxSelectItemText
     ],
     template: `
-        <ng-container [open]="isOpen()" rdxSelectRoot>
+        <ng-container rdxSelectRoot [open]="isOpen()">
             <button rdxSelectTrigger type="button" aria-label="options">
                 <span rdxSelectValue placeholder="Pick…"></span>
             </button>
@@ -51,7 +51,7 @@ const COUNTS = [50, 1000];
                     <div rdxSelectList>
                         <div rdxSelectGroup>
                             @for (option of options(); track option) {
-                                <div [value]="option" rdxSelectItem>
+                                <div rdxSelectItem [value]="option">
                                     <span rdxSelectItemText>{{ option }}</span>
                                 </div>
                             }

apps/radix-playground/src/app/app.config.ts

@@ -1,6 +1,6 @@
+import { appRoutes } from './app.routes';
 import { ApplicationConfig, provideBrowserGlobalErrorListeners, provideZonelessChangeDetection } from '@angular/core';
 import { provideRouter, withComponentInputBinding, withInMemoryScrolling } from '@angular/router';
-import { appRoutes } from './app.routes';
 
 export const appConfig: ApplicationConfig = {
     providers: [

apps/radix-playground/src/app/pages/accordion.ts

@@ -1,3 +1,5 @@
+import { DemoPage } from '../shared/demo-page';
+import { cn, demoAccordion } from '../shared/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import {
     RdxAccordionHeaderDirective,
@@ -6,8 +8,6 @@ import {
     RdxAccordionRootDirective,
     RdxAccordionTriggerDirective
 } from '@radix-ng/primitives/accordion';
-import { DemoPage } from '../shared/demo-page';
-import { cn, demoAccordion } from '../shared/styles';
 
 @Component({
     selector: 'app-accordion',
@@ -25,30 +25,30 @@ import { cn, demoAccordion } from '../shared/styles';
             title="Accordion"
             description="A vertically stacked set of interactive headings that each reveal a section of content."
         >
-            <div [class]="cn(a.root, 'w-[360px]')" [defaultValue]="'item-1'" rdxAccordionRoot>
-                <div [class]="a.item" [value]="'item-1'" rdxAccordionItem>
-                    <h3 [class]="a.header" rdxAccordionHeader>
-                        <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it accessible?</button>
+            <div rdxAccordionRoot [class]="cn(a.root, 'w-[360px]')" [defaultValue]="'item-1'">
+                <div rdxAccordionItem [class]="a.item" [value]="'item-1'">
+                    <h3 rdxAccordionHeader [class]="a.header">
+                        <button type="button" rdxAccordionTrigger [class]="a.trigger">Is it accessible?</button>
                     </h3>
-                    <div [class]="a.content" rdxAccordionPanel>
+                    <div rdxAccordionPanel [class]="a.content">
                         <div [class]="a.contentText">Yes. It adheres to the WAI-ARIA design pattern.</div>
                     </div>
                 </div>
-                <div [class]="a.item" [value]="'item-2'" rdxAccordionItem>
-                    <h3 [class]="a.header" rdxAccordionHeader>
-                        <button [class]="a.trigger" type="button" rdxAccordionTrigger>Is it unstyled?</button>
+                <div rdxAccordionItem [class]="a.item" [value]="'item-2'">
+                    <h3 rdxAccordionHeader [class]="a.header">
+                        <button type="button" rdxAccordionTrigger [class]="a.trigger">Is it unstyled?</button>
                     </h3>
-                    <div [class]="a.content" rdxAccordionPanel>
+                    <div rdxAccordionPanel [class]="a.content">
                         <div [class]="a.contentText">
                             Yes. It's unstyled by default, giving you freedom over the look and feel.
                         </div>
                     </div>
                 </div>
-                <div [class]="a.item" [value]="'item-3'" rdxAccordionItem>
-                    <h3 [class]="a.header" rdxAccordionHeader>
-                        <button [class]="a.trigger" type="button" rdxAccordionTrigger>Can it be animated?</button>
+                <div rdxAccordionItem [class]="a.item" [value]="'item-3'">
+                    <h3 rdxAccordionHeader [class]="a.header">
+                        <button type="button" rdxAccordionTrigger [class]="a.trigger">Can it be animated?</button>
                     </h3>
-                    <div [class]="a.content" rdxAccordionPanel>
+                    <div rdxAccordionPanel [class]="a.content">
                         <div [class]="a.contentText">Yes! You can animate the Accordion with CSS or JavaScript.</div>
                     </div>
                 </div>

apps/radix-playground/src/app/pages/checkbox.ts

@@ -1,3 +1,5 @@
+import { DemoPage } from '../shared/demo-page';
+import { demoCheckbox } from '../shared/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideCheck } from '@lucide/angular';
 import {
@@ -7,8 +9,6 @@ import {
     RdxCheckboxRootDirective
 } from '@radix-ng/primitives/checkbox';
 import { RdxLabelDirective } from '@radix-ng/primitives/label';
-import { DemoPage } from '../shared/demo-page';
-import { demoCheckbox } from '../shared/styles';
 
 @Component({
     selector: 'app-checkbox',
@@ -28,9 +28,9 @@ import { demoCheckbox } from '../shared/styles';
             description="A control that allows the user to toggle between checked and not checked."
         >
             <div class="flex items-center gap-3">
-                <div [checked]="true" rdxCheckboxRoot>
-                    <button id="checkbox-1" [class]="c.button" rdxCheckboxButton>
-                        <svg [class]="c.indicator" rdxCheckboxIndicator size="16" lucideCheck></svg>
+                <div rdxCheckboxRoot [checked]="true">
+                    <button id="checkbox-1" rdxCheckboxButton [class]="c.button">
+                        <svg rdxCheckboxIndicator size="16" lucideCheck [class]="c.indicator"></svg>
                     </button>
                     <input rdxCheckboxInput />
                 </div>

apps/radix-playground/src/app/pages/dialog.ts

@@ -1,8 +1,8 @@
+import { DemoPage } from '../shared/demo-page';
+import { cn, demoButton, demoDialog, demoInput } from '../shared/styles';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { LucideX } from '@lucide/angular';
 import { dialogImports } from '@radix-ng/primitives/dialog';
-import { DemoPage } from '../shared/demo-page';
-import { cn, demoButton, demoDialog, demoInput } from '../shared/styles';
 
 @Component({
     selector: 'app-dialog',
@@ -14,32 +14,32 @@ import { cn, demoButton, demoDialog, demoInput } from '../shared/styles';
             description="A modal window overlaid on the page, rendered in a portal, that traps focus until dismissed."
         >
             <div rdxDialogRoot>
-                <button [class]="cn(b.base, b.primary, b.size.md)" rdxDialogTrigger>Edit profile</button>
+                <button rdxDialogTrigger [class]="cn(b.base, b.primary, b.size.md)">Edit profile</button>
 
                 <ng-template rdxDialogPortal>
-                    <div [class]="cn(d.backdrop, d.backdropAnimated)" rdxDialogBackdrop></div>
+                    <div rdxDialogBackdrop [class]="cn(d.backdrop, d.backdropAnimated)"></div>
 
-                    <div [class]="cn(d.popup, d.popupAnimated)" rdxDialogPopup>
-                        <h2 [class]="d.title" rdxDialogTitle>Edit profile</h2>
-                        <p [class]="d.description" rdxDialogDescription>
+                    <div rdxDialogPopup [class]="cn(d.popup, d.popupAnimated)">
+                        <h2 rdxDialogTitle [class]="d.title">Edit profile</h2>
+                        <p rdxDialogDescription [class]="d.description">
                             Make changes to your profile here. Click save when you're done.
                         </p>
 
                         <label [class]="d.field">
                             Name
-                            <input [class]="input" value="Pedro Duarte" />
+                            <input value="Pedro Duarte" [class]="input" />
                         </label>
                         <label [class]="d.field">
                             Username
-                            <input [class]="input" value="@peduarte" />
+                            <input value="@peduarte" [class]="input" />
                         </label>
 
                         <div [class]="d.footer">
-                            <button [class]="cn(b.base, b.outline, b.size.sm)" rdxDialogClose>Cancel</button>
-                            <button [class]="cn(b.base, b.primary, b.size.sm)" rdxDialogClose>Save changes</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.outline, b.size.sm)">Cancel</button>
+                            <button rdxDialogClose [class]="cn(b.base, b.primary, b.size.sm)">Save changes</button>
                         </div>
 
-                        <button [class]="d.close" aria-label="Close" rdxDialogClose>
+                        <button aria-label="Close" rdxDialogClose [class]="d.close">
                             <svg aria-hidden="true" lucideX size="16"></svg>
                         </button>
                     </div>

apps/radix-playground/src/app/pages/home.ts

@@ -1,6 +1,6 @@
+import { PRIMITIVES } from '../shared/primitives';
 import { ChangeDetectionStrategy, Component } from '@angular/core';
 import { RouterLink } from '@angular/router';
-import { PRIMITIVES } from '../shared/primitives';
 
 @Component({
     selector: 'app-home',